# Forge.laravel Design System

> A stark, high-contrast monochrome system anchored by deep olive blacks and crisp white surfaces, punctuated by precise teal accents.

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

## TL;DR
Forge.laravel relies heavily on a stark, high-contrast monochrome palette. The primary canvas is pure white (`#ffffff`) or deep olive-black (`#151715`), with text primarily rendered in `#141e12` or `#6b716a`. The system uses InstrumentSans for crisp, geometric headings and body copy, occasionally introducing Merriweather or IBM Plex Mono for editorial or technical contrast. Accents are extremely restrained, utilizing deep greens (`#002700`) and vibrant teals (`#18b69b`) strictly for interactive states or subtle borders. Components favor sharp edges (`0px`) or tight curves (`6px`), with elevation handled by delicate borders rather than heavy shadows.

## Signature DNA
1. **High-Contrast Monochrome** (The dominant visual language relies on pure white `#ffffff` and deep olive-black `#141e12`, creating a stark, technical aesthetic. Observed across Home, Pricing, and About pages.)
2. **Restrained Teal Accents** (Vibrant teals like `#18b69b` and `#46c5af` are used sparingly for text and icons, providing the only significant chromatic breaks against the monochrome foundation.)
3. **Tight Geometry** (A reliance on sharp corners `0px` and tight radii `6px` for cards and surfaces reinforces the developer-focused, precision-engineered feel.)

## Family Map
No sub-brands exist for this layer.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-olive-light-12` | `#141e12` | text, button_text | 159 | 1.0 | computed_style |
| `--color-olive-light-11` | `#6b716a` | text, button_text | 167 | 1.0 | computed_style |
| `--color-white` | `#ffffff` | surface_bg, text, border | 85 | 1.0 | computed_style |
| `--color-olive-dark-1` | `#151715` | surface_bg, border, button_bg | 28 | 1.0 | computed_style |
| `--color-weak-border` | `#ebedef` | border | 26 | 1.0 | computed_style |
| `--color-olive-dark-11` | `#9aa299` | text | 39 | 1.0 | computed_style |
| `--color-olive-light-8` | `#c3c8c2` | text | 17 | 1.0 | computed_style |
| `--color-olive-light-9` | `#8b918a` | text | 14 | 1.0 | computed_style |
| `--text-color-weak` | `#818780` | text, button_text | 9 | 1.0 | computed_style |
| `--background-color-terminal-toolbar-hovered` | `#4c514b` | text | 8 | 1.0 | computed_style |
| `--color-olive-dark-4` | `#262925` | border | 4 | 1.0 | computed_style |
| `--color-olive-dark-9` | `#687366` | text | 4 | 1.0 | computed_style |
| `--color-olive-dark-12` | `#eceeec` | text | 4 | 1.0 | computed_style |
| `--background-color-github` | `#151718` | button_bg, border | 2 | 1.0 | computed_style |
| `--bg-bg-weak` | `#f8faf8` | surface_bg | 2 | 1.0 | computed_style |
| `--bg-bg-brand-weak` | `#f1fbf9` | surface_bg | 2 | 1.0 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-olive-light-alpha-3` | `#002700` | border | 36 | 1.0 | computed_style |
| `--color-olive-light-alpha-7` | `#001a00` | border | 11 | 1.0 | computed_style |
| `--color-forge-dark-9` | `#46c5af` | text | 7 | 1.0 | computed_style |
| `--color-forge` | `#18b69b` | text | 3 | 1.0 | computed_style |
| `--color-forge-green` | `#02eac2` | text | 2 | 1.0 | computed_style (decorative_only) |
| `--text-color-link` | `#13927c` | text | 2 | 1.0 | computed_style (decorative_only) |
| `--border-color-brand-weak` | `#0db096` | border | 1 | 1.0 | computed_style (decorative_only) |
| `--border-color-brand` | `#018a72` | border | 1 | 1.0 | computed_style (decorative_only) |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bg-bg-success` | `#29a383` | success | - | - | declared_token_colors |
| `--bg-bg-danger` | `#e54666` | error | - | - | declared_token_colors |
| `--bg-bg-warning` | `#ffb224` | warning | - | - | declared_token_colors |
| `--bg-bg-info` | `#05a2c2` | info | - | - | declared_token_colors |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| InstrumentSans | 400, 500, 600 | heading | Inter | OFL |
| Instrument Serif | 400 | body | Playfair Display | OFL |
| IBM Plex Mono | 400, 500 | mono | JetBrains Mono | OFL |
| Merriweather | 400 | body | Lora | OFL |
| Inter | 400, 500 | heading | Inter | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `typography.display` | 64px | 64px | -1.3px | 600 | InstrumentSans | `h1.text-4xl.font-semibold` |
| `typography.heading.lg` | 36px | 40px | normal | 600 | InstrumentSans | `span` |
| `typography.heading.md` | 30px | 36px | -0.75px | 500 | InstrumentSans | `h2.tracking-tight.text-3xl` |
| `typography.heading.serif` | 28px | 37.33px | -0.4px | 400 | Merriweather | `p.max-w-3xl.font-merriweather` |
| `typography.heading.sm` | 20px | 28px | normal | 400 | InstrumentSans | `p.starting:translate-y-8` |
| `typography.body.lg` | 18px | 28px | normal | 500 | InstrumentSans | `span.text-lg.leading-7` |
| `typography.body.base` | 16px | 24px | normal | 400 | InstrumentSans | `div.relative.z-50` |
| `typography.body.sm` | 14px | 20px | normal | 400 | InstrumentSans | `span.font-normal` |
| `typography.caption.mono` | 12px | 16px | normal | 400 | IBM Plex Mono | `div.lg:block.text-olive-light-8` |

### Principles
- **InstrumentSans dominates the hierarchy.** Used from display (64px) down to captions (12px) for a cohesive, technical feel.
- **Negative letter-spacing on display.** InstrumentSans pulls -1.3px to -0.375px tighter on display sizes to lock up geometric forms.
- **IBM Plex Mono is reserved.** Strictly used for technical captions and code-like elements at 12px.

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

| Token | Value | Occurrences |
|-------|-------|-------------|
| `spacing.2` | 2px | 23 |
| `spacing.4` | 4px | 19 |
| `spacing.6` | 6px | 26 |
| `spacing.8` | 8px | 46 |
| `spacing.10` | 10px | 34 |
| `spacing.12` | 12px | 23 |
| `spacing.16` | 16px | 76 |
| `spacing.20` | 20px | 63 |
| `spacing.24` | 24px | 44 |
| `spacing.32` | 32px | 6 |
| `spacing.60` | 60px | 9 |
| `spacing.120` | 120px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius.sharp` | 0px | Surfaces, panels | 664 occurrences |
| `radius.input.sm` | 4px | Small inputs | 12 occurrences |
| `radius.input.md` | 6px | Standard inputs, cards | 29 occurrences |
| `radius.control.md` | 8px | Controls | 13 occurrences |
| `radius.control.lg` | 12px | Large controls | 3 occurrences |
| `radius.pill` | 9999px | Badges, rounded buttons | 31 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `shadow.inset` | `rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset` | Depressed states | 26 occurrences |
| `shadow.subtle` | `rgba(0, 0, 0, 0.03) 0px 0px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px` | Cards | 18 occurrences |
| `shadow.outline` | `rgb(20, 30, 18) 0px 0px 0px 0px` | Focus rings | 2 occurrences |

## Components

### Tier 1: Foundational

#### Surface (Base)
**Role:** Primary page background and layout container.
**Pages observed:** https://forge.laravel.com, https://forge.laravel.com/pricing
**Spec:** Background `#ffffff` / Text `oklch(0.205 0 0)` / Border `rgba(0, 39, 0, 0.05)` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Rounded Button
**Role:** Secondary actions and toggles.
**Pages observed:** https://forge.laravel.com, https://forge.laravel.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `oklch(0.556 0 0)` / Border `oklch(0.556 0 0)` (0px) / Radius `6px` / Padding `6px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Card (Light)
**Role:** Feature highlights and pricing tiers on light canvas.
**Pages observed:** https://forge.laravel.com, https://forge.laravel.com/pricing
**Spec:** Background `#ffffff` / Text `#141e12` / Border `rgba(0, 26, 0, 0.15)` (1px) / Radius `6px` / Padding `0px 20px` / Typography `14px` / Shadow `rgba(0, 0, 0, 0.03) 0px 0px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Card (Dark)
**Role:** Feature highlights and pricing tiers on dark canvas.
**Pages observed:** https://forge.laravel.com, https://forge.laravel.com/pricing
**Spec:** Background `#151715` / Text `#ffffff` / Border `#151715` (1px) / Radius `6px` / Padding `0px 20px` / Typography `14px` / Shadow `rgba(0, 0, 0, 0.03) 0px 0px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site footer.
**Pages observed:** https://forge.laravel.com, https://forge.laravel.com/pricing
**Spec:** Background `#151715` / Text `oklch(0.205 0 0)` / Border `none` / Radius `0px` / Padding `120px 0px 0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Surface (Teal Accent)
**Role:** Highlighted badges or inline tags.
**Pages observed:** https://forge.laravel.com, https://forge.laravel.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#18b69b` / Border `oklab(0.695661 -0.125442 0.00742209 / 0.4)` (1px) / Radius `4px` / Padding `4px 10px` / Typography `12px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
Forge.laravel relies on typography, stark line-work, and subtle atmospheric gradients (e.g., teal/purple blurs behind hero sections) for visual interest. It strictly avoids heavy drop shadows, saturated background fills, and playful illustrations, maintaining a serious, precision-engineered aesthetic.

## Do's
- Do use pure white `#ffffff` and deep olive `#151715` for primary surface contrast.
- Do reserve `#18b69b` and `#46c5af` strictly for interactive or brand accent moments.
- Do apply tight negative tracking (-1.3px to -0.375px) to InstrumentSans headings.
- Do use 1px borders (`#ebedef` or `rgba(0, 26, 0, 0.15)`) to delineate cards rather than relying on heavy elevation.
- Do use IBM Plex Mono for technical annotations and code snippets at 12px.

## Don't
- **Wrong:** Using a 12px border radius for standard cards. **Right:** Using a 6px border radius. **Reason:** The system relies on tight geometry to maintain a technical, precision-engineered feel.
- **Wrong:** Using pure black `#000000` for primary text. **Right:** Using deep olive `#141e12`. **Reason:** Deep olive provides a softer, more sophisticated contrast against the white canvas.
- **Wrong:** Treating the teal accent `#18b69b` as the parent primary color. **Right:** Using `#002700` as the primary structural color. **Reason:** Teal is an accent; the system is fundamentally monochrome/olive.
- Don't mix multiple accent colors; stick strictly to the teal/olive spectrum.
- Don't use heavy drop shadows; rely on the subtle `0px 1px 2px` token.

## Similar brands
- Vercel
- Linear
- Stripe

## Quick start

```css
:root {
  --color-olive-light-12: #141e12;
  --color-olive-light-11: #6b716a;
  --color-white: #ffffff;
  --color-olive-dark-1: #151715;
  --color-weak-border: #ebedef;
  --color-olive-light-alpha-3: #002700;
  --color-forge: #18b69b;
  
  --font-heading: 'InstrumentSans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  
  --radius-card: 6px;
  --shadow-card: rgba(0, 0, 0, 0.03) 0px 0px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
```

## Agent prompt examples
- "Create a pricing card using a `#ffffff` background, a 1px `rgba(0, 26, 0, 0.15)` border, and a `6px` border radius. Use InstrumentSans for the typography."
- "Build a site footer with a `#151715` background, padding top of `120px`, and text colored `oklch(0.205 0 0)`."
- "Generate a technical caption using IBM Plex Mono at 12px, colored `#c3c8c2`."

## Known gaps
Layout max-width and responsive breakpoints were not captured in the source evidence. Semantic colors were pulled from declared tokens rather than computed styles due to lack of direct observation.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://forge.laravel.com | Desktop | 2026-06-06T05:01:17.209Z |
| Pricing | https://forge.laravel.com/pricing | Desktop | 2026-06-06T05:01:17.209Z |
| About | https://forge.laravel.com/about | Desktop | 2026-06-06T05:01:17.209Z |