# Overdrive Design System

> A trusted digital library interface pairing classic serif storytelling with functional geometric utility.

**Source:** https://overdrive.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Overdrive utilizes a high-contrast, information-dense layout that balances a "library" feel with modern SaaS utility. The system is anchored by a deep blue primary palette (`#006693`, `#0b5677`) set against a clean white canvas (`#ffffff`). Typography is the primary brand vehicle, pairing the classic, high-contrast serif **FreightTextPro** for narrative elements with the geometric sans-serif **LinetoBrown** for functional UI and headings. Components favor sharp or minimal radii (0px to 6px), reinforcing a structured, catalog-like efficiency.

## Signature DNA
1. **The Serif Narrative** (FreightTextPro is used for banner content and descriptive text to evoke the feeling of physical books and editorial authority).
2. **Deep Sea Utility** (The use of `#0b5677` and `#006693` as functional anchors for buttons and cards creates a professional, trustworthy environment).
3. **Sharp Catalog Grid** (A dominant 0px border radius across most structural elements maintains a rigorous, organized library-shelf aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 13 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary text, navigation | 54 | 0.8 | computed_style |
| `{color.ink.muted}` | `#6f7073` | Secondary text, disabled states | 16 | 0.8 | computed_style |
| `{color.ink.soft}` | `#454545` | Tertiary body text | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#006693` | Primary CTA background | 5 | 0.6 | computed_style |
| `{color.primary.deep}` | `#0b5677` | Surface backgrounds, borders | 24 | 0.8 | computed_style |
| `{color.link}` | `#006595` | Interactive text links | 35 | 0.8 | computed_style |
| `{color.navy}` | `#263c58` | Heading emphasis | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **FreightTextPro** | 400, 500, 700 | Editorial, banner text | Crimson Pro | Commercial |
| **LinetoBrown** | 300, 400, 600, 700 | UI, headings, buttons | Inter | Commercial |
| **Brown-Regular** | 400 | Sub-headings | Inter | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 37px | 43.92px | normal | 700 | Primary section heads | `h2` |
| `{type.h3}` | 22px | 28.55px | normal | 700 | Shelf headers | `h2.shelf__header-text` |
| `{type.body.lg}` | 22px | 32.94px | normal | 400 | Shelf descriptions | `div.shelf__description` |
| `{type.title.org}` | 22px | 33px | -0.22px | 400 | Organization titles | `h3.org-title` |
| `{type.banner.text}` | 20px | 29.28px | normal | 400 | Banner content | `div.kanopy-banner` |
| `{type.button}` | 20px | 29.28px | normal | 400 | CTA Buttons | `a.btn.cta-button` |
| `{type.body.md}` | 18px | 28px | -0.54px | 400 | Descriptions | `p.description` |
| `{type.result.title}` | 17px | 20.50px | -0.17px | 300 | Search results | `h3.title-result__title` |

### Principles
1. **Serif for Storytelling:** Use FreightTextPro specifically for content that describes the "reading experience" or editorial recommendations.
2. **Sans-Serif for Action:** All interactive elements (buttons, nav) and structural headers use LinetoBrown.
3. **Tight Tracking on Large Type:** Display sizes (17px-18px) often employ negative letter-spacing (-0.17px to -0.54px) to maintain visual density.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 3 |
| `{space.lg}` | 20px | 9 |
| `{space.xl}` | 30px | 5 |
| `{space.xxl}` | 50px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers, sections | 88 occurrences |
| `{radius.sm}` | 3px | Cards, small buttons | `Card` component |
| `{radius.md}` | 6px | Surface containers | `Surface` component |
| `{radius.full}` | 50px | Pill-style buttons (rare) | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.16) 0px 3px 11px 0px` | Hover states or floating panels | 12 occurrences |

## Components
### Tier 1: Foundational
#### Card
**Role:** Content grouping for books and media.
**Pages observed:** https://overdrive.com
**Spec:** Background: `#0b5677` / Text: `rgba(0, 0, 0, 0.7)` / Border: `#0b5677` / Radius: `3px` / Padding: `3px`
**States observed:** Default: captured | Hover: not captured

#### Primary Button
**Role:** Main site actions (e.g., "Get started").
**Pages observed:** https://overdrive.com
**Spec:** Background: `#006693` / Text: `#ffffff` / Radius: `3px` / Typography: `{type.button}`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Shelf Header
**Role:** Labeling content rows.
**Pages observed:** https://overdrive.com
**Spec:** Typography: `{type.h3}` / Color: `#000000` / Border-bottom: `1px solid #0b5677`
**States observed:** Default: captured

#### Organization Button
**Role:** Partner-specific CTAs.
**Pages observed:** https://overdrive.com
**Spec:** Background: `#ffffff` / Text: `#000000` / Typography: `20px Brown-Regular` / Radius: `0px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Kanopy Banner
**Role:** Promotional integration block.
**Pages observed:** https://overdrive.com
**Spec:** Background: `#000000` / Text: `#ffffff` / Typography: `FreightTextPro`
**States observed:** Default: captured

#### Search Input
**Role:** Global header search.
**Pages observed:** https://overdrive.com
**Spec:** Border: `1px solid #6f7073` / Radius: `3px` / Height: `~40px`
**States observed:** Default: captured

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

## Do's
- Use **FreightTextPro** for any text describing the joy of reading or library services.
- Apply a **3px radius** to primary action buttons and search inputs.
- Use **#006693** as the primary background for high-priority "Get Started" actions.
- Ensure **#000000** text on **#ffffff** backgrounds for a minimum 21:1 contrast ratio.
- Use **#0b5677** for structural borders and card backgrounds.

## Don'ts
- **Wrong:** Using a 16px radius on cards. **Right:** Use 3px. **Reason:** The brand maintains a structured, catalog-like precision.
- **Wrong:** Using FreightTextPro for navigation links. **Right:** Use LinetoBrown. **Reason:** Serifs are reserved for narrative, not utility.
- **Wrong:** Using bright saturated blues for primary text. **Right:** Use #000000. **Reason:** Accessibility and readability are prioritized over brand color in body copy.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --od-color-primary: #006693;
  --od-color-primary-deep: #0b5677;
  --od-color-canvas: #ffffff;
  --od-color-ink: #000000;
  --od-color-ink-muted: #6f7073;
  
  --od-font-display: "LinetoBrown", sans-serif;
  --od-font-serif: "FreightTextPro", serif;
  
  --od-radius-sm: 3px;
  --od-shadow-card: rgba(0, 0, 0, 0.16) 0px 3px 11px 0px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scale (e.g., H1 downsizing) was not fully documented in the provided evidence.
- Success and Error semantic colors were not observed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://overdrive.com | 1440px | 2026-06-06 |