CURATED · OPEN · FREE

Builder.io

The AI product development platform for your real codebase and design system.

devdesigntool

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://www.builder.io

📦 Browse pack contents →

Identity DNA

collaborativeproduction-readyAIworkspacecode

A digital command center where designers, PMs, and developers co-exist in a single code-driven environment.

Color

#18B6F6Accent

#FFFFFFInk

#757575Ink soft

#000000BG

#17191CMuted

rgba(255,255,255,0.1)Line

High-contrast dark mode with a single high-chroma cyan accent for primary actions and emphasis.

Typography

geometric-sans · humanist-sans · monospace

display56px · 600
heading48px · 600
subheading24px · 500
body18px · 400
small14px · 400

Use geometric-sans for display text to match the Poppins-inspired aesthetic. · Use humanist-sans for body text to ensure readability. · Use monospace for code snippets and terminal commands. · Maintain tight tracking on large display text.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base unit with a standard scale.

Surfaces

sm · 4px

md · 8px

lg · 20px

pill · 999px

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

0px 1px 4px 0px rgba(0,0,0,0.08) · 0px 0px 30px 0px rgba(0,0,0,0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard 12-column grid with a fixed max-width container.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.37, 0.01, 0, 0.98)easing

Fade-in and slide-up for section entry. · Smooth opacity transitions for hover states.

Subtle brightness increase or border color change. · Immediate visual feedback.

Components

button High-contrast cyan primary button with rounded corners, and ghost/outline secondary buttons.
card Dark surface cards with subtle borders and generous padding.
chip Small rounded labels for categorization.
input Standard form inputs with dark backgrounds.
hero Full-width section with large typography and a conceptual illustration.

Voice & Don'ts

Tone Confident, professional, and technically proficient.
Headlines Direct and action-oriented, often highlighting 'collaborative' or 'production-ready'.
CTAs Simple and clear, such as 'Start building' or 'Sign up'.

Don't use a light background — screenshot shows a deep black (#000000) background.
Don't use a secondary accent color — screenshot shows a single dominant cyan (#18B6F6).
Don't use high-contrast borders for every card — screenshot shows subtle or no borders on many elements.
Don't use serif fonts for display text — screenshot shows a geometric sans-serif.
Don't use centered alignment for body text — screenshot shows left-aligned paragraphs.
Don't use excessive decorative icons — screenshot uses clean, minimalist line icons.
Don't use small, cramped layouts — screenshot shows generous whitespace and padding.
Avoid: Overly casual or conversational tone
Avoid: Vague marketing jargon
Avoid: Passive voice
Avoid: Complex sentences that obscure the value proposition

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is Builder.io, a premium SaaS developer tool. The design is characterized by a high-contrast dark mode (#000000 background, #FFFFFF text) with a single, vibrant cyan accent (#18B6F6). Typography is geometric sans-serif for display and humanist sans-serif for body. The layout is clean and spacious, emphasizing clarity and professionalism. Critical donts: Never use a light theme, never introduce a secondary accent color, and never use decorative or cluttered UI elements. The system is built for technical users who value efficiency and production-readiness.

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