light · serif · sans · premium · editorial · warm · productivity
DESIGN.md inspired by Craft
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.
By webdesignhot · www.craft.do ↗
$ npx @webdesignhot/design-md add craft
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Aesop Monochrome-warm apothecary — ivory canvas, charcoal type, Suisse Int'l set small, 0px corners. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Amplitude Light-canvas digital-analytics surface — IBM Plex Sans, grey #565656 body, black full-pill CTAs and a signature #1e61f0 blue. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Anytype Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Black Forest Labs Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Captions Near-white studio canvas, an Exposure display, and a violet brand keyed off a full crayon-box of CSS color vars. Caraway Wholesome non-toxic-cookware DTC — Suisse Works serif on warm off-white, deep teal-green pill CTAs, pastel colorway palette. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudflare Infrastructure-grade calm — white canvas, dark hero band, FT Kunst Grotesk, signature Cloudflare orange, full-pill CTAs. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Coda White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. dbt Labs dbt orange Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Drizzle ORM Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glean White enterprise canvas, near-black indigo headlines, and one electric Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Graza Squeeze-bottle olive-oil DTC — quirky GT Alpina Typewriter on peachy-cream, olive type, chartreuse-lime CTAs at 32px. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. Harvey Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. HeyGen Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Inngest Durable workflows on a near-black canvas — Whyte display, muted gold CTAs, sharp 0px edges. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Intercom Cream canvas, near-black Saans display, and electric-cobalt JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lambda Near-black Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. Liquid Death Black canvas, condensed all-caps Acumin Pro, stark black-and-white — heavy-metal brutalism for canned water. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Loom White canvas, Charlie Display sans, and a confident Atlassian blue pill — async video that feels like a calm, friendly workspace. LottieFiles White-canvas animation studio — DM Sans display at 96px, Inter body, near-black text, one signature teal #019d91. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mejuri Monochrome luxury — white canvas, near-black ink, Syndicat Grotesk small caps and a Simon Mono accent. The jewelry photography does all the color work. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Netlify White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Our Place Warm-heritage cookware DTC — Cheltenham serif at light 300 on a cream canvas, terracotta SHOP NOW CTAs, Plaid body. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Penpot Open-source design-and-code platform — dark hero, Work Sans display, mint-green action surface on a white canvas. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. Prisma White-paper canvas, navy ink, a single confident teal — the type-safe data layer dressed as documentation. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Relume Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder. Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Scale AI White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Sierra Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SKIMS Nude-neutral minimal luxury — cream canvas, dark photographic hero, warm near-black #2d2a26, sharp 0px. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spline Pure-black 3D-design canvas with electric-blue CTAs and a playful multi-color accent set — the browser becomes the viewport. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Stability AI A near-black studio floor where Archivo headlines run light and a single lavender pill carries the only colour. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Synthesia A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Temporal Near-black engineering canvas, Aeonik at hairline-light 300, signature indigo CTA — durable-execution gravity for distributed-systems people. Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. Tinybird Near-black developer canvas lit by one bright mint-green — managed ClickHouse with sharp, zero-radius CTAs. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Todoist Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Trigger.dev Background jobs in the dark — Satoshi on near-black, one electric lime for action. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. Upstash Serverless data, daylight calm — a pale-grey canvas, deep green-black type, and one electric Upstash green. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Vapi Near-black developer canvas lit by a signature lime and a playful multi-color set — Avantt display at 80px over Season Sans body, cream text, r12 CTAs. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Vuori Coastal-California performance calm — Aktiv Grotesk on pure white, warm near-black `#333333` ink, restrained small type (28px h1), photography-led, sharp 0px corners. Premium-athletic that never raises its voice. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. Windsurf Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Wispr Flow Pale lemon-cream paper, EB Garamond at 120px, and a lavender download pill — voice dictation that dresses like a literary journal. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. xAI White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#fcf9f7 - bg-soft
#f7f2ee - surface
#ffffff - surface-elev
#fbf7f4 - text AAA · 19.7
#030302 - text-strong
#030302 - text-body
#3a3835 - text-secondary
#5c5a57 - text-muted
#8a8782 - brand AAA · 19.7
#030302 - brand-hover
#1c1b19 - on-brand
#ffffff - accent-blue
#2563eb - accent-blue-hover
#1d4ed8 - accent-blue-soft
#e8effe - accent-blue-deep
#1e40af - border — · 1.2
rgba(3, 3, 2, 0.09) - border-soft
rgba(3, 3, 2, 0.05) - border-strong — · 1.4
rgba(3, 3, 2, 0.16) - shadow-card
rgba(36, 30, 24, 0.05) - shadow-elev
rgba(36, 30, 24, 0.10) - scrim
rgba(18, 16, 14, 0.45) - success
#2f7d4f - success-soft
#e8f3ec - warning
#9a6212 - warning-soft
#fbf0dc - danger
#c0382e - danger-soft
#f9e6e3 - info
#2563eb - info-soft
#e8effe
Ship faster than ever.
display-hero "Untitled Serif" 80px w400 -0.02em
Ship faster than ever.
display-lg "Untitled Serif" 66px w400 -0.018em
Ship faster than ever.
h1 "Untitled Serif" 66px w400 -0.018em
Built for teams that ship.
h2 "Untitled Serif" 54px w400 -0.014em
A complete kit
h3 "Untitled Serif" 36px w400 -0.01em
The quick brown fox jumps over the lazy dog.
h4 "Untitled Serif" 24px w500 -0.005em
The quick brown fox jumps over the lazy dog.
title-md "Untitled Sans" 20px w600 0
The quick brown fox jumps over the lazy dog.
body-lg "Untitled Sans" 19px w400 0
The quick brown fox jumps over the lazy dog.
title-sm "Untitled Sans" 17px w600 0
The quick brown fox jumps over the lazy dog.
body "Untitled Sans" 16px w400 0
The quick brown fox jumps over the lazy dog.
link "Untitled Sans" 16px w400 0
The quick brown fox jumps over the lazy dog.
button "Untitled Sans" 15px w500 0
The quick brown fox jumps over the lazy dog.
nav-link "Untitled Sans" 15px w500 0
The quick brown fox jumps over the lazy dog.
body-sm "Untitled Sans" 14px w400 0
npx @webdesignhot/design-md add stripe
code ui-monospace 14px w400 0
OUR DESIGN SYSTEM
caption "Untitled Sans" 13px w500 0
OUR DESIGN SYSTEM
label "Untitled Sans" 12px w600 0.06em
- step-0 0px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 24px
- step-6 32px
- step-7 48px
- step-8 64px
- step-9 96px
- step-10 128px
- micro
4px - sm
8px - md
12px - lg
16px - xl
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 8/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → accent-blue
- muted → text-muted
- border → border
- ring → border-strong
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.
- The editorial type pairing — a literary serif display over a neutral grotesque body — is Klim's Untitled family used as the brand backbone.
- Adjacent docs/notes contemporary — Craft positions against Notion's denser, all-sans UI by going editorial and serif-led.
- Premium near-monochrome product-marketing restraint — large quiet type, generous whitespace, a single accent held back.
- Warm-white canvas, full-pill CTA affordance, soft-grey supporting copy, and product-photography restraint.
- Writing-as-craft positioning — typography treated as the product, restraint as a statement of taste.
- Indie-Mac productivity aesthetic — calm, premium, paper-warm surfaces over saturated SaaS color.
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
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**: `<nav>` landmark with `aria-label="Primary"`. The wordmark is a link to home with an accessible name.
- **Primary CTA**: `<a>` or `<button>` with a clear accessible name ("Try Craft Free"); the pill shape is decorative, the label carries the meaning.
- **Feature cards**: if the whole card is clickable, the card is a single `<a>` with one accessible name; nested links avoid duplicate tab stops.
- **Section eyebrows**: decorative kickers are associated with their heading, not announced as separate landmarks.
- **Modal** (sign-in / waitlist): focus trap, Esc closes, click-outside closes, focus returns to the trigger.
### Keyboard Navigation
- Top nav: Tab moves logo → nav links → Sign in → Try Craft Free
- Feature cards: Tab moves card → card; the whole card activates on Enter when it is a single link
- Modal: Tab cycles only through interactive elements inside the dialog
- All interactive elements show the blue focus ring; the ring is never suppressed without a replacement
### Screen Reader Hints
Product screenshots carry descriptive alt text naming the visible UI ("Craft document editor with a styled heading, a card block, and the right-hand outline panel visible"). Decorative section eyebrows and ornamental serifs are not separately announced. The serif/sans split is purely visual and carries no semantic weight.
### Reduced Motion
All transitions degrade to opacity-only or instant. Scroll-reveal becomes static. Card hover loses its rise. The focus ring and essential color-state changes remain.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Top nav collapses to logo + hamburger; hero H1 drops 66 → 36px; feature cards 1-up; pill CTA goes full-width or stays inline at 48px height; screenshots scale to viewport-width |
| Tablet | 640–1024px | Top nav keeps inline links; hero H1 settles ~48px; feature cards 2-up; screenshots ~90% viewport-width |
| Desktop | 1024–1280px | Full top nav; hero H1 at 66px; feature cards 3-up; container at 1200px |
| Wide | >1280px | Content caps at 1200px; gutters absorb the rest; hero may scale to the 80px display-hero size |
### Touch Targets
- Primary pill CTA: 48px height — comfortably above the 44px minimum
- Nav links: minimum 44×44px hit area
- Inputs: 44px height
- Inline link tap-target: 44px row height even at 16px / 1.60 body type
### Collapsing Strategy
- Top-nav links collapse into a hamburger sheet below 640px
- Feature grids: 3 → 2 → 1 columns
- Serif headlines scale down but never switch to sans — the serif identity holds at all sizes
- Product screenshots scale by viewport — never crop, never deform; rounding scales proportionally
### Image Behavior
Product screenshots render at 2x with CSS rounding (16–24px) and a soft warm drop shadow. They scale via `width: 100%; height: auto;` to preserve aspect ratio against the warm canvas.
### Container Queries
Used on card grids where a card may appear in a wide or narrow column — the card's internal layout (title / body / icon stacking) responds to its own width rather than the viewport.
## 11. Content & Voice
### Tone
Calm, considered, literate. Craft's voice is closer to a good magazine than a SaaS landing — full sentences, no exclamation marks, no Silicon Valley enthusiasm. The serif headline does the emotional work; the sans body explains plainly. The voice trusts the reader to value craft (the pun is the brand) without being told to.
### Microcopy Patterns
- **Button verbs**: "Try Craft Free", "Get started", "See pricing", "Sign in" — direct, outcome-named
- **Error message recipe**: `[What went wrong] + [What to try]` — e.g., "We couldn't sync that document. Check your connection and try again."
- **Success confirmations**: short, factual — "Saved." / "Synced."
- **Field labels**: minimal — "Email", "Workspace name" — no friendly framing
### Empty States
- Empty document: "Start with a blank page, or pick a template." — names both paths.
- Empty space / workspace: "Nothing here yet. Create your first document." — declarative, single action.
### CTA Verb Conventions
- Primary action: **"Try Craft Free"** (the signature pill), **"Get started"**
- Secondary action: **"See pricing"**, **"Sign in"**, **"Watch the tour"**
- Tertiary text: **"Learn more"**, **"Read the docs"**, **"Explore templates"**
- Avoided: "Submit", "Click here", "Buy now" — Craft uses outcome verbs, never generic ones
## 12. Dark Mode & Theming
**Light-only marketing surface.** The Craft *app* ships full light/dark themes — the neutral oklch scale that surfaced in the probe is the app's dark palette (near-black `#0a0a0a` backgrounds, `#e5e5e5` ink, `#262626` accents, on a cool shadcn-style neutral ramp). The public marketing site, however, is warm-white only — it stays on the `#fcf9f7` paper canvas throughout to preserve the editorial, ink-on-paper identity.
If a future dark marketing variant were shipped, the warm-white identity would invert to a warm near-black rather than the app's cool neutral: canvas `#161412` (warm near-black, not the app's cool `#0a0a0a`), surface `#211e1b`, ink `#f3efea` (warm off-white), brand pill flipped to a warm off-white fill with near-black text, and the blue accent lightened to `#7aa2f7` to clear AA on the dark surface. The key is that the marketing dark theme would stay *warm* to match the brand, where the in-app dark theme is deliberately *cool/neutral* for working comfort.
## 13. Lineage & Influences
Craft's design is a fine-press editorial that ships a notes app. The visual lineage runs through three traditions: **print magazine and book design** (the serif-display / sans-body pairing, the warm paper canvas `#fcf9f7`, the 680px prose measure, the unhurried section cadence); **Klim Type Foundry's editorial register** (Untitled Serif + Untitled Sans, a "neutral" foundry family chosen the way a careful art director chooses type — present but not loud); and the **premium-Apple / Linear school of product marketing** (warm-white canvas, full-pill CTA, near-monochrome restraint, a single accent held almost entirely off the marketing page).
The serif headline is what distinguishes Craft from its all-sans contemporaries. Notion and Linear both lead with neutral grotesque type for a "software" feel; Craft instead leads with a literary serif at weight 400, which gives the page an editorial, almost-bookish character before a single feature is named. The near-black ink (`#030302`, not `#000`) and the warm paper (`#fcf9f7`, not `#ffffff`) reinforce this — the page is tuned to read as ink-on-paper, the same instinct behind iA Writer's writing-as-craft positioning and Things' calm indie-Mac surfaces.
What Craft rejects: saturated marketing gradients, all-sans neutrality, dense dashboard layouts, exclamation-point enthusiasm, and a loud brand color on the marketing page. In-product, Craft pairs the warm-white identity with a blue accent for links and selection — but the public site keeps blue to a whisper, letting paper, ink, and the full-pill CTA carry the brand. The discipline — serif speaks, sans explains, color stays in the working software — is the whole identity.
**Influences:**
- Klim Type Foundry (Untitled Serif / Untitled Sans) — the editorial type pairing that is the brand's backbone, [klim.co.nz/retail-fonts/untitled-serif](https://klim.co.nz/retail-fonts/untitled-serif/)
- Notion — adjacent docs/notes contemporary Craft positions against by going serif-led, [notion.so](https://www.notion.so)
- Linear — premium near-monochrome product-marketing restraint, [linear.app](https://linear.app)
- Apple — warm-white canvas, full-pill CTA affordance, product-photography restraint, [apple.com](https://www.apple.com)
- iA Writer — writing-as-craft positioning, typography treated as the product, [ia.net/writer](https://ia.net/writer)
- Things (Cultured Code) — calm, premium, paper-warm indie-Mac productivity aesthetic, [culturedcode.com/things](https://culturedcode.com/things/)
## 14. Do's and Don'ts
**Do**
- Keep the canvas warm-white (`#fcf9f7`) — paper, never screen-white, never tinted grey
- Set headlines in Untitled Serif at weight 400 (never bold) — the calm of large light-weight serif is the brand
- Pair the serif display with Untitled Sans body — serif speaks, sans explains
- Use near-black ink (`#030302`), not pure `#000` — the warmth reads as ink-on-paper
- Make the primary CTA a full pill (9999px) in near-black with white text — the page's one piece of hard geometry
- Step body copy down to warm grey (`#3a3835` / `#5c5a57`) for long reads
- Use warm-tinted shadows (`rgba(36,30,24,…)`) sparingly — the page lifts via white-on-warm contrast, not shadow stacks
- Round cards generously at 16px and inputs at 12px — soft but disciplined
- Hold the blue accent (`#2563eb`) to a whisper on marketing pages — reserve it for in-product links, focus, selection
- Give sections 96–128px vertical breathing room and prose a ~680px measure — magazine cadence
- Use the blue focus ring (`rgba(37,99,235,0.35)`) even on the paper-and-ink page — blue is the interaction voltage
**Don't**
- Don't use a screen-white `#ffffff` canvas — the warm paper is the brand; white-card surfaces are the exception, not the floor
- Don't bold the serif headlines — weight 400 is what separates Craft from generic SaaS
- Don't set headlines in sans or body in serif — the split roles are non-negotiable
- Don't substitute pure black (`#000`) for the near-black ink — large type goes heavy and "screen-y"
- Don't make the CTA a sharp-cornered rectangle — the full pill is the signature
- Don't flood the marketing page with the blue accent — it belongs inside the product, not on the landing
- Don't add saturated marketing gradients or animated mesh heroes — the restraint is the positioning
- Don't crowd sections — dashboard density collapses the editorial register
- Don't use cold neutral-grey shadows — warmth must match the paper
- Don't import the app's cool dark palette into the marketing site — the marketing surface is warm-white only
- Don't use exclamation marks or "Click here" CTAs — the voice is calm and outcome-named
- Don't tighten body line-height below 1.6 — the lush leading is part of the read
## 15. Agent Prompt Guide
### Quick Color Reference
```
Canvas: #fcf9f7 (warm-white paper — the brand floor)
Surface-warm: #f7f2ee (deeper warm panel for banded sections)
Surface-white: #ffffff (pure-white card lifted off the warm canvas)
Ink: #030302 (near-black — headlines, brand, pill fill)
Ink-body: #3a3835 (warm dark grey — long-form body)
Secondary: #5c5a57 (supporting copy, sub-labels)
Muted: #8a8782 (captions, metadata — large/secondary only)
Accent-blue: #2563eb (in-product links / focus / selection)
Blue-soft: #e8effe (selection wash, soft chip background)
Hairline: rgba(3,3,2,0.09)
On-brand: #ffffff (white text on the near-black pill)
```
### Example Component Prompts
- "Create a Craft-style hero: warm-white canvas (#fcf9f7), a 66px Untitled Serif H1 at weight 400 in near-black #030302 with -0.018em tracking and 1.05 line-height (serif, never bold). Beneath it: a 19px Untitled Sans deck in warm grey #3a3835 at 1.60 line-height. Below: a full-pill (9999px) near-black #030302 'Try Craft Free' button with white text at 15px / 500, 12×24px padding, 48px height. The whole hero reads editorial and unhurried — no gradients, no animated background, just type and whitespace on warm paper."
- "Design a Craft feature card: pure-white fill (#ffffff) lifted off the warm canvas, 16px radius, 1px hairline border at rgba(3,3,2,0.09), 32px padding. Inside: a 20px / 600 Untitled Sans title in near-black #030302, then 16px / 400 Untitled Sans body at 1.60 line-height in warm grey #3a3835. The card lifts via white-on-warm contrast plus the hairline — no shadow at rest; a soft warm shadow (rgba(36,30,24,0.05) 0 6px 20px -6px) only on hover."
- "Build a Craft full-pill CTA: near-black #030302 fill, white text 'Try Craft Free' at 15px / 500 Untitled Sans, 9999px radius (full pill), 12×24px padding, 48px height. On hover, the fill lifts to #1c1b19 over 150ms — color-only, no scale or transform. This is the page's only piece of hard geometry against an otherwise type-and-card layout."
- "Create the Craft nav: 64px tall warm-white surface (#fcf9f7, matching canvas), wordmark left in near-black #030302, three centered nav links (Product, Pricing, Resources) in 15px / 500 #030302 with no underline at rest. Right side: a 'Sign in' text link plus the near-black full-pill 'Try Craft Free' CTA. Add a 1px bottom hairline (rgba(3,3,2,0.09)) only when the page is scrolled."
- "Design a Craft testimonial card: white fill, 16px radius, 1px hairline border, 32px padding. The pull-quote is set in Untitled Serif at 24px / 400 near-black (#030302) with 1.25 line-height — the serif carries the human voice. Beneath: a 40px circular avatar flush left, with name in 14px / 600 Untitled Sans and role in 13px / 500 secondary grey (#5c5a57)."
- "Build a Craft section opener: an uppercase 12px / 600 Untitled Sans eyebrow label, tracked 0.06em, in secondary grey (#5c5a57), sitting above a 54px Untitled Serif H2 at weight 400 in near-black #030302 with -0.014em tracking. Generous 96px vertical padding above. The eyebrow is the editorial 'kicker'; the serif headline does the emotional work."
### Iteration Guide
1. **Canvas warm-white, never screen-white.** `#fcf9f7` is paper; `#ffffff` is the card exception. If the page looks cold, the canvas is wrong.
2. **Serif headlines at weight 400, never bold.** The calm of large light-weight serif is the entire brand. Bolding tips it into generic SaaS.
3. **Serif speaks, sans explains.** Untitled Serif for headlines and pull-quotes; Untitled Sans for everything read fast. Never swap.
4. **Near-black ink, not pure black.** `#030302` is warmer and softer than `#000` against paper — large type stays comfortable.
5. **The CTA is a full pill.** 9999px near-black with white text is the signature; a sharp rectangle loses the premium register.
6. **Hold blue back on marketing.** `#2563eb` belongs to in-product links, focus, and selection — a whisper on the landing, never a flood.
7. **Lift via contrast, not shadow.** White-card-on-warm-canvas plus a hairline does the work; warm shadows appear only on hover, sparingly.
8. **Give it room.** 96–128px section bands and a ~680px prose measure at 1.60 line-height — the editorial cadence is half the brand.
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#000against 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 (
#2563ebtext on#e8effewash): in-product text-selection highlight. - Disabled (
#8a8782text on#f7f2eefill): 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— ambientrgba(36,30,24,0.05) 0 6px 20px -6px— card hoverrgba(36,30,24,0.10) 0 16px 40px -12px, rgba(36,30,24,0.05) 0 4px 10px -4px— floating panel / dropdown
Semantic
- Success (
#2f7d4fon#e8f3ec) — confirmation green - Warning (
#9a6212on#fbf0dc) — advisory amber - Danger (
#c0382eon#f9e6e3) — form-error red - Info (
#2563ebon#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.
#030302is warmer and softer than#000against the paper canvas; substituting#000makes 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/#5c5a57warm-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:
- Warm-white hero (66px serif H1 at weight 400, 19px sans deck, near-black full-pill CTA, product screenshot beneath)
- Feature spread 1 (editor / docs demo — full-width screenshot, supporting serif sub-head + sans copy)
- Feature grid (three-up white cards on warm canvas, sans titles + body, serif section opener above)
- Testimonial / social-proof band (serif pull-quotes on white cards)
- Use-case or template gallery (warm-panel band,
#f7f2ee) - Closing CTA band (serif H2, near-black full-pill CTA centered)
- 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→#1c1b19over 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→#1d4ed8over 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:
<nav>landmark witharia-label="Primary". The wordmark is a link to home with an accessible name. - Primary CTA:
<a>or<button>with a clear accessible name (“Try Craft Free”); the pill shape is decorative, the label carries the meaning. - Feature cards: if the whole card is clickable, the card is a single
<a>with one accessible name; nested links avoid duplicate tab stops. - Section eyebrows: decorative kickers are associated with their heading, not announced as separate landmarks.
- Modal (sign-in / waitlist): focus trap, Esc closes, click-outside closes, focus returns to the trigger.
Keyboard Navigation
- Top nav: Tab moves logo → nav links → Sign in → Try Craft Free
- Feature cards: Tab moves card → card; the whole card activates on Enter when it is a single link
- Modal: Tab cycles only through interactive elements inside the dialog
- All interactive elements show the blue focus ring; the ring is never suppressed without a replacement
Screen Reader Hints
Product screenshots carry descriptive alt text naming the visible UI (“Craft document editor with a styled heading, a card block, and the right-hand outline panel visible”). Decorative section eyebrows and ornamental serifs are not separately announced. The serif/sans split is purely visual and carries no semantic weight.
Reduced Motion
All transitions degrade to opacity-only or instant. Scroll-reveal becomes static. Card hover loses its rise. The focus ring and essential color-state changes remain.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Top nav collapses to logo + hamburger; hero H1 drops 66 → 36px; feature cards 1-up; pill CTA goes full-width or stays inline at 48px height; screenshots scale to viewport-width |
| Tablet | 640–1024px | Top nav keeps inline links; hero H1 settles ~48px; feature cards 2-up; screenshots ~90% viewport-width |
| Desktop | 1024–1280px | Full top nav; hero H1 at 66px; feature cards 3-up; container at 1200px |
| Wide | >1280px | Content caps at 1200px; gutters absorb the rest; hero may scale to the 80px display-hero size |
Touch Targets
- Primary pill CTA: 48px height — comfortably above the 44px minimum
- Nav links: minimum 44×44px hit area
- Inputs: 44px height
- Inline link tap-target: 44px row height even at 16px / 1.60 body type
Collapsing Strategy
- Top-nav links collapse into a hamburger sheet below 640px
- Feature grids: 3 → 2 → 1 columns
- Serif headlines scale down but never switch to sans — the serif identity holds at all sizes
- Product screenshots scale by viewport — never crop, never deform; rounding scales proportionally
Image Behavior
Product screenshots render at 2x with CSS rounding (16–24px) and a soft warm drop shadow. They scale via width: 100%; height: auto; to preserve aspect ratio against the warm canvas.
Container Queries
Used on card grids where a card may appear in a wide or narrow column — the card’s internal layout (title / body / icon stacking) responds to its own width rather than the viewport.
11. Content & Voice
Tone
Calm, considered, literate. Craft’s voice is closer to a good magazine than a SaaS landing — full sentences, no exclamation marks, no Silicon Valley enthusiasm. The serif headline does the emotional work; the sans body explains plainly. The voice trusts the reader to value craft (the pun is the brand) without being told to.
Microcopy Patterns
- Button verbs: “Try Craft Free”, “Get started”, “See pricing”, “Sign in” — direct, outcome-named
- Error message recipe:
[What went wrong] + [What to try]— e.g., “We couldn’t sync that document. Check your connection and try again.” - Success confirmations: short, factual — “Saved.” / “Synced.”
- Field labels: minimal — “Email”, “Workspace name” — no friendly framing
Empty States
- Empty document: “Start with a blank page, or pick a template.” — names both paths.
- Empty space / workspace: “Nothing here yet. Create your first document.” — declarative, single action.
CTA Verb Conventions
- Primary action: “Try Craft Free” (the signature pill), “Get started”
- Secondary action: “See pricing”, “Sign in”, “Watch the tour”
- Tertiary text: “Learn more”, “Read the docs”, “Explore templates”
- Avoided: “Submit”, “Click here”, “Buy now” — Craft uses outcome verbs, never generic ones
12. Dark Mode & Theming
Light-only marketing surface. The Craft app ships full light/dark themes — the neutral oklch scale that surfaced in the probe is the app’s dark palette (near-black #0a0a0a backgrounds, #e5e5e5 ink, #262626 accents, on a cool shadcn-style neutral ramp). The public marketing site, however, is warm-white only — it stays on the #fcf9f7 paper canvas throughout to preserve the editorial, ink-on-paper identity.
If a future dark marketing variant were shipped, the warm-white identity would invert to a warm near-black rather than the app’s cool neutral: canvas #161412 (warm near-black, not the app’s cool #0a0a0a), surface #211e1b, ink #f3efea (warm off-white), brand pill flipped to a warm off-white fill with near-black text, and the blue accent lightened to #7aa2f7 to clear AA on the dark surface. The key is that the marketing dark theme would stay warm to match the brand, where the in-app dark theme is deliberately cool/neutral for working comfort.
13. Lineage & Influences
Craft’s design is a fine-press editorial that ships a notes app. The visual lineage runs through three traditions: print magazine and book design (the serif-display / sans-body pairing, the warm paper canvas #fcf9f7, the 680px prose measure, the unhurried section cadence); Klim Type Foundry’s editorial register (Untitled Serif + Untitled Sans, a “neutral” foundry family chosen the way a careful art director chooses type — present but not loud); and the premium-Apple / Linear school of product marketing (warm-white canvas, full-pill CTA, near-monochrome restraint, a single accent held almost entirely off the marketing page).
The serif headline is what distinguishes Craft from its all-sans contemporaries. Notion and Linear both lead with neutral grotesque type for a “software” feel; Craft instead leads with a literary serif at weight 400, which gives the page an editorial, almost-bookish character before a single feature is named. The near-black ink (#030302, not #000) and the warm paper (#fcf9f7, not #ffffff) reinforce this — the page is tuned to read as ink-on-paper, the same instinct behind iA Writer’s writing-as-craft positioning and Things’ calm indie-Mac surfaces.
What Craft rejects: saturated marketing gradients, all-sans neutrality, dense dashboard layouts, exclamation-point enthusiasm, and a loud brand color on the marketing page. In-product, Craft pairs the warm-white identity with a blue accent for links and selection — but the public site keeps blue to a whisper, letting paper, ink, and the full-pill CTA carry the brand. The discipline — serif speaks, sans explains, color stays in the working software — is the whole identity.
Influences:
- Klim Type Foundry (Untitled Serif / Untitled Sans) — the editorial type pairing that is the brand’s backbone, klim.co.nz/retail-fonts/untitled-serif
- Notion — adjacent docs/notes contemporary Craft positions against by going serif-led, notion.so
- Linear — premium near-monochrome product-marketing restraint, linear.app
- Apple — warm-white canvas, full-pill CTA affordance, product-photography restraint, apple.com
- iA Writer — writing-as-craft positioning, typography treated as the product, ia.net/writer
- Things (Cultured Code) — calm, premium, paper-warm indie-Mac productivity aesthetic, culturedcode.com/things
14. Do’s and Don’ts
Do
- Keep the canvas warm-white (
#fcf9f7) — paper, never screen-white, never tinted grey - Set headlines in Untitled Serif at weight 400 (never bold) — the calm of large light-weight serif is the brand
- Pair the serif display with Untitled Sans body — serif speaks, sans explains
- Use near-black ink (
#030302), not pure#000— the warmth reads as ink-on-paper - Make the primary CTA a full pill (9999px) in near-black with white text — the page’s one piece of hard geometry
- Step body copy down to warm grey (
#3a3835/#5c5a57) for long reads - Use warm-tinted shadows (
rgba(36,30,24,…)) sparingly — the page lifts via white-on-warm contrast, not shadow stacks - Round cards generously at 16px and inputs at 12px — soft but disciplined
- Hold the blue accent (
#2563eb) to a whisper on marketing pages — reserve it for in-product links, focus, selection - Give sections 96–128px vertical breathing room and prose a ~680px measure — magazine cadence
- Use the blue focus ring (
rgba(37,99,235,0.35)) even on the paper-and-ink page — blue is the interaction voltage
Don’t
- Don’t use a screen-white
#ffffffcanvas — the warm paper is the brand; white-card surfaces are the exception, not the floor - Don’t bold the serif headlines — weight 400 is what separates Craft from generic SaaS
- Don’t set headlines in sans or body in serif — the split roles are non-negotiable
- Don’t substitute pure black (
#000) for the near-black ink — large type goes heavy and “screen-y” - Don’t make the CTA a sharp-cornered rectangle — the full pill is the signature
- Don’t flood the marketing page with the blue accent — it belongs inside the product, not on the landing
- Don’t add saturated marketing gradients or animated mesh heroes — the restraint is the positioning
- Don’t crowd sections — dashboard density collapses the editorial register
- Don’t use cold neutral-grey shadows — warmth must match the paper
- Don’t import the app’s cool dark palette into the marketing site — the marketing surface is warm-white only
- Don’t use exclamation marks or “Click here” CTAs — the voice is calm and outcome-named
- Don’t tighten body line-height below 1.6 — the lush leading is part of the read
15. Agent Prompt Guide
Quick Color Reference
Canvas: #fcf9f7 (warm-white paper — the brand floor)
Surface-warm: #f7f2ee (deeper warm panel for banded sections)
Surface-white: #ffffff (pure-white card lifted off the warm canvas)
Ink: #030302 (near-black — headlines, brand, pill fill)
Ink-body: #3a3835 (warm dark grey — long-form body)
Secondary: #5c5a57 (supporting copy, sub-labels)
Muted: #8a8782 (captions, metadata — large/secondary only)
Accent-blue: #2563eb (in-product links / focus / selection)
Blue-soft: #e8effe (selection wash, soft chip background)
Hairline: rgba(3,3,2,0.09)
On-brand: #ffffff (white text on the near-black pill)Example Component Prompts
- “Create a Craft-style hero: warm-white canvas (#fcf9f7), a 66px Untitled Serif H1 at weight 400 in near-black #030302 with -0.018em tracking and 1.05 line-height (serif, never bold). Beneath it: a 19px Untitled Sans deck in warm grey #3a3835 at 1.60 line-height. Below: a full-pill (9999px) near-black #030302 ‘Try Craft Free’ button with white text at 15px / 500, 12×24px padding, 48px height. The whole hero reads editorial and unhurried — no gradients, no animated background, just type and whitespace on warm paper.”
- “Design a Craft feature card: pure-white fill (#ffffff) lifted off the warm canvas, 16px radius, 1px hairline border at rgba(3,3,2,0.09), 32px padding. Inside: a 20px / 600 Untitled Sans title in near-black #030302, then 16px / 400 Untitled Sans body at 1.60 line-height in warm grey #3a3835. The card lifts via white-on-warm contrast plus the hairline — no shadow at rest; a soft warm shadow (rgba(36,30,24,0.05) 0 6px 20px -6px) only on hover.”
- “Build a Craft full-pill CTA: near-black #030302 fill, white text ‘Try Craft Free’ at 15px / 500 Untitled Sans, 9999px radius (full pill), 12×24px padding, 48px height. On hover, the fill lifts to #1c1b19 over 150ms — color-only, no scale or transform. This is the page’s only piece of hard geometry against an otherwise type-and-card layout.”
- “Create the Craft nav: 64px tall warm-white surface (#fcf9f7, matching canvas), wordmark left in near-black #030302, three centered nav links (Product, Pricing, Resources) in 15px / 500 #030302 with no underline at rest. Right side: a ‘Sign in’ text link plus the near-black full-pill ‘Try Craft Free’ CTA. Add a 1px bottom hairline (rgba(3,3,2,0.09)) only when the page is scrolled.”
- “Design a Craft testimonial card: white fill, 16px radius, 1px hairline border, 32px padding. The pull-quote is set in Untitled Serif at 24px / 400 near-black (#030302) with 1.25 line-height — the serif carries the human voice. Beneath: a 40px circular avatar flush left, with name in 14px / 600 Untitled Sans and role in 13px / 500 secondary grey (#5c5a57).”
- “Build a Craft section opener: an uppercase 12px / 600 Untitled Sans eyebrow label, tracked 0.06em, in secondary grey (#5c5a57), sitting above a 54px Untitled Serif H2 at weight 400 in near-black #030302 with -0.014em tracking. Generous 96px vertical padding above. The eyebrow is the editorial ‘kicker’; the serif headline does the emotional work.”
Iteration Guide
- Canvas warm-white, never screen-white.
#fcf9f7is paper;#ffffffis the card exception. If the page looks cold, the canvas is wrong. - Serif headlines at weight 400, never bold. The calm of large light-weight serif is the entire brand. Bolding tips it into generic SaaS.
- Serif speaks, sans explains. Untitled Serif for headlines and pull-quotes; Untitled Sans for everything read fast. Never swap.
- Near-black ink, not pure black.
#030302is warmer and softer than#000against paper — large type stays comfortable. - The CTA is a full pill. 9999px near-black with white text is the signature; a sharp rectangle loses the premium register.
- Hold blue back on marketing.
#2563ebbelongs to in-product links, focus, and selection — a whisper on the landing, never a flood. - Lift via contrast, not shadow. White-card-on-warm-canvas plus a hairline does the work; warm shadows appear only on hover, sparingly.
- Give it room. 96–128px section bands and a ~680px prose measure at 1.60 line-height — the editorial cadence is half the brand.
Drop craft into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add craft 2 · ship landing page
npx agentkit init --design craft