--- name: Craft tagline: Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. updated_at: 2026-05-29T21:45:07.329Z published_at: 2026-05-29T21:45:07.329Z author: webdesignhot source_url: https://www.craft.do spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [light, serif, sans, premium, editorial, warm, productivity] preview_swatch: ['#fcf9f7', '#030302', '#2563eb'] related: [notion, bear-app, things-app] description: 'Craft''s site is a fine-press editorial that ships a notes app — a warm-white `#fcf9f7` canvas (paper, not screen-white), a 66px Untitled Serif H1 at weight 400 (never bold), Untitled Sans body, and a near-black `#030302` ink that reads as ink-on-paper rather than text-on-screen. The signature move is the serif-display / sans-body pairing: a literary serif for headlines, a clean grotesque for running text, giving the page the register of a well-set magazine. The primary CTA — "Try Craft Free" — is a full-pill (9999px) near-black `#030302` button with white text. The whole page reads premium, editorial, and unhurried; Craft pairs this warm-white identity with a blue accent inside the product, but the marketing surface stays almost monochrome — paper, ink, and pill.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent-blue muted: text-muted border: border ring: border-strong colors: bg: '#fcf9f7' # warm-white canvas — paper, not screen-white bg-soft: '#f7f2ee' # slightly deeper warm panel surface: '#ffffff' # pure-white card lifted off the warm canvas surface-elev: '#fbf7f4' # warm nested card surface text: '#030302' # near-black ink — the ink-on-paper voltage text-strong: '#030302' # display ink — same near-black, never tinted text-body: '#3a3835' # secondary running text — warm dark grey text-secondary: '#5c5a57' # supporting copy, sub-labels text-muted: '#8a8782' # captions, metadata (large/secondary use only) brand: '#030302' # near-black brand — the pill CTA fill brand-hover: '#1c1b19' # pressed/hover near-black, fractionally lifted on-brand: '#ffffff' # white text on near-black pill accent-blue: '#2563eb' # in-product blue — links, focus, selection accent accent-blue-hover: '#1d4ed8' # darker blue on hover/press accent-blue-soft: '#e8effe' # soft blue chip / selection wash background accent-blue-deep: '#1e40af' # text on soft-blue chip — passes AAA on soft border: 'rgba(3, 3, 2, 0.09)' # warm hairline — 9% near-black border-soft: 'rgba(3, 3, 2, 0.05)' # 5% near-black for the faintest dividers border-strong: 'rgba(3, 3, 2, 0.16)' # 16% near-black for focused inputs shadow-card: 'rgba(36, 30, 24, 0.05)' # warm-tinted ambient lift shadow-elev: 'rgba(36, 30, 24, 0.10)' # heavier hover / floating-panel lift scrim: 'rgba(18, 16, 14, 0.45)' # modal backdrop — warm near-black success: '#2f7d4f' # confirmation green success-soft: '#e8f3ec' warning: '#9a6212' # advisory amber warning-soft: '#fbf0dc' danger: '#c0382e' # form-error red danger-soft: '#f9e6e3' info: '#2563eb' # informational — same as accent-blue info-soft: '#e8effe' typography: display: family: '"Untitled Serif", "Untitled Serif Font", Georgia, "Times New Roman", serif' weights: [400, 500] opentype-features: ['kern', 'liga'] body: family: '"Untitled Sans", "Untitled Sans Font", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 400, lineHeight: 1.02, tracking: '-0.02em', family: display } display-lg: { size: 66, weight: 400, lineHeight: 1.05, tracking: '-0.018em', family: display } h1: { size: 66, weight: 400, lineHeight: 1.05, tracking: '-0.018em', family: display } h2: { size: 54, weight: 400, lineHeight: 1.08, tracking: '-0.014em', family: display } h3: { size: 36, weight: 400, lineHeight: 1.15, tracking: '-0.01em', family: display } h4: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display } title-md: { size: 20, weight: 600, lineHeight: 1.35, tracking: '0', family: body } title-sm: { size: 17, weight: 600, lineHeight: 1.4, tracking: '0', family: body } body-lg: { size: 19, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body } caption: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } label: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.06em', family: body, transform: uppercase } button: { size: 15, weight: 500, lineHeight: 1.2, tracking: '0', family: body } nav-link: { size: 15, weight: 500, lineHeight: 1.4, tracking: '0', family: body } link: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono } radius: micro: 4 sm: 8 md: 12 lg: 16 xl: 24 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1200 prose-width: 680 header-height: 64 components: button-primary: { bg: brand, text: on-brand, padding: '12px 24px', radius: 9999, height: 48, font: button } button-ghost: { bg: transparent, text: text, border: border, padding: '12px 24px', radius: 9999, font: button } card: { bg: surface, border: border, radius: 16, padding: 32 } input: { bg: surface, border: border, text: text, radius: 12, padding: '12px 16px', height: 44 } motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-out-soft: 'cubic-bezier(0.0, 0, 0.2, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 button-hover: 'background lightens to brand-hover over 150ms standard — no transform' card-hover: 'warm ambient shadow grows over 240ms standard, optional 1px rise' scroll-reveal: 'sections fade + 8px rise over 320ms ease-out-soft on viewport entry' reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppressed, transitions become opacity-only or instant' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'rgba(36,30,24,0.05) 0 1px 2px 0' card: 'rgba(36,30,24,0.05) 0 6px 20px -6px' elevated: 'rgba(36,30,24,0.10) 0 16px 40px -12px, rgba(36,30,24,0.05) 0 4px 10px -4px' ring: '0 0 0 3px rgba(37,99,235,0.35)' accessibility: contrast-text-on-bg: 19.7 # #030302 on #fcf9f7 — AAA contrast-on-brand: 20.6 # #ffffff on #030302 — AAA contrast-brand-on-bg: 19.7 # #030302 on #fcf9f7 — AAA contrast-secondary-on-bg: 6.6 # #5c5a57 on #fcf9f7 — AA body / AAA large contrast-blue-on-bg: 4.9 # #2563eb on #fcf9f7 — AA body / AAA large contrast-blue-deep-on-soft: 8.4 # #1e40af on #e8effe — AAA focus-ring: '3px rgba(37,99,235,0.35) ring + 2px outline-offset' reduced-motion-honored: true touch-target-min: 44 dark-mode: null # Light-only marketing surface. The Craft app ships full light/dark themes (the dark in-app palette is the neutral oklch scale that surfaced in the probe — near-black #0a0a0a surfaces, #e5e5e5 ink, #262626 accents); the public marketing site is warm-white only. lineage: summary: 'Craft draws from fine-press editorial publishing — the serif-display / sans-body pairing, the warm paper canvas, and the unhurried measure are lifted from print magazine and book design rather than productivity-SaaS convention. The near-black ink (#030302, not #000) and the warm-white paper (#fcf9f7, not #fff) together telegraph ink-on-paper rather than text-on-screen. Untitled Serif and Untitled Sans (Klim Type Foundry) are the editorial register''s backbone — Untitled is a deliberately "neutral" foundry family that reads as the type a careful art director would choose, not a default. The full-pill CTA and the restraint of an almost-monochrome marketing palette borrow from the premium-Apple / Linear school of product marketing, while the literary serif headline distinguishes Craft from the all-sans crowd (Notion, Linear). In-product, Craft pairs this warm-white identity with a blue accent for links and selection — but the marketing site keeps blue almost entirely off the page, letting paper, ink, and pill carry the brand.' influences: - { name: 'Klim Type Foundry (Untitled Serif / Untitled Sans)', role: 'The editorial type pairing — a literary serif display over a neutral grotesque body — is Klim''s Untitled family used as the brand backbone.', url: 'https://klim.co.nz/retail-fonts/untitled-serif/' } - { name: 'Notion', role: 'Adjacent docs/notes contemporary — Craft positions against Notion''s denser, all-sans UI by going editorial and serif-led.', url: 'https://www.notion.so' } - { name: 'Linear', role: 'Premium near-monochrome product-marketing restraint — large quiet type, generous whitespace, a single accent held back.', url: 'https://linear.app' } - { name: 'Apple', role: 'Warm-white canvas, full-pill CTA affordance, soft-grey supporting copy, and product-photography restraint.', url: 'https://www.apple.com' } - { name: 'iA Writer', role: 'Writing-as-craft positioning — typography treated as the product, restraint as a statement of taste.', url: 'https://ia.net/writer' } - { name: 'Things (Cultured Code)', role: 'Indie-Mac productivity aesthetic — calm, premium, paper-warm surfaces over saturated SaaS color.', url: 'https://culturedcode.com/things/' } --- ## 1. Visual Theme & Atmosphere Craft's site is a fine-press editorial that happens to sell a notes app. The canvas is a warm-white `#fcf9f7` — paper, not screen-white — and the first thing the page does is set a 66px headline in **Untitled Serif** at weight 400. Not bold. The literary serif at large size, in near-black `#030302` ink, gives the page the register of a well-set magazine spread rather than a productivity dashboard. The body copy that follows is **Untitled Sans**, a clean neutral grotesque, so the page reads as a deliberate editorial pairing: serif to speak, sans to explain. The atmosphere is **premium, editorial, unhurried**. There is no gradient hero, no animated mesh, no saturated marketing color competing for the eye. The page is almost monochrome — warm paper, near-black ink, and a single high-contrast affordance: the **full-pill "Try Craft Free" CTA**, a `#030302` near-black button with white text and a 9999px radius that makes it read as a lozenge rather than a rectangle. The pill is the only piece of pure geometry on a page otherwise built from type and whitespace. The near-black is `#030302`, not `#000`. The canvas is `#fcf9f7`, not `#ffffff`. Both choices are deliberate: the warmth pulls the page toward ink-on-paper and away from text-on-screen. It is the same instinct behind a book designer choosing cream stock over bright white — the page should feel printed, considered, easy on the eye across a long read. Against this warm paper, the near-black ink reads softer than a hard black would, which lets Craft set type *large* without the page feeling heavy. Craft pairs this warm-white identity with a **blue accent** — but almost entirely inside the product. In-app, blue carries links, selection, and the focus state (the neutral oklch scale that surfaced in the probe is the app's *dark* theme; the marketing site is the warm-white twin). On the marketing surface, blue is held back to a whisper — a link here, a focus ring there — so the public page stays paper-and-ink. This is the brand's discipline: the identity is the *pairing* (warm-white + serif + near-black), and color is reserved for the working software. The result is a page that signals taste before it signals features. Where most productivity sites lead with screenshots, badges, and saturated gradients, Craft leads with a serif sentence on warm paper. The implicit claim — "this is a tool for people who care how things are made" — is carried entirely by the type and the restraint, before a single feature is named. **Key Characteristics:** - Warm-white canvas (`#fcf9f7`) — paper, never screen-white, never tinted grey - Editorial type pairing: **Untitled Serif** display + **Untitled Sans** body (Klim Type Foundry) - 66px H1 in serif at **weight 400** — never bold; the calm of large light-weight serif is the brand - Near-black ink (`#030302`) — softer than pure black, reads as ink-on-paper - Full-pill (9999px) near-black "Try Craft Free" CTA — the page's only hard geometry - Almost-monochrome marketing palette: paper, ink, pill — blue reserved for in-product use - Generous, unhurried whitespace — magazine cadence, not dashboard density - Body copy in soft warm-grey (`#3a3835` / `#5c5a57`), not pure ink, for the running-text layer - Warm-tinted ambient shadows (`rgba(36,30,24,…)`) on the rare lifted card — never cold grey - Cards lift off the warm canvas via pure-white (`#ffffff`) surfaces plus hairline borders - Restraint as positioning — taste signalled by type before features are named ## 2. Color Palette & Roles ### Primary - **Canvas** (`#fcf9f7`): warm-white paper floor — the entire marketing surface. The ink-on-paper metaphor lives here. - **Ink** (`#030302`): near-black — the dominant text color. Headlines, body display, primary nav. Reads softer than `#000` against warm paper. - **Ink Body** (`#3a3835`): warm dark grey — secondary running text and long-form body where pure ink would feel heavy. ### Brand & Dark - **Brand** (`#030302`): near-black — the pill CTA fill and the brand's structural voltage. The same value as Ink, intentionally; Craft treats type-color and brand-color as one. - **Brand Hover** (`#1c1b19`): fractionally-lifted near-black for the pressed/hover state on the pill. - **On-Brand** (`#ffffff`): pure-white text on the near-black pill — 20.6:1 contrast, AAA. ### Accent - **Accent Blue** (`#2563eb`): the in-product blue — inline links, focus, text selection. Held to a whisper on the marketing surface. - **Accent Blue Hover** (`#1d4ed8`): darker blue on hover/press for links and interactive blue. - **Accent Blue Soft** (`#e8effe`): soft blue wash — selection background, soft chips. - **Accent Blue Deep** (`#1e40af`): text on the soft-blue chip — passes AAA against `#e8effe`. ### Interactive - **Link** (`#2563eb`): inline body link — blue, underline on hover (rest state may be underline-free in headings). - **Link Hover** (`#1d4ed8`): darker blue on hover. - **Selected** (`#2563eb` text on `#e8effe` wash): in-product text-selection highlight. - **Disabled** (`#8a8782` text on `#f7f2ee` fill): drained warm grey on a warm panel. ### Neutral Scale - **Ink** (`#030302`) — near-black, the typical heavy-type color - **Ink Body** (`#3a3835`) — warm dark grey, long-form body - **Secondary** (`#5c5a57`) — supporting copy, sub-labels - **Muted** (`#8a8782`) — captions, metadata (large or secondary use only — below AA at body size) ### Surface & Borders - **Canvas** (`#fcf9f7`) — warm-white page floor - **Surface Soft** (`#f7f2ee`) — slightly deeper warm panel for banded sections - **Surface** (`#ffffff`) — pure-white card lifted off the warm canvas - **Surface Elev** (`#fbf7f4`) — warm nested card surface - **Hairline** (`rgba(3,3,2,0.09)`) — default 9% near-black border - **Hairline Soft** (`rgba(3,3,2,0.05)`) — 5% near-black for the faintest dividers - **Hairline Strong** (`rgba(3,3,2,0.16)`) — 16% near-black for focused inputs ### Shadow Colors Craft uses **warm-tinted** shadows (`rgba(36,30,24,…)`) rather than cold neutral grey — the warmth matches the paper canvas. Shadows are used sparingly; most surfaces lift via the white-card-on-warm-canvas contrast plus a hairline border, not via elevation. - `rgba(36,30,24,0.05) 0 1px 2px 0` — ambient - `rgba(36,30,24,0.05) 0 6px 20px -6px` — card hover - `rgba(36,30,24,0.10) 0 16px 40px -12px, rgba(36,30,24,0.05) 0 4px 10px -4px` — floating panel / dropdown ### Semantic - **Success** (`#2f7d4f` on `#e8f3ec`) — confirmation green - **Warning** (`#9a6212` on `#fbf0dc`) — advisory amber - **Danger** (`#c0382e` on `#f9e6e3`) — form-error red - **Info** (`#2563eb` on `#e8effe`) — informational accent — *intentionally* the same as accent-blue. ## 3. Typography Rules ### Font Family **Display Primary**: `"Untitled Serif"` (Klim Type Foundry) — the editorial serif that carries every headline. Fallback chain: `"Untitled Serif Font", Georgia, "Times New Roman", serif`. Georgia is the closest non-licensed approximation — a screen-readable serif with similar warmth and proportion. **Body Primary**: `"Untitled Sans"` (Klim Type Foundry) — a neutral grotesque for running text. Fallback chain: `"Untitled Sans Font", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif`. The body sans is deliberately *quiet* so the serif headlines carry the personality. **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace` — for code blocks and inline shortcuts inside product demonstrations. **OpenType features**: `kern` and `liga` always on for the serif. No manually enabled stylistic sets — the families are used as drawn. The serif-display / sans-body pairing is the brand's central typographic decision. Most productivity sites run all-sans (Notion, Linear) for a "neutral software" feel. Craft instead pairs a literary serif headline with a neutral sans body, which gives the page an editorial register — the serif speaks with character, the sans explains with clarity. The split is the differentiator. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | display-hero | Untitled Serif | 80 | 400 | 1.02 | -0.02em | Oversized hero moment (large viewports) | | display-lg / h1 | Untitled Serif | 66 | 400 | 1.05 | -0.018em | The probed hero H1 — peak typographic moment | | h2 | Untitled Serif | 54 | 400 | 1.08 | -0.014em | The probed section opener | | h3 | Untitled Serif | 36 | 400 | 1.15 | -0.01em | Sub-section opener | | h4 | Untitled Serif | 24 | 500 | 1.25 | -0.005em | Feature title — the one serif weight-up | | title-md | Untitled Sans | 20 | 600 | 1.35 | 0 | Card title (sans, for working UI) | | title-sm | Untitled Sans | 17 | 600 | 1.40 | 0 | Inline emphasis title | | body-lg | Untitled Sans | 19 | 400 | 1.60 | 0 | Hero deck — slightly larger body | | body | Untitled Sans | 16 | 400 | 1.60 | 0 | The probed default running text | | body-sm | Untitled Sans | 14 | 400 | 1.55 | 0 | Card meta, supporting copy | | caption | Untitled Sans | 13 | 500 | 1.40 | 0 | Timestamp, byline | | label | Untitled Sans | 12 | 600 | 1.30 | 0.06em | Section eyebrow — uppercase, tracked | | button | Untitled Sans | 15 | 500 | 1.20 | 0 | Pill CTA / button label | | nav-link | Untitled Sans | 15 | 500 | 1.40 | 0 | Top-nav item | | link | Untitled Sans | 16 | 400 | 1.60 | 0 | Inline body link (matches body) | | code | mono | 14 | 400 | 1.55 | 0 | Code sample in product demos | ### Principles - **Serif display at weight 400 is the brand fingerprint.** Craft refuses to bold its serif headlines — the lighter weight at 66px is what gives the page its editorial calm. Pushing the H1 to 600/700 collapses the magazine register into generic SaaS. - **Serif speaks, sans explains.** Untitled Serif carries headlines and pull-moments; Untitled Sans carries everything that needs to be read fast. Never swap the roles — sans headlines lose the personality, serif body loses the legibility. - **16px body at 1.60 line-height.** The lush leading is part of the editorial feel; tighter leading reads as a denser dashboard. - **Near-black ink, never pure black.** `#030302` is warmer and softer than `#000` against the paper canvas; substituting `#000` makes large type feel heavy and "screen-y". - **Negative tracking on serif display only.** Headlines tighten (-0.018em at 66px); body and labels sit at zero or slightly positive (0.06em on uppercase labels). - **Body copy steps down to warm grey for long reads.** Pure ink (`#030302`) for headlines and short emphasis; `#3a3835` / `#5c5a57` warm-grey for sustained running text. - **Georgia is the serif fallback, system-sans the body fallback.** If Untitled is unavailable, Georgia approximates the serif warmth and a system grotesque (-apple-system / Segoe UI / Roboto) covers the body without drama. ## 4. Component Stylings ### Buttons **`button-primary`** — The signature full-pill CTA ("Try Craft Free"). `#030302` near-black fill, white text at 15px / 500, **9999px radius** (full pill), 12×24px padding, 48px height. The pill is the page's only hard geometry; the radius is what makes it read premium rather than utilitarian. **`button-primary-hover`** — Pointer hover. Background lifts to `#1c1b19` over 150ms standard. **No transform, no scale, no glow** — color-only, matching the page's restraint. **`button-ghost`** — Secondary action. Transparent fill, near-black text, 1px hairline border (`rgba(3,3,2,0.09)`), same 9999px pill radius and 12×24px padding. On hover, the border darkens to 16% and a faint warm fill appears. **`button-text`** — Tertiary / inline action. No fill, no border; near-black or blue (`#2563eb`) text with an underline that appears on hover. Used for "Learn more" / "See pricing" links beside the primary pill. ### Cards **`card`** — Pure-white feature card. `#ffffff` fill lifted off the warm canvas, **16px radius**, 1px hairline border (`rgba(3,3,2,0.09)`), 32px padding. Default state is flat or near-flat; the white-on-warm contrast plus the hairline does the lifting. Optional warm ambient shadow (`rgba(36,30,24,0.05) 0 6px 20px -6px`) on hover. **`card-warm`** — Warm nested panel. `#fbf7f4` fill, soft 5% hairline. Used for in-flow content where pure white on warm canvas would feel too stark. **`testimonial-quote`** — Pull-quote card. White fill, 16px radius, hairline border, 32px padding. Quote set in Untitled Serif at 24px / 400 near-black (the serif carries the human voice), byline beneath in caption secondary with a circular avatar flush left. ### Badges, Tags, Pills **`badge`** — Soft warm chip. `#f7f2ee` fill, secondary (`#5c5a57`) text, 9999px radius, 4×12px padding, 12px / 600 uppercase label. Used for "New", "Beta", section eyebrows. **`badge-blue`** — Soft blue chip. `#e8effe` fill, deep-blue (`#1e40af`) text, 9999px radius. The rare moment blue surfaces on the marketing page — used for in-product feature callouts. ### Inputs / Forms **`input`** — White fill (`#ffffff`), 1px hairline (`rgba(3,3,2,0.09)`), **12px radius**, 44px height, 12×16px padding. Placeholder in 16px / 400 muted. On focus, the border thickens to 16% near-black and a soft blue ring (`0 0 0 3px rgba(37,99,235,0.35)`) appears — blue is the focus voltage even when the page is otherwise paper-and-ink. **`textarea`** — Same treatment as input, taller, used for the newsletter / waitlist capture. ### Navigation **`top-nav`** — Warm-white surface (`#fcf9f7`, matching canvas), 64px height, optional 1px bottom hairline on scroll. Wordmark flush left in near-black. Nav links (Product, Pricing, Resources) in 15px / 500 near-black, no underline at rest. Right side: a text "Sign in" link plus the near-black full-pill "Try Craft Free" CTA flush right. **`nav-link`** — Near-black (`#030302`) or warm grey, no underline at rest; underline or color-soften on hover. ### Decorative **`section-eyebrow`** — Uppercase 12px / 600 label, tracked 0.06em, in secondary grey — sits above serif section headlines as a quiet category marker (the editorial "kicker" convention). ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128` - Section padding (vertical): 96–128px for major bands — generous magazine cadence - Card internal padding: 32px on feature and testimonial cards; 24px on smaller nested panels - Inter-card gutters: 24px between cards in a multi-up grid ### Grid & Container - Max content width: **1200px** outer container; prose columns cap near **680px** for comfortable measure (the editorial line-length convention) - Hero: single-column, often left-aligned or centered, serif H1 + sans deck + pill CTA stacked vertically - Feature grid: 3-up at desktop, 2-up at tablet, 1-up at mobile - Product screenshots float against the warm canvas, framed by their own rounding and a soft warm shadow ### Whitespace Philosophy The page reads like a magazine spread, not a dashboard. Whitespace is the primary structural device — sections breathe with 96–128px vertical bands, prose holds a 680px measure for readability, and the warm canvas runs edge-to-edge between sections. Surfaces lift via the white-card-on-warm-paper contrast and a hairline border, rarely via stacked shadow. The restraint is the point: the page should feel unhurried. ### Section Cadence A typical Craft page runs: 1. Warm-white hero (66px serif H1 at weight 400, 19px sans deck, near-black full-pill CTA, product screenshot beneath) 2. Feature spread 1 (editor / docs demo — full-width screenshot, supporting serif sub-head + sans copy) 3. Feature grid (three-up white cards on warm canvas, sans titles + body, serif section opener above) 4. Testimonial / social-proof band (serif pull-quotes on white cards) 5. Use-case or template gallery (warm-panel band, `#f7f2ee`) 6. Closing CTA band (serif H2, near-black full-pill CTA centered) 7. Footer (sans column heads in 17px / 600, links in 14px / 400 secondary) The page does not light/dark alternate — it stays warm-white throughout. The "alternation" is warm-canvas (`#fcf9f7`) versus warm-panel (`#f7f2ee`) versus white-card (`#ffffff`) surface contrast. ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 4px | Inline tags, fine-grained chips | | Standard | 8px | Small controls, nested inputs | | Comfortable | 12px | Text inputs, small cards — the working-UI default | | Relaxed | 16px | Feature cards, testimonial cards — the dominant card rounding | | Large | 24px | Large feature shells, product-screenshot frames | | Pill | 9999px | The "Try Craft Free" CTA, badges, chips | Craft's radius hierarchy is **soft but disciplined** — cards round generously at 16px (warmer than Bear's architectural 8px), inputs at 12px, and the signature CTA goes all the way to a full pill (9999px). The full-pill button against otherwise-rectangular type-and-card layout is the deliberate contrast: one piece of pure geometry on a page of paper and ink. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Canvas, hero, most sections, nav (~80% of surfaces) | | 1 — Ambient | `rgba(36,30,24,0.05) 0 1px 2px 0` | Subtle inputs, nav at scroll | | 2 — Card | `rgba(36,30,24,0.05) 0 6px 20px -6px` | Feature card hover, floating screenshot | | 3 — Elevated | `rgba(36,30,24,0.10) 0 16px 40px -12px, rgba(36,30,24,0.05) 0 4px 10px -4px` | Dropdowns, popovers, floating panels | | 4 — Modal | scrim `rgba(18,16,14,0.45)` + dialog with elevated shadow | Sign-in / waitlist modal | ### Shadow Philosophy Craft's shadows are **warm-tinted** (`rgba(36,30,24,…)`) to match the paper canvas — cold neutral-grey shadows would fight the warmth. Elevation is used sparingly: the page's primary lift mechanism is the white-card-on-warm-canvas contrast plus a hairline border, not a shadow stack. When a shadow does appear (a floating product screenshot, a hover on a feature card), it is soft and warm — a diffuse lift rather than a hard drop. The restraint keeps the page reading as printed-flat editorial rather than layered Material-style UI. ## 8. Interaction & Motion ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover color swaps, hairline transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, larger reveals - **Out-soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — section scroll-reveals ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Button hover, hairline tone swaps, focus-ring fade | | Standard | 240ms | Card hover lift, link color shifts | | Slow | 320ms | Modal entry, section scroll-reveal | ### Per-Component Recipes - **Primary pill hover**: background `#030302` → `#1c1b19` over 150ms standard. **No transform, no scale.** Color-only. - **Ghost button hover**: border darkens 9% → 16% near-black, faint warm fill appears, over 150ms. - **Card hover**: a soft warm ambient shadow grows over 240ms; an optional 1px rise on interactive cards. Most static cards stay flat. - **Link hover (blue)**: color darkens `#2563eb` → `#1d4ed8` over 150ms; underline appears or thickens. - **Focus ring**: a soft blue ring (`0 0 0 3px rgba(37,99,235,0.35)`) fades in over 150ms with 2px outline-offset. - **Scroll reveal**: sections fade in and rise 8px over 320ms ease-out-soft on first viewport entry. One-shot per section. ### Page Transitions Page-to-page navigation uses a brief cross-fade; the warm-white canvas means there is no jarring light/dark flash. Anchored smooth-scroll uses emphasized easing. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress; transitions degrade to opacity-only or instant. Scroll-reveal becomes static render-on-mount. Card hover loses its rise; only the focus ring and color swaps remain. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #030302 ink on #fcf9f7 canvas | 19.7 | AAA | | #ffffff on #030302 brand pill | 20.6 | AAA | | #030302 brand on #fcf9f7 canvas | 19.7 | AAA | | #5c5a57 secondary on #fcf9f7 | 6.6 | AA body / AAA large | | #2563eb blue on #fcf9f7 | 4.9 | AA body / AAA large | | #1e40af deep-blue on #e8effe soft-blue | 8.4 | AAA | The near-black ink on warm paper lands at a generous 19.7:1 — comfortably AAA — which is why Craft can set serif type *large* without fatigue. The secondary warm-grey (`#5c5a57`) is calibrated to pass AA at body size; the lighter muted grey (`#8a8782`) is reserved for large text and metadata, where its 3.4:1 is acceptable but not for body runs. Blue (`#2563eb`) clears AA on the warm canvas for links and large text. ### Focus Indicators Focus ring is a soft blue (`0 0 0 3px rgba(37,99,235,0.35)`) with 2px outline-offset. Blue is the focus voltage even on the otherwise paper-and-ink page — the brand reserves blue for *interaction* (focus, links, selection) and keeps near-black for *identity* (the pill, the type). ### ARIA Patterns - **Top nav**: `