Brand Guidelines

A comprehensive design system that defines our visual identity, ensuring consistency across all touchpoints and creating memorable experiences.

Color Palette

Primary Colors
Core brand colors used for primary actions and key elements
Primary
Primary
oklch(0.205 0 0)
Primary FG
Primary Foreground
oklch(0.985 0 0)
Secondary Colors
Supporting colors for secondary actions and backgrounds
Secondary
Secondary
oklch(0.97 0 0)
Accent
Accent
oklch(0.97 0 0)
Extended Palette
Additional colors for various UI states and components
Muted
Muted
Background
Destructive
Destructive
Error States
Border
Border
Outlines
Ring
Ring
Focus States

Typography

Font Families
Primary and secondary typefaces for all text elements

Primary Font

Geist Sans

Used for headings, body text, and UI elements

Monospace Font

Geist Mono

Used for code blocks and technical content

Type Scale
Consistent sizing hierarchy for all text elements
Heading 1
text-4xl font-bold
Heading 2
text-3xl font-bold
Heading 3
text-2xl font-semibold
Heading 4
text-lg font-medium
Body Text
text-base
Small Text
text-sm text-muted-foreground

Logo & Branding

Logo Variations
Different logo formats for various use cases
Logo
Primary Logo
Use on light backgrounds
Logo
Inverted Logo
Use on dark backgrounds
Logo Sizes
Recommended minimum sizes for different contexts
L
Small (48px)
Favicons, small UI elements
L
Medium (64px)
Mobile apps, social media
L
Large (80px)
Web headers, presentations
L
Extra Large (96px)
Print materials, large displays

Spacing & Layout

Spacing Scale
Consistent spacing values for margins, padding, and gaps
xs
0.25rem
sm
0.5rem
md
1rem
lg
1.5rem
xl
2rem
2xl
3rem
3xl
4rem
4xl
6rem
Usage Guidelines
Best practices for implementing the design system

Do's

  • Use consistent spacing throughout your designs
  • Maintain proper contrast ratios for accessibility
  • Test designs in both light and dark modes
  • Follow the established type hierarchy

Don'ts

  • Don't use colors outside the defined palette
  • Don't modify logo proportions or colors
  • Don't use custom fonts without approval
  • Don't ignore accessibility guidelines