The Div Design System
Visual primitives for the Agentic Architecture firm. A guide to our visual taxonomy.
Content Tokens
The "No Stock Photo" Strategy. Represent content without literal imagery using stylized Bento Cards with specific colors and delicate SVG icons.
Case Study
Proof / Wealth / Value
Field Notes
Intelligence / Logic
Agent Suite
Action / Energy
The Shadow Protocol
The Core / Security
Color Palette
The Vibrant Sunshine palette. Use these colors consistently across all content types.
Black
#1b1b1f
Primary Text/Bg
div-dark
Gold
#f2c94c
Value/Warning
div-gold
Blue
#66b2e8
Tech/Trust
div-blue
Pink
#ff4d8b
Action/Highlight
div-magenta
Cream
#f7f1d7
Subtle Backgrounds
div-cream
Iconography Rules
Icons must be 1.5px stroke. No fills. Rounded joins. Used sparingly as navigational anchors.
UI Components
Standard components following the Div Design System principles.
Buttons
Bento Card
Case Study Token
Example of a Content Token card
This card demonstrates the glassmorphism effect with a subtle glow, accent bar, and delicate iconography. Use this pattern for all content representation.
Component Library
Every component available in the Div Design System. Production-ready, accessible, and fully customizable.
Button
Primary actions and CTAs
Input
Text input fields with validation states
Badge
Labels and status indicators
Checkbox
Binary selection controls
Radio Group
Single selection from multiple options
Switch
Toggle controls for on/off states
Textarea
Multi-line text input
Select
Dropdown selection menu
Avatar
User profile images
Divider
Visual separation between content
Alert
Important messages and notifications
Typography
Heading and text components
Heading Level 1
Heading Level 2
Heading Level 3
This is body text using the Text component. It provides consistent styling and spacing.
Usage Guidelines
How to apply this design system when building new pages.
Building a Case Study Listing Page
Instead of asking for "A grid of blog posts with images," say:
Building the Services Page
Use the Agent Token style for service cards:
Visual Style: Architectural Precision
- •Icon Style: 1.5px stroke width (delicate). No fills. Rounded line caps.
- •Card Style: White backgrounds with subtle borders. The "Color" appears as a glowing orb background (blur) or a tiny accent bar.
- •No Heavy Colored Backgrounds: Maintain visual lightness and architectural precision.