StackBlitz — design system & UI screens
Dark hero with mono-highlighted keywords for Bolt.new — text into working web apps in the browser.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/stackblitz.
Decoded design system
StackBlitz's decoded design system: background #1C1F25, text #A1A5B0, accent #1574EF, link #1574EF, primary #A1A5B0; type scale h1 94px / h2 94px / body 18px; 4px spacing base; 8px base radius. The single interactive/action color is #1574EF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #1C1F25 |
| surface | #23272D |
| border | #2F3339 |
| text | #A1A5B0 |
| text_muted | #6E727B |
| primary | #A1A5B0 |
| accent | #1574EF |
| link | #1574EF |
| secondary | #212633 |
| button_bg | #1574EF |
| button_text | #FFFFFF |
Using these colors
- Action color
#1574EF— the single interactive color; only on things you click or must notice, never large fills. accent,link,button_bgare all#1574EF— one role, not several (the action color).- accent
#1574EF— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#A1A5B0— ≈ the text color — a foreground/text color, not an action color (action = #1574EF). - secondary
#212633— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Manrope
- Body: Inter
- Mono: PT Mono
- h1: 94px
- h2: 94px
- body: 18px
Spacing
- base unit: 4px
- scale: 8px, 16px, 18px, 20px, 24px, 26px, 28px, 32px, 36px, 52px
Radii
- base: 8px
- button: 10px
Shadow
rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset
Shadows (elevation)
- subtle:
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px - card:
rgba(255, 255, 255, 0.1) 0px 1px 0px 0px
Motion
Micro-interactions run at 100ms (dominant) with ease.
- durations: 100ms · 1200ms · 160ms
- easings:
ease - animated properties: color, background-color, opacity, height
Native design tokens
| Token | Value |
|---|---|
--sb-foreground-alt | hsl(0 0% 62%) |
--sb-foreground-active | hsl(0 0% 94%) |
--public-blue-text-10 | #69f5ff |
--public-blue-text-20 | #4cedff |
--public-blue-text-50 | #00A8DB |
--public-blue-text-60 | #00aeda |
--public-blue-text-neutral | #1b82bc |
--public-blue-text-bright-light | #96f8ff |
--public-blue-text-bright-dark | #00a3cc |
--public-blue-text-secondary | #69b6dd |
…and 110 more measured on the page.
Button states (measured)
- primary hover: box-shadow
rgba(255, 255, 255, 0.24) 0px 0px 0px 1px inset· background#0F8FFF
Layout (measured)
- nav: 72px sticky
- common grid: 2 columns
Motion choreography (measured)
Load order: div._mockEditor__file_explor → div._mockEditor__codeTermina → div._mockEditor__codeConsole
Scroll reveal: 5 elements rest at translateY(2px), animate in over 0.8s ease.
Responsive (measured)
- breakpoints: 500px · 640px · 860px · 1024px · 1280px
- mobile (390px): hero 34px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →