CURATED · OPEN · FREE

Strapi

The open-source headless CMS for AI-powered websites and apps

cmsdev

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://strapi.io

📦 Browse pack contents →

Identity DNA

open-sourceheadless CMSAI-powereddeveloper-centric

A developer-first content platform that balances technical utility with premium polish

Color

#4F46E5Accent

#FFFFFFInk

#3E3E5CInk soft

#0F0F23BG

#F7F8FCBG soft

#E7EDF1BG quiet

#5E709DMuted

rgba(94,112,157,0.2)Line

High contrast dark/light sections with indigo accent for CTAs

Typography

geometric-sans · humanist-sans · monospace

display72px · 700
h240px · 700
body18px · 400

Use Poppins for display and headings · Use Inter for body text and UI elements · Maintain generous line height for readability on dark backgrounds

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px base unit with consistent vertical rhythm

Surfaces

sm · 4px

md · 8px

lg · 15px

pill · 999px

1px solid rgba(94,112,157,0.2)

rgba(26,26,67,0.1) 0px 1px 4px 0px · rgba(0,0,0,0.1) 0px 4px 12px 0px · rgba(0,0,0,0.08) 0px 6px 10px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with generous whitespace, full-width dark hero section

Motion & Interaction

220msmicro

400mssmall

800msmedium

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

Color transitions on hover · Opacity changes for interactive states

Color change on text links, subtle shadow elevation on cards · Immediate visual feedback through color/opacity

Components

button Solid rounded buttons with 15px radius, indigo primary, outlined secondary
card Light background with subtle shadow and 15px radius
chip Inline badges with pill shape and semi-transparent backgrounds
input Code blocks with monospace font and copy action
hero Full-width dark section with centered content and decorative geometric patterns

Voice & Don'ts

Tone Professional yet approachable, technically confident
Headlines Direct, benefit-focused statements with action verbs
CTAs Clear commands: 'Get Started', 'Request Demo', 'See how it works'

Don't use muted colors on interactive elements — screenshot shows vibrant indigo (#4F46E5) for CTAs
Don't center-align long-form body copy — screenshot shows left-aligned paragraphs in content sections
Don't use small font sizes for technical commands — screenshot shows generous sizing for code snippets
Don't apply heavy shadows everywhere — screenshot uses subtle, layered shadows sparingly
Don't use round borders on all containers — screenshot shows 15px radius on buttons/cards but square edges elsewhere
Don't mix decorative patterns with busy content — screenshot keeps geometric patterns to dark hero section only
Avoid: Overly technical jargon without context
Avoid: Passive voice in CTAs
Avoid: Excessive exclamation marks
Avoid: Unclear value propositions

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Strapi's design system targets developers building AI-powered applications, using a dark/light dual-section approach. Primary colors include deep navy (#0F0F23) for hero sections, white (#FFFFFF) for content areas, and indigo (#4F46E5) for action CTAs. Typography uses geometric Poppins for display/headings and humanist Inter for body text, maintaining clear hierarchy. Critical donts: avoid muted colors on interactive elements (vibrant indigo is standard), don't center long-form copy, maintain generous sizing for code snippets. The system emphasizes technical credibility with clean layouts, subtle shadows, and purposeful whitespace. Focus on clear value propositions and developer-friendly patterns like copyable code blocks and direct CTAs.

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