Refined
Brutalism
Sharp edges, bold borders, geometric precision. No gradient text, no blur effects, no generic AI aesthetics. Pure, purposeful design for enterprise SEO operations.
Design Philosophy
Geometric Precision
Sharp, purposeful edges. Bold 2px borders for emphasis. Clean, grid-based layouts. Asymmetric compositions for visual interest.
No Generic AI Aesthetics
No gradient text. No blur effects. No excessive shadows. Pure typography, solid colors, geometric patterns.
Data-First Design
Clean visualizations with sharp bar charts. No unnecessary decoration. Status-driven color usage. Let data breathe.
Enterprise Credibility
Professional, not playful. Trustworthy, not trendy. Authoritative, not aggressive. Intelligent, not complicated.
8-Color Semantic Palette
Every color has meaning. Optimized for SEO analytics with WCAG AA+ contrast ratios.
Primary - Sapphire
Trust, intelligence, enterprise reliability
hsl(217 91% 60%)Secondary - Amethyst
AI innovation, strategic insights
hsl(262 83% 58%)Success - Emerald
Growth metrics, optimization wins
hsl(142 76% 36%)Warning - Amber
Attention needed, moderate issues
hsl(38 92% 50%)Destructive - Ruby
Critical issues, traffic drops
hsl(0 84% 60%)Accent - Electric Cyan
Data highlights, interactive elements
hsl(189 94% 43%)Info - Sky Blue
Informational messages, helpful tips
hsl(199 89% 48%)Muted - Slate
Subtle backgrounds, secondary text
hsl(220 13% 95%)Pattern Library
ICON CONTAINERS
Squared containers, 2px borders, 10% background opacity
METRIC CARDS
Sharp bars, no rounded corners, semantic colors
BUTTONS
PRIMARY ACTIONS
SEMANTIC STATES
TRUST SIGNALS
Checkmarks in squared containers, monospace font
DO's and DON'Ts
DO
- Use 2px borders for emphasis
- Embrace sharp, geometric shapes
- Use monospace font for data/labels
- Apply semantic colors
- Create asymmetric layouts
- Bold typography with tight tracking
DON'T
- ✕Don't use gradient text
- ✕Don't use blur effects
- ✕Don't use heavy shadows
- ✕Don't round corners excessively
- ✕Don't use generic fade animations
- ✕Don't use decorative elements
Start Building
Explore the documentation and start creating with confidence
Master Documentation
Comprehensive guide covering philosophy, patterns, and implementation
Read Full Docs