Coral Verdict
#f94d1ePrimary action buttons (Book a Demo, Try Free) — the only warm hue on the page; signals decision points without aggression
Spellbook
spellbook.legalWebsite preview
The design language
Spellbook operates as a midnight legal library: near-black canvas, editorial serif display type, and a single coral-orange action color that cuts through the darkness. The system refuses the typical SaaS blue/gradient playbook — instead it borrows from premium print: Arizona Mix at 67–77px with aggressively tight tracking turns headlines into magazine covers, while Soehne handles all UI at quiet, compact sizes. The visual hierarchy is built on contrast between white text on #121719 and the warmth of #f94d1 CTAs, not on shadows or elevation. Surfaces stay flat; depth comes from background shifts (canvas → #222729 → #2b3133 for inputs) and from typographic scale, not drop shadows. Components are sharp-edged (4px radius) except buttons and badges which go full pill (1600px/100px), creating a deliberate tension between editorial precision and soft, inviting action targets.
Color palette
brand
accent
Indigo Statute
#7834b5Accent for select feature cards and section highlights — used sparingly to add editorial weight, never on actions
Cyan Margin
#029cffInline links, logo gradient, and decorative icon strokes — cool counterpoint to the warm coral primary
neutral
Courtroom Ink
#121719Page canvas, primary background — near-black with a faint cool tint, not pure black; sets the midnight tone
Lectern Surface
#222729Elevated card and panel surfaces sitting one step above the canvas; used for feature cards and link hovers
Document Drawer
#2b3133Input field backgrounds, form controls — one level above card surfaces to read as recessed
Manuscript White
#ffffffPrimary headings, body text on dark surfaces, ghost-button borders, and inverted text on coral CTAs
Parchment
#f1f3f4Light surface variant for cards on dark, light-mode button text, and subtle off-white highlights
Ashen Type
#909394Medium-contrast borders, control outlines, and structural separators.
Smoke
#acaeafTertiary text, disabled states, and lighter dividers — sits between Ashen Type and Manuscript White
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-xl
77px · 500 · 1 · -3.08px trackingThe quick brown fox jumps
display-lg
67px · 500 · 1 · -2.01px trackingThe quick brown fox jumps
display
51px · 500 · 1.1 · -1.53px trackingThe quick brown fox jumps
heading-lg
28px · 500 · 1 · -0.56px trackingThe quick brown fox jumps
heading
24px · 400 · 1.3 · -0.24px trackingThe quick brown fox jumps
text-22
22px · 600 · 1.3The quick brown fox jumps
heading-sm
20px · 400 · 1.5 · -0.2px trackingThe quick brown fox jumps
subheading
18px · 600 · 1.6 · -0.18px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Arizona Mix
- Weights
- 500
- Sizes
- 28px, 51px, 67px, 77px
- Line height
- 1.00–1.15
- Letter spacing
- -0.0400em, -0.0300em, -0.0200em
- Fallback
- GT Sectra, Playfair Display, or DM Serif Display for system-level fallback
Display headlines and section titles only. Weight 500 medium — not bold — lets the serifs do the work. Aggressive negative tracking (-0.04em at 77px shrinking to -0.02em at 28px) tightens the letterforms into an editorial, almost newspaper-headline feel. This is the signature choice: a custom serif in a SaaS context replaces the usual geometric sans and signals premium legal authority.
Additional typeface
Soehne
- Weights
- 400, 500, 600, 700
- Sizes
- 13px, 14px, 16px, 18px, 20px, 22px, 24px
- Line height
- 1.30–1.63
- Letter spacing
- -0.0100em
- Fallback
- Inter, Söhne (if licensed), or Untitled Sans for close match
All UI, body, button, badge, input, and subheading text. Neutral grotesque with even proportions; weight 400 for body, 500–600 for UI labels and buttons, 700 reserved for emphasis. Consistent -0.01em tracking across all sizes. The quiet counterpart to the loud display serif — Soehne is the workhorse, Arizona Mix is the voice.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 96px
- Card padding
- 24px
- Element gap
- 12px
Border radius
cards
4pxbadges
100pxinputs
4pxbuttons
1600pxSpacing scale
2px3px4px5px6px7px8px9px11px12px13px14px16px19px20px24px25px27px28px32px40px48px57px60px64px112px231pxGuidelines
Do
- Use Arizona Mix exclusively for display and section headings at 28px+ — never for body, UI, or anything below 24px
- Default to 4px border-radius for all cards, inputs, and rectangular components; reserve 1600px/100px pill radius strictly for buttons and badges
- Use #f94d1 (Coral Verdict) as the single primary action color — never introduce a second warm accent
- Build depth through background shifts (#121719 → #222729 → #2b3133) rather than drop shadows; shadow should appear on at most one elevated card per page
- Apply -0.04em to -0.02em letter-spacing to all Arizona Mix type and -0.01em to all Soehne type — the tight tracking is part of the editorial voice
- Use Soehne 14–16px weight 400–500 for all UI text; jump to 600 only for button labels and nav links
- Keep page max-width at 1200px and section gaps at 96px — the system breathes with generous vertical rhythm
Don’t
- Do not use Arizona Mix below 24px — the serif's character breaks down at UI sizes and competes with Soehne
- Do not use filled buttons in any color other than #f94d1 on dark surfaces or #f1f3f4 on light surfaces
- Do not add visible drop shadows to standard cards — only the feature card with embedded document preview earns elevation
- Do not use blue (#029cff) or violet (#7834b5) as button fills — they are accent/link colors, not action colors
- Do not introduce gradients, glows, or glassmorphism — the surface language is flat and editorial
- Do not use pure #000000 as a page background — #121719 with its cool tint is the canvas; pure black is reserved for the logo mark and decorative fills only
- Do not use border-radius values between 5px and 99px — the system is binary: 4px sharp or 100px+ pill
Components
Primary Coral CTA
The only filled action button on the site — reserved for conversion eventsBackground #f94d1 (Coral Verdict), text #ffffff in Soehne 16px weight 500–600, horizontal padding 20px 24px, vertical padding 14px, border-radius 1600px (full pill). No border. The warmth of coral against the midnight canvas makes it the unmistakable action. Used for 'Book a Demo' in nav and hero, 'Try Spellbook Free' in form.
Ghost Outline Button
Secondary action that shares weight with the primary without competing for attentionTransparent background, 1px border in #ffffff at reduced opacity or solid white, text #ffffff in Soehne 16px weight 500, same 1600px pill radius and ~14px vertical padding as the primary. Pairs directly beside coral CTAs as a low-pressure alternative ('Try Free' next to 'Book a Demo').
Inverted Light Button
CTA variant for light-surface contexts (e.g. footer, light cards)Background #f1f3f4 (Parchment), text #121719 (Courtroom Ink), 1600px pill radius, same padding scale as coral CTA. Provides the same action weight without the warm accent when on a light surface.
Dark Card
Feature and content containers on the dark canvasBackground #222729 (Lectern Surface), border-radius 4px, padding 24px. Hairline 1px border in #ffffff at ~10% opacity for edge definition. No shadow on most cards — depth comes from the background shift alone. One hero card uses a soft dual-shadow stack for elevation over an embedded document preview.
Light Inversion Card
High-contrast card that breaks the dark rhythm — used for testimonials or featured blocksBackground #f1f3f4 (Parchment), text #121719, 4px radius, 24px padding. Creates a visual pause in the dark page flow.
Form Input
Data entry fields in lead-capture and account formsBackground #2b3133 (Document Drawer), border 1px in #acaeaf or #909394 at low opacity, border-radius 4px, padding 14px 16px. Text in Soehne 16px #ffffff. Placeholder text in #909394. Label sits above in Soehne 14px weight 500 #ffffff.
Pill Badge
Category tags, feature flags, or status labelsBackground varies (often #222729 or tinted brand), text in Soehne 13–14px weight 500, border-radius 100px (full pill), padding 6px 12px. Compact and quiet — badges annotate, never shout.
Top Navigation Bar
Persistent site header with brand, primary links, and CTATransparent or #121719 background, no shadow. Logo left (Spellbook wordmark + cyan-to-violet diamond icon), center nav links in Soehne 14px #ffffff with dropdown chevrons, right side has 'Login' text link and a coral 'Book a Demo' CTA in pill form. Sticky on scroll.
Trust Logo Grid
Social proof band — company logos of customers3-row × 6-column grid of monochrome white logos on #121719 canvas, no card containers, logos rendered at uniform height (~24px). Spacing 48px between rows, even horizontal distribution. The '4,400+ in-house teams and law firms trust Spellbook' caption sits above in Soehne 16px #909394.
Hero Section
First-screen above-the-foldCentered composition on #121719 canvas. Display headline in Arizona Mix 67–77px weight 500, #ffffff, letter-spacing -2.01 to -3.08px, line-height 1.0. Subhead in Soehne 18px #909394 below. Two-button stack: coral primary + ghost secondary, centered. Total vertical padding ~120px top and bottom.
Feature Card with Document Preview
Product capability showcase — contract review with AI suggestionsDark card (#222729, 4px radius) containing a mock document screenshot with annotation overlays. A floating 'Review Contract' badge (white pill) and '26 suggestions...' counter badge appear as overlay UI. Demonstrates the product visually without requiring a live demo.
Footer / Closing Form
Lead capture and final CTASection heading 'Start your free trial' in Arizona Mix ~51px, subtext in Soehne 16px #909394, form with dark inputs (#2b3133), a single coral CTA 'Try Spellbook Free' below the form, and a legal disclaimer line at the bottom in Soehne 14px #909394. Thin #ffffff-at-low-opacity divider separates form from disclaimer text.
Surfaces & elevation
Level 0
Canvas
#121719Page background — the midnight base everything sits on
Level 1
Card Surface
#222729Feature cards, nav dropdowns, hover states for links
Level 2
Input Well
#2b3133Form input fields — recessed feel for data entry
Level 3
Light Inversion
#f1f3f4Light cards on dark pages when a bright surface break is needed
Spellbook treats elevation as a rare privilege. The default surface language is flat — depth is communicated exclusively through the three-tier background stack (#121719 → #222729 → #2b3133). A drop shadow appears on at most one card per page, and only when the card must float above an embedded product preview or image. This restraint is what makes the single shadowed card feel like a window into the product rather than just another container.
Feature Card with Document Preview
rgba(0, 0, 0, 0.05) -20px 20px 30px -13px, rgba(0, 0, 0, 0.15) 5px 5px 35px 15px
Layout & imagery
Layout
Page layout follows a centered, max-width-1200px rhythm on a full-bleed #121719 canvas. The hero is a single centered column with a large display headline, subtext, and a two-button stack — no side-by-side image, no asymmetric split. Below the hero, sections alternate between centered text blocks and full-width card grids, separated by ~96px of vertical space. The feature section uses a single wide dark card with an embedded document preview. The trust band is a 3×6 monochrome logo grid with no card containers. The closing form is a centered single-column layout with stacked inputs and one CTA. Navigation is a top bar with a transparent or canvas-matched background — no sidebar, no mega-menu, no sticky decorative elements.
Imagery
Spellbook's visual language is predominantly text-and-UI with minimal photography or illustration. The only recurring visual motif is the embedded product screenshot — a mock contract document with AI-suggestion annotations (underlined blue phrases, floating 'Review Contract' and '26 suggestions...' pills) that demonstrates the product in-action. Trust is communicated through a monochrome white logo grid rather than lifestyle photography. The logo itself is the brand's sole decorative mark: a diamond/sparkle glyph rendered in a cyan-to-violet gradient, the only place a gradient appears in the system. No stock photography, no illustrations, no 3D renders — the editorial serif typography and the product preview are the visual content.
Design notes
Agent Guide
**Quick Color Reference** - text/primary: #ffffff - text/muted: #909394 - text/tertiary: #acaeaf - canvas: #121719 - card surface: #222729 - input background: #2b3133 - light surface: #f1f3f4 - border: #ffffff (low opacity) - link/accent: #029cff - accent: #7834b5 - primary action: #ffffff (filled action) **3-5 Example Component Prompts** 1. Create a Primary Action Button: #ffffff background, #121719 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. **Dark Feature Card**: Background #222729, border-radius 4px, padding 24px. Optional 1px border in #ffffff at 10% opacity. Title in Soehne 22px weight 600, #ffffff. Body in Soehne 16px weight 400, #909394, line-height 1.6. No shadow. 3. **Form Input Field**: Background #2b3133, border 1px solid #acaeaf at 50% opacity, border-radius 4px, padding 14px 16px. Text in Soehne 16px weight 400, #ffffff. Placeholder in #909394. Label above in Soehne 14px weight 500, #ffffff, margin-bottom 8px. 4. **Section Heading + Body Block**: Section title in Arizona Mix 51px weight 500, #ffffff, letter-spacing -1.53px, line-height 1.1, centered. Body paragraph in Soehne 18px weight 400, #909394, line-height 1.6, max-width 680px, centered, margin-top 24px. 5. **Pill Badge**: Background #222729, text in Soehne 13px weight 500, #ffffff, border-radius 100px, padding 6px 12px. Optional 1px border in #029cff for status badges.
Similar brands
Harvey
Same dark editorial legal-AI aesthetic with serif display headlines and a restrained accent palette against near-black canvas
Linear
Similar flat-surface discipline on dark canvas, compact UI typography, and pill-shaped primary actions — though Linear uses gradient accents where Spellbook uses a single coral
Attio
Shared dark-mode product UI craft with generous spacing, hairline borders, and editorial-grade typography choices
Ironclad
Same legal-tech category with dark premium positioning, though Ironclad leans lighter and more product-photography driven
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
