# Autobooks Design System

> High-contrast financial utility anchored by deep navy foundations, vibrant yellow accents, and geometric Montserrat headlines.

**Source:** https://autobooks.co | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Autobooks utilizes a "Midnight and Sun" palette, where a deep navy primary (`#060e21`) provides a professional banking foundation against a stark white canvas. The brand's energy is driven by a high-visibility yellow accent (`#f3e504`), used exclusively for primary calls to action and decorative geometric "confetti" shapes. Typography is dominated by Montserrat, ranging from heavy 800-weight display headers to light 300-weight sub-headers, creating a modern, approachable fintech aesthetic. Layouts use generous vertical spacing (up to 150px) and large-radius containers (35px–50px) to soften the high-contrast color scheme.

## Signature DNA
1. **Geometric Confetti** (Yellow `#f3e504` and Teal `#018aac` curved geometric segments float around interface elements to add motion to static banking layouts, visible on the homepage hero).
2. **The Midnight Footer** (A massive, full-bleed footer using `#060e21` that anchors every page, housing complex site navigation in white Source Sans Pro).
3. **Heavy Montserrat Display** (H1 and H2 headers consistently use Montserrat at weight 800 with tight line heights, creating a "boldly simple" financial voice).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.midnight}` | `#060e21` | Primary text, button text, footer background | 258 | 1 | `--text-color` |
| `{color.white}` | `#ffffff` | Page background, card surfaces, inverted text | 73 | 1 | `--background-color` |
| `{color.ice}` | `#f2f9fc` | Subtle section backgrounds, alternating bands | 9 | 1 | `--background-light-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.sun}` | `#f3e504` | Primary CTA background, decorative accents | 14 | 1 | `--accent-color` |
| `{color.ocean}` | `#018aac` | Secondary buttons, links, bullet points | 38 | 1 | `--links-color` |
| `{color.sky}` | `#96d4e8` | Decorative rules, secondary accents | 10 | 1 | `--rule-color` |
| `{color.deep-teal}` | `#0b3b5d` | Secondary button backgrounds | 11 | 0.8 | Computed style |

### Semantic
| Token | Hex | Role | Source |
|-------|-----|------|--------|
| `{color.error}` | `#d02438` | Form validation, alerts | `--alert-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Montserrat | 300, 400, 600, 800 | Headlines, UI, Buttons | Montserrat (Google) | SIL OFL |
| Source Sans Pro | 400, 700 | Body copy, Footer links | Source Sans 3 | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 54px | 64.8px | normal | 800 | Hero H1 | `h1#module_165100236202816` |
| `{type.display-lg}` | 44px | 55px | normal | 800 | Section H2 | `h2` |
| `{type.display-md}` | 42px | 54.7px | normal | 300 | Light Sub-headers | `h2.h3` |
| `{type.heading-md}` | 30px | 39.1px | normal | 300 | Subsection headers | `h3` |
| `{type.button-lg}` | 24px | 29px | normal | 600 | Large Arrow Buttons | `a.button.button--arrow` |
| `{type.heading-sm}` | 20px | 30px | 0.4px | 800 | Card titles | `h3.h6` |
| `{type.body-lg}` | 18px | 30px | normal | 400 | Primary body text | `section.hero-section` |
| `{type.eyebrow}` | 16px | 20px | 1.2px | 800 | Section labels | `div.eyebrow` |
| `{type.caption}` | 14px | 16px | normal | 400 | Footer links | `footer.site-footer` |

### Principles
1. **Contrast-driven hierarchy:** Headlines use weight 800 for impact, while secondary descriptions often drop to weight 300 to prevent visual clutter.
2. **Wide Eyebrows:** Small labels above headers use 1.2px letter spacing and weight 800 for a "stamped" architectural feel.
3. **Financial Legibility:** Body copy is strictly Source Sans Pro at 18px to ensure high readability in data-heavy contexts.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 14 |
| `{space.sm}` | 15px | 20 |
| `{space.md}` | 20px | 51 |
| `{space.lg}` | 30px | 70 |
| `{space.xl}` | 50px | 7 |
| `{space.section}` | 150px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 317 occurrences |
| `{radius.card}` | 35px | Feature cards | Card component |
| `{radius.button}` | 40px | Primary/Secondary CTAs | Rounded Button component |
| `{radius.pill}` | 50px | Decorative circles | 16 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.deep}` | `rgba(11, 59, 93, 0.15) 30px 30px 80px 0px` | Floating feature cards | Card component |
| `{shadow.soft}` | `rgba(11, 59, 93, 0.15) 0px 20px 50px 0px` | Surface lifts | Surface component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (e.g., "Work at a Bank")
**Pages observed:** https://autobooks.co, https://autobooks.co/about
**Spec:** Background `{color.sun}` (#f3e504) / Text `{color.midnight}` (#060e21) / Radius 40px / Padding 15px 30px / Font Montserrat 24px (600)
**States observed:** Default | Hover (Inverts to white bg) | Active: captured

#### Secondary Button (Outline)
**Role:** Alternative actions
**Pages observed:** https://autobooks.co/about
**Spec:** Background transparent / Text `{color.ocean}` (#018aac) / Border 2px `{color.ocean}` / Radius 40px / Padding 9px 20px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** https://autobooks.co
**Spec:** Background `{color.white}` / Border 1px #f3f3f4 / Radius 35px / Shadow `{shadow.deep}`
**States observed:** Default: captured

#### Midnight Nav Bar
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background `{color.white}` / Text `{color.midnight}` / Height ~80px / Montserrat 600
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Testimonial Quote
**Role:** Social proof
**Pages observed:** https://autobooks.co
**Spec:** Text `{color.midnight}` / Font Montserrat 20px (300) / Line-height 35px / Spacing 0.48px
**States observed:** Default: captured

#### Midnight Footer
**Role:** Global site map
**Pages observed:** All
**Spec:** Background `{color.midnight}` (#060e21) / Text `{color.white}` / Font Source Sans Pro 14px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 150px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Stacked cards. |
| Desktop | 1440px | 2-3 column card layouts; full-width footer. |

## Imagery & decoration
- **Geometric Accents:** Uses semi-circles and "L" shapes in `#f3e504` and `#018aac`.
- **Photography:** Features real people (small business owners) often integrated with UI screenshots or geometric backgrounds.
- **Avoids:** Gradients, thin hairlines, and rounded corners smaller than 35px for cards.

## Do's
- Use Montserrat 800 for all primary page headers.
- Apply `{color.sun}` (#f3e504) only to the most important action on the screen.
- Use `{radius.card}` (35px) for any container holding content.
- Ensure all body copy is Source Sans Pro 18px for accessibility.
- Anchor pages with the deep midnight footer.

## Don'ts
- **Wrong:** Using `#018aac` (Ocean) for primary CTA backgrounds. **Right:** Use `#f3e504` (Sun). **Reason:** Sun is the designated primary action color.
- **Wrong:** Using Montserrat for long-form body copy. **Right:** Use Source Sans Pro.
- **Wrong:** Mixing sharp corners with card shadows. **Right:** Shadows must only be applied to cards with >= 35px radius.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-midnight: #060e21;
  --color-sun: #f3e504;
  --color-ocean: #018aac;
  --color-ice: #f2f9fc;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --radius-card: 35px;
  --shadow-deep: 30px 30px 80px 0px rgba(11, 59, 93, 0.15);
}
```

## Agent prompt examples
- "Create a feature card using a 35px border radius, a white background, and the deep shadow `rgba(11, 59, 93, 0.15) 30px 30px 80px 0px`."
- "Generate a primary button with a #f3e504 background, #060e21 text, and 40px rounded corners."
- "Design a hero section with a Montserrat 800 headline at 54px and a Source Sans Pro 18px sub-headline."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Mobile-specific spacing tokens (padding/margin) were inferred from rendered screenshots rather than declared CSS variables.
- Precise transition timings for button hover states were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://autobooks.co | 1440px | 2026-06-06 |
| About | https://autobooks.co/about | 1440px | 2026-06-06 |
| Mobile Home | https://autobooks.co | 390px | 2026-06-06 |