# Inertiajs Design System

> A precise, engineered monochrome canvas punctuated by vibrant technical accents and sharp typographic contrast.

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

## TL;DR
Inertiajs employs a stark, high-contrast monochrome foundation built on pure white (`#ffffff`) and near-black (`#1b1b18`), accented by vibrant blue hero sections and syntax highlighting colors. The typography relies entirely on Instrument Sans for UI and ui-monospace for technical content, utilizing tight letter spacing (-0.5px) on headings to create a dense, engineered feel. Components favor extreme border radii, contrasting sharp 0px surfaces with 9999px pill buttons and badges. The layout is structured by a strict 4px grid, with generous padding and subtle hairline borders (`oklch(0.922 0 0)`) defining content areas instead of heavy elevation shadows.

## Signature DNA
1. **High-contrast monochrome with vibrant accents** (The core UI relies on `#1b1b18` text on `#ffffff` backgrounds, reserving saturated colors for specific focal points and syntax highlighting, establishing a developer-focused aesthetic.)
2. **Engineered typography** (Instrument Sans is used universally with negative letter spacing up to -0.5px on 20px headings, giving the interface a technical, precise rhythm.)
3. **Extreme radius contrast** (The system juxtaposes completely sharp edges at 0px radius on surfaces with fully rounded elements at 9999px on pills and buttons, skipping mid-tier radii for primary structural elements.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-white` | `#ffffff` | Background, surface, text | 108 | 1.0 | css_variable |
| `color-text-primary` | `#1b1b18` | Text | 183 | 0.8 | computed_style |
| `color-black` | `#000000` | Text | 72 | 0.8 | computed_style |
| `--color-brand-light` | `#fefefe` | Background | - | - | css_variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-syntax-blue` | `#001080` | Text (syntax) | 14 | 0.8 | computed_style |
| `color-syntax-maroon` | `#800000` | Text (syntax) | 14 | 0.8 | computed_style |
| `color-syntax-red` | `#a31515` | Text (syntax) | 9 | 0.6 | computed_style |
| `color-syntax-bright-blue` | `#0000ff` | Text (syntax) | 7 | 0.6 | computed_style |
| `color-syntax-brown` | `#795e26` | Text (syntax) | 7 | 0.6 | computed_style |
| `color-syntax-teal` | `#267f99` | Text (syntax) | 6 | 0.6 | computed_style |
| `color-syntax-bright-red` | `#ff0000` | Text (syntax) | 5 | 0.6 | computed_style |
| `color-syntax-purple` | `#af00db` | Text (syntax) | 3 | 0.6 | computed_style |
| `--color-laravel-red` | `#f53003` | Brand accent | - | - | css_variable |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Instrument Sans | 300, 400, 500, 600, 700 | heading, body | Inter | OFL |
| ui-monospace | 300, 400 | mono | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `typography.heading-lg` | 36px | 40px | normal | 600 | Primary section headers | `div.text-4xl.font-semibold` |
| `typography.heading-md` | 24px | 17px | -0.24px | 700 | Secondary headers | `p.font-sans.text-2xl` |
| `typography.heading-sm` | 20px | 28px | -0.5px | 700 | Card titles | `div.text-xl.leading-[28px]` |
| `typography.heading-xs` | 20px | 20px | -0.5px | 600 | Compact titles | `h4.mb-3.text-xl/none` |
| `typography.body-lg` | 18px | 28px | -0.45px | 400 | Large interactive text | `button.cursor-pointer.rounded-3xl` |
| `typography.body` | 16px | 24px | normal | 400 | Default running text | `header.relative.mx-auto` |
| `typography.body-mono` | 16px | 24px | -0.16px | 400 | Inline code | `p.font-mono.text-neutral-500` |
| `typography.body-sm` | 14px | 20px | normal | 400 | Metadata | `header.flex.items-center` |
| `typography.code-block` | 14px | 28px | normal | 300 | Code snippets | `code.torchlight` |

### Principles
- Headings use tight tracking (-0.5px) to create a dense, compact appearance.
- Monospace is reserved strictly for technical content and code snippets.
- Body text maintains a comfortable 1.5 line height (16px/24px) for optimal readability.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `spacing.1` | 4px | 8 |
| `spacing.2` | 8px | 12 |
| `spacing.2.5` | 10px | 10 |
| `spacing.3` | 12px | 31 |
| `spacing.4` | 16px | 63 |
| `spacing.5` | 20px | 4 |
| `spacing.6` | 24px | 19 |
| `spacing.8` | 32px | 29 |
| `spacing.10` | 40px | 10 |
| `spacing.16` | 64px | 3 |
| `spacing.18` | 73px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius.sharp` | 0px | Surfaces, structural containers | 318 occurrences |
| `radius.input` | 2px | Small interactive elements | 11 occurrences |
| `radius.input-lg` | 4px | Standard inputs | 18 occurrences |
| `radius.control` | 10px | Form controls | 11 occurrences |
| `radius.card` | 16px | Feature cards | 7 occurrences |
| `radius.card-lg` | 20px | Large content panels | 6 occurrences |
| `radius.panel` | 24px | Elevated panels | 4 occurrences |
| `radius.pill` | 9999px | Buttons, badges | 103 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow.purple-glow` | `rgba(120, 93, 253, 0.267) 0px 0.5px 1px 0px, rgba(120, 93, 253, 0.23) 0px 2px 2px 0px, rgba(120, 93, 253, 0.133) 0px 5px 3px 0px, rgba(120, 93, 253, 0.04) 0px 9px 3.5px 0px, rgba(120, 93, 253, 0.004) 0px 14px 4px 0px` | Primary CTA buttons | Pill Button |
| `shadow.red-glow` | `rgba(246, 76, 76, 0.09) 0px 9.6px 21.94px 0px, rgba(246, 76, 76, 0.08) 0px 39.77px 39.77px 0px, rgba(246, 76, 76, 0.05) 0px 89.14px 53.49px 0px, rgba(246, 76, 76, 0.01) 0px 157.71px 63.09px 0px, rgba(246, 76, 76, 0) 0px 245.49px 68.57px 0px, rgb(255, 255, 255) 0px 0px 24px 0px inset` | Highlighted feature cards | Card |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary call to action
**Pages observed:** https://inertiajs.com
**Spec:** Background `oklab(0.623 -0.0378409 -0.210628 / 0.7)` / Text `rgb(255, 255, 255)` / Border `rgb(255, 255, 255)` 0px / Radius 9999px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Rounded Button
**Role:** Secondary action
**Pages observed:** https://inertiajs.com
**Spec:** Background `rgb(255, 255, 255)` / Text `oklch(0.269 0 0)` / Border `rgb(255, 255, 255)` 1px / Radius 24px / Padding 0px 24px / Typography 18px / Shadow none
**States observed:** Default | Disabled: not captured

#### Pill / Badge
**Role:** Status indicator and metadata tag
**Pages observed:** https://inertiajs.com
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `rgb(27, 27, 24)` / Border `oklch(0.922 0 0)` 1px / Radius 9999px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Card
**Role:** Primary content container
**Pages observed:** https://inertiajs.com
**Spec:** Background `rgb(255, 255, 255)` / Text `rgb(27, 27, 24)` / Border `oklch(0.922 0 0)` 1px / Radius 16px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Surface (Bordered)
**Role:** Outlined structural container
**Pages observed:** https://inertiajs.com
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `rgb(27, 27, 24)` / Border `oklch(0.922 0 0)` 1px / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Surface (Transparent)
**Role:** Invisible grouping container
**Pages observed:** https://inertiajs.com
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `rgb(27, 27, 24)` / Border `rgb(27, 27, 24)` 0px / Radius 4px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
The brand uses intricate, technical line-art illustrations and isometric grids to convey a sense of architecture and engineering. Saturated blue is used heavily in the hero background to create high impact, while the rest of the page remains starkly monochrome.

## Do's
- Do use Instrument Sans for all UI text.
- Do apply tight letter spacing (-0.5px) to headings to maintain the engineered aesthetic.
- Do use pure white (`#ffffff`) for primary backgrounds.
- Do utilize 9999px border radii for interactive pill buttons.
- Do reserve monospace fonts strictly for code and technical references.

## Don'ts
- **Wrong:** Using heavy drop shadows for standard cards. **Right:** Flat cards with `oklch(0.922 0 0)` borders. **Reason:** Maintains the flat, engineered aesthetic.
- **Wrong:** Mixing border radii on primary buttons (e.g., 4px). **Right:** 9999px radius. **Reason:** Buttons must remain distinctly pill-shaped to contrast with sharp structural elements.
- **Wrong:** Using saturated colors for primary text. **Right:** `#1b1b18` text. **Reason:** Text must remain high-contrast monochrome to preserve the developer-focused tone.

## Similar brands
- Vercel
- Tailwind Labs
- Stripe

## Quick start

```css
:root {
  --color-white: #ffffff;
  --color-brand-light: #fefefe;
  --color-laravel-red: #f53003;
  --color-text-primary: #1b1b18;
  --color-border: oklch(0.922 0 0);
  --font-sans: 'Instrument Sans', sans-serif;
  --font-mono: ui-monospace, monospace;
}
```

## Agent prompt examples
1. "Create a feature card using a white background, a 1px `oklch(0.922 0 0)` border, and 16px border radius. Include a heading in Instrument Sans at 20px with -0.5px letter spacing."
2. "Build a primary pill button with a 9999px border radius, white text, and the complex purple shadow defined in the design system."
3. "Design a code snippet block using ui-monospace at 14px with a 28px line height, utilizing the accent colors for syntax highlighting."

## Known gaps
Hover, focus, and active states were not captured in the source evidence. Layout grids and responsive breakpoints are missing from the extracted tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://inertiajs.com | Desktop | 2026-06-06T05:00:25.897Z |