---
name: StackBlitz
tagline: Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt.
updated_at: 2026-05-29T00:00:00.000Z
published_at: 2026-05-28T23:12:19.064Z
author: webdesignhot
source_url: https://stackblitz.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, ai, saas]
tags: [dark, sans, structured, developer, sandbox, cool, bright]
preview_swatch: ['#1c1f25', '#1574ef', '#ffffff']
related: [replit, vercel, cursor]
description: 'StackBlitz''s marketing site runs on a cool graphite `#1c1f25` canvas with a single electric blue `#1574ef` doing all the action work — the same blue that powers its breakout product, Bolt.new. The type system pairs Manrope for display (a rounded-geometric grotesque, h1 at a towering 94px / 600) with Inter for body, and the layout leans dense and product-forward: faux-IDE frames, instant-boot demos, and a confident "Click. Code. Done." cadence. Where Replit goes navy-ink with saturated cyan, StackBlitz goes neutral graphite with a true product blue — the blue reads as software-honest rather than neon, signalling "this is the editor, not a brochure."'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-bolt
  muted: text-muted
  border: border
  ring: border-brand
colors:
  bg: '#1c1f25'
  bg-deep: '#15181d'
  bg-darker: '#101216'
  surface: '#24272e'
  surface-high: '#2c3038'
  surface-low: '#1f2127'
  surface-elev: '#363b45'
  text: '#ffffff'
  text-strong: '#ffffff'
  text-body: '#e4e7ec'
  text-muted: '#9ba3b4'
  text-soft: '#7d8694'
  text-faint: '#565d6b'
  text-on-brand: '#ffffff'
  brand: '#1574ef'
  brand-hover: '#2b80f0'
  brand-deep: '#0f5fcc'
  brand-soft: 'rgba(21,116,239,0.16)'
  brand-tint: 'rgba(21,116,239,0.08)'
  accent-bolt: '#1574ef'
  accent-purple: '#8b5cf6'
  accent-purple-soft: 'rgba(139,92,246,0.16)'
  accent-cyan: '#22d3ee'
  on-brand: '#ffffff'
  border: 'rgba(255,255,255,0.08)'
  border-strong: 'rgba(255,255,255,0.14)'
  border-soft: 'rgba(255,255,255,0.04)'
  border-brand: 'rgba(21,116,239,0.45)'
  signin-bg: 'rgba(49,61,94,0.24)'
  signin-text: 'rgba(255,255,255,0.8)'
  link: '#1574ef'
  link-hover: '#2b80f0'
  success: '#34d399'
  success-bg: 'rgba(52,211,153,0.15)'
  warning: '#fbbf24'
  warning-bg: 'rgba(251,191,36,0.15)'
  danger: '#f87171'
  danger-bg: 'rgba(248,113,113,0.15)'
  info: '#1574ef'
  shadow-deep: 'rgba(0,0,0,0.45)'
  shadow-soft: 'rgba(0,0,0,0.25)'
  shadow-glow: 'rgba(21,116,239,0.28)'

typography:
  display:
    family: 'Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [500, 600, 700, 800]
  body:
    family: 'Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 94, weight: 600, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 64, weight: 700, lineHeight: 1.04, tracking: '-0.025em', family: display }
    h1:              { size: 48, weight: 700, lineHeight: 1.08, tracking: '-0.02em',  family: display }
    h2:              { size: 36, weight: 600, lineHeight: 1.15, tracking: '-0.015em', family: display }
    h3:              { size: 28, weight: 600, lineHeight: 1.22, tracking: '-0.01em',  family: display }
    h4:              { size: 22, weight: 600, lineHeight: 1.3,  tracking: '-0.005em', family: display }
    h5:              { size: 18, weight: 600, lineHeight: 1.35, tracking: '0',        family: display }
    body-large:      { size: 18, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body-small:      { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    button:          { size: 15, weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    button-small:    { size: 13, weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    nav:             { size: 14, weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    caption:         { size: 13, weight: 400, lineHeight: 1.45, tracking: '0',        family: body }
    label:           { size: 12, weight: 600, lineHeight: 1.3,  tracking: '0.04em',   family: body }
    label-uppercase: { size: 11, weight: 600, lineHeight: 1.3,  tracking: '0.08em',   family: body }
    code:            { size: 14, weight: 400, lineHeight: 1.55, tracking: '0',        family: mono }
    code-small:      { size: 12, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }
    micro:           { size: 11, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 10
  xl: 12
  xxl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  gutter: 24
  section-y: 96

components:
  button-primary:
    background: brand
    text: on-brand
    radius: 10
    padding: '11px 18px'
    font: 'Inter 15px / weight 600'
    hover: 'background → #2b80f0; subtle blue glow'
    use: 'Electric blue CTA — white text on `#1574ef`, 10px radius. The flagship is `Try Bolt.new`.'
  button-secondary:
    background: 'rgba(49,61,94,0.24)'
    text: 'rgba(255,255,255,0.8)'
    border: 'none'
    radius: 8
    padding: '11px 18px'
    font: 'Inter 15px / weight 600'
    hover: 'background → rgba(49,61,94,0.4); text → #ffffff'
    use: 'Tinted-fill secondary — the live `Sign in` button. Cool slate wash, no border.'
  button-ghost:
    background: transparent
    text: text
    border: '1px solid rgba(255,255,255,0.14)'
    radius: 8
    padding: '11px 18px'
    hover: 'background → rgba(255,255,255,0.06)'
    use: 'Outlined tertiary on the graphite canvas'
  button-text:
    background: transparent
    text: brand
    border: 'none'
    padding: '8px 12px'
    hover: 'colour → #2b80f0'
    use: 'Inline link-button, often with a trailing arrow →'
  card:
    background: surface
    border: '1px solid rgba(255,255,255,0.08)'
    radius: 12
    padding: '24px'
    shadow: 'none'
    use: 'Feature card on the graphite canvas — flat-on-flat via surface ladder'
  editor-frame:
    background: bg-deep
    border: '1px solid rgba(255,255,255,0.14)'
    radius: 12
    chrome: 'window dots + tab strip with file label; live WebContainer preview pane beside the editor'
    use: 'Faux-IDE / live-boot hero — the defining illustration of an in-browser editor'
  input:
    background: surface-low
    border: '1px solid rgba(255,255,255,0.14)'
    text: text
    radius: 8
    padding: '10px 14px'
    use: 'Search and form fields; focus ring is electric blue'
  badge:
    background: 'rgba(255,255,255,0.08)'
    text: text
    border: 'none'
    radius: 9999
    padding: '4px 10px'
    font: 'Inter 12px / 600 / 0.04em'
    indicator: 'blue / purple dot 6px before label for NEW / AI'
    use: 'NEW / AI / Beta status labels'
  nav:
    background: 'rgba(28,31,37,0.8)'
    border-bottom: '1px solid rgba(255,255,255,0.06)'
    blur: 'backdrop-blur on scroll'
    use: 'Quiet graphite sticky bar — wordmark left, blue `Try Bolt.new` CTA right-pinned'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-snappy: 'cubic-bezier(0.16, 1, 0.3, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  hover-lift: 'translate-Y(-2px) on cards; blue glow on primary CTA'
  reduced-motion: 'respects prefers-reduced-motion: reduce — opacity-only, no translate, no boot-animation loop'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: '0 1px 2px rgba(0,0,0,0.25)'
  soft: '0 4px 12px rgba(0,0,0,0.25)'
  standard: '0 8px 24px rgba(0,0,0,0.35)'
  elevated: '0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)'
  glow-blue: '0 0 24px rgba(21,116,239,0.28)'
  ring: '0 0 0 2px #1574ef'

accessibility:
  contrast-text-on-bg: 16.5                 # #ffffff on #1c1f25 — AAA
  contrast-text-on-brand: 4.4               # #ffffff on #1574ef — AA (large/UI)
  contrast-brand-on-bg: 3.75                # #1574ef on #1c1f25 — AA Large / UI 3:1
  focus-ring: '2px solid #1574ef, 2px offset'
  reduced-motion-honored: true
  keyboard-nav: 'tab follows DOM; blue focus ring on every interactive element'

lineage:
  summary: |
    StackBlitz's marketing aesthetic is the in-browser IDE turned into a
    landing page. The canvas is a cool graphite #1c1f25 — a neutral,
    slightly blue-grey near-black that reads as "editor chrome" rather than
    Vercel's pure void or Replit's navy ink — and the single brand colour
    is an electric, software-honest blue #1574ef (rgb 21,116,239) that does
    every piece of action work, from the flagship `Try Bolt.new` CTA to
    links and focus rings. That same blue is the through-line to Bolt.new,
    the AI app-builder StackBlitz shipped on top of its WebContainer
    technology, so the marketing colour and the product colour are one and
    the same. The type system pairs Manrope — a rounded-geometric grotesque
    — for display, hitting a towering 94px at weight 600 on the hero, with
    Inter for body and UI at a comfortable 16px / 1.6. There is no custom
    foundry typeface and no serif; the identity is geometric-sans display
    over neutral-sans body. The defining visual move is the live editor:
    StackBlitz pioneered the in-browser dev environment (WebContainers run
    Node.js entirely client-side), so the hero shows a real, booting editor
    + preview rather than a static screenshot. The secondary chromatic
    energy comes from AI-feature contexts — a violet #8b5cf6 and a cyan
    #22d3ee appear in Bolt and AI moments — but the action layer stays
    blue, always.
  influences:
    - name: Bolt.new
      role: StackBlitz's own AI app-builder — shares the electric blue and supplies the marketing's flagship CTA
      url: https://bolt.new
    - name: WebContainers
      role: The client-side Node.js runtime that makes the live in-browser editor possible — the technical reason the hero can boot a real environment
      url: https://webcontainers.io
    - name: Inter
      role: The neutral UI/body typeface — workhorse for running text and interface labels
      url: https://rsms.me/inter
    - name: Manrope
      role: The rounded-geometric grotesque used for display headlines — gives the hero its confident, modern character
      url: https://manropefont.com
    - name: Vercel
      role: Dark-mode marketing discipline — flat near-black canvas, single saturated brand accent, generous product real estate
      url: https://vercel.com
    - name: Replit
      role: Sibling cloud-IDE — shared "editor-as-marketing" visual heritage, dark canvas with one saturated action colour
      url: https://replit.com

dark-mode: native   # StackBlitz marketing is dark-first; the editor product has its own theming
---

## 1. Visual Theme & Atmosphere

StackBlitz's marketing site treats the editor itself as the brand. The canvas is a cool graphite `#1c1f25` — a neutral, faintly blue-grey near-black that reads like the chrome of a code editor rather than a void. On top of it sits a single electric blue `#1574ef` (rgb 21, 116, 239) that carries every piece of action: the flagship `Try Bolt.new` CTA, links, focus rings, and active states. The page reads as *you are looking at the product* — the hero boots a real in-browser environment, not a static mock, because StackBlitz's whole pitch is that the IDE runs in your tab.

The atmosphere is confident and software-honest. Where Vercel's dark mode is monastic pure-black with a white type wall, and Replit pushes a near-neon saturated cyan on navy ink, StackBlitz sits between them: a neutral graphite ground with a true product blue. The blue is bright enough to be the unmistakable focal point but never reads as decorative neon — it is the colour of a "primary" button in actual software, and that honesty is the point. The cool slate tint in the secondary `Sign in` button (`rgba(49,61,94,0.24)`) keeps the whole top bar in the same blue-grey temperature family.

The type system pairs Manrope for display with Inter for body. Manrope is a rounded-geometric grotesque, and StackBlitz pushes it hard: the hero headline lands at a towering **94px at weight 600**, line-height 1.0, with a tight `-0.03em` tracking that makes the wall of type feel architectural and assured. Body and interface text are Inter at 16px on a generous 1.6 line-height — neutral, legible, and quiet enough to let the headline and the blue do the talking. There is no serif anywhere and no custom foundry face; the identity is geometric-sans display over neutral-sans body.

Depth is achieved through a surface ladder rather than heavy shadow. The `#15181d` → `#1c1f25` → `#24272e` → `#2c3038` graphite ladder lets cards and panels lift via a background-step plus a faint white hairline (`rgba(255,255,255,0.08)`, `rgba(255,255,255,0.14)`). Real shadows appear only beneath the floating editor frame, lifting the "app" off the page. The one chromatic depth cue is a soft blue glow on the primary CTA hover — used sparingly so it always lands.

The cadence is product-forward and brisk. The brand's own tagline — *"Click. Code. Done."* — sets the rhythm: short, imperative, no marketing throat-clearing. The site assumes the reader is a developer who wants to see the thing run, so it shows the thing running.

**Key Characteristics:**
- Cool graphite `#1c1f25` canvas — a neutral blue-grey near-black, editor-chrome coloured, not pure void or navy ink
- Single electric blue `#1574ef` (rgb 21,116,239) brand — white text on it, 10px radius — owns the entire action layer
- The brand blue is shared with Bolt.new — marketing colour and product colour are identical
- Manrope display + Inter body — geometric-sans headlines over neutral-sans interface text, no serif
- Towering hero headline: Manrope 94px / 600 / `-0.03em` tracking, line-height 1.0
- Live in-browser editor as hero — WebContainers boot a real environment, not a static screenshot
- Tinted-slate secondary button (`rgba(49,61,94,0.24)`) keeps the top bar in one cool temperature
- Surface-ladder depth instead of shadow — flat-on-flat cards with faint white hairlines
- AI/Bolt accents (violet `#8b5cf6`, cyan `#22d3ee`) appear in feature contexts but never on the main CTA
- Brisk imperative voice — *"Click. Code. Done."*

## 2. Color Palette & Roles

### Primary

- **Bg / Graphite** (`#1c1f25`): the StackBlitz canvas. Cool blue-grey near-black — editor-chrome coloured, intentionally not `#000000`.
- **Brand / Electric Blue** (`#1574ef`): signature product blue (rgb 21,116,239) — does all action work. Always paired with white text on it.
- **Text Strong** (`#ffffff`): display headings and primary type at full white.
- **Text Body** (`#e4e7ec`): running body copy, near-white with a cool cast for slightly softer reading.

### Brand & Dark

- **Bg Deep** (`#15181d`): deeper nested surface — editor frame interior, code blocks beneath the canvas.
- **Bg Darker** (`#101216`): the deepest layer, used rarely for inset terminal/output panels.
- **Surface** (`#24272e`): card and panel base — the workhorse elevated surface.
- **Surface High** (`#2c3038`): hover and elevated panels.
- **Surface Low** (`#1f2127`): subtle stripe, input fill, nested element.
- **Surface Elev** (`#363b45`): selected or pressed panel state.

### Accent

- **Bolt Blue** (`#1574ef`): the action colour is the accent — there is no competing primary accent on the action layer.
- **Purple** (`#8b5cf6`): AI / Bolt feature highlight — gradients and AI-context illustration.
- **Cyan** (`#22d3ee`): tertiary highlight paired with purple in AI/WebContainer moments.

### Interactive

- **Brand** (`#1574ef`): primary CTA, link, active state.
- **Brand Hover** (`#2b80f0`): lighter blue on hover.
- **Brand Deep** (`#0f5fcc`): pressed state.
- **Brand Soft** (`rgba(21,116,239,0.16)`): blue-tinted background for highlighted regions and info banners.
- **Sign-in Fill** (`rgba(49,61,94,0.24)`): cool slate wash for the secondary button — the live `Sign in` style.

### Neutral Scale

- **Strong** (`#ffffff`): display text, primary headings.
- **Body** (`#e4e7ec`): primary running text.
- **Muted** (`#9ba3b4`): secondary copy and metadata.
- **Soft** (`#7d8694`): caption / placeholder.
- **Faint** (`#565d6b`): disabled labels.

### Surface & Borders

- **Border** (`rgba(255,255,255,0.08)`): 8% white hairline — the default rule.
- **Border Strong** (`rgba(255,255,255,0.14)`): 14% white for elevated panels, inputs, and outlined buttons.
- **Border Soft** (`rgba(255,255,255,0.04)`): subtle inset divider.
- **Border Brand** (`rgba(21,116,239,0.45)`): blue-tinted border for focused or selected interactive elements.

### Shadow Colors

- **Shadow Deep** (`rgba(0,0,0,0.45)`): primary depth beneath the floating editor frame.
- **Shadow Soft** (`rgba(0,0,0,0.25)`): subtle lift beneath cards and panels.
- **Shadow Glow Blue** (`rgba(21,116,239,0.28)`): on-hover glow around the primary CTA.

### Semantic

- **Success** background `rgba(52,211,153,0.15)`, text `#34d399`, border `rgba(52,211,153,0.3)`.
- **Warning** background `rgba(251,191,36,0.15)`, text `#fbbf24`, border `rgba(251,191,36,0.3)`.
- **Danger** background `rgba(248,113,113,0.15)`, text `#f87171`, border `rgba(248,113,113,0.3)`.
- **Info** uses the brand blue: background `rgba(21,116,239,0.16)`, text `#1574ef`, border `rgba(21,116,239,0.3)`.

## 3. Typography Rules

### Font Family

- **Display sans**: Manrope — a rounded-geometric grotesque, used for all headings and the towering hero.
- **Display fallback chain**: `Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`.
- **Body sans**: Inter — the neutral UI/body workhorse for running text, nav, labels, and buttons.
- **Body fallback chain**: `Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`.
- **Mono companion**: system UI monospace — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`. Used inside the editor frame and for code samples; StackBlitz does not ship a custom mono on the marketing surface.
- **OpenType features** — standard ligatures and kerning; no `ss01`-style discipline. The character comes from Manrope's geometry, not from feature tuning.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Manrope | 94 | 600 | 1.0 | -0.03em | Live hero headline — the towering wall of type |
| Display Large | Manrope | 64 | 700 | 1.04 | -0.025em | Secondary flagship statement |
| H1 | Manrope | 48 | 700 | 1.08 | -0.02em | Standard page headline |
| H2 | Manrope | 36 | 600 | 1.15 | -0.015em | Section heading |
| H3 | Manrope | 28 | 600 | 1.22 | -0.01em | Sub-section |
| H4 | Manrope | 22 | 600 | 1.30 | -0.005em | Card title |
| H5 | Manrope | 18 | 600 | 1.35 | 0 | Inline emphasis heading |
| Body Large | Inter | 18 | 400 | 1.60 | 0 | Lead paragraph |
| Body | Inter | 16 | 400 | 1.60 | 0 | Standard reading text |
| Body Small | Inter | 14 | 400 | 1.50 | 0 | Captions, footer |
| Button | Inter | 15 | 600 | 1.20 | 0 | Primary button label |
| Button Small | Inter | 13 | 600 | 1.20 | 0 | Compact buttons |
| Nav | Inter | 14 | 500 | 1.20 | 0 | Top-nav links |
| Caption | Inter | 13 | 400 | 1.45 | 0 | Helper text, image captions |
| Label | Inter | 12 | 600 | 1.30 | 0.04em | Status labels, eyebrows |
| Label Uppercase | Inter | 11 | 600 | 1.30 | 0.08em | "NEW", "BETA", "AI" tags |
| Code | mono | 14 | 400 | 1.55 | 0 | Code blocks, editor content |
| Code Small | mono | 12 | 400 | 1.50 | 0 | Inline code in body |
| Micro | mono | 11 | 500 | 1.40 | 0.02em | File path, metadata |

### Principles

- **Manrope is the display voice, Inter the body voice** — a deliberate two-family split. Manrope's rounded-geometric character carries the headlines; Inter stays neutral so it never competes.
- **The hero goes big and tight** — 94px at weight 600 with line-height 1.0 and `-0.03em` tracking. The size is the statement; the weight stays at 600, not 800, so it reads confident rather than shouty.
- **Tracking tightens with size** — `-0.03em` at 94px, `-0.02em` at 48px, normal at body sizes. Display feels architectural; body feels neutral.
- **Body breathes** — Inter at 16px on a generous 1.6 line-height. Reading comfort is prioritised over density in running copy.
- **No serif anywhere** — the identity is geometric-sans display + neutral-sans body. A serif would break the software-honest feel.
- **Mono is editor-scoped** — monospace appears only inside the editor frame and code samples, not in UI chrome.
- **Weight discipline** — display uses 600/700; body uses 400 (text), 500 (nav), 600 (buttons/labels). Labels and eyebrows go to 600 with positive tracking.

## 4. Component Stylings

### Buttons

**Primary — Electric Blue**
- Background: `#1574ef`
- Text: `#ffffff`
- Padding: `11px 18px`
- Radius: `10px`
- Font: 15px Inter weight 600
- Hover: background → `#2b80f0`; optional blue glow `0 0 24px rgba(21,116,239,0.28)`
- Active: background → `#0f5fcc`
- Use: primary CTA — `Try Bolt.new`, `Start building`, `Open editor`

**Secondary — Tinted Slate (Sign in)**
- Background: `rgba(49,61,94,0.24)` — cool slate wash
- Text: `rgba(255,255,255,0.8)`
- Border: none
- Padding: `11px 18px`
- Radius: `8px`
- Font: 15px Inter weight 600
- Hover: background → `rgba(49,61,94,0.4)`, text → `#ffffff`
- Use: secondary action paired with the blue primary — the live `Sign in` button

**Outlined Ghost**
- Background: transparent
- Text: `#ffffff`
- Border: `1px solid rgba(255,255,255,0.14)`
- Padding: `11px 18px`
- Radius: `8px`
- Hover: background → `rgba(255,255,255,0.06)`, border → `rgba(255,255,255,0.24)`
- Use: tertiary outlined action on the graphite canvas

**Text / Inline**
- Background: transparent
- Text: `#1574ef`
- No border
- Padding: `8px 12px`
- Hover: colour → `#2b80f0`
- Use: inline link-button, often with a trailing arrow `→`

**Disabled**
- Background: `rgba(255,255,255,0.06)`
- Text: `#565d6b`
- Border: `1px solid rgba(255,255,255,0.08)`
- No hover

### Cards & Containers

**Feature Card**
- Background: `#24272e`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: `12px`
- Padding: `24px`
- Shadow: none (flat-on-flat)
- Hover: surface → `#2c3038`, border → `rgba(255,255,255,0.14)`, optional `translate-Y(-2px)`

**Editor Frame (live in-browser hero)**
- Background: `#15181d`
- Border: `1px solid rgba(255,255,255,0.14)`
- Radius: `12px`
- Chrome: window dots at top-left, tab strip with the current file label
- Inside: a real editor pane (mono code) beside a live preview pane — StackBlitz boots a WebContainer rather than showing a static image
- Shadow: `0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)` to lift the "app" off the page
- Use: anchors the hero and feature sections

**Preview / Output Pane**
- Background: `#101216`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: `8px`
- Inside: live app render or terminal output; blue accents on highlighted actions

### Badges, Tags, Pills

**Status Badge**
- Background: `rgba(255,255,255,0.08)`
- Text: `#ffffff`
- Border: none
- Radius: `9999px`
- Padding: `4px 10px`
- Font: Inter 12px / 600 / `0.04em`
- Indicator: 6px coloured dot before label — blue (NEW), purple (AI), cyan (Beta)

**Mono Tag**
- Background: `rgba(255,255,255,0.06)`
- Text: `#9ba3b4`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: `4px`
- Padding: `2px 8px`
- Font: mono 11px / 500 / `0.08em` uppercase

### Inputs & Forms

- Background: `#1f2127`
- Border: `1px solid rgba(255,255,255,0.14)`
- Radius: `8px`
- Padding: `10px 14px`
- Font: Inter 15px / 400 / `#ffffff`
- Placeholder: `#7d8694`
- Focus: border → `#1574ef`, ring `2px rgba(21,116,239,0.35)`
- Label: Inter 13px / 500 / `#9ba3b4`
- Helper: Inter 12px / 400 / `#9ba3b4`
- Error: border → `#f87171`, helper → `#f87171`

### Navigation

- Background: `rgba(28,31,37,0.8)` — graphite with `backdrop-blur` once the page scrolls
- Border-bottom: `1px solid rgba(255,255,255,0.06)`
- Logo: white wordmark on the left
- Links: Inter 14px / 500 / `#e4e7ec`, hover → `#ffffff`
- CTA cluster: tinted-slate `Sign in` then blue `Try Bolt.new`, right-pinned
- Mobile: hamburger toggle, full-screen drawer on click

### Decorative Elements

- **Blue glow** — `0 0 24px rgba(21,116,239,0.28)` around the primary CTA on hover
- **Surface-ladder bands** — alternating `#1c1f25` and `#15181d` strips for section rhythm
- **Live editor frame** — the strongest visual asset; a booting environment used as illustration in the hero and key feature sections

## 5. Layout Principles

### Spacing System

- Base unit: `4px`
- Scale: `0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128`
- Density observation: medium-dense by marketing standards. StackBlitz packs product detail per scroll but lets running copy breathe at 1.6 line-height. The `4px` base allows fine UI tuning while sections keep a `96px` vertical rhythm.

### Grid & Container

- Max content width: `1280px` with `24px` gutters
- Hero bands give the live editor frame the dominant share of horizontal space
- Feature grids are typically three-column with `#24272e` cards
- Code/editor blocks may break out to wider widths, sometimes near full-bleed
- Vertical rhythm runs `96–128px` between sections

### Whitespace Philosophy

- **Product-forward, not airy** — the editor frame and feature grids earn their space; whitespace frames the product rather than dominating.
- **Editor-pane proportions** — section widths echo IDE pane geometry (editor + preview split) rather than golden-ratio editorial.
- **Reading comfort preserved** — despite the product density, body copy stays at 16px / 1.6 and caps reading width around 720px.

### Section Cadence

- Hero (live editor on `#1c1f25`) → feature grid (3-column on `#1c1f25`) → product-demo band (often `#15181d` for contrast) → logo wall / testimonial → pricing → CTA → footer
- No light-section breaks — the canvas stays graphite-dark throughout
- Surface-ladder swaps (`#1c1f25` ↔ `#15181d`) provide rhythm without breaking the dark discipline

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Inline highlights, fine corners |
| Standard | 4px | Mono tags, status dots, small chips |
| Comfortable | 8px | Inputs, ghost/secondary buttons, preview panes |
| Relaxed | 10px | Primary CTA — the live `Try Bolt.new` radius |
| Large | 12px | Cards, editor frames |
| Featured | 16px | Hero cards, modal frames |
| Pill | 9999px | Status badges, avatars only |

The radii ladder is `4 / 8 / 10 / 12 / 16`. The notable token is the **10px primary button** — slightly softer than the 8px used on secondary and ghost buttons, giving the blue CTA a touch more presence. Cards and the editor frame land at `12px`. There are no fully-rounded CTAs; the shape vocabulary stays rectangular-with-soft-corners, like real software. Pills (`9999`) appear on tags and badges only.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No shadow, surface ladder | Page canvas, body cards |
| 1 — Hairline | `1px solid rgba(255,255,255,0.08)` | Default card and panel separation |
| 2 — Surface Lift | Surface bg → next ladder rung + `1px solid rgba(255,255,255,0.14)` | Hover and elevated panels |
| 3 — Soft Shadow | `0 4px 12px rgba(0,0,0,0.25)` plus hairline | Cards and panels lifted off canvas |
| 4 — Elevated | `0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)` | The live editor frame, modals |
| 5 — Blue Glow | `0 0 24px rgba(21,116,239,0.28)` | Primary CTA hover state |
| 6 — Ring | `2px solid #1574ef` at `2px` offset | Keyboard focus |

**Shadow Philosophy** — depth comes from the surface ladder (`#101216` → `#15181d` → `#1c1f25` → `#24272e` → `#2c3038`) and faint white hairlines (`rgba(255,255,255,0.08)`, `rgba(255,255,255,0.14)`). Real shadows are reserved for one job: lifting the live editor frame off the page so the "app" feels like it is floating in front of the marketing. Cards themselves are flat-on-flat. The blue glow is the single chromatic depth cue and appears only on the primary CTA hover.

## 8. Interaction & Motion

### Easing Curves

- **Standard** `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover and state changes
- **Emphasized** `cubic-bezier(0.2, 0, 0, 1)` — hero entrance, glow expansion
- **Snappy** `cubic-bezier(0.16, 1, 0.3, 1)` — quick, slight overshoot for software-like state changes

### Duration Buckets

- Fast: `150ms` — colour swaps, ring fades
- Standard: `240ms` — button hover, card lift, dropdown open
- Slow: `320ms` — hero reveals, editor-frame boot reveal

### Per-Component Micro-States

- **Button hover (primary)** — background `#1574ef` → `#2b80f0` over 150ms; blue glow expands to `0 0 24px rgba(21,116,239,0.28)` over 240ms.
- **Button hover (secondary)** — slate fill `rgba(49,61,94,0.24)` → `rgba(49,61,94,0.4)`, text `rgba(255,255,255,0.8)` → `#ffffff` over 150ms.
- **Card hover** — background → next surface-ladder rung, border → `rgba(255,255,255,0.14)`, optional `translate-Y(-2px)` over 240ms standard ease.
- **Link hover** — colour `#e4e7ec` → `#ffffff` (nav) or `#1574ef` → `#2b80f0` (inline) over 150ms.
- **Input focus** — border → `#1574ef` plus 2px blue ring `rgba(21,116,239,0.35)` over 150ms.
- **Editor frame entrance** — opacity 0→1 plus `translate-Y(16px)` over 320ms emphasized, triggered by Intersection Observer; the live boot animates the preview pane filling in.

### Page Transitions

- No client-side page transitions on marketing. Standard browser navigation. Hero and feature modules animate in over 320ms once in viewport.

### Reduced Motion Strategy

- `@media (prefers-reduced-motion: reduce)` — opacity-only fades at 150ms linear. Translate, glow pulse, and the editor boot-loop are removed entirely; a static editor + preview render is shown instead.

## 9. Accessibility & A11y

### Contrast Pairs

- `#ffffff` text on `#1c1f25` bg — **16.5:1** (AAA)
- `#e4e7ec` body on `#1c1f25` bg — **14.3:1** (AAA)
- `#9ba3b4` muted on `#1c1f25` bg — **6.5:1** (AA at body sizes)
- `#7d8694` soft on `#1c1f25` bg — **4.5:1** (AA at body sizes)
- `#ffffff` text on `#24272e` surface — **15.0:1** (AAA)
- `#ffffff` text on `#1574ef` brand — **4.4:1** (AA for large text / UI; bold the label at small sizes)
- `#1574ef` brand on `#1c1f25` bg — **3.75:1** (passes 3:1 for UI components and large text)
- `#34d399` success on `#1c1f25` bg — **8.6:1** (AAA)
- `#fbbf24` warning on `#1c1f25` bg — **9.9:1** (AAA)
- `#f87171` danger on `#1c1f25` bg — **6.0:1** (AA)

### Focus Indicators

- Default focus ring: `2px solid #1574ef` at `2px` offset
- On the blue CTA: ring becomes `2px solid #ffffff` for contrast against the blue
- Form inputs use a 2px blue ring inset

### ARIA Patterns

- **Dialog** — `role="dialog"` `aria-modal="true"` with focus trap and `aria-labelledby` pointing to the title
- **Tablist** — `role="tablist"` for the editor frame's tab strip and any file tabs
- **Menu** — `role="menu"` / `menuitem` for nav dropdowns with arrow-key navigation
- **Region** — code/editor blocks marked `<pre><code>` inside `role="region"` with `aria-label="Code example"`
- **Status** — `aria-live="polite"` on the live boot/preview so screen readers are told when the environment is ready

### Keyboard Navigation

- Tab order follows DOM source order
- Skip-to-content link in header (visible on focus only)
- All interactive elements reachable via Tab
- `Esc` closes dropdowns and modals
- Arrow keys move between tabs in the editor-frame tablist

### Screen Reader Hints

- Decorative blue glow and dots `aria-hidden="true"`
- The live editor frame labelled with `aria-label="Live in-browser editor preview"` plus a visible caption
- "NEW" / "BETA" / "AI" badges read aloud as "New feature", "Beta feature", "AI feature"
- The boot/preview state announces "Environment ready" via the polite live region

### Reduced Motion

- Honoured — the editor boot loop and glow pulse are stripped to static. The blue focus ring still appears on focus but does not animate in.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, editor frame stacks editor-over-preview, hero 94→44px |
| Tablet | 640–1024px | 2-column grids, editor frame full-width, hero 94→64px |
| Desktop | 1024–1280px | 3-column feature grids, editor + preview split side by side |
| Wide | ≥1280px | Centred 1280px container with generous margins |

### Touch Targets

- Buttons at `11px 18px` give a comfortable `44px+` tap height
- Nav links and the `Sign in` / `Try Bolt.new` cluster use `44×44px` minimum tap area on mobile
- Status badges grow from `4px 10px` to `6px 12px` on touch devices

### Collapsing Strategy

- Hero: `94px` → `64px` → `44px` across desktop → tablet → mobile
- Body: `16px` holds; lead drops `18px` → `16px` on mobile
- Editor frame: side-by-side editor + preview → stacked editor-over-preview, each pane may scroll internally
- Feature cards: 3-column → 2-column → single column stacked
- Section spacing: `96–128px` → `64px` on mobile
- Nav: horizontal links + CTA cluster → hamburger drawer

### Image Behavior

- Live editor frame maintains `12px` radius and chrome at all sizes
- Blue glow simplifies on mobile (single layer instead of layered glow)
- Logo grids reduce to 2 columns on mobile

### Container Queries

- The editor frame uses container queries to switch from a horizontal split-pane (editor | preview) to a stacked tab layout when its container drops below `560px`.

## 11. Content & Voice

### Tone

Builder-direct, brisk, and product-confident. The brand's own line — *"Click. Code. Done."* — is the whole tone in three words: imperative, no throat-clearing, assumes the reader codes. StackBlitz never explains what an IDE is; it shows one booting. Body copy is technical but plain, naming real frameworks (Next.js, Vite, Node.js) and real capabilities (instant boot, no install) rather than abstractions.

### Microcopy Patterns

- **Button verbs** — `Try Bolt.new`, `Start building`, `Open editor`, `Sign in`. Never `Get started today`, never `Click here`.
- **Error message recipe** — direct and technical: `Install failed: missing dependency. Check your package.json.`
- **Success confirmations** — terse: `Deployed.`, `Saved.`, `Environment ready.`
- **Status labels** — short caps: `NEW`, `BETA`, `AI`.

### Empty States

- Direct and instructive: `No projects yet. Start from a template.`
- Always paired with a primary CTA `Browse templates` and a secondary `New blank project`.
- No mascots, no apologetic copy.

### CTA Verb Conventions

- Primary: `Try Bolt.new`, `Start building`, `Open editor`, `Sign up`
- Secondary: `Sign in`, `See how it works`, `Read the docs`
- Tertiary: `Learn more →`, `View pricing →`

## 12. Dark Mode & Theming

**StackBlitz's marketing is dark-first.** The canvas is the graphite `#1c1f25` from header to footer; there is no light-mode marketing surface. (The editor product has its own theming, independent of the marketing site.)

If a downstream implementation needs a light variant, the recommended swap is:
- `bg` `#1c1f25` → `#ffffff`
- `bg-deep` `#15181d` → `#f8fafc`
- `surface` `#24272e` → `#f1f5f9`
- `text` `#ffffff` → `#15181d`
- `text-muted` `#9ba3b4` → `#64748b`
- `border` `rgba(255,255,255,0.08)` → `rgba(21,25,29,0.1)` (10% graphite)
- `brand` `#1574ef` stays — the colour is brand-locked. On a light canvas the blue still reads strongly; keep white text on the blue CTA.

The colour-locked brand blue means the `Try Bolt.new` CTA looks identical in light and dark — a deliberate continuity signal that ties the marketing to the product (and to Bolt.new).

## 13. Lineage & Influences

StackBlitz's marketing aesthetic is the in-browser IDE turned into a landing page. The canvas is a cool graphite `#1c1f25` — a neutral, slightly blue-grey near-black that reads as editor chrome rather than Vercel's pure void or Replit's navy ink — and the single brand colour is an electric, software-honest blue `#1574ef` (rgb 21, 116, 239) that does every piece of action work, from the flagship `Try Bolt.new` CTA to links and focus rings. That same blue is the through-line to Bolt.new, the AI app-builder StackBlitz shipped on top of its WebContainer technology, so the marketing colour and the product colour are one and the same.

The type system pairs Manrope — a rounded-geometric grotesque — for display, hitting a towering 94px at weight 600 on the hero, with Inter for body and UI at a comfortable 16px / 1.6. There is no custom foundry typeface and no serif; the identity is geometric-sans display over neutral-sans body. The defining visual move is the live editor: StackBlitz pioneered the in-browser dev environment, and WebContainers run Node.js entirely client-side, so the hero shows a real, booting editor + preview rather than a static screenshot. The lineage runs through Vercel's dark-mode marketing discipline and the sibling cloud-IDE Replit's "editor-as-marketing" heritage — but StackBlitz's distinguishing claim is that the editor is *actually running in your tab*, which the marketing demonstrates rather than illustrates.

The brand explicitly rejects: gradient-heavy backgrounds, illustrated mascots, soft pastel palettes, pill-shaped CTAs, serif type anywhere, neon-decorative accents that compete with the action blue, and any visual move that would read as "consumer SaaS" rather than "developer tool." Secondary chromatic energy (violet `#8b5cf6`, cyan `#22d3ee`) appears in AI/Bolt feature contexts but never on the main CTA — the blue owns the action layer, always.

**Named influences:**
- Bolt.new — StackBlitz's own AI app-builder; shares the electric blue and supplies the flagship CTA
- WebContainers — the client-side Node.js runtime that makes the live in-browser editor possible
- Inter — the neutral UI/body typeface
- Manrope — the rounded-geometric grotesque used for display headlines
- Vercel — dark-mode marketing discipline, single saturated brand accent
- Replit — sibling cloud-IDE, shared editor-as-marketing visual heritage

## 14. Do's and Don'ts

### Do

- Use the electric blue `#1574ef` for every action — CTA, link, focus ring. It owns the action layer.
- Put white text on the blue CTA and give it a 10px radius — that's the live `Try Bolt.new` shape.
- Keep the canvas at graphite `#1c1f25` — a cool blue-grey near-black, not pure black, not navy.
- Use Manrope for headlines and Inter for body — the two-family split is the system.
- Go big and tight on the hero — Manrope ~94px / 600 / `-0.03em`, line-height 1.0.
- Show a live or live-looking editor + preview in the hero — running the product is the whole pitch.
- Use the tinted-slate fill (`rgba(49,61,94,0.24)`) for the secondary `Sign in` button — keep the top bar one cool temperature.
- Build depth from the surface ladder (`#15181d` / `#1c1f25` / `#24272e` / `#2c3038`) plus faint white hairlines.
- Reserve real shadows for lifting the editor frame off the page; keep cards flat.
- Apply the blue glow only to the primary CTA hover — its scarcity is what makes it land.
- Let body copy breathe at 16px / 1.6 even within a product-dense layout.

### Don't

- Don't put the AI accents (violet / cyan) on the main CTA — the blue is the only action colour.
- Don't drift to pure black `#000000` or to navy ink — StackBlitz's graphite is intentionally neutral blue-grey.
- Don't use a serif anywhere — Manrope + Inter is the entire type system.
- Don't pill-shape the primary CTA — it's a 10px rounded rectangle, like real software.
- Don't lift cards with shadows; depth is the surface ladder plus a hairline.
- Don't apply gradients to backgrounds — flat graphite is the canvas.
- Don't shrink the hero — the towering 94px Manrope is the brand's confidence.
- Don't spread the blue glow across every hover; reserve it for the primary CTA.
- Don't use a heavy display weight (800) for the hero — 600 is confident, not shouty.
- Don't substitute a generic mid-blue — the exact `#1574ef` (rgb 21,116,239) ties the marketing to Bolt.new.
- Don't show a static screenshot when a live editor is the point — demonstrate the boot.

## 15. Agent Prompt Guide

### Quick Color Reference

- Canvas: Graphite `#1c1f25`
- Surface: `#24272e` (card), `#2c3038` (hover), `#15181d` (deeper / editor interior)
- Text: `#ffffff` strong, `#e4e7ec` body, `#9ba3b4` muted
- Brand: Electric Blue `#1574ef` (rgb 21,116,239) — white text on it, 10px radius
- Brand Hover: `#2b80f0`
- Secondary fill (Sign in): `rgba(49,61,94,0.24)` with `rgba(255,255,255,0.8)` text
- Accent Purple (AI): `#8b5cf6`
- Accent Cyan (AI/Beta): `#22d3ee`
- Border: `rgba(255,255,255,0.08)` (8% white), `rgba(255,255,255,0.14)` (14% white)
- Success: `#34d399`

### Example Component Prompts

- "Create a hero section on `#1c1f25` graphite background. Headline at 94px Manrope weight 600, line-height 1.0, letter-spacing -0.03em, colour `#ffffff`. Subtitle at 18px Inter weight 400, line-height 1.6, colour `#e4e7ec`. Primary CTA `Try Bolt.new`: `#1574ef` background, `#ffffff` text, 10px radius, 11px 18px padding, 15px Inter weight 600. Secondary `Sign in`: `rgba(49,61,94,0.24)` fill, `rgba(255,255,255,0.8)` text, no border, 8px radius."
- "Design a live editor frame hero: `#15181d` background, 12px radius, 1px solid `rgba(255,255,255,0.14)` border. Top chrome with three window dots top-left and a tab strip showing the file name in mono 12px. Inside, a split pane: a code editor (mono 14px) on the left and a live preview render on the right. Drop shadow `0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)` to float it off the page."
- "Build a status badge: `rgba(255,255,255,0.08)` background, `#ffffff` text, 9999px radius, 4px 10px padding, Inter 12px / 600 / 0.04em. Blue dot indicator (`#1574ef`, 6px) for NEW; purple (`#8b5cf6`) for AI; cyan (`#22d3ee`) for BETA."
- "Create navigation: `rgba(28,31,37,0.8)` graphite background with backdrop-blur on scroll, 1px bottom border `rgba(255,255,255,0.06)`. White wordmark left, links in Inter 14px / 500 / `#e4e7ec`. Right-pinned cluster: tinted-slate `Sign in` then blue `Try Bolt.new` (`#1574ef` bg, white text, 10px radius)."
- "Design a dense feature card: `#24272e` background, 1px solid `rgba(255,255,255,0.08)` border, 12px radius, 24px padding. Title in Manrope 22px / 600, colour `#ffffff`. Body in Inter 16px / 400 / 1.6, colour `#9ba3b4`. Hover: surface → `#2c3038`, border → `rgba(255,255,255,0.14)`, translate-Y(-2px)."
- "Build a focused input: `#1f2127` background, 1px solid `rgba(255,255,255,0.14)` border, 8px radius, 10px 14px padding, Inter 15px `#ffffff`, placeholder `#7d8694`. On focus: border → `#1574ef` and a 2px blue ring `rgba(21,116,239,0.35)`."

### Iteration Guide

1. If the page reads "consumer SaaS" rather than "developer tool," drop pillowy radii (CTA to 10px, cards to 12px) and add a live-looking editor frame.
2. If the blue looks dull, check the canvas — it must be graphite `#1c1f25` (cool blue-grey), not pure black or navy. The blue reads cleaner against neutral graphite.
3. The exact brand blue is `#1574ef` (rgb 21,116,239) — don't substitute a generic mid-blue; the precise value ties the marketing to Bolt.new.
4. White text on the blue CTA only clears AA at large/UI sizes (4.4:1) — keep the label at weight 600 and don't shrink it below 15px.
5. The hero should be big: Manrope ~94px / 600 / `-0.03em` at line-height 1.0. If it feels timid, the size — not the weight — is what to push.
6. Keep the secondary `Sign in` button as a tinted-slate fill (`rgba(49,61,94,0.24)`), not an outline — it keeps the top bar in one cool temperature with the canvas.
7. Resist shadows for card depth — use the surface ladder (`#15181d` → `#1c1f25` → `#24272e` → `#2c3038`) plus a `rgba(255,255,255,0.08)` hairline. Save real shadow for the editor frame.
8. The blue glow is scarce — apply only to the primary CTA hover. Spreading it across every hover dilutes the cue.