Usage Guidelines
Rules and best practices for applying the Siza brand consistently across all touchpoints.
Color Usage
Do
Use primary purple for CTAs and primary actions
Use secondary blue for supporting elements and links
Use accent magenta sparingly for highlights and badges
Use neutrals for backgrounds and body text
Maintain WCAG AA contrast ratios for all text
Don't
Use accent as a background color for large areas
Mix brand colors with off-palette colors
Use primary purple for error states (use semantic error color)
Use text on backgrounds that don't meet AA contrast
Override semantic colors — success is always green, error is always red
Typography Hierarchy
Outfit · Bold (700) · text-4xl / text-5xl
Page titles only. One per page.
Outfit · Semibold (600) · text-2xl / text-3xl
Section headings. Primary content divisions.
Outfit · Semibold (600) · text-xl
Subsection headings. Card titles.
Inter · Regular (400) · text-base
Default body text. Paragraphs, descriptions.
Inter · Regular (400) · text-sm
Secondary text, captions, metadata.
JetBrains Mono · Regular (400) · text-sm
Code snippets, technical values, tokens.
Spacing
Component spacing
Padding inside cards: spacing-6 (24px)
Gap between cards: spacing-4 (16px)
Section margin: spacing-12 (48px) or spacing-16 (64px)
Inline element gap: spacing-2 (8px)
Layout grid
Max content width: 64rem (1024px)
Page padding: spacing-8 to spacing-16
Sidebar width: 16rem (256px)
Base unit: 4px
Accessibility
All text must meet WCAG AA contrast (4.5:1 normal text, 3:1 large text)
Interactive elements must have visible focus indicators using brand colors
Never use color alone to convey meaning — pair with icons or text
Prefer WCAG AAA contrast (7:1) where possible
Motion should respect prefers-reduced-motion media query
Minimum touch target: 44×44px for mobile, 24×24px for desktop
Dark-First Design
Siza is a dark-first product. The primary UI is always dark mode. Light mode support exists for documentation and marketing materials.
Dark (Primary)
surface-0 → surface-4 Light (Secondary)
neutral-100 → neutral-300