# Nextmv Design System

> A high-contrast technical canvas where deep slate foundations meet precise teal accents and geometric rabbit motifs.

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

## TL;DR
Nextmv utilizes a "monochrome plus one" strategy, grounding the interface in a deep slate palette (`#002a41`, `#32566a`) against a cool gray-white canvas (`#f2f3f6`). The primary brand voltage is delivered through a vibrant teal (`#1b9caa`) used for high-priority CTAs and section highlights. Typography is strictly structured using the **L10** family, favoring heavy weights (600-700) for display and medium weights for UI controls. Layouts are characterized by generous vertical padding (up to 144px) and a consistent 5px border radius that softens technical "system of record" card patterns.

## Signature DNA
1. **The Slate Foundation** (Deep `#002a41` is used not just for text, but as a full-bleed surface background for high-impact sections like the "What's the return" and footer areas, creating a "dark mode" contrast within a light-mode site.)
2. **Teal Action Voltage** (The transition from slate to teal `#1b9caa` signals the most important user actions, such as "Try Nextmv" and newsletter submission, providing a clear functional hierarchy.)
3. **Geometric Softness** (A universal 5px radius applied to buttons, inputs, and cards creates a approachable "tooling" aesthetic that avoids the severity of sharp corners while remaining more professional than a full pill.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--slate-600` | `#002a41` | Primary text, Primary button BG, Dark section BG | 61 | 1 | Computed |
| `--gray-100` | `#f2f3f6` | Page background, secondary button text | 7 | 1 | :root |
| `--white` | `#ffffff` | Surface BG, button text, card background | 94 | 0.8 | Computed |
| `--slate-700` | `#002336` | Footer background, deep emphasis text | 5 | 1 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--slate-500` | `#32566a` | Secondary text, borders, input text | 139 | 1 | :root |
| `--teal-500` | `#1b9caa` | CTA Button BG, brand accent | 15 | 1 | :root |
| `--gray-500` | `#809baa` | Muted text, secondary surfaces | 70 | 1 | :root |
| `--teal-600` | `#008393` | Hover states for teal buttons, pricing borders | 8 | 1 | :root |
| `--orange-500` | `#e5774b` | Decorative only (rare borders) | 1 | 1 | :root |
| `--red` | `#fc6262` | Decorative only (rare borders) | 1 | 1 | :root |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| L10 | 400, 500, 600, 700 | Heading, Display, UI | Inter | Custom/Licensed |
| Arial | 400 | Body fallback, Nav | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 64px | 76.8px | normal | 600 | Homepage hero | `h1.h1-centered` |
| `display-lg` | 56px | 67.2px | normal | 600 | Section heads | `h2.h2-left` |
| `display-md` | 48px | 57.6px | normal | 700 | Pricing titles | `h3.h3-pt-0` |
| `heading-md` | 32px | 38.4px | normal | 700 | Card titles | `h4.card-pricing__plan-name` |
| `heading-sm` | 24px | 28.8px | normal | 700 | Sub-section heads | `h5.span-color-white` |
| `body-lg` | 20px | 30px | normal | 500 | Lead paragraphs | `p.paragraph-size-20` |
| `body-md` | 16px | 24px | normal | 400 | Default body | `a.link-footer` |
| `body-sm` | 14px | 21px | normal | 400 | Footer links | `a.link-footer-small` |
| `caption` | 12px | 18px | normal | 400 | Small annotations | `p.pricing-grid-testing-subfeature` |

### Principles
1. **Bold Display Hierarchy:** Headlines never drop below 600 weight, ensuring a strong typographic anchor on the page.
2. **Slate-on-White Body:** Default body text uses `--slate-500` (#32566a) rather than pure black for a softer technical feel.
3. **Tight Display Leading:** Large display type maintains a strict 1.2x line-height ratio.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 10px | 122 |
| `space-sm` | 16px | 71 |
| `space-md` | 40px | 35 |
| `space-lg` | 80px | 10 |
| `space-xl` | 144px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Full-bleed sections | 368 occurrences |
| `radius-sm` | 5px | Buttons, Inputs, Cards | `Rounded Button`, `Text Input` |
| `radius-md` | 10px | Pricing cards | `Card` (pricing page) |

## Components

### Tier 1: Foundational

#### Primary Slate Button
**Role:** Standard action for navigation and secondary CTAs.
**Pages observed:** All
**Spec:** Background `#002a41` / Text `#ffffff` / Border `2px solid #002a41` / Radius `5px` / Padding `14px 24px` / Typography `14px 600`
**States observed:** Default | Hover: captured | Active: captured

#### Teal CTA Button
**Role:** High-conversion actions (Try Nextmv, Submit).
**Pages observed:** All
**Spec:** Background `#1b9caa` / Text `#ffffff` / Border `0px` / Radius `6px` / Padding `9px 20px` / Typography `14px 600`
**States observed:** Default | Hover: captured (uses `#008393`) | Active: captured

### Tier 2: Patterns

#### Text Input
**Role:** Form fields for lead capture.
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#32566a` / Border `2px solid #e8eaee` / Radius `5px` / Padding `8px 12px` / Typography `14px 400`
**States observed:** Default | Focus: captured

#### Pricing Card
**Role:** Tiered product selection.
**Pages observed:** `/pricing`
**Spec:** Background `#ffffff` / Text `#333333` / Border `2px solid #008393` / Radius `10px` / Padding `40px 30px 0px`
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-contrast content bands.
**Pages observed:** All
**Spec:** Background `#002a41` / Text `#ffffff` / Border `0px` / Radius `0px` / Padding `80px 0px 144px`
**States observed:** Default

#### Footer Surface
**Role:** Site-wide navigation anchor.
**Pages observed:** All
**Spec:** Background `#002336` / Text `#ffffff` / Border `0px` / Radius `0px` / Padding `24px 0px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 80px to 144px |
| Column Gap | 30px |

## Do's
- Use `#1b9caa` exclusively for the primary conversion action on a page.
- Apply a `5px` border radius to all interactive UI elements.
- Use `L10` at weight 700 for any heading above 24px.
- Ground light sections with `--slate-500` (#32566a) borders for subtle definition.
- Maintain `144px` vertical spacing between major homepage content blocks.

## Don'ts
- **Wrong:** Using `#1b9caa` for body text. **Right:** Use `#32566a`. **Reason:** Teal is reserved for interactive voltage, not legibility.
- **Wrong:** Using a `0px` radius on buttons. **Right:** Use `5px`. **Reason:** Sharp corners are reserved for full-bleed layout containers.
- **Wrong:** Labeling `#fffd54` (yellow) as a primary brand color. **Right:** It is a decorative token only. **Reason:** Primary brand identity is Slate and Teal.

## Similar brands
- HashiCorp (Technical, structured, dark slate foundations)
- Vercel (High contrast, geometric, monochrome focus)
- Datadog (Complex technical data presented on clean, gridded canvases)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --nextmv-slate-600: #002a41;
  --nextmv-slate-500: #32566a;
  --nextmv-teal-500: #1b9caa;
  --nextmv-teal-600: #008393;
  --nextmv-gray-100: #f2f3f6;
  --nextmv-radius: 5px;
  --nextmv-font-display: "L10", sans-serif;
}
```

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token stream.
- Mobile-specific font size transitions for mid-level headings (h3-h4) were partially merged in the evidence.
- Box shadows were not detected in the rendered output, suggesting a flat design system relying on borders and background shifts.