CURATED · OPEN · FREE

Storyblok

Enterprise headless CMS designed for modern frameworks with a clean, joyful aesthetic

cmsdev
Storyblok screenshot
↓ Download design system (16 MB)Open in OpenDesign

Visit: https://www.storyblok.com

📦 Browse pack contents →

01

Identity DNA

Headless CMSDeveloper-firstAI ContentJoyful

A developer-friendly content platform that feels polished yet approachable

02

Color

#7530F7Accent
#1F1F1FInk
#44474AInk soft
#FFFFFFBG
#808080Muted
rgba(31,31,31,0.12)Line

High contrast neutrals with a single vibrant purple accent and strategic blue highlights

03

Typography

geometric-sans

Headlines use weight 900 with tight tracking · Body text maintains generous line height for readability · Button text is weight 500 at 16px · Accent color is used selectively on key phrases in hero

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

Consistent 24px gutter with generous section padding of 48-96px

05

Surfaces

sm · 8px
md · 12px
lg · 24px
pill · 999px

1-2px solid with muted borders on cards and inputs

0 2px 8px rgba(31,31,31,0.08) · 0 4px 16px rgba(31,31,31,0.12)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered single-column hero with full-width content sections below

07

Motion & Interaction

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth hover transitions on buttons and links · Subtle color transitions on interactive elements

Background color shift on buttons, opacity change on links · Scale feedback on primary actions

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Storyblok — 桌面首屏（hero）
桌面首屏（hero）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Storyblok — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a developer-focused SaaS platform for headless CMS. The design balances technical credibility with approachable warmth. Primary colors are white backgrounds with near-black text (#1F1F1F) and purple accent (#7530F7). Blue highlights (#3B82F6) appear in hero text. Typography uses geometric sans-serif at weight 900 for headlines with tight tracking. Don't use multiple competing accents. Don't apply heavy shadows or gradients. Don't use decorative serif fonts. Layout centers content with generous spacing. Buttons use dark fills for primary actions with rounded corners. The interface feels clean and modern without being sterile.

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