CURATED · OPEN · FREE

StackBlitz

StackBlitz is a browser-based cloud IDE that brings lightning-fast, secure development environments to modern web teams.

devtool

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://stackblitz.com

📦 Browse pack contents →

Identity DNA

DeveloperBrowserCloud IDESpeedAI

A high-performance engine for browser-based development.

Color

#00a8dbAccent

#ffffffInk

rgba(255,255,255,0.8)Ink soft

#0f1014BG

#151619BG soft

#1c1f25BG quiet

#a1a5b0Muted

rgba(255,255,255,0.12)Line

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

Typography

humanist-sans · monospace

display94px · 700
heading40px · 700
body16px · 400
small13px · 500

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous spacing between major sections, with tight internal padding for UI components.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

1px solid rgba(255, 255, 255, 0.12)

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

100msmicro

1200mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth fade and slide transitions for content reveals. · Elastic/flex transitions for UI state changes.

Subtle color shifts or opacity changes on interactive elements. · Immediate feedback via state changes.

Components

button Solid blue primary buttons with white text and a pill or large-radius shape; subtle hover states.
card Dark surfaces with subtle borders, often used for data or feature comparisons.
chip Used for status indicators or small tags within data tables.
input Minimal dark inputs with subtle inset shadows and thin borders.
hero Large-scale typography-heavy hero with a bold background gradient and faint, wireframe-like UI illustrations.

Voice & Don'ts

Tone Confident, technical, and direct.
Headlines Bold, benefit-driven, and often uses large-scale typography to emphasize key words.
CTAs Simple, action-oriented labels like 'Try Bolt.new'.

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.
Avoid: Vague marketing jargon
Avoid: Overly complex technical explanations without clear benefit
Avoid: Passive language

Inside the pack — real screenshots

StackBlitz — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko