# StackBlitz · Design system migration spec

> Source: https://stackblitz.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a premium developer tool aesthetic, balancing high-impact typography with a focused, distraction-free dark environment.

## 1. Identity DNA

StackBlitz's design system is built on the analogy of a high-performance engine: every component is engineered for speed, focus, and reliability in the browser. The identity is rooted in its core keywords—Developer, Browser, Cloud IDE, Speed, AI—forming a precise, no-nonsense aesthetic for professional tooling.

**One-liner:** StackBlitz is a browser-based cloud IDE that brings lightning-fast, secure development environments to modern web teams.
**Keywords:** Developer · Browser · Cloud IDE · Speed · AI
**Analogy:** A high-performance engine for browser-based development.

## 2. Color

The color system is a deep, high-contrast dark mode designed for extended focus, built on near-black surfaces. A single, vibrant blue accent provides the sole point of interactive emphasis against white text.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0f1014` | main background |
| `--bg-soft` | `#151619` | card background |
| `--bg-quiet` | `#1c1f25` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.8)` | secondary text |
| `--muted` | `#a1a5b0` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.7)` | weak hint |
| `--accent` | `#00a8db` | single accent |
| `--line` | `rgba(255,255,255,0.12)` | divider |

**Color principle:** High-contrast dark UI emphasizing speed and focus, with a single vibrant blue accent.

The principle is strict: one high-chroma accent against a dark void to direct attention without visual noise.

## 3. Typography

The typographic voice is split between humanist-sans warmth and technical precision. Manrope provides dense, high-impact display headings, while Inter handles the clarity of body and UI text.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 94px | 1.0 | 700 | -3px | Primary Hero Heading |
| heading | 40px | 1.2 | 700 | -1px | Section Headings |
| body | 16px | 1.5 | 400 | 0px | Primary Body Text |
| small | 13px | 1.5 | 500 | 0px | UI Elements & Navigation |

**Type rules:**
- Use Manrope for large display typography and Inter for body/UI text.
- Maintain tight letter-spacing for headings to create a dense, high-impact feel.
- Use Roboto Mono for any technical or code-related snippets.

## 4. Spacing

The spacing rhythm creates a clear hierarchy: generous, breathing room separates major sections, while UI components maintain tight internal padding for density.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous spacing between major sections, with tight internal padding for UI components.

## 5. Surfaces

Depth is conveyed through layered shadows and translucent borders on dark surfaces. This creates a subtle, physical hierarchy where elements appear to float or recede.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.32) 0px 4px 8px 0px
  - rgba(255, 255, 255, 0.1) 0px 0px 0px 1px
  - rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset
- **Borders:** 1px solid rgba(255, 255, 255, 0.12)

## 6. Layout

The layout skeleton follows a standard high-end marketing site structure, anchored by full-width dark hero sections. Content is presented in centered columns, with side-by-side grids used for comparisons and feature breakdowns.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A standard high-end marketing site layout with full-width dark hero sections, centered content columns, and side-by-side comparison grids.

## 7. Motion & Interaction

Motion philosophy prioritizes functional feedback over ornament. Transitions are fast and purposeful, using smooth fades for content reveals and elastic snaps for immediate UI state changes.

- **Durations:** micro 100ms · small 1200ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade and slide transitions for content reveals.
  - Elastic/flex transitions for UI state changes.

- **Hover:** Subtle color shifts or opacity changes on interactive elements.
- **Click:** Immediate feedback via state changes.
- **Transition:** Fast, 100ms transitions for color and opacity changes.
- **Keyboard:** Standard focus outlines and logical tab order for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and direct, mirroring the product's focus on developer productivity. It uses bold, benefit-driven headlines and simple, action-oriented calls to action.

- **Tone:** Confident, technical, and direct.
- **Headline style:** Bold, benefit-driven, and often uses large-scale typography to emphasize key words.
- **CTA style:** Simple, action-oriented labels like 'Try Bolt.new'.
- **Avoid:** Vague marketing jargon / Overly complex technical explanations without clear benefit / Passive language

### Don'ts
- ❌ Don't use a white background — screenshot shows a dark, near-black primary background.
- ❌ Don't use serif fonts — screenshot shows clean, modern sans-serif typography.
- ❌ Don't use multiple competing accent colors — screenshot shows a single dominant blue accent.
- ❌ Don't use large border-radius for primary buttons — screenshot shows rectangular or slightly rounded buttons.
- ❌ Don't use thin, light-colored outlines for focus states — screenshot uses high-contrast white or blue borders.
- ❌ Don't use overly complex gradients — screenshot uses subtle, dark-to-darker gradients or solid dark surfaces.

The system deliberately avoids passive language, vague marketing jargon, and any visual element that breaks the calm, focused dark environment.

## System Prompt (paste into AI tool)

```
This is StackBlitz, a high-performance browser-based cloud IDE for developers. The design is a premium dark-mode aesthetic, positioning the product as fast, modern, and professional. Key colors are a very dark gray/black background (#0f1014, #151619), crisp white text (#ffffff, rgba(255,255,255,0.8)), and a vibrant, high-chroma blue accent (#00a8db). Typography uses humanist-sans categories (Inter, Manrope) with a very large, tight-tracked display scale. Critical donts: Never use a light theme; avoid thin, decorative fonts; and never use more than one vibrant accent color. The overall feel is calm, focused, and built for productivity.
```