Design System

Structured content,
cleanly composed.

A clean, modern CMS interface built around confident red accents and precise typographic hierarchy. Light surfaces, structured layouts, and functional clarity.

18 color tokens 15 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a bold red brand accent. 18 tokens across surfaces, text hierarchy, interaction, and semantic status colors.

Studio White
#ffffff
Primary background, card surfaces
Canvas Gray
#f2f2f2
Sidebar, secondary panels
Bone
#e5e5e5
Borders, dividers
Stone
#cccccc
Inactive states, disabled
Smoke
#999999
Placeholders, muted labels
Slate
#666666
Secondary text, helpers
Charcoal
#2d2d2d
Body text, paragraphs
Ink
#1c1c1c
Headings, nav labels
Pitch
#0d0d0d
Max contrast emphasis
Sanity Red
#f03e2f
Brand
CTAs, active states, links
Deep Red
#c7342a
Hover states, pressed
Coral Tint
#fef0ef
Red accent backgrounds
Mint
#3ecf8e
Success, published status
Mint Tint
#e9faf1
Success backgrounds
Amber
#f5a623
Warning, draft indicators
Amber Tint
#fef7e8
Warning backgrounds
Sky
#499df5
Info accents, help text
Sky Tint
#e8f2fd
Info backgrounds
Typography

Type Scale

Inter as the primary typeface with JetBrains Mono for code. Compact, precise hierarchy for CMS interface density.

Display Content management 32px / 1.2 / −0.02em
Heading Document editor 24px / 1.25 / −0.02em
Heading-sm Schema configuration 20px / 1.3 / −0.01em
Subheading Published documents 18px / 1.4 / −0.01em
Body Default body text for readable content and form fields 16px / 1.6 / 0
Body-sm Dense data, table cells, metadata rows 14px / 1.5 / 0
Label Field labels · Form titles 13px / 1.5 / 0.01em
Caption Helper text · Timestamps · Status 12px / 1.5 / 0.02em
Code {'_type': 'post', title: 'Hello'} 13px / 1.6 / 0

Fonts

Primary Inter 400–700 · 11–32px
Mono JetBrains Mono 400–500 · Code only
Layout

Spacing & Shapes

Base unit 4px. Compact density for CMS workflows. 15-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

22px
44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sharp 0px
sm 3px
md 6px
lg 12px
pill 9999px
Elevation

Surfaces

Border-defined elevation over shadows. Light, open surfaces with clear structural separation. 4 surface levels.

Studio White #ffffff
Canvas Gray #f2f2f2
Bone #e5e5e5
Card #ffffff + shadow
Components

Button & UI Variants

Primary action (Sanity Red), secondary, ghost, and danger variants. Clear hierarchy for CMS workflows.

Primary Action Button
Publish, submit, save — highest weight
.btn-primary
Sanity Red (#f03e2f) background, white text, 6px radius. Deep Red (#c7342a) on hover. Reserve for the single most important action.
Secondary Button
Cancel, draft save, navigation
.btn-secondary
White background, Ink text, Bone border. For secondary actions that need visual presence without competing with primary.
Ghost Button
Toolbar actions, inline toggles
.btn-ghost
Transparent background, Slate text. Hover fills with Coral Tint and turns Sanity Red. For toolbar and inline actions.
Danger Button
Delete, unpublish, destructive ops
.btn-danger
Deep Red (#c7342a) background, white text. Use sparingly for irreversible destructive operations only.
Input Field
Text entry, form fields, search
input
White background, Bone border, 6px radius. Focus state shows Sanity Red border with subtle ring.
Status Badges
Document status, publish state
.badge
Published Draft Error
Pill-shaped status indicators. Mint for published, Amber for draft, Sanity Red for errors.
Sidebar Navigation
Studio navigation, document types
.nav-item
Posts
Authors
Categories
Settings
Full-width items with Canvas Gray active background. Ink text when active, Slate when inactive. 6px radius, 8px/16px padding.
Guidelines

Do's & Don'ts

Do — Embrace
  • Studio White (#ffffff) as primary canvas for all content
  • Sanity Red (#f03e2f) exclusively for CTAs and active states
  • Mint/Amber/Sky for semantic status (success/warning/info)
  • 6px radius for buttons and inputs, pill for badges
  • 4px-based spacing with compact density
  • Inter at weights 400–700 for all UI text
  • Bone (#e5e5e5) borders for structural definition
Don't — Avoid
  • Sanity Red for large backgrounds — it overwhelms
  • Inconsistent border radius within component groups
  • Heavy drop shadows — use borders for definition
  • Monospace fonts for non-code content
  • Dense packing without breathing room
  • Dark backgrounds inside cards or panels
  • Red text on tint backgrounds for body copy