# Opendrives Design System

> High-contrast monochrome utility anchored by an ultra-light Montserrat signature and electric blue functional accents.

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

## TL;DR
Opendrives utilizes a high-utility "monochrome+" system where a stark white canvas (#ffffff) and deep black text (#000000) provide the foundation for technical clarity. The primary brand voltage is delivered through **Montserrat** set at an extreme 150 weight for display headlines, creating a delicate, architectural feel. Functional actions and links transition into a vibrant "Electric Blue" (#206cf8), which serves as the sole chromatic driver for interactivity. Layouts are characterized by generous vertical pacing (120px section gaps) and a complete absence of border radii on primary containers, reinforcing a precise, engineered aesthetic.

## Signature DNA
1. **The 150-Weight Display** (Montserrat at weight 150 for primary headlines creates a high-end technical signature that distinguishes the brand from standard SaaS bolding; observed on `opendrives.com`).
2. **Hard-Edge Geometry** (A strict 0px border radius policy for all major surfaces and cards, signaling stability and industrial-grade reliability; observed across all analyzed pages).
3. **Electric Blue Utility** (#206cf8 used exclusively for primary CTAs and interactive states against a strictly achromatic background; observed on `opendrives.com/pricing`).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, surface, button text | 41 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary text, headings, borders | 29 | 1.0 | Computed Style |
| `{color.neutral.dark}` | `#141414` | Secondary text, footer headings | 4 | 0.6 | Computed Style |
| `{color.neutral.gray}` | `#5c5c5c` | Body text, de-emphasized content | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#206cf8` | Primary CTA background, active links | 3 | 0.6 | Computed Style |
| `{color.primary.dark}` | `#074dcf` | Hover states, pricing accents | 5 | 0.6 | Computed Style |
| `{color.decorative.orange}` | `#f9a009` | Decorative only | 0 | 0.9 | Brand Page |
| `{color.decorative.pink}` | `#cd1055` | Decorative only | 0 | 0.9 | Brand Page |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Montserrat | 150, 300, 400, 500, 600, 700 | All headings, display, body | Montserrat (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 74px | 81.4px | -1.48px | 150 | Hero Headlines | `h2.home-2026-social__headline` |
| `{type.display.lg}` | 45px | 50.58px | normal | 600 | Section Titles | `h2.why__title` |
| `{type.heading.md}` | 22px | 32.4px | normal | 700 | Hero Subheads | `h1.home-2026-hero__headline` |
| `{type.heading.sm}` | 22px | 32.4px | normal | 300 | List Items | `li:nth-of-type(1)` |
| `{type.body.lg}` | 18px | 27.12px | normal | 400 | Lead Paragraphs | `p:nth-of-type(1)` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard Body | `section.home-2026-hero` |
| `{type.body.sm}` | 15px | 22.56px | normal | 400 | Footer Links | `p` |
| `{type.caption}` | 12px | 18.72px | 1.248px | 500 | Small Buttons | `a.btn.blue` |

### Principles
1. **Extreme Lightness for Scale**: The largest display sizes (74px) must use the 150 weight to maintain the brand's technical elegance.
2. **Negative Tracking on Display**: Apply -2% letter spacing (`-1.48px`) to display-mega sizes to prevent the light weight from appearing disconnected.
3. **Achromatic Hierarchy**: Use weight (700 vs 400) and color (#000000 vs #5c5c5c) rather than size alone to distinguish information tiers.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 15 |
| `{space.sm}` | 12px | 8 |
| `{space.md}` | 16px | 5 |
| `{space.lg}` | 32px | 10 |
| `{space.section}` | 120px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Primary containers, cards, sections | 58 occurrences |
| `{radius.sm}` | 4px | Form inputs, small UI elements | 7 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All cards and sections | `Surface` component |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Primary content container
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius `{radius.none}` (0px) / Padding 120px 0px
**States observed:** Default: captured

#### Button Primary
**Role:** Main call to action
**Pages observed:** `opendrives.com`, `opendrives.com/pricing`
**Spec:** Background `{color.primary}` (#206cf8) / Text `{color.white}` (#ffffff) / Radius `{radius.none}` (0px) / Typography `{type.caption}` (12px, 500)
**States observed:** Default | Hover: captured (darkens to #074dcf)

### Tier 2: Patterns
#### Text Input
**Role:** Lead capture and pricing forms
**Pages observed:** `opendrives.com/pricing`
**Spec:** Background `{color.white}` (#ffffff) / Border 1px solid `{color.black}` (#000000) / Radius `{radius.sm}` (4px) / Padding 5px
**States observed:** Default: captured

#### Pricing Card
**Role:** Feature and tier display
**Pages observed:** `opendrives.com/pricing`
**Spec:** Background `{color.white}` (#ffffff) / Border 1px solid `{color.black}` (#000000) / Radius `{radius.none}` (0px) / Padding `{space.lg}` (32px)
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Vertical Gap | 120px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Section padding reduces; typography scales down; 1-column stack |

## Imagery & decoration
Opendrives uses high-contrast, technical photography and isometric hardware illustrations. It avoids soft shadows, rounded corners, and decorative gradients. Visual interest is generated through the juxtaposition of ultra-thin typography and heavy black blocks.

## Do's
- Use Montserrat 150 for headlines over 60px.
- Maintain 0px border radius on all primary content cards.
- Use #206cf8 exclusively for interactive elements.
- Ensure 120px of vertical breathing room between major sections.
- Pair #000000 text with #ffffff backgrounds for maximum technical legibility.

## Don'ts
- **Wrong:** Using #f9a009 (Orange) for a primary button background. **Right:** Use #206cf8. **Reason:** Orange is decorative/secondary only.
- Do not apply border-radius to primary section containers.
- Do not use bold weights (700+) for display headlines; stick to 150 or 300.
- Do not use drop shadows to create depth; use 1px black borders instead.

## Similar brands
- Stripe (Technical precision)
- Vercel (Monochrome utility)
- Framework Computer (Industrial aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #206cf8;
  --color-black: #000000;
  --color-white: #ffffff;
  --font-main: 'Montserrat', sans-serif;
  --weight-display: 150;
  --radius-none: 0px;
  --space-section: 120px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #206cf8;
  --font-montserrat: "Montserrat";
  --spacing-section: 120px;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Generate a hero section with a 74px Montserrat headline at weight 150, #000000 text on #ffffff background, and a square-edged #206cf8 button."
- "Create a 3-column feature grid using 1px black borders, 0px border radius, and 32px internal padding."
- "Style a contact form with 4px rounded inputs and a full-width black button with white Montserrat text."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the computed style pipeline.
- Mobile-specific navigation transitions were not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://opendrives.com | 1440px | 2026-06-06 |
| Pricing | https://opendrives.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://opendrives.com | 390px | 2026-06-06 |