CURATED · OPEN · FREE
Sanity
A modern headless CMS platform designed for structured content operations and developer flexibility.
Editorial Clean Developer Tools Refinement Tooling
01
Identity DNA
content infrastructure developer-first structured content AI-powered enterprise scale
The operating system for digital content, bridging editorial workflows with developer tooling.
02
Color
#ff5400Accent
#ffffffInk
#b9b9b9Ink soft
#0b0b0bBG
#151515BG soft
#797979Muted
rgba(255,255,255,0.1)Line
High-contrast foundation with a singular vibrant accent for clear hierarchy and action.
03
Typography
transitional-serif · humanist-sans · geometric-mono
display 72px · 400headline 40px · 400body 16px · 400caption 12px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px-based spatial system ensuring tight, purposeful alignment.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 99999px
Subtle 1px borders or 1px inset strokes; relies on background contrast for depth.
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Asymmetric splits for feature showcases, full-width backgrounds for immersive hero sections.
07
Motion & Interaction
150ms micro
300ms small
600ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
Smooth color and opacity transitions for interactive states · Standard easing curves for predictable feedback · Opacity fades for content reveals
Immediate transition of background color or border-color for clarity. · Subtle opacity reduction for tactile feedback.
08
Components
button Pill-shaped solid accent fills for primary actions; outlined pills for secondary. card Content blocks presented on neutral backgrounds with minimal border interference. chip Uppercase monospaced badges for categorization and status. input Clean bordered fields with monospaced labels. hero Massive typography paired with dark, atmospheric imagery. 09
Voice & Don'ts
Tone Professional, technical, and confident. Headlines Short, declarative statements emphasizing structure and intelligence. CTAs Direct and action-oriented, such as 'Start building' or 'Contact sales'. Don't use generic sans-serifs for headlines — screenshot shows a distinct transitional-serif display face. Don't rely on soft grays for primary backgrounds — screenshot shows deep, high-contrast blacks. Don't use rounded squares for primary CTAs — screenshot shows distinct pill-shaped buttons. Don't avoid monospaced type for metadata — screenshot shows it used extensively for navigation. Don't use a multi-color palette — screenshot shows a deliberate focus on a single vibrant orange accent. Don't clutter the hero with too much text — screenshot shows large, breathing typography with minimal supporting copy. Avoid: Marketing fluff or vague promises Avoid: Playful or overly casual language Avoid: Jargon without context Avoid: Aggressive sales tactics 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Sanity is a developer-first CMS platform. The design language balances deep blacks (#0b0b0b) with crisp whites and a vibrant orange accent (#ff5400). Typography pairs a transitional serif for bold headlines with a clean humanist sans for body text and geometric mono for UI elements. The layout is spacious and focused, emphasizing clarity. Key constraints: maintain strict 4px grid adherence; never use multiple accent colors; always use pill shapes for primary buttons. The tone is professional and technical. Avoid any visual clutter or playful elements.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A strong example of a modern developer platform that uses high-contrast typography and strict spatial discipline to convey authority.
