# Design System: Brand Name

## 1. Visual Theme & Atmosphere

A modern, refined design system built for clarity and usability.

**Key Characteristics:**
- Color palette anchored by #0066cc (primary accent) on a #ffffff canvas
- Tight & Heavy typographic system using Inter, -apple-system, sans-serif
- Flat — borders only, no shadows
- Standard (8px) geometry throughout
- Base 8px spacing grid

## 2. Color Palette & Roles

### Primary
- **Primary Accent** (`#0066cc`): CTAs, links, interactive highlights
- **Page Background** (`#ffffff`): Main canvas and page floor
- **Surface** (`#f5f5f7`): Elevated cards, containers, and secondary surfaces

### Text
- **Primary Text** (`#1d1d1f`): Headings, body copy, high-emphasis content
- **Muted Text** (`#6e6e73`): Secondary labels, captions, placeholder text

### Structure
- **Border** (`rgba(0,0,0,0.1)`): Card outlines, dividers, section separators

## 3. Typography Rules

### Font Families
- **Primary / Body**: `Inter, -apple-system, sans-serif`
- **Display / Headings**: `Inter, -apple-system, sans-serif`
- **Monospace**: `GeistMono, ui-monospace, monospace`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Notes |
|------|------|------|--------|-------------|-------|
| Display Hero | Inter, -apple-system, sans-serif | 56–72px | 700 | 1.00–1.10 | Hero headlines, landing page titles |
| Section Heading | Inter, -apple-system, sans-serif | 36–48px | 700 | 1.15–1.25 | Page section headers |
| Card Title | Inter, -apple-system, sans-serif | 22–24px | 500–600 | 1.25–1.35 | |
| Body | Inter, -apple-system, sans-serif | 16px | 400 | 1.50 | Standard reading text |
| Caption | Inter, -apple-system, sans-serif | 13–14px | 400–500 | 1.40 | Labels, metadata |
| Button | Inter, -apple-system, sans-serif | 14–16px | 500–600 | 1.00 | CTA labels |
| Code | GeistMono, ui-monospace, monospace | 13–14px | 400 | 1.60 | Technical content |

### Principles
- Use -0.02em letter-spacing for display headings
- Maintain consistent vertical rhythm with 8px baseline

## 4. Component Stylings

### Buttons

**Primary**
- Background: `#0066cc`
- Text: `#ffffff`
- Radius: 8px
- Use: Primary CTAs

**Secondary**
- Background: `#f5f5f7`
- Text: `#1d1d1f`
- Border: `1px solid rgba(0,0,0,0.1)`
- Radius: 8px

**Ghost / Text**
- Background: transparent
- Text: `#0066cc`
- Use: Tertiary actions, inline links

### Cards & Containers
- Background: `#f5f5f7`
- Border: `1px solid rgba(0,0,0,0.1)`
- Radius: 8px
- Shadow: none

### Inputs & Forms
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.1)`
- Radius: 8px
- Text: `#1d1d1f`
- Placeholder: `#6e6e73`

## 5. Layout Principles

### Spacing System
- Base unit: 8px
- Scale: 8px / 12px / 16px / 24px / 32px / 48px / 96px

### Whitespace Philosophy
Generous whitespace creates visual breathing room and establishes clear content hierarchy. Use section padding of 48–96px for major breaks.

### Border Radius Scale
- xs: 2px
- sm: 4px
- md: 8px
- lg: 12px
- pill: 9999px

## 6. Depth & Elevation

| Level | Shadow | Use Case |
|-------|--------|----------|
| 0 | none | Flat elements, inline content |
| 1 | 1px border only | Cards, dropdowns |
| 2 | 1px border only | Modals, popovers |
| 3 | 1px border only | Toast notifications |

**Philosophy**: Flat — borders only, no shadows

## 7. Do's and Don'ts

### Do
- Use `#0066cc` as the singular interactive accent — do not introduce competing colors
- Maintain the 8px spacing rhythm consistently
- Apply Standard (8px) geometry to all interactive elements
- Follow the Flat — borders only, no shadows depth model

### Don't
- Don't introduce colors outside the defined palette
- Don't mix border-radius styles — pick one scale and be consistent
- Don't add decorative gradients or shadows beyond the defined depth system
- Don't use font weights outside the defined hierarchy

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked layout, condensed nav |
| Tablet | 640–1024px | Two-column grids begin, expanded spacing |
| Desktop | >1024px | Full multi-column layout, maximum whitespace |

### Collapsing Strategy
- Hero headlines scale down proportionally on mobile
- Navigation collapses to hamburger/drawer on mobile
- Cards stack to single column below 640px
- Section padding reduces from desktop values to 40–48px on mobile