# Stackblitz Design System

> High-contrast developer environment defined by deep obsidian canvases, vibrant electric cyan accents, and tight geometric typography.

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

## TL;DR
Stackblitz employs a "Dark Mode by Default" philosophy, utilizing a deep achromatic foundation (`#1c1f25`, `#151619`) contrasted against pure white text (`#ffffff`) and high-voltage cyan accents (`#00aeda`, `#33ffcc`). The system is architected around the **Manrope** typeface for display, often appearing at massive scales (up to 94px) with tight negative letter-spacing (-2px to -3px). UI components follow a strict geometric logic with 0px (sharp) or 8px (softened) radii, while depth is achieved through subtle inset hairlines (`rgba(255, 255, 255, 0.08) 1px inset`) rather than traditional drop shadows.

## Signature DNA
1. **The "Glow-on-Dark" Contrast** (Electric cyan `#00aeda` and teal `#33ffcc` accents punctuate deep charcoal `#1c1f25` backgrounds, creating a high-legibility IDE aesthetic. Seen on Homepage and Pricing.)
2. **Tight Display Geometry** (Manrope headings at 72px-94px with aggressive -2px tracking, creating a "stamped" architectural feel. Seen on Homepage Hero.)
3. **Inset Hairline Borders** (Cards and panels avoid heavy shadows, opting for 1px white-alpha inset borders to define edges against dark backgrounds. Seen on Pricing tiers and Feature cards.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--brand-black` | `#040407` | Absolute black for deep contrast | 52 | 1 | Computed Style |
| `--public-bg-90` | `#1c1f25` | Primary page background (charcoal) | 2 | 1 | CSS Variable |
| `--public-bg-00` | `#151619` | Secondary surface / Footer background | 5 | 1 | CSS Variable |
| `--text-strong-color` | `#ffffff` | Primary text and headings | 286 | 1 | CSS Variable |
| `--brand-gray-400` | `#a1a5b0` | Muted secondary text | 38 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--public-blue-text-60` | `#00aeda` | Primary brand blue / Link color | 22 | 1 | CSS Variable |
| `--brand-teal-300` | `#33ffcc` | Secondary brand teal / Success accent | 5 | 1 | CSS Variable |
| `--brand-blue-600` | `#128bfd` | CTA Button background | 2 | 1 | Decorative only |
| `--public-orange-text` | `#ff6d63` | Warning / Alert accent | 1 | 0.6 | Decorative only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Manrope | 400, 500, 600, 700, 800 | Display & Headings | Manrope (Google Fonts) | SIL OFL |
| Inter | 400, 500, 600, 700 | Body & UI Labels | Inter (Google Fonts) | SIL OFL |
| PT Mono | 400 | Code & Technical | PT Mono (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 94px | 94px | -2px | 600 | Homepage Hero | `h1` |
| `{type.display.xl}` | 72px | 75.6px | -3px | 800 | Section Headers | `h1` |
| `{type.display.lg}` | 44px | 44px | -1.5px | 500 | Pricing Numbers | `span._price_rqwlp_137` |
| `{type.display.md}` | 40px | 48px | -0.5px | 400 | Sub-section Heads | `h3` |
| `{type.title.sm}` | 20px | normal | normal | 700 | Card Titles | `span._option__name_rqwlp_114` |
| `{type.body.lg}` | 18px | 36px | normal | 600 | Strong Body | `strong` |
| `{type.body.md}` | 16px | 32px | normal | 400 | Default Body | `li` |
| `{type.body.sm}` | 13px | 20.02px | normal | 400 | Footer / Meta | `li` |
| `{type.caption}` | 10px | 15.4px | 1px | 500 | Feature Labels | `li._option__features__heading_rqwlp_229` |

### Principles
1. **Negative Tracking on Display:** As font size increases, letter-spacing decreases linearly from -0.5px to -3px.
2. **Inter for Utility:** All interactive elements (nav, buttons, pricing features) strictly use Inter for maximum legibility.
3. **Achromatic Hierarchy:** Use font-weight (400 to 600) and opacity (100% to 70%) rather than color to establish hierarchy in body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 37 |
| `{space.sm}` | 16px | 10 |
| `{space.md}` | 24px | 11 |
| `{space.lg}` | 32px | 18 |
| `{space.xl}` | 64px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main surfaces, footer bands | 321 occurrences |
| `{radius.input}` | 6px | Form fields, small buttons | pricing page inputs |
| `{radius.card}` | 8px | Feature cards, pricing tiers | `.card` components |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Page background | `#1c1f25` |
| `inset-1` | `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset` | Card definition | Pricing tiers |
| `border-1` | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px` | Section dividers | Header/Footer |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Try Bolt.new")
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#128bfd` / Text: `#ffffff` / Radius: `8px` / Typography: `Inter 600`
**States observed:** Default | Hover: captured | Active: captured

#### Top Navigation
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `transparent` / Text: `#ffffff` / Height: `64px` / Typography: `Inter 1600`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Product tier display
**Pages observed:** Pricing
**Spec:** Background: `rgba(255, 255, 255, 0.06)` / Border: `rgba(255, 255, 255, 0.08) 1px inset` / Radius: `8px` / Padding: `24px`
**States observed:** Default | Hover: captured

#### Feature Grid
**Role:** Benefit explanation
**Pages observed:** Homepage
**Spec:** Background: `rgba(49, 61, 94, 0.24)` / Radius: `8px` / Padding: `20px`
**States observed:** Default

### Tier 3: Surface-specific

#### Comparison Table
**Role:** Feature breakdown vs competitors
**Pages observed:** Homepage
**Spec:** Background: `#151619` / Border: `1px solid rgba(255,255,255,0.1)` / Typography: `Inter 13px`
**States observed:** Default

#### Code Preview Card
**Role:** Visualizing the IDE product
**Pages observed:** Homepage
**Spec:** Background: `#000000` / Radius: `0px` / Shadow: `none`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1280px |
| Section Gap | 96px - 128px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Headings scale to 48px; Nav becomes hamburger menu; Pricing cards stack vertically. |
| Desktop | 1440px | 3-column pricing grid; 94px display type active. |

## Imagery & decoration
Stackblitz uses **abstract dark-mode UI mockups** and **blurred atmospheric glows** (cyan/purple) behind content. It avoids literal photography, preferring high-fidelity vector representations of code environments.

## Do's
- Use `#1c1f25` for the primary canvas.
- Set Manrope display headings to at least -1px letter-spacing.
- Use `rgba(255, 255, 255, 0.08)` inset borders for card definition.
- Reserve `#00aeda` for interactive links and primary accents.
- Maintain a 32px line-height for body copy to ensure legibility on dark backgrounds.

## Don'ts
- **Wrong:** Using `#00aeda` as a background for large text blocks. **Right:** Use white text on dark backgrounds with cyan as an accent only. **Reason:** Contrast and brand "glow" effect.
- **Wrong:** Labeling `#ff6d63` (orange) as the primary brand color. **Right:** Use Cyan/Blue as primary. **Reason:** Orange is a decorative/semantic secondary.
- Don't use soft drop shadows; use inset hairlines for depth.
- Don't use serif fonts; the brand is strictly geometric sans and mono.

## Similar brands
- Vercel
- Supabase
- Linear
- GitHub (Dark Dimmed)

## Quick start

```css
/* CSS Variables */
:root {
  --sb-bg-primary: #1c1f25;
  --sb-bg-secondary: #151619;
  --sb-text-primary: #ffffff;
  --sb-accent-cyan: #00aeda;
  --sb-accent-teal: #33ffcc;
  --sb-radius-card: 8px;
  --sb-shadow-inset: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
}
```

## Agent prompt examples
- "Generate a feature card using Stackblitz DNA: `#1c1f25` background, `8px` radius, and a `1px` white-alpha inset border. Use Manrope for the title with `-0.5px` tracking."
- "Create a pricing tier component with a `#128bfd` primary button and `44px` Manrope price text."
- "Design a dark-mode hero section with `94px` Manrope text, white color, and `-2px` letter spacing."

## Known gaps
- Hover states for tertiary buttons were not explicitly captured in the pricing table.
- Mobile-specific spacing tokens (e.g., section padding) were inferred from visual scaling rather than explicit variables.

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