Ember Orange
#ff4100Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Sanity.io
sanity.ioWebsite preview
The design language
Sanity.io speaks with the confident restraint of an editorial design system: vast dark hero sections anchored by full-bleed organic photography, then a clean white grid where large Waldenburg headlines do the heavy lifting. Orange (#ff4100) functions as the only chromatic punctuation on a near-monochrome stage — it appears on the logo dot, the Get Started button, and occasional tags, never as decoration. Numbered sections (01–05) evoke a Swiss editorial layout, and the Waldenburg typeface's tight tracking at display sizes (–4.48px at 112px) creates a compressed, architectural rhythm. The UI is a content platform that treats its own product as the hero — Studio screenshots, code editors, and structured content forms appear in the marketing surface itself, blurring the line between product and pitch.
Color palette
brand
Signal Blue
#0052efLinks, secondary highlights, focus rings, decorative code accents — cool counterpoint to the warm orange, used sparingly
accent
Plex Green
#19d600Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
Plasma Magenta
#f500ffDecorative code syntax highlight, studio editor token — appears only within code/editor contexts, not general UI
Acid Lime
#45ff00Code syntax token — restricted to developer-facing surfaces like the terminal and JSON editor
Electric Blue
#027fffCode syntax token, inline link variants in editorial copy — secondary to Signal Blue
neutral
Onyx
#0b0b0bPrimary text, dark hero backgrounds, dark product surface panels, button text on light fills
Canvas White
#ffffffPage background, card surfaces, text on dark sections, input fields
Smoke
#b9b9b9Borders, dividers, disabled text, muted icon strokes, placeholder text
Ash
#d6d6d6Subtle borders on cards, input field outlines in light mode
Graphite
#212121Elevated dark surface (cards on dark backgrounds), input borders on dark sections
Charcoal
#353535Deepest elevated surface, code editor background, terminal panel
Mid
#797979Secondary text, helper text, metadata, low-emphasis icons
Steel
#4a4a4aTertiary text, icon outlines on light surfaces
Frost
#edededHover backgrounds, subtle row separators, very light surface tint
Typography
Type scale
Minor Third (1.2) · 18px basedisplay
112px · 400 · 1 · -4.48px trackingThe quick brown fox jumps
heading-lg
72px · 400 · 1.05 · -2.52px trackingThe quick brown fox jumps
heading
60px · 400 · 1.08 · -1.8px trackingThe quick brown fox jumps
heading-sm
48px · 400 · 1.1 · -1.44px trackingThe quick brown fox jumps
text-38
38px · 400 · 1.1The quick brown fox jumps
subheading
32px · 425 · 1.13 · -0.48px trackingThe quick brown fox jumps
text-24
24px · 425 · 1.24The quick brown fox jumps
body-lg
20px · 400 · 1.5 · -0.02px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Waldenburg
- Weights
- 400, 425, 500, 600
- Sizes
- 11px, 12px, 13px, 15px, 16px, 18px, 20px, 24px, 32px, 38px, 48px, 60px, 72px, 112px
- Line height
- 1.0, 1.05, 1.1, 1.13, 1.2, 1.24, 1.3, 1.5
- Letter spacing
- -4.48px at 112px, -2.52px at 72px, -1.8px at 60px, -0.48px at 32px, -0.24px at 24px, -0.02px at 18px, normal at 16px and below
- Fallback
- Inter, GT Walsheim, Söhne
- Features
- "calt" 0; "cv01", "cv11", "cv12", "cv13", "ss07"
Primary display and body typeface. Used for all headings, body text, navigation, buttons, and editorial copy. The weight 425 is distinctive — a true book weight between 400 and 500 that adds warmth. Extremely tight letter-spacing at display sizes (–4.48px at 112px) creates a compressed, architectural feel. Custom stylistic alternates (cv01, cv11, cv12, cv13, ss07) give it a unique character — likely single-story 'a', distinctive 'g', and other bespoke glyphs.
Additional typeface
IBM Plex Mono
- Weights
- 400, 500
- Sizes
- 10px, 12px, 13px, 15px
- Line height
- 1.3, 1.4, 1.5, 1.7
- Fallback
- IBM Plex Mono (freely available on Google Fonts)
- Features
- "calt" 0
Monospace typeface for code blocks, terminal output, JSON schemas, numbered section labels (01–05), and technical metadata. Creates a developer-first identity when paired with Waldenburg's editorial warmth.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 96px
- Card padding
- 24px
- Element gap
- 12px
Border radius
nav
99999pxtags
99999pxcards
12pximages
3pxinputs
3pxbuttons
99999pxSpacing scale
2px3px4px6px7px8px12px16px22px24px32px48px62px64px65px71px96px109px128px133pxGuidelines
Do
- Use Ember Orange (#ff4100) exclusively for the single primary action on any given view — never two orange CTAs competing for attention
- Set all interactive elements (buttons, tags, nav items) to pill radius (99999px) to maintain the system signature
- Apply tight letter-spacing at all display sizes: –4.48px at 112px, –2.52px at 72px, –1.8px at 60px — this compressed rhythm is the Waldenburg voice
- Use IBM Plex Mono exclusively for code, terminal output, JSON, and numbered section labels — never for marketing body copy
- Anchor all full-bleed dark sections with atmospheric organic photography (geological, organic, or product-screenshot based) — never use flat color or abstract patterns alone
- Keep editorial sections on white with generous section gaps (96px) and left-aligned text — the whitespace is the layout grid
- Show real product UI in marketing — Studio screenshots, code editors, and content forms as visual evidence, not illustrations
- Use #0b0b0b (not #000000) as the primary dark surface — the slight warmth prevents harsh digital feeling
- Pair every primary action with a ghost secondary action using the same pill shape and size — they should feel like a matched set
Don’t
- Never use Ember Orange for body text, links, or decorative elements — it is reserved for action surfaces only
- Never use #f500ff, #45ff00, or #ffff00 outside of code/editor contexts — these are syntax tokens, not brand colors
- Never use flat box-shadows or heavy elevation — this system relies on background contrast, not shadows
- Never center-align large headlines — the editorial system is left-anchored with intentional asymmetry
- Never use multiple saturated colors on a single screen — if you need a second accent, it should be Signal Blue at 20% of the visual weight of orange
- Never break the pill/3px radius binary — avoid 8px or 16px radii on functional elements; pills for interactive, 3px for inputs/code
- Never use Waldenburg at 425 weight for headlines above 32px — the book weight is for body warmth, not display compression
- Never use a decorative gradient — this system has no gradients; depth comes from background contrast (white → black → charcoal)
Components
Ember Pill Button (Primary)
Main call-to-action across hero, nav, and section CTAsPill shape at 99999px radius, 12px 24px padding, #ff4100 background, #ffffff text, Waldenburg 15px weight 500. No border. The signature element of the system — appears as 'Get Started' in nav, 'Start building' in hero, and all primary CTAs.
Ghost Pill Button
Secondary action paired with primary CTAPill shape at 99999px radius, 12px 24px padding, transparent background, 1px solid #ffffff border on dark or 1px solid #0b0b0b on light, Waldenburg 15px weight 500, text matches border color. Used for 'Get a demo', 'Contact sales'.
Editorial Numbered Section
Content feature sections (01–05)Numbered labels in IBM Plex Mono 13px, 01–05 in #0b0b0b, label text in #797979 uppercase tracked. Left column holds the number + label stack, right column holds a 2-column text+image layout. 48px vertical gap between items.
Full-Bleed Dark Hero
Primary above-the-fold sectionFull-viewport dark background (#0b0b0b) with atmospheric organic photography (agate/geological textures). White Waldenburg display headline at 72–112px, tight –2.52px tracking. Orange CTA + ghost button below headline. No centered alignment — text is left-anchored with generous left padding.
Product Showcase Card
Embedded Studio/editor screenshots in marketingLarge card showing the actual product UI: code editor (dark theme, IBM Plex Mono, syntax-colored tokens), content forms, and history panels. Realistic, not stylized — the product IS the marketing visual. Contained within max-width 1280px, subtle 1px border on light sections.
Editorial Headline Block
Large section headlines on white backgroundWaldenburg 48–60px weight 400–500, #0b0b0b, letter-spacing –1.44 to –1.8px. Left-aligned, sits above body copy with 24px gap. Sometimes followed by a bulleted feature list.
Code Block
JSON schema and code examples in marketing pagesDark background (#0b0b0b or #353535), IBM Plex Mono 13px line-height 1.7, syntax-highlighted tokens. Line numbers and terminal-style decorations (dots, paths) in muted gray. Rounded 3px corners, no visible border.
Feature List
Bulleted feature highlights within editorial sectionsWaldenburg 18px weight 400, #0b0b0b text, small orange or black bullet markers, 12px vertical gap between items. Short, declarative phrases — not sentences.
Top Navigation Bar
Persistent site navigationTransparent or white background, 64px height, Waldenburg 15px weight 500 for all links. Logo (Sanity wordmark with orange dot) left, product links center, 'Log in' (text), 'Contact sales' (ghost pill), 'Get Started' (ember pill) right. Sticky on scroll.
Logo Wordmark
Brand identity element'Sanity' in Waldenburg 24px weight 600, #0b0b0b (dark mode) or #ffffff (on dark), followed by a circular dot in #ff4100. The orange dot is the only color in the logo — a compressed signal of the brand accent.
Audience Pill Tag
Compact labels for integrations, categories, or audience tagsPill shape 99999px radius, 4px 12px padding, 1px solid #b9b9b9 border, #0b0b0b text, Waldenburg 12px weight 500. Used for partner logos, integration labels.
Input Field
Form inputs in Studio and marketing3px border-radius, 1px solid #b9b9b9 (light) or #353535 (dark) border, 12px 16px padding, Waldenburg 15px weight 400, #0b0b0b (light) or #ffffff (dark) text. Focus ring uses #0052ef at 2px.
Partner Logo Strip
Social proof bar at section bottomsHorizontal row of partner/client logos in single-color #0b0b0b or #b9b9b9, 48px height, evenly spaced with 24px gap. Logos are monochrome — no brand colors. Often sits on a light gray or white band.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background for editorial content sections
Level 1
Onyx
#0b0b0bDark hero, dark product showcase sections
Level 2
Graphite
#212121Cards and panels elevated on dark backgrounds
Level 3
Charcoal
#353535Code editor panels, terminal surfaces, deepest dark elevation
Level 4
Frost
#edededLight hover states and subtle row separators on white surfaces
Layout & imagery
Layout
Full-bleed dark hero (100vw) with left-anchored text and full-bleed background photography, transitioning to max-width 1280px centered content sections. Editorial rhythm alternates: dark hero → dark product showcase → white editorial section → white feature grid. The white sections use a 2-column asymmetric grid: left column holds numbered labels (01–05 in mono) and headlines, right column holds body copy + visual. Navigation is a minimal top bar, transparent over dark sections and white over light sections, with right-aligned actions. Section vertical rhythm is generous — 96px between major sections on white, tighter 48px on dark. The layout reads like an editorial publication: numbered chapters, left-aligned running text, and full-bleed photographic interludes.
Imagery
Atmospheric, full-bleed organic photography dominates dark sections: geological cross-sections, agate slices, and macroscopic organic textures shot in warm earth tones. Product screenshots are treated as hero imagery on equal footing with photography — the Studio interface (code editor, content forms, history panels) appears at large scale, dark-themed, with real syntax-highlighted code. No illustrations, no stock photography, no abstract gradients. On light sections, imagery is either product UI (pixelated grid portraits suggesting data structure) or monochrome partner logos. The visual logic: the product and the organic world are equally valid heroes — content as geology, data as matter.
Design notes
Agent Guide
**Quick Color Reference** - primary action: no distinct CTA color - Accent/link: #0052ef (Signal Blue) — inline links, focus rings - Text: #0b0b0b (Onyx) primary, #797979 (Mid) secondary, #b9b9b9 (Smoke) disabled - Background: #ffffff (Canvas) light sections, #0b0b0b (Onyx) dark sections, #353535 (Charcoal) code/editor surfaces - Border: #b9b9b9 (Smoke) default, #d6d6d6 (Ash) subtle, #0052ef (Signal Blue) focus **3-5 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. *Editorial headline block*: Waldenburg 60px weight 400, #0b0b0b, letter-spacing –1.8px, line-height 1.08, left-aligned. Sits on #ffffff with 96px section padding above and below. 4. *Numbered editorial section*: IBM Plex Mono 13px for '01' label in #0b0b0b, uppercase tracked label text in #797979. 48px gap below to headline. Right column: Waldenburg 48px headline + 18px body in #0b0b0b + bulleted feature list. 5. *Dark code block*: #0b0b0b background, 3px radius, 24px padding, IBM Plex Mono 13px line-height 1.7, syntax tokens in #19d600 (strings), #027fff (keys), #f500ff (types), #797979 (comments). No visible border.
Elevation Philosophy
Sanity.io does not use box-shadows. Depth is achieved entirely through background-value contrast across a five-step surface stack: #ffffff (canvas) → #ededed (frost hover) for light areas, and #0b0b0b (onyx base) → #212121 (graphite card) → #353535 (charcoal deepest) for dark areas. A card 'floats' because it is a lighter shade of the same near-black hue against a darker one, never because of a drop shadow. This keeps the system feeling architectural and flat — closer to print design than Material Design. The only exception is a subtle blue-tinted glow (#0052ef) on the Signal Blue focus ring, which is a functional accessibility indicator, not decorative elevation.
Similar brands
Linear
Same dark-mode-first editorial system with a single accent color, tight display tracking, and left-anchored asymmetric layouts that read like magazine spreads
Vercel
Full-bleed dark hero with atmospheric photography, single warm accent (orange/vermillion), and generous whitespace on white editorial sections below
Stripe
Contrasting dark/light section alternation, large compressed display headlines, and product UI treated as hero imagery rather than decorative illustration
Plaid
Dark navy/black canvas with a single saturated brand accent, monospace labels for numbered sections, and a confident editorial typography system
Figma Config
Full-bleed atmospheric photography, pill-shaped CTAs in a single brand color, and a system that blurs the line between product screenshots and marketing visuals
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
