Design System
ΞΊΞ±Ξ»ΟΟ β beauty, excellence. The visual language of euzo.ai. Tokens, components, themes, and standards that make every surface feel cohesive and intentional.
Brand Identity
Typography: Mulish (primary) + JetBrains Mono (monospace)
Design Tokens
Colors
CompleteFull palette with semantic aliases. Light and dark modes. 14 grant status colors, all WCAG AA compliant.
Typography
CompleteType scale from 11px to 42px. Heading styles, body text, captions, code. Mulish font family with weight variations.
Spacing
Complete4px base grid. Consistent padding, margins, gaps. Shadow system from subtle to dramatic.
Animations
Needs refinementTransition curves, durations, keyframes. Entrance/exit animations. Reduced motion support.
Themes
Light Mode
CompleteDefault theme. White backgrounds, dark text, teal accents.
Dark Mode
CompleteNOT pure black. Lightened brand colors (#1b7998 β #3ba7c4). Strong shadows, adjusted contrast.
Grants Theme
CompleteDense, operational. Tighter spacing, smaller type, more data per screen. For John's daily workflow.
Oracle Theme
CompleteEditorial, reading-first. Wider margins, larger type, generous whitespace. For research consumption.
Components
Accessibility
WCAG 2.1 Level AA across the board.
- β 4.5:1 minimum contrast for body text
- β 3:1 minimum for UI elements and large text
- β Color-blind safe: every status has an icon, never color alone
- β Reduced motion: respects prefers-reduced-motion
- β Keyboard navigation: full tab order, focus rings
- β Screen reader: semantic HTML, ARIA labels
Agent: Designer π¨
The Designer agent owns this system. It authored the 13,000-word DESIGN-SYSTEM.md spec covering every token, component, and pattern. When the design system changes, Designer updates the source of truth and all apps inherit.