light · warm · sans · ai · voice · humanist · spacious
DESIGN.md inspired by Hume AI
Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness.
By webdesignhot · www.hume.ai ↗
$ npx @webdesignhot/design-md add hume
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. 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. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. 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. 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. 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. 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. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a 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. 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. 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. 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. 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. 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. 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. 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. 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. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green 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. 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. 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. 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 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. 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. 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. 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. 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. 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 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. 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. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. 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. 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. 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. 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 — 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. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. 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. 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. 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". 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. 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. 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. 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. 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
#fff9f3 - bg-soft
#fdf4ec - surface
#f7ede1 - surface-strong
#efe2d2 - surface-hover
#f4e8da - text AAA · 15.2
#222222 - text-strong
#000000 - text-medium
#3a3633 - text-muted
#5c554e - text-soft
#7a7269 - text-faint — · 2.5
#a89e92 - on-brand
#fff9f3 - on-cta
#fff9f3 - brand AAA · 15.2
#222222 - brand-hover
#000000 - brand-soft
#3a3633 - accent
#e8d5c4 - accent-deep
#d9bfa6 - accent-faint
#f3e7da - link
#222222 - link-hover
#000000 - selected-bg
#f3e7da - disabled-bg
#f4e8da - disabled-text
#a89e92 - border — · 1.3
#e7dccd - border-strong — · 1.5
#d9cdbb - border-soft
#f0e6d9 - border-focus
#222222 - success-bg
#e3efe0 - success-text
#3f6b3a - warning-bg
#fbeecf - warning-text
#8a6420 - danger-bg
#f7e0db - danger-text
#a4362a - info-bg
#e8e6e3 - info-text
#3a3633 - shadow-rgb
34, 28, 22 - shadow-warm
160, 120, 80
Ship faster than ever.
display-hero Fellix 80px w600 -0.025em
Ship faster than ever.
display-lg Fellix 64px w600 -0.02em
Ship faster than ever.
h1 Fellix 48px w520 -0.018em
The quick brown fox jumps over the lazy dog.
stat Fellix 44px w600 -0.02em
Built for teams that ship.
h2 Fellix 36px w520 -0.012em
A complete kit
h3 Fellix 28px w600 -0.008em
The quick brown fox jumps over the lazy dog.
h4 Fellix 22px w600 -0.004em
The quick brown fox jumps over the lazy dog.
h5 Fellix 18px w600 0
The quick brown fox jumps over the lazy dog.
body-lg Fellix 18px w400 0
The quick brown fox jumps over the lazy dog.
body Fellix 16px w400 0
The quick brown fox jumps over the lazy dog.
body-sm Fellix 14px w400 0
The quick brown fox jumps over the lazy dog.
button Fellix 14px w600 0.04em
OUR DESIGN SYSTEM
label Fellix 13px w500 0.01em
OUR DESIGN SYSTEM
caption Fellix 13px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow Fellix 12px w600 0.12em
- 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
2px - sm
6px - md
10px - lg
14px - card
18px - xl
20px - 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
- muted → text-muted
- border → border
- ring → border-strong
Hume AI rejects the clinical-white default of the AI sector and instead anchors its empathic-AI mission on a warm cream canvas — the colour of considered paper rather than a lab coat. The system pairs a custom geometric-humanist sans (Fellix) held at an unusual ~520 display weight with near-black `#222222` ink and fully-pilled CTAs. Lineage runs through Anthropic's warm cream-and-slate restraint, the humanist-sans tradition behind Fellix, research-journal typesetting, and the soft-radius warmth of brands like Stripe-era product pages — but the warmth is pushed further than any of them, because the brand's entire thesis is that feeling belongs in the interface.
- Warm cream-and-slate canvas as a deliberate anti-clinical stance; type-led, imagery-light research marketing
- The custom geometric-humanist sans carrying both display and body; held at a calm ~520 display weight
- Full-pill primary buttons and soft generous radii as a friendliness signal on a restrained palette
- Voice-AI-as-research-lab register and near-black inverted CTA — Hume warms the same playbook from white to cream
- Research-journal credibility: quantified claims, sober hierarchy, restraint over marketing flourish
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: Hume AI
tagline: 'Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness.'
updated_at: 2026-05-28T23:11:13.340Z
published_at: 2026-05-28T23:11:13.340Z
author: webdesignhot
source_url: https://www.hume.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai]
tags: [light, warm, sans, ai, voice, humanist, spacious]
preview_swatch: ['#fff9f3', '#222222', '#e8d5c4']
related: [cartesia, anthropic]
description: 'Hume AI is the empathic-AI research lab, and its marketing surface argues that emotional intelligence belongs on a warm, humane canvas — not the clinical white the rest of the AI sector defaults to. The page rests on a soft cream `#fff9f3` (warmed paper, not lab white), near-black `#222222` ink (softer than pure `#000`), and a custom geometric-humanist sans, Fellix, that carries both display and body. Headlines land in Fellix at 48px held to an unusual ~520 weight — heavier than book, lighter than bold — giving the type a calm, considered presence. Every primary action is a fully-pilled near-black `#222222` button with cream text, an inversion of the canvas that reads as quiet confidence rather than loud conversion. Where consumer voice-AI brands reach for purple gradients, waveform glow, or character mascots, Hume ships a page that feels like a humanist research journal: warm, credible, unhurried, and unmistakably built by a lab that studies feeling.'
aliases:
background: bg
foreground: text
primary-foreground: on-brand
muted: text-muted
primary: brand
accent: accent
border: border
ring: border-strong
colors:
# Primary
bg: '#fff9f3' # warm cream canvas — the defining surface, never clinical white
bg-soft: '#fdf4ec' # one shade deeper cream for inset panels and quiet bands
surface: '#f7ede1' # warm sand panel base — cards and callouts
surface-strong: '#efe2d2' # stronger sand for divider blocks and stat strips
surface-hover: '#f4e8da' # hover wash on warm panels
text: '#222222' # near-black ink — body and headlines, softer than #000
text-strong: '#000000' # absolute black, reserved for the heaviest display moments
text-medium: '#3a3633' # warm-tinted secondary heading emphasis
text-muted: '#5c554e' # captions, metadata, supporting copy
text-soft: '#7a7269' # helper text, footnotes
text-faint: '#a89e92' # disabled, microcopy on cream
on-brand: '#fff9f3' # cream label on the near-black brand pill
on-cta: '#fff9f3' # cream label on the primary CTA — matches canvas exactly
# Brand & Accent
brand: '#222222' # signature near-black — every primary pill CTA and the wordmark
brand-hover: '#000000' # press state for the near-black pill (deepens to true black)
brand-soft: '#3a3633' # warm-charcoal accent for secondary dark surfaces
accent: '#e8d5c4' # warm peach-sand accent — quiet highlight bands, illustration tone
accent-deep: '#d9bfa6' # deeper peach for accent borders and hover on warm chips
accent-faint: '#f3e7da' # faintest peach tint for selected/active warm states
# Interactive
link: '#222222' # near-black link, underline on hover (no separate link blue)
link-hover: '#000000' # pressed link state
selected-bg: '#f3e7da' # selected nav item, selected warm row tint
disabled-bg: '#f4e8da' # disabled control fill on cream
disabled-text: '#a89e92' # disabled control label
# Borders
border: '#e7dccd' # default warm hairline — the standard rule on cream
border-strong: '#d9cdbb' # emphasized warm rule
border-soft: '#f0e6d9' # quietest warm division
border-focus: '#222222' # near-black focus ring on the cream canvas
# Semantic
success-bg: '#e3efe0'
success-text: '#3f6b3a'
warning-bg: '#fbeecf'
warning-text: '#8a6420'
danger-bg: '#f7e0db'
danger-text: '#a4362a'
info-bg: '#e8e6e3'
info-text: '#3a3633'
# Shadow tints
shadow-rgb: '34, 28, 22' # warm brown-black shadow base — never neutral grey
shadow-warm: '160, 120, 80' # rare warm-amber glow for hero illustration lift
typography:
display:
family: 'Fellix, system-ui, -apple-system, "Helvetica Neue", sans-serif'
weights: [500, 520, 600, 700]
opentype-features: ['liga', 'kern']
body:
family: 'Fellix, system-ui, -apple-system, "Helvetica Neue", sans-serif'
weights: [400, 500, 600]
opentype-features: ['liga', 'kern']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
weights: [400, 500]
opentype-features: ['tnum']
scale:
display-hero: { size: 80, weight: 600, lineHeight: 1.02, tracking: '-0.025em', family: display }
display-lg: { size: 64, weight: 600, lineHeight: 1.05, tracking: '-0.02em', family: display }
h1: { size: 48, weight: 520, lineHeight: 1.08, tracking: '-0.018em', family: display }
h2: { size: 36, weight: 520, lineHeight: 1.15, tracking: '-0.012em', family: display }
h3: { size: 28, weight: 600, lineHeight: 1.2, tracking: '-0.008em', family: display }
h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.004em', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.4, tracking: '0', family: display }
eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.12em', family: body, transform: uppercase }
body-lg: { size: 18, 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 }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.01em', family: body }
caption: { size: 13, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
stat: { size: 44, weight: 600, lineHeight: 1.0, tracking: '-0.02em', family: display }
button: { size: 14, weight: 600, lineHeight: 1.0, tracking: '0.04em', family: body, transform: uppercase }
radius:
micro: 2
sm: 6
md: 10
lg: 14
xl: 20
card: 18
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
layout:
page-width: 1280
prose-width: 720
hero-prose-width: 760
site-gutter: 'clamp(20px, 5vw, 64px)'
header-height: 64
grid-columns: 12
section-rhythm: '96-128px'
components:
button-primary:
background: '#222222'
text: '#fff9f3'
padding: '14px 28px'
radius: 9999
border: '1px solid #222222'
font: 'Fellix 600 / 14px uppercase 0.04em'
hover-bg: '#000000'
active-bg: '#000000'
use: 'Near-black full-pill — the primary action everywhere (Contact Research, Get Started, Try EVI)'
button-secondary:
background: 'transparent'
text: '#222222'
padding: '14px 28px'
radius: 9999
border: '1px solid #d9cdbb'
font: 'Fellix 600 / 14px uppercase 0.04em'
hover-bg: '#f4e8da'
use: 'Outlined pill twin — same shape, warm hairline border, sits beside primary in hero clusters'
button-tonal:
background: '#f7ede1'
text: '#222222'
padding: '14px 28px'
radius: 9999
border: '1px solid transparent'
font: 'Fellix 600 / 14px uppercase 0.04em'
hover-bg: '#efe2d2'
use: 'Warm sand fill pill — soft tertiary action that stays within the cream family'
button-ghost:
background: 'transparent'
text: '#222222'
padding: '10px 16px'
radius: 9999
border: 'none'
font: 'Fellix 500 / 14px'
hover-bg: '#f4e8da'
use: 'Quiet pill — nav links, inline actions, in-card buttons'
card:
background: '#fff9f3'
border: '1px solid #e7dccd'
radius: 18
padding: '28px'
use: 'Product card (EVI, Octave, TADA) — warm hairline on cream, generous radius'
card-soft:
background: '#f7ede1'
border: '1px solid transparent'
radius: 18
padding: '28px'
use: 'Warm sand panel — research highlights, feature callouts that lift off the page'
input:
background: '#fff9f3'
border: '1px solid #e7dccd'
radius: 14
padding: '12px 16px'
font: 'Fellix 400 / 16px'
placeholder-color: '#a89e92'
focus-ring: '0 0 0 2px #222222'
use: 'Form fields, newsletter capture, API key entry'
badge:
background: '#f7ede1'
text: '#5c554e'
padding: '4px 12px'
radius: 9999
font: 'Fellix 500 / 13px'
use: 'Warm metadata pill — model status, category tags, "Open Source"'
badge-accent:
background: '#f3e7da'
text: '#222222'
padding: '4px 12px'
radius: 9999
font: 'Fellix 600 / 12px'
use: 'Highlight pill — New / Research Preview, peach-tinted to draw a soft eye'
stat-block:
background: 'transparent'
text: '#222222'
padding: '0'
font: 'Fellix 600 / 44px display'
use: 'Big-number proof block — 50+ Languages, 48+ Emotions, 600+ Voice Descriptors'
nav-link:
background: 'transparent'
text: '#222222'
padding: '8px 14px'
radius: 9999
font: 'Fellix 500 / 15px'
hover-text: '#5c554e'
use: 'Top nav — quiet near-black, warm pill hover wash, no underline until hover'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.22, 1, 0.36, 1)'
ease-out: 'cubic-bezier(0.16, 1, 0.3, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
duration-page: 420
reduced-motion: 'respects prefers-reduced-motion: reduce — transforms become opacity-only, durations halved, no parallax on hero illustration'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(34, 28, 22, 0.04) 0 1px 3px'
standard: 'rgba(34, 28, 22, 0.06) 0 6px 18px -4px'
elevated: 'rgba(34, 28, 22, 0.08) 0 14px 32px -10px, rgba(34, 28, 22, 0.04) 0 4px 10px'
deep: 'rgba(34, 28, 22, 0.12) 0 28px 56px -16px'
ring: '0 0 0 2px #222222'
ring-offset: '0 0 0 2px #fff9f3, 0 0 0 4px #222222'
accessibility:
contrast-text-on-bg: 14.8 # #222222 on #fff9f3 — AAA at all sizes
contrast-on-brand-on-brand: 14.8 # #fff9f3 on #222222 — AAA at all sizes (CTA pill)
contrast-text-muted-on-bg: 7.1 # #5c554e on #fff9f3 — AAA
contrast-text-soft-on-bg: 4.7 # #7a7269 on #fff9f3 — AA at body sizes
contrast-text-on-accent: 12.0 # #222222 on #e8d5c4 — AAA (accent bands keep dark ink)
focus-ring: '2px solid #222222 with 2px cream offset'
reduced-motion-honored: true
keyboard-nav: 'visible near-black focus ring on every interactive surface; tab order matches visual reading order'
prose-line-length: 'capped at 720px (~70 characters) for hero copy and long-form prose'
aria-patterns: 'menus use aria-expanded on disclosure triggers; modals use aria-modal + initial-focus; stat blocks expose the full label via aria-label'
dark-mode: null # marketing surface is warm-light only; product app handles its own theme
lineage:
summary: 'Hume AI rejects the clinical-white default of the AI sector and instead anchors its empathic-AI mission on a warm cream canvas — the colour of considered paper rather than a lab coat. The system pairs a custom geometric-humanist sans (Fellix) held at an unusual ~520 display weight with near-black `#222222` ink and fully-pilled CTAs. Lineage runs through Anthropic''s warm cream-and-slate restraint, the humanist-sans tradition behind Fellix, research-journal typesetting, and the soft-radius warmth of brands like Stripe-era product pages — but the warmth is pushed further than any of them, because the brand''s entire thesis is that feeling belongs in the interface.'
influences:
- name: Anthropic
role: 'Warm cream-and-slate canvas as a deliberate anti-clinical stance; type-led, imagery-light research marketing'
url: https://anthropic.com
- name: Fellix (Mostardesign)
role: 'The custom geometric-humanist sans carrying both display and body; held at a calm ~520 display weight'
url: https://www.mostardesign.com/fonts/fellix
- name: Stripe
role: 'Full-pill primary buttons and soft generous radii as a friendliness signal on a restrained palette'
url: https://stripe.com
- name: Cartesia
role: 'Voice-AI-as-research-lab register and near-black inverted CTA — Hume warms the same playbook from white to cream'
url: https://cartesia.ai
- name: arXiv
role: 'Research-journal credibility: quantified claims, sober hierarchy, restraint over marketing flourish'
url: https://arxiv.org
---
## 1. Visual Theme & Atmosphere
Hume AI is the empathic-AI research lab, and the very first design decision the homepage makes is a refusal: it will *not* be clinical white. Where almost every adjacent AI brand opens on a calibrated lab-coat `#ffffff`, Hume lands you on a warm cream `#fff9f3` — the colour of considered paper, of a well-lit reading room, of something made by people who study feeling. That single substitution sets the entire tone. The page argues, before a word is read, that emotional intelligence belongs on a humane surface rather than a sterile one.
The type carries the same intent. Hume runs a single custom typeface — **Fellix**, a geometric-humanist sans — across both display and body, and it holds headlines at an unusual **~520 weight**. That number matters: 520 is heavier than a book weight but distinctly lighter than bold, which gives the 48px h1 a calm, deliberate presence. It reads as *considered*, not *shouting*. There are no competing serif pull-quotes, no editorial counterpoint — the voice is monolithic and warm, the way a thoughtful research note is monolithic and warm.
Ink is near-black `#222222`, never pure `#000`. On a cream ground, true black would punch a hard hole in the warmth; `#222222` settles into the page instead, dark enough for AAA contrast yet soft enough to keep the humanist register. The only place the system goes truly assertive is the call to action, and even there it inverts the canvas rather than introducing a loud accent: every primary button is a **fully-pilled near-black `#222222` capsule with cream `#fff9f3` text**. The radius is effectively infinite (the production value reads `3.35e7px` — a hard full-pill), so the CTA is a smooth, friendly capsule rather than a sharp rectangle. Quiet confidence, not conversion pressure.
The supporting palette is deliberately narrow and tonal. Deeper creams and warm sands (`#fdf4ec`, `#f7ede1`, `#efe2d2`) chunk the page into bands without ever breaking the warmth, and a soft peach-sand accent (`#e8d5c4`) appears in illustration tones and the occasional highlight chip. There are no purple gradients, no glowing waveforms, no character mascots — the consumer voice-AI clichés are entirely absent. Proof comes instead from big sober stat blocks (50+ Languages, 48+ Emotions, 600+ Voice Descriptors) set large in Fellix, the way a journal reports results.
The overall feeling is best captured by a small vocabulary: *warm-cream, paper-not-lab, Fellix-calm, near-black-pill, humanist-research, considered-not-loud, feeling-in-the-interface, journal-credible, soft-radius-friendly, unhurried.* Every surface insists that this is a lab that takes emotion seriously enough to design for it.
**Key Characteristics**
- Warm cream `#fff9f3` canvas — a deliberate rejection of clinical white
- Single custom sans (Fellix) across display and body — no serif counterpoint
- Headlines held at an unusual **~520 weight** — calm, considered, never bold-shouting
- Near-black `#222222` ink, never pure `#000` — softer on cream, still AAA
- Every primary CTA is a **full-pill** near-black capsule with cream text — canvas inverted
- Soft generous radii (14–18px on cards, full-pill on buttons) signal friendliness
- Warm tonal bands (cream → sand) chunk the page instead of dark inverted heroes
- Big sober stat blocks as proof — research-journal credibility, not marketing exuberance
- Quiet peach-sand accent `#e8d5c4` for illustration tone and soft highlight chips
- Restraint with warmth — none of the purple-gradient voice-AI clichés appear
## 2. Color Palette & Roles
### Canvas / Primary
- **bg** `#fff9f3` — warm cream canvas; the defining surface, never substituted for clinical white.
- **bg-soft** `#fdf4ec` — one shade deeper cream for inset panels and quiet alternating bands.
- **text** `#222222` — near-black ink for body and headlines; softer than `#000` so it settles into the cream.
- **text-strong** `#000000` — absolute black, reserved for the heaviest display moments only.
- **on-brand / on-cta** `#fff9f3` — cream label on the near-black pill, matching the canvas exactly.
### Brand
- **brand** `#222222` — the signature near-black; every primary pill CTA and the wordmark.
- **brand-hover** `#000000` — press state, deepening the pill to true black.
- **brand-soft** `#3a3633` — warm-charcoal for secondary dark surfaces and dark-band sections.
### Accent
- **accent** `#e8d5c4` — warm peach-sand; quiet highlight bands and illustration tone (used sparingly).
- **accent-deep** `#d9bfa6` — deeper peach for accent borders and hover on warm chips.
- **accent-faint** `#f3e7da` — faintest peach tint for selected/active warm states.
### Interactive
- **link** `#222222` — near-black inline link, underline on hover; there is no separate link-blue.
- **link-hover** `#000000` — pressed link state.
- **selected-bg** `#f3e7da` — selected nav item, selected warm row tint.
- **disabled-bg** `#f4e8da` — disabled control fill on cream.
- **disabled-text** `#a89e92` — disabled control label.
- **focus-ring** `#222222` — 2px near-black ring with 2px cream offset.
### Neutral / Surface Scale
- **surface** `#f7ede1` — warm sand panel base (cards, callouts).
- **surface-strong** `#efe2d2` — stronger sand for divider blocks and stat strips.
- **surface-hover** `#f4e8da` — hover wash on warm panels.
- **text-medium** `#3a3633` — warm-tinted secondary heading emphasis.
- **text-muted** `#5c554e` — captions, metadata, supporting copy.
- **text-soft** `#7a7269` — helper text, footnotes.
- **text-faint** `#a89e92` — disabled, microcopy.
### Borders
- **border** `#e7dccd` — default warm hairline; the standard rule on cream.
- **border-strong** `#d9cdbb` — emphasized warm rule (outlined buttons, strong dividers).
- **border-soft** `#f0e6d9` — quietest warm division.
### Shadow Colors
Hume uses **warm brown-black-tinted** shadows (`rgba(34, 28, 22, …)`), never neutral grey. Even at very low opacity the warmth matters: a neutral-grey shadow on cream reads dirty, while a warm-tinted one keeps the page coherent. Shadows are used sparingly — depth comes mostly from the cream-to-sand tonal step plus a hairline, with real shadows reserved for floating elements (dropdowns, modals, the occasional lifted hero illustration).
### Semantic
- **success** — `#e3efe0` bg / `#3f6b3a` text. Warm-leaning green for operational/positive states.
- **warning** — `#fbeecf` bg / `#8a6420` text. Amber that sits naturally on cream.
- **danger** — `#f7e0db` bg / `#a4362a` text. Warm terracotta-red rather than a cold alarm red.
- **info** — `#e8e6e3` bg / `#3a3633` text. Neutral warm-grey rather than a blue info pair (the system has no link-blue to reuse).
## 3. Typography Rules
### Font Family
- **Display & Body**: **Fellix**, a custom geometric-humanist sans, used across the entire system. The fallback chain runs `system-ui` → `-apple-system` → `Helvetica Neue` → generic `sans-serif`. There is no secondary marketing typeface and no serif counterpoint — the voice is intentionally monolithic.
- **Mono companion**: a system monospace stack (`ui-monospace`, `SF Mono`, `Menlo`). Mono is a minor player here — it appears only in code samples and the rare inline metric, not as a content-bearing benchmark voice the way it does on more engineer-coded sites.
- **OpenType features**: standard ligatures and kerning (`liga`, `kern`) across both display and body; `tnum` on the mono stack for any aligned numerics.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Fellix | 80 | 600 | 1.02 | -0.025em | Rare oversized hero on key landing pages |
| display-lg | Fellix | 64 | 600 | 1.05 | -0.02em | Section opener, large statements |
| h1 | Fellix | 48 | **520** | 1.08 | -0.018em | Standard hero headline — the signature weight |
| h2 | Fellix | 36 | 520 | 1.15 | -0.012em | Section heading |
| h3 | Fellix | 28 | 600 | 1.2 | -0.008em | Subsection heading |
| h4 | Fellix | 22 | 600 | 1.3 | -0.004em | Card heading |
| h5 | Fellix | 18 | 600 | 1.4 | 0 | Inline subheading |
| eyebrow | Fellix | 12 | 600 | 1.4 | 0.12em | Uppercase section kicker / label |
| body-lg | Fellix | 18 | 400 | 1.6 | 0 | Lede paragraph, hero supporting copy |
| body | Fellix | 16 | 400 | 1.6 | 0 | Default body — generous 1.6 leading |
| body-sm | Fellix | 14 | 400 | 1.55 | 0 | Secondary copy, dense lists |
| label | Fellix | 13 | 500 | 1.4 | 0.01em | Form labels, metadata |
| caption | Fellix | 13 | 400 | 1.45 | 0 | Helper text, image captions |
| stat | Fellix | 44 | 600 | 1.0 | -0.02em | Big-number proof blocks |
| button | Fellix | 14 | 600 | 1.0 | 0.04em | Uppercase pill button text |
### Principles
- **The ~520 display weight is the voice.** Holding the h1 at 520 — not 700 — is the single most defining typographic decision. It reads as considered and calm, the difference between a research note and a product launch.
- **One family, no counterpoint.** Fellix carries everything. There is no serif pull-quote, no second display face. The monolithic voice is part of the warmth.
- **Generous body leading.** Body runs at 1.6 line-height on 16px — airier than a dense dashboard, matching the unhurried reading-room atmosphere.
- **Negative tracking on display only.** Display sizes pull in to `-0.025em`; body stays at neutral tracking. Long-form copy is never compressed.
- **Uppercase only for labels and buttons.** Eyebrows (0.12em) and button text (0.04em) are the only uppercase moments; everything else is sentence case for warmth.
- **Stats are typography.** The proof numbers (50+, 48+, 600+) get the display family at 44px — they are first-class type, not fine print.
- **Warm hierarchy, soft contrast.** Secondary text uses warm-tinted greys (`#5c554e`, `#7a7269`) rather than cool neutrals, keeping the page chromatically coherent.
## 4. Component Stylings
### Buttons
**Primary (near-black full-pill)** — `#222222` background, `#fff9f3` cream text, **full-pill radius**, Fellix 600 / 14px uppercase with 0.04em tracking, padding `14px 28px`. Hover deepens to `#000000`; no translate or scale — the press is purely chromatic. This is the defining action button: "Contact Research", "Get Started", "Try EVI". Every primary conversion path lands here.
**Secondary (outlined pill)** — transparent background, `#222222` text, `1px #d9cdbb` warm border, full-pill radius, identical typography to primary. Hover wash `#f4e8da`. Paired with the primary in hero CTA clusters: "Read the research", "View docs".
**Tonal (warm sand pill)** — `#f7ede1` sand fill, `#222222` text, full-pill radius, no visible border. Hover `#efe2d2`. A soft tertiary action that stays inside the cream family — used in cards and quieter sections.
**Ghost (quiet pill)** — transparent, `#222222` text, no border, full-pill radius, Fellix 500 / 14px (not uppercase), padding `10px 16px`. Hover wash `#f4e8da`. Used for nav links and inline in-card actions.
### Cards
**Product card** — `#fff9f3` cream background, `1px #e7dccd` warm hairline, **18px radius**, `28px` padding, no shadow (or ambient at most). Used for the model cards (EVI, Octave, TADA) — generous corners and a warm hairline rather than a heavy box.
**Warm panel card** — `#f7ede1` sand background, transparent border, 18px radius, `28px` padding. Lifts off the cream page via tone alone — used for research highlights and feature callouts.
### Badges, Tags, Pills
**Metadata badge** — `#f7ede1` sand bg, `#5c554e` text, Fellix 500 / 13px, pill radius. Examples: `Open Source`, `API`, `Research`.
**Accent badge** — `#f3e7da` peach-faint bg, `#222222` text, Fellix 600 / 12px, pill radius. Draws a soft eye: `New`, `Research Preview`, `Beta`.
### Inputs & Forms
**Default input** — `#fff9f3` cream bg, `1px #e7dccd` warm border, **14px radius**, `12px 16px` padding, Fellix 400 / 16px, `#a89e92` placeholder. Focus ring `0 0 0 2px #222222` with a 2px cream offset; the border darkens to `#222222` simultaneously.
**Form labels** — Fellix 500 / 13px, `#222222`, `6px` margin-bottom from the input.
**Helper text** — Fellix 400 / 13px, `#7a7269`, `6px` margin-top.
**Error state** — border swaps to `#a4362a`, helper text flips to `#a4362a`, background tints `#f7e0db`.
### Navigation
**Top nav** — 64px header height, cream background (often transparent over the hero, settling to `#fff9f3` on scroll), `#222222` link colour, Fellix 500 / 15px, no underline until hover. Links are quiet pills with a `#f4e8da` warm hover wash. The wordmark sits left in Fellix; the right-most slot is a near-black full-pill CTA.
**Footer nav** — Fellix 400 / 14px, `#5c554e` colour, multi-column grid on desktop collapsing to a single column at mobile, warm hairline `#e7dccd` separating the columns from the legal row.
### Stat Blocks
**Big-number proof** — number in Fellix 600 / 44px `#222222` with `-0.02em` tracking, label beneath in Fellix 500 / 13px `#5c554e`. Arranged in a horizontal strip (often over a `#efe2d2` band), no borders between — whitespace separates them.
## 5. Layout Principles
### Spacing System
Base unit is **4px**. Scale: `0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128`. Component padding lives in the 12–32 range; section padding in 64–128. The rhythm is airy — closer to a reading room than a dashboard — which reinforces the unhurried, considered tone.
### Grid & Container
- **Page max-width**: 1280px, centred, `clamp(20px, 5vw, 64px)` site gutter.
- **Hero prose-width**: ~760px max, so headlines and lede copy stay readable even on wide screens.
- **Grid columns**: 12, with a comfortable gutter.
- **Feature / model grid**: typically 3-up equal-width cards for the model lineup.
- **Stat strip**: 3-up horizontal block, usually banded over `#efe2d2`.
### Whitespace Philosophy
Between sections: 96–128px on desktop, 64px on mobile. Within sections: 24–48px between groups. The page reads top-to-bottom as a single calm narrative — no sidebars, no dense two-column marketing rhythm. Whitespace is the primary tool for hierarchy; it does the work that borders and shadows do on busier sites.
### Section Cadence
The page alternates **cream `#fff9f3`** and **deeper cream / sand `#fdf4ec` / `#f7ede1`** bands every few sections to chunk the narrative without ever leaving the warm family. Occasional warm-charcoal `#3a3633` bands provide a single dark moment for contrast, but there is no full-black inverted hero — the warmth holds throughout.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Hairline inner-stroke, focus indicator inner edge |
| Small | 6px | Dense chips, inline tags |
| Medium | 10px | Small controls, compact buttons in dense UI |
| Comfortable | 14px | Inputs, form controls, small cards |
| Card | 18px | Product cards, warm panels, content cards |
| Large | 20px | Featured panels, hero illustration frames |
| Pill | 9999px (full) | Every button, every badge, nav hover pills |
The defining radius decision is the **full-pill button**. The production CTA radius reads as `3.35e7px` — an arbitrarily huge value that resolves to a perfect capsule. Combined with the comfortable 14–18px radii on inputs and cards, the whole system reads soft and friendly. There are no sharp 0–4px rectangles in the interactive layer; even the hairline cards round to 18px. Soft corners are the brand's friendliness signal, balancing the seriousness of the research voice.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow, no border | Page bg, hero copy |
| 1 (hairline) | `1px #e7dccd` warm border, no shadow | Product cards, default cards |
| 2 (tonal) | `#f7ede1` sand background tint, no border | Warm panels, callouts, stat strips |
| 3 (ambient) | `rgba(34,28,22,0.04) 0 1px 3px` | Resting cards that need a hint of lift |
| 4 (standard) | `rgba(34,28,22,0.06) 0 6px 18px -4px` | Dropdowns, popovers, hovering cards |
| 5 (elevated) | `rgba(34,28,22,0.08) 0 14px 32px -10px` | Floating menus, tooltips |
| 6 (deep) | `rgba(34,28,22,0.12) 0 28px 56px -16px` | Modal panels |
### Shadow Philosophy
Hume is **tonal-first**: most depth comes from the cream-to-sand step plus a warm hairline, not from blur. When a real shadow is required, it is always **warm brown-black-tinted** (`rgba(34, 28, 22, …)`) at low opacity — a neutral-grey shadow would read dirty against cream and break the chromatic warmth. There is no blue or cool shadow anywhere in the system. The focus ring is the one "shadow" that uses a hard colour: 2px near-black with a 2px cream offset.
## 8. Interaction & Motion
### Easing curves
- **Standard** — `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, opacity and colour changes.
- **Emphasized** — `cubic-bezier(0.22, 1, 0.36, 1)` — gentle overshoot for incoming elements (dropdowns, modals, hero reveals).
- **Out** — `cubic-bezier(0.16, 1, 0.3, 1)` — soft decelerate for slide and fade-in transitions.
### Duration buckets
- **Fast** — 150ms — hover wash, button colour shift, focus ring.
- **Standard** — 240ms — default transition; nav reveals, dropdown opens, card hover.
- **Slow** — 320ms — modal opens, larger reveals.
- **Page** — 420ms — between-route or hero entrance reveal (rare; the marketing site is mostly static).
### Per-component micro-states
- **Button hover** — background shifts (`#222222` → `#000000`) via `150ms ease-standard`. No translate, no scale; the press is purely chromatic, in keeping with the calm voice.
- **Card hover** — warm hairline brightens from `#e7dccd` to `#d9cdbb` and an ambient shadow fades in over `240ms`; a very subtle 1–2px lift at most.
- **Link hover** — underline reveals over `150ms`; no offset trick.
- **Input focus** — focus ring fades in `150ms`; border darkens to `#222222` simultaneously.
- **Nav pill hover** — warm wash `#f4e8da` fades in over `150ms`.
- **Hero illustration** — gentle ambient motion (slow drift / parallax) on the warm illustration where present, fully disabled under reduced-motion.
### Page transitions
The site is essentially static. Section anchors scroll smoothly with `scroll-behavior: smooth`; any hero entrance uses a soft fade-and-rise over ~420ms with the emphasized curve. Reduced-motion disables smooth scroll and all entrance transforms.
### Reduced-motion strategy
`prefers-reduced-motion: reduce` is fully honoured. All transforms (drifts, lifts, parallax on the hero illustration) become opacity-only. Durations halve. Smooth scroll disables. The chromatic hover states remain, since they carry no motion.
## 9. Accessibility & A11y
### Contrast pairs (computed)
| Pair | Ratio | WCAG |
|---|---|---|
| `#222222` on `#fff9f3` (body / headlines) | 14.8:1 | AAA |
| `#fff9f3` on `#222222` (primary CTA pill) | 14.8:1 | AAA |
| `#5c554e` on `#fff9f3` (muted) | 7.1:1 | AAA |
| `#7a7269` on `#fff9f3` (soft) | 4.7:1 | AA at body |
| `#222222` on `#e8d5c4` (ink on accent band) | 12.0:1 | AAA |
| `#222222` on `#f7ede1` (ink on sand panel) | 13.4:1 | AAA |
| `#a4362a` on `#f7e0db` (danger pair) | 5.0:1 | AA |
The cream canvas is light enough (`#fff9f3` is near the top of the luminance range) that near-black ink clears AAA comfortably — the warmth costs nothing in contrast. The single rule to enforce: **dark ink on accent/warm bands, never light ink**, since the warm tones are too pale to carry cream text.
### Focus indicators
**2px solid `#222222`** with a **2px cream offset** on every interactive surface. The near-black ring is visually distinct from the warm hover washes, so focus can never be confused with hover. Inputs additionally darken their border to `#222222` on focus.
### ARIA pattern recommendations
- **Disclosure / menu** — `aria-expanded` on the trigger, `aria-controls` pointing at the panel; nav dropdowns use `role="menu"` / `role="menuitem"` where appropriate.
- **Modal** — `role="dialog"` + `aria-modal="true"` + `aria-labelledby` (title) + `aria-describedby` (lede). Initial focus on the first field or close button; ESC closes; backdrop click closes.
- **Stat blocks** — each big number exposes its full meaning via `aria-label` ("50 plus supported languages") rather than relying on the visible "50+" microcopy.
- **Tooltip** — `role="tooltip"` referenced by `aria-describedby` from the trigger.
### Keyboard navigation
- Tab order matches visual reading order.
- ESC closes any open modal, menu, or popover.
- Arrow keys move within menus.
- Space activates buttons; Enter activates links and submits forms.
- A skip-to-content link appears on first Tab focus.
### Screen reader hints
- The wordmark SVG is `aria-hidden="true"` with an adjacent `<span class="sr-only">Hume AI</span>` text label.
- Decorative warm illustrations carry empty `alt=""` / `aria-hidden`.
- Stat numbers and any inline metric expose a spoken-friendly `aria-label`.
### Reduced motion
Honoured globally. See §8.
## 10. Responsive Behavior
### Breakpoints
| Name | Min-width | Notes |
|---|---|---|
| mobile | 0 | Single-column, 20px gutter, hero copy ~32–36px |
| tablet | 640px | 2-up feature grid, hero copy ~40px |
| desktop | 1024px | 3-up model grid, hero copy 48px |
| wide | 1280px | Full 12-column grid, container near max |
| max | 1536px | Container caps ~1280px, gutter expands |
### Touch targets
All interactive elements honour a **44×44px minimum touch target**. The full-pill buttons already exceed this thanks to `14px 28px` padding; ghost nav pills extend their hit area via padding even when the visible label is small. The mobile nav is a hamburger overlay with comfortable ~56px row heights.
### Collapsing strategy
- **Hero** — two-column desktop (copy + warm illustration) collapses to single-column mobile, copy first.
- **Model grid** — 3-up desktop → 2-up tablet → 1-up mobile.
- **Stat strip** — horizontal 3-up on desktop → wraps to a 2+1 or stacked column on mobile, each number keeping its display size.
- **Nav** — top nav links collapse into a hamburger drawer below 1024px; the near-black CTA pill stays visible in the bar.
- **Cards** — keep 18px radius and `28px` padding at all sizes; padding eases to ~20px on the smallest screens.
### Image behaviour
- Warm illustrations export as SVG or AVIF with WebP fallback.
- `loading="lazy"` on every below-the-fold image.
- `aspect-ratio` set on the container to prevent CLS.
- Hero illustrations cap their max-width and centre below copy on mobile.
### Container queries
Used sparingly on the model card — it can swap from a horizontal media+copy layout to a stacked layout at a narrow container width, independent of the page breakpoint.
## 11. Content & Voice
### Tone
**Warm, credible, unhurried.** Hume writes the way a research lab that studies emotion would write — claims are specific and often quantified, but the register is humane rather than clinical. "The Emotional Intelligence Lab for Voice AI" is the brand voice; "Supercharge your app with AI!" is not. There is confidence without hype, and warmth without softness of substance.
### Microcopy patterns
- **Button verbs** — "Contact Research", "Get Started", "Try EVI", "Read the research", "View docs". Concrete, often research-flavoured; vague verbs like "Discover" or "Unlock" are absent.
- **Error messages** — `[Field]: [problem]. [what to do].` Example: "Email: that doesn't look right. Use the form name@domain.com."
- **Success confirmations** — quiet and direct: "Saved", "API key copied". No celebratory exclamation.
- **Empty states** — explain and direct: "No projects yet. Create your first to get started." Helpful, never cute.
### CTA verb conventions
The brand favours **specific, often research-coded** verbs: *Contact, Try, Read, View, Get*. The ladder runs:
1. **Try EVI / Get Started** — top hero CTA, the live-demo or sign-up entry, the near-black full-pill.
2. **Contact Research** — the credibility-and-partnership path, also a near-black pill.
3. **Read the research / View docs** — for builders and credibility-driven readers, the outlined pill.
### Tone anchors
- Quantify when it helps ("48+ emotions", "50+ languages") — proof beats adjectives.
- Centre the human: this is *emotional* intelligence; copy should sound like it was written by people, not a model.
- Stay sober. No exclamation-mark marketing, no breathless superlatives.
- Don't apologise for the field. There is no "we know AI is overhyped, but…" register.
## 12. Dark Mode & Theming
The marketing surface is **warm-light only** by design — there is no dark variant and no auto-theme on the homepage. The cream canvas *is* the brand; inverting it would erase the single most defining decision. The product application (the EVI playground / dashboard) handles its own theming, but the marketing surface holds warm light throughout.
If a dark mode were ever introduced for the marketing site, it would need to:
- Swap the canvas to a warm near-black (`#1c1815`-ish, warm-tinted, *not* neutral `#111`) so the warmth survives the inversion.
- Lift body text to a warm off-white near `#f0e8df` rather than pure white.
- Keep the CTA pill inverted: it would become a **cream pill with near-black text** on the dark ground, preserving the canvas-inversion logic.
- Warm the accent peach slightly and use it more, since dark grounds can carry a touch more colour.
- Replace warm-tinted shadows with warm glows; keep all radii (full-pill, 18px cards) unchanged.
But none of this is shipped. **Warm-light only — no dark variant offered.**
## 13. Lineage & Influences
Hume AI sits in the same "voice-AI as research lab" register as Cartesia and the broader Anthropic-adjacent school of type-led, imagery-light marketing — but it pushes one variable further than any of them: **warmth**. Where Cartesia opens on clinical white and Anthropic on a restrained cream-slate, Hume commits fully to a warm cream `#fff9f3` canvas, a custom humanist sans (Fellix) held at a calm ~520 weight, and soft full-pill CTAs. The thesis is consistent and deliberate: a lab that studies *emotional* intelligence cannot present itself on a cold, clinical surface, so every token — the cream, the warm-tinted shadows, the generous radii, the warm-grey secondary text — is chosen to make the interface feel humane while still reading as credible research.
The lineage also rejects two adjacent registers. Hume is *not* the consumer voice-AI register (no purple gradients, no glowing waveforms, no character mascots), and it is *not* the cold-infrastructure register (no clinical white, no dense mono-benchmark walls). It threads between them: the sober proof-and-restraint of a research journal, delivered on the warmest possible humanist canvas. Fellix's geometric-humanist construction is central to that balance — geometric enough to read as serious and modern, humanist enough to feel like it was made for people.
**Named influences**:
- **Anthropic** ([https://anthropic.com](https://anthropic.com)) — warm cream-and-slate canvas as a deliberate anti-clinical stance; type-led, imagery-light research marketing.
- **Fellix / Mostardesign** ([https://www.mostardesign.com/fonts/fellix](https://www.mostardesign.com/fonts/fellix)) — the custom geometric-humanist sans carrying both display and body, held at a calm ~520 display weight.
- **Stripe** ([https://stripe.com](https://stripe.com)) — full-pill primary buttons and soft, generous radii as a friendliness signal over a restrained palette.
- **Cartesia** ([https://cartesia.ai](https://cartesia.ai)) — the voice-AI-as-research-lab register and the near-black inverted CTA; Hume warms the same playbook from white to cream.
- **arXiv / academic preprints** ([https://arxiv.org](https://arxiv.org)) — research-journal credibility: quantified claims, sober hierarchy, restraint over marketing flourish.
## 14. Do's and Don'ts
### Do
- **Use warm cream `#fff9f3` as the canvas — never clinical white.** The warmth is the single most defining decision; substituting `#ffffff` collapses the brand.
- **Hold display type to ~520 weight, not 700.** That calm, considered weight is the typographic voice.
- **Run Fellix (or a geometric-humanist sans) across both display and body.** One family, no serif counterpoint.
- **Use near-black `#222222` for ink, not pure `#000`.** True black punches a hole in the cream warmth.
- **Make every primary CTA a full-pill near-black capsule with cream text.** The canvas-inverted capsule is the brand's action shape.
- **Keep radii soft and generous — 14px inputs, 18px cards, full-pill buttons.** Softness is the friendliness signal.
- **Chunk the page with warm tonal bands (cream → sand), not dark inverted heroes.** Keep the warmth throughout.
- **Tint shadows warm (`rgba(34, 28, 22, …)`), never neutral grey.** A grey shadow on cream reads dirty.
- **Treat stats as display typography.** 44px Fellix numbers are proof, not fine print.
- **Use warm-grey secondary text (`#5c554e`, `#7a7269`).** Cool neutrals fight the cream.
- **Honour `prefers-reduced-motion`.** Disable the hero illustration drift and entrance transforms.
### Don't
- **Don't use clinical white `#ffffff` anywhere as the page canvas.** This is the #1 way to break Hume.
- **Don't set headlines at 700 / bold.** The calm ~520 weight is non-negotiable for the voice.
- **Don't introduce purple gradients, glowing waveforms, or character mascots.** Those are the consumer voice-AI clichés Hume rejects.
- **Don't use sharp 0–4px rectangular buttons.** Every button is a full-pill capsule.
- **Don't use a separate link-blue.** Links are near-black; the system intentionally has no blue.
- **Don't put light/cream text on the warm accent or sand bands.** They're too pale — always dark ink on warm surfaces.
- **Don't use neutral-grey shadows.** Warm-tinted only.
- **Don't add a serif pull-quote or a second display face.** The monolithic Fellix voice is part of the warmth.
- **Don't invert to a full-black hero band.** The warmth holds; the single dark moment is warm-charcoal `#3a3633` at most.
- **Don't animate buttons with translate or scale.** The press is purely chromatic; stillness suits the calm voice.
- **Don't write breathless marketing copy.** Sober, quantified, humane — no exclamation-mark superlatives.
- **Don't compress body tracking.** Negative tracking is display-only; long-form copy stays neutral.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #fff9f3
bg-soft: #fdf4ec
surface: #f7ede1
text: #222222
text-muted: #5c554e
brand: #222222
accent: #e8d5c4
cta-bg: #222222
cta-text: #fff9f3
border: #e7dccd
focus-ring: #222222
```
### Example Component Prompts
1. *"Create a Hume-style hero section: warm cream `#fff9f3` canvas, headline in Fellix at 48px held to ~520 weight with -0.018em tracking and near-black `#222222` ink, lede in Fellix 400 at 18px / 1.6 line-height in `#222222`. Primary CTA is a full-pill near-black `#222222` capsule with cream `#fff9f3` uppercase text (14px, 0.04em tracking, `14px 28px` padding); secondary CTA is an outlined full-pill with a `1px #d9cdbb` warm border and `#222222` text."*
2. *"Design a Hume-style product card for a voice model: cream `#fff9f3` background, `1px #e7dccd` warm hairline, 18px radius, `28px` padding, no shadow. Heading in Fellix 600 / 22px, body in Fellix 400 / 16px / 1.6 in `#5c554e`, an 'Open Source' badge as a `#f7ede1` sand pill with `#5c554e` text, and a ghost full-pill 'Learn more' action at the bottom."*
3. *"Build a Hume-style stat strip: a `#efe2d2` warm-sand band, three big numbers in Fellix 600 / 44px `#222222` with -0.02em tracking (50+, 48+, 600+), each with a label beneath in Fellix 500 / 13px `#5c554e`. No borders between numbers — separate them with whitespace."*
4. *"Create a Hume-style nav bar: 64px height, cream `#fff9f3` background, wordmark left in Fellix 600 `#222222`, nav links right as quiet pills in Fellix 500 / 15px `#222222` with a `#f4e8da` warm hover wash, and a right-most full-pill near-black 'Contact Research' CTA with cream uppercase text."*
5. *"Design a Hume-style newsletter input: cream `#fff9f3` field, `1px #e7dccd` warm border, 14px radius, `12px 16px` padding, Fellix 400 / 16px with `#a89e92` placeholder. Focus state darkens the border to `#222222` and adds a 2px `#222222` ring with a 2px cream offset. Submit button is a full-pill near-black capsule with cream text."*
6. *"Build a Hume-style two-up content section: warm cream `#fff9f3` on one band and a `#f7ede1` sand panel (18px radius, `28px` padding) on the other. Section eyebrow in uppercase Fellix 600 / 12px with 0.12em tracking, heading in Fellix 520 / 36px, body in Fellix 400 / 16px / 1.6. Use a soft peach-sand `#e8d5c4` accent only as a small highlight, never as a large fill."*
### Iteration Guide
1. **Check the canvas first.** If a Hume-styled layout looks wrong, the most common cause is a clinical-white `#ffffff` background. Swap to warm cream `#fff9f3`.
2. **Verify the display weight is ~520, not 700.** A bold headline reads as a product launch; the calm 520 reads as a research lab.
3. **Make every button a full-pill.** If any button has a 4–12px rectangular radius, change it to a full capsule.
4. **Replace pure `#000` ink with `#222222`.** True black punches a hole in the cream warmth.
5. **Warm the shadows.** Any neutral-grey shadow should become `rgba(34, 28, 22, …)`; a grey shadow on cream reads dirty.
6. **Remove any link-blue.** Links should be near-black `#222222` with a hover underline — the system has no blue.
7. **Use warm-grey secondary text.** Swap cool neutrals (`#666`, `#888`) for warm tints (`#5c554e`, `#7a7269`).
8. **Strip the clichés.** If there's a purple gradient, glowing waveform, or character mascot, remove it — Hume's warmth comes from cream and type, not effects.
---
*Theme-toggle audit: score=0, signals=[none]*
1. Visual Theme & Atmosphere
Hume AI is the empathic-AI research lab, and the very first design decision the homepage makes is a refusal: it will not be clinical white. Where almost every adjacent AI brand opens on a calibrated lab-coat #ffffff, Hume lands you on a warm cream #fff9f3 — the colour of considered paper, of a well-lit reading room, of something made by people who study feeling. That single substitution sets the entire tone. The page argues, before a word is read, that emotional intelligence belongs on a humane surface rather than a sterile one.
The type carries the same intent. Hume runs a single custom typeface — Fellix, a geometric-humanist sans — across both display and body, and it holds headlines at an unusual ~520 weight. That number matters: 520 is heavier than a book weight but distinctly lighter than bold, which gives the 48px h1 a calm, deliberate presence. It reads as considered, not shouting. There are no competing serif pull-quotes, no editorial counterpoint — the voice is monolithic and warm, the way a thoughtful research note is monolithic and warm.
Ink is near-black #222222, never pure #000. On a cream ground, true black would punch a hard hole in the warmth; #222222 settles into the page instead, dark enough for AAA contrast yet soft enough to keep the humanist register. The only place the system goes truly assertive is the call to action, and even there it inverts the canvas rather than introducing a loud accent: every primary button is a fully-pilled near-black #222222 capsule with cream #fff9f3 text. The radius is effectively infinite (the production value reads 3.35e7px — a hard full-pill), so the CTA is a smooth, friendly capsule rather than a sharp rectangle. Quiet confidence, not conversion pressure.
The supporting palette is deliberately narrow and tonal. Deeper creams and warm sands (#fdf4ec, #f7ede1, #efe2d2) chunk the page into bands without ever breaking the warmth, and a soft peach-sand accent (#e8d5c4) appears in illustration tones and the occasional highlight chip. There are no purple gradients, no glowing waveforms, no character mascots — the consumer voice-AI clichés are entirely absent. Proof comes instead from big sober stat blocks (50+ Languages, 48+ Emotions, 600+ Voice Descriptors) set large in Fellix, the way a journal reports results.
The overall feeling is best captured by a small vocabulary: warm-cream, paper-not-lab, Fellix-calm, near-black-pill, humanist-research, considered-not-loud, feeling-in-the-interface, journal-credible, soft-radius-friendly, unhurried. Every surface insists that this is a lab that takes emotion seriously enough to design for it.
Key Characteristics
- Warm cream
#fff9f3canvas — a deliberate rejection of clinical white - Single custom sans (Fellix) across display and body — no serif counterpoint
- Headlines held at an unusual ~520 weight — calm, considered, never bold-shouting
- Near-black
#222222ink, never pure#000— softer on cream, still AAA - Every primary CTA is a full-pill near-black capsule with cream text — canvas inverted
- Soft generous radii (14–18px on cards, full-pill on buttons) signal friendliness
- Warm tonal bands (cream → sand) chunk the page instead of dark inverted heroes
- Big sober stat blocks as proof — research-journal credibility, not marketing exuberance
- Quiet peach-sand accent
#e8d5c4for illustration tone and soft highlight chips - Restraint with warmth — none of the purple-gradient voice-AI clichés appear
2. Color Palette & Roles
Canvas / Primary
- bg
#fff9f3— warm cream canvas; the defining surface, never substituted for clinical white. - bg-soft
#fdf4ec— one shade deeper cream for inset panels and quiet alternating bands. - text
#222222— near-black ink for body and headlines; softer than#000so it settles into the cream. - text-strong
#000000— absolute black, reserved for the heaviest display moments only. - on-brand / on-cta
#fff9f3— cream label on the near-black pill, matching the canvas exactly.
Brand
- brand
#222222— the signature near-black; every primary pill CTA and the wordmark. - brand-hover
#000000— press state, deepening the pill to true black. - brand-soft
#3a3633— warm-charcoal for secondary dark surfaces and dark-band sections.
Accent
- accent
#e8d5c4— warm peach-sand; quiet highlight bands and illustration tone (used sparingly). - accent-deep
#d9bfa6— deeper peach for accent borders and hover on warm chips. - accent-faint
#f3e7da— faintest peach tint for selected/active warm states.
Interactive
- link
#222222— near-black inline link, underline on hover; there is no separate link-blue. - link-hover
#000000— pressed link state. - selected-bg
#f3e7da— selected nav item, selected warm row tint. - disabled-bg
#f4e8da— disabled control fill on cream. - disabled-text
#a89e92— disabled control label. - focus-ring
#222222— 2px near-black ring with 2px cream offset.
Neutral / Surface Scale
- surface
#f7ede1— warm sand panel base (cards, callouts). - surface-strong
#efe2d2— stronger sand for divider blocks and stat strips. - surface-hover
#f4e8da— hover wash on warm panels. - text-medium
#3a3633— warm-tinted secondary heading emphasis. - text-muted
#5c554e— captions, metadata, supporting copy. - text-soft
#7a7269— helper text, footnotes. - text-faint
#a89e92— disabled, microcopy.
Borders
- border
#e7dccd— default warm hairline; the standard rule on cream. - border-strong
#d9cdbb— emphasized warm rule (outlined buttons, strong dividers). - border-soft
#f0e6d9— quietest warm division.
Shadow Colors
Hume uses warm brown-black-tinted shadows (rgba(34, 28, 22, …)), never neutral grey. Even at very low opacity the warmth matters: a neutral-grey shadow on cream reads dirty, while a warm-tinted one keeps the page coherent. Shadows are used sparingly — depth comes mostly from the cream-to-sand tonal step plus a hairline, with real shadows reserved for floating elements (dropdowns, modals, the occasional lifted hero illustration).
Semantic
- success —
#e3efe0bg /#3f6b3atext. Warm-leaning green for operational/positive states. - warning —
#fbeecfbg /#8a6420text. Amber that sits naturally on cream. - danger —
#f7e0dbbg /#a4362atext. Warm terracotta-red rather than a cold alarm red. - info —
#e8e6e3bg /#3a3633text. Neutral warm-grey rather than a blue info pair (the system has no link-blue to reuse).
3. Typography Rules
Font Family
- Display & Body: Fellix, a custom geometric-humanist sans, used across the entire system. The fallback chain runs
system-ui→-apple-system→Helvetica Neue→ genericsans-serif. There is no secondary marketing typeface and no serif counterpoint — the voice is intentionally monolithic. - Mono companion: a system monospace stack (
ui-monospace,SF Mono,Menlo). Mono is a minor player here — it appears only in code samples and the rare inline metric, not as a content-bearing benchmark voice the way it does on more engineer-coded sites. - OpenType features: standard ligatures and kerning (
liga,kern) across both display and body;tnumon the mono stack for any aligned numerics.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Fellix | 80 | 600 | 1.02 | -0.025em | Rare oversized hero on key landing pages |
| display-lg | Fellix | 64 | 600 | 1.05 | -0.02em | Section opener, large statements |
| h1 | Fellix | 48 | 520 | 1.08 | -0.018em | Standard hero headline — the signature weight |
| h2 | Fellix | 36 | 520 | 1.15 | -0.012em | Section heading |
| h3 | Fellix | 28 | 600 | 1.2 | -0.008em | Subsection heading |
| h4 | Fellix | 22 | 600 | 1.3 | -0.004em | Card heading |
| h5 | Fellix | 18 | 600 | 1.4 | 0 | Inline subheading |
| eyebrow | Fellix | 12 | 600 | 1.4 | 0.12em | Uppercase section kicker / label |
| body-lg | Fellix | 18 | 400 | 1.6 | 0 | Lede paragraph, hero supporting copy |
| body | Fellix | 16 | 400 | 1.6 | 0 | Default body — generous 1.6 leading |
| body-sm | Fellix | 14 | 400 | 1.55 | 0 | Secondary copy, dense lists |
| label | Fellix | 13 | 500 | 1.4 | 0.01em | Form labels, metadata |
| caption | Fellix | 13 | 400 | 1.45 | 0 | Helper text, image captions |
| stat | Fellix | 44 | 600 | 1.0 | -0.02em | Big-number proof blocks |
| button | Fellix | 14 | 600 | 1.0 | 0.04em | Uppercase pill button text |
Principles
- The ~520 display weight is the voice. Holding the h1 at 520 — not 700 — is the single most defining typographic decision. It reads as considered and calm, the difference between a research note and a product launch.
- One family, no counterpoint. Fellix carries everything. There is no serif pull-quote, no second display face. The monolithic voice is part of the warmth.
- Generous body leading. Body runs at 1.6 line-height on 16px — airier than a dense dashboard, matching the unhurried reading-room atmosphere.
- Negative tracking on display only. Display sizes pull in to
-0.025em; body stays at neutral tracking. Long-form copy is never compressed. - Uppercase only for labels and buttons. Eyebrows (0.12em) and button text (0.04em) are the only uppercase moments; everything else is sentence case for warmth.
- Stats are typography. The proof numbers (50+, 48+, 600+) get the display family at 44px — they are first-class type, not fine print.
- Warm hierarchy, soft contrast. Secondary text uses warm-tinted greys (
#5c554e,#7a7269) rather than cool neutrals, keeping the page chromatically coherent.
4. Component Stylings
Buttons
Primary (near-black full-pill) — #222222 background, #fff9f3 cream text, full-pill radius, Fellix 600 / 14px uppercase with 0.04em tracking, padding 14px 28px. Hover deepens to #000000; no translate or scale — the press is purely chromatic. This is the defining action button: “Contact Research”, “Get Started”, “Try EVI”. Every primary conversion path lands here.
Secondary (outlined pill) — transparent background, #222222 text, 1px #d9cdbb warm border, full-pill radius, identical typography to primary. Hover wash #f4e8da. Paired with the primary in hero CTA clusters: “Read the research”, “View docs”.
Tonal (warm sand pill) — #f7ede1 sand fill, #222222 text, full-pill radius, no visible border. Hover #efe2d2. A soft tertiary action that stays inside the cream family — used in cards and quieter sections.
Ghost (quiet pill) — transparent, #222222 text, no border, full-pill radius, Fellix 500 / 14px (not uppercase), padding 10px 16px. Hover wash #f4e8da. Used for nav links and inline in-card actions.
Cards
Product card — #fff9f3 cream background, 1px #e7dccd warm hairline, 18px radius, 28px padding, no shadow (or ambient at most). Used for the model cards (EVI, Octave, TADA) — generous corners and a warm hairline rather than a heavy box.
Warm panel card — #f7ede1 sand background, transparent border, 18px radius, 28px padding. Lifts off the cream page via tone alone — used for research highlights and feature callouts.
Badges, Tags, Pills
Metadata badge — #f7ede1 sand bg, #5c554e text, Fellix 500 / 13px, pill radius. Examples: Open Source, API, Research.
Accent badge — #f3e7da peach-faint bg, #222222 text, Fellix 600 / 12px, pill radius. Draws a soft eye: New, Research Preview, Beta.
Inputs & Forms
Default input — #fff9f3 cream bg, 1px #e7dccd warm border, 14px radius, 12px 16px padding, Fellix 400 / 16px, #a89e92 placeholder. Focus ring 0 0 0 2px #222222 with a 2px cream offset; the border darkens to #222222 simultaneously.
Form labels — Fellix 500 / 13px, #222222, 6px margin-bottom from the input.
Helper text — Fellix 400 / 13px, #7a7269, 6px margin-top.
Error state — border swaps to #a4362a, helper text flips to #a4362a, background tints #f7e0db.
Navigation
Top nav — 64px header height, cream background (often transparent over the hero, settling to #fff9f3 on scroll), #222222 link colour, Fellix 500 / 15px, no underline until hover. Links are quiet pills with a #f4e8da warm hover wash. The wordmark sits left in Fellix; the right-most slot is a near-black full-pill CTA.
Footer nav — Fellix 400 / 14px, #5c554e colour, multi-column grid on desktop collapsing to a single column at mobile, warm hairline #e7dccd separating the columns from the legal row.
Stat Blocks
Big-number proof — number in Fellix 600 / 44px #222222 with -0.02em tracking, label beneath in Fellix 500 / 13px #5c554e. Arranged in a horizontal strip (often over a #efe2d2 band), no borders between — whitespace separates them.
5. Layout Principles
Spacing System
Base unit is 4px. Scale: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Component padding lives in the 12–32 range; section padding in 64–128. The rhythm is airy — closer to a reading room than a dashboard — which reinforces the unhurried, considered tone.
Grid & Container
- Page max-width: 1280px, centred,
clamp(20px, 5vw, 64px)site gutter. - Hero prose-width: ~760px max, so headlines and lede copy stay readable even on wide screens.
- Grid columns: 12, with a comfortable gutter.
- Feature / model grid: typically 3-up equal-width cards for the model lineup.
- Stat strip: 3-up horizontal block, usually banded over
#efe2d2.
Whitespace Philosophy
Between sections: 96–128px on desktop, 64px on mobile. Within sections: 24–48px between groups. The page reads top-to-bottom as a single calm narrative — no sidebars, no dense two-column marketing rhythm. Whitespace is the primary tool for hierarchy; it does the work that borders and shadows do on busier sites.
Section Cadence
The page alternates cream #fff9f3 and deeper cream / sand #fdf4ec / #f7ede1 bands every few sections to chunk the narrative without ever leaving the warm family. Occasional warm-charcoal #3a3633 bands provide a single dark moment for contrast, but there is no full-black inverted hero — the warmth holds throughout.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Hairline inner-stroke, focus indicator inner edge |
| Small | 6px | Dense chips, inline tags |
| Medium | 10px | Small controls, compact buttons in dense UI |
| Comfortable | 14px | Inputs, form controls, small cards |
| Card | 18px | Product cards, warm panels, content cards |
| Large | 20px | Featured panels, hero illustration frames |
| Pill | 9999px (full) | Every button, every badge, nav hover pills |
The defining radius decision is the full-pill button. The production CTA radius reads as 3.35e7px — an arbitrarily huge value that resolves to a perfect capsule. Combined with the comfortable 14–18px radii on inputs and cards, the whole system reads soft and friendly. There are no sharp 0–4px rectangles in the interactive layer; even the hairline cards round to 18px. Soft corners are the brand’s friendliness signal, balancing the seriousness of the research voice.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow, no border | Page bg, hero copy |
| 1 (hairline) | 1px #e7dccd warm border, no shadow | Product cards, default cards |
| 2 (tonal) | #f7ede1 sand background tint, no border | Warm panels, callouts, stat strips |
| 3 (ambient) | rgba(34,28,22,0.04) 0 1px 3px | Resting cards that need a hint of lift |
| 4 (standard) | rgba(34,28,22,0.06) 0 6px 18px -4px | Dropdowns, popovers, hovering cards |
| 5 (elevated) | rgba(34,28,22,0.08) 0 14px 32px -10px | Floating menus, tooltips |
| 6 (deep) | rgba(34,28,22,0.12) 0 28px 56px -16px | Modal panels |
Shadow Philosophy
Hume is tonal-first: most depth comes from the cream-to-sand step plus a warm hairline, not from blur. When a real shadow is required, it is always warm brown-black-tinted (rgba(34, 28, 22, …)) at low opacity — a neutral-grey shadow would read dirty against cream and break the chromatic warmth. There is no blue or cool shadow anywhere in the system. The focus ring is the one “shadow” that uses a hard colour: 2px near-black with a 2px cream offset.
8. Interaction & Motion
Easing curves
- Standard —
cubic-bezier(0.4, 0, 0.2, 1)— default for hover, focus, opacity and colour changes. - Emphasized —
cubic-bezier(0.22, 1, 0.36, 1)— gentle overshoot for incoming elements (dropdowns, modals, hero reveals). - Out —
cubic-bezier(0.16, 1, 0.3, 1)— soft decelerate for slide and fade-in transitions.
Duration buckets
- Fast — 150ms — hover wash, button colour shift, focus ring.
- Standard — 240ms — default transition; nav reveals, dropdown opens, card hover.
- Slow — 320ms — modal opens, larger reveals.
- Page — 420ms — between-route or hero entrance reveal (rare; the marketing site is mostly static).
Per-component micro-states
- Button hover — background shifts (
#222222→#000000) via150ms ease-standard. No translate, no scale; the press is purely chromatic, in keeping with the calm voice. - Card hover — warm hairline brightens from
#e7dccdto#d9cdbband an ambient shadow fades in over240ms; a very subtle 1–2px lift at most. - Link hover — underline reveals over
150ms; no offset trick. - Input focus — focus ring fades in
150ms; border darkens to#222222simultaneously. - Nav pill hover — warm wash
#f4e8dafades in over150ms. - Hero illustration — gentle ambient motion (slow drift / parallax) on the warm illustration where present, fully disabled under reduced-motion.
Page transitions
The site is essentially static. Section anchors scroll smoothly with scroll-behavior: smooth; any hero entrance uses a soft fade-and-rise over ~420ms with the emphasized curve. Reduced-motion disables smooth scroll and all entrance transforms.
Reduced-motion strategy
prefers-reduced-motion: reduce is fully honoured. All transforms (drifts, lifts, parallax on the hero illustration) become opacity-only. Durations halve. Smooth scroll disables. The chromatic hover states remain, since they carry no motion.
9. Accessibility & A11y
Contrast pairs (computed)
| Pair | Ratio | WCAG |
|---|---|---|
#222222 on #fff9f3 (body / headlines) | 14.8:1 | AAA |
#fff9f3 on #222222 (primary CTA pill) | 14.8:1 | AAA |
#5c554e on #fff9f3 (muted) | 7.1:1 | AAA |
#7a7269 on #fff9f3 (soft) | 4.7:1 | AA at body |
#222222 on #e8d5c4 (ink on accent band) | 12.0:1 | AAA |
#222222 on #f7ede1 (ink on sand panel) | 13.4:1 | AAA |
#a4362a on #f7e0db (danger pair) | 5.0:1 | AA |
The cream canvas is light enough (#fff9f3 is near the top of the luminance range) that near-black ink clears AAA comfortably — the warmth costs nothing in contrast. The single rule to enforce: dark ink on accent/warm bands, never light ink, since the warm tones are too pale to carry cream text.
Focus indicators
2px solid #222222 with a 2px cream offset on every interactive surface. The near-black ring is visually distinct from the warm hover washes, so focus can never be confused with hover. Inputs additionally darken their border to #222222 on focus.
ARIA pattern recommendations
- Disclosure / menu —
aria-expandedon the trigger,aria-controlspointing at the panel; nav dropdowns userole="menu"/role="menuitem"where appropriate. - Modal —
role="dialog"+aria-modal="true"+aria-labelledby(title) +aria-describedby(lede). Initial focus on the first field or close button; ESC closes; backdrop click closes. - Stat blocks — each big number exposes its full meaning via
aria-label(“50 plus supported languages”) rather than relying on the visible “50+” microcopy. - Tooltip —
role="tooltip"referenced byaria-describedbyfrom the trigger.
Keyboard navigation
- Tab order matches visual reading order.
- ESC closes any open modal, menu, or popover.
- Arrow keys move within menus.
- Space activates buttons; Enter activates links and submits forms.
- A skip-to-content link appears on first Tab focus.
Screen reader hints
- The wordmark SVG is
aria-hidden="true"with an adjacent<span class="sr-only">Hume AI</span>text label. - Decorative warm illustrations carry empty
alt=""/aria-hidden. - Stat numbers and any inline metric expose a spoken-friendly
aria-label.
Reduced motion
Honoured globally. See §8.
10. Responsive Behavior
Breakpoints
| Name | Min-width | Notes |
|---|---|---|
| mobile | 0 | Single-column, 20px gutter, hero copy ~32–36px |
| tablet | 640px | 2-up feature grid, hero copy ~40px |
| desktop | 1024px | 3-up model grid, hero copy 48px |
| wide | 1280px | Full 12-column grid, container near max |
| max | 1536px | Container caps ~1280px, gutter expands |
Touch targets
All interactive elements honour a 44×44px minimum touch target. The full-pill buttons already exceed this thanks to 14px 28px padding; ghost nav pills extend their hit area via padding even when the visible label is small. The mobile nav is a hamburger overlay with comfortable ~56px row heights.
Collapsing strategy
- Hero — two-column desktop (copy + warm illustration) collapses to single-column mobile, copy first.
- Model grid — 3-up desktop → 2-up tablet → 1-up mobile.
- Stat strip — horizontal 3-up on desktop → wraps to a 2+1 or stacked column on mobile, each number keeping its display size.
- Nav — top nav links collapse into a hamburger drawer below 1024px; the near-black CTA pill stays visible in the bar.
- Cards — keep 18px radius and
28pxpadding at all sizes; padding eases to ~20px on the smallest screens.
Image behaviour
- Warm illustrations export as SVG or AVIF with WebP fallback.
loading="lazy"on every below-the-fold image.aspect-ratioset on the container to prevent CLS.- Hero illustrations cap their max-width and centre below copy on mobile.
Container queries
Used sparingly on the model card — it can swap from a horizontal media+copy layout to a stacked layout at a narrow container width, independent of the page breakpoint.
11. Content & Voice
Tone
Warm, credible, unhurried. Hume writes the way a research lab that studies emotion would write — claims are specific and often quantified, but the register is humane rather than clinical. “The Emotional Intelligence Lab for Voice AI” is the brand voice; “Supercharge your app with AI!” is not. There is confidence without hype, and warmth without softness of substance.
Microcopy patterns
- Button verbs — “Contact Research”, “Get Started”, “Try EVI”, “Read the research”, “View docs”. Concrete, often research-flavoured; vague verbs like “Discover” or “Unlock” are absent.
- Error messages —
[Field]: [problem]. [what to do].Example: “Email: that doesn’t look right. Use the form name@domain.com.” - Success confirmations — quiet and direct: “Saved”, “API key copied”. No celebratory exclamation.
- Empty states — explain and direct: “No projects yet. Create your first to get started.” Helpful, never cute.
CTA verb conventions
The brand favours specific, often research-coded verbs: Contact, Try, Read, View, Get. The ladder runs:
- Try EVI / Get Started — top hero CTA, the live-demo or sign-up entry, the near-black full-pill.
- Contact Research — the credibility-and-partnership path, also a near-black pill.
- Read the research / View docs — for builders and credibility-driven readers, the outlined pill.
Tone anchors
- Quantify when it helps (“48+ emotions”, “50+ languages”) — proof beats adjectives.
- Centre the human: this is emotional intelligence; copy should sound like it was written by people, not a model.
- Stay sober. No exclamation-mark marketing, no breathless superlatives.
- Don’t apologise for the field. There is no “we know AI is overhyped, but…” register.
12. Dark Mode & Theming
The marketing surface is warm-light only by design — there is no dark variant and no auto-theme on the homepage. The cream canvas is the brand; inverting it would erase the single most defining decision. The product application (the EVI playground / dashboard) handles its own theming, but the marketing surface holds warm light throughout.
If a dark mode were ever introduced for the marketing site, it would need to:
- Swap the canvas to a warm near-black (
#1c1815-ish, warm-tinted, not neutral#111) so the warmth survives the inversion. - Lift body text to a warm off-white near
#f0e8dfrather than pure white. - Keep the CTA pill inverted: it would become a cream pill with near-black text on the dark ground, preserving the canvas-inversion logic.
- Warm the accent peach slightly and use it more, since dark grounds can carry a touch more colour.
- Replace warm-tinted shadows with warm glows; keep all radii (full-pill, 18px cards) unchanged.
But none of this is shipped. Warm-light only — no dark variant offered.
13. Lineage & Influences
Hume AI sits in the same “voice-AI as research lab” register as Cartesia and the broader Anthropic-adjacent school of type-led, imagery-light marketing — but it pushes one variable further than any of them: warmth. Where Cartesia opens on clinical white and Anthropic on a restrained cream-slate, Hume commits fully to a warm cream #fff9f3 canvas, a custom humanist sans (Fellix) held at a calm ~520 weight, and soft full-pill CTAs. The thesis is consistent and deliberate: a lab that studies emotional intelligence cannot present itself on a cold, clinical surface, so every token — the cream, the warm-tinted shadows, the generous radii, the warm-grey secondary text — is chosen to make the interface feel humane while still reading as credible research.
The lineage also rejects two adjacent registers. Hume is not the consumer voice-AI register (no purple gradients, no glowing waveforms, no character mascots), and it is not the cold-infrastructure register (no clinical white, no dense mono-benchmark walls). It threads between them: the sober proof-and-restraint of a research journal, delivered on the warmest possible humanist canvas. Fellix’s geometric-humanist construction is central to that balance — geometric enough to read as serious and modern, humanist enough to feel like it was made for people.
Named influences:
- Anthropic (https://anthropic.com) — warm cream-and-slate canvas as a deliberate anti-clinical stance; type-led, imagery-light research marketing.
- Fellix / Mostardesign (https://www.mostardesign.com/fonts/fellix) — the custom geometric-humanist sans carrying both display and body, held at a calm ~520 display weight.
- Stripe (https://stripe.com) — full-pill primary buttons and soft, generous radii as a friendliness signal over a restrained palette.
- Cartesia (https://cartesia.ai) — the voice-AI-as-research-lab register and the near-black inverted CTA; Hume warms the same playbook from white to cream.
- arXiv / academic preprints (https://arxiv.org) — research-journal credibility: quantified claims, sober hierarchy, restraint over marketing flourish.
14. Do’s and Don’ts
Do
- Use warm cream
#fff9f3as the canvas — never clinical white. The warmth is the single most defining decision; substituting#ffffffcollapses the brand. - Hold display type to ~520 weight, not 700. That calm, considered weight is the typographic voice.
- Run Fellix (or a geometric-humanist sans) across both display and body. One family, no serif counterpoint.
- Use near-black
#222222for ink, not pure#000. True black punches a hole in the cream warmth. - Make every primary CTA a full-pill near-black capsule with cream text. The canvas-inverted capsule is the brand’s action shape.
- Keep radii soft and generous — 14px inputs, 18px cards, full-pill buttons. Softness is the friendliness signal.
- Chunk the page with warm tonal bands (cream → sand), not dark inverted heroes. Keep the warmth throughout.
- Tint shadows warm (
rgba(34, 28, 22, …)), never neutral grey. A grey shadow on cream reads dirty. - Treat stats as display typography. 44px Fellix numbers are proof, not fine print.
- Use warm-grey secondary text (
#5c554e,#7a7269). Cool neutrals fight the cream. - Honour
prefers-reduced-motion. Disable the hero illustration drift and entrance transforms.
Don’t
- Don’t use clinical white
#ffffffanywhere as the page canvas. This is the #1 way to break Hume. - Don’t set headlines at 700 / bold. The calm ~520 weight is non-negotiable for the voice.
- Don’t introduce purple gradients, glowing waveforms, or character mascots. Those are the consumer voice-AI clichés Hume rejects.
- Don’t use sharp 0–4px rectangular buttons. Every button is a full-pill capsule.
- Don’t use a separate link-blue. Links are near-black; the system intentionally has no blue.
- Don’t put light/cream text on the warm accent or sand bands. They’re too pale — always dark ink on warm surfaces.
- Don’t use neutral-grey shadows. Warm-tinted only.
- Don’t add a serif pull-quote or a second display face. The monolithic Fellix voice is part of the warmth.
- Don’t invert to a full-black hero band. The warmth holds; the single dark moment is warm-charcoal
#3a3633at most. - Don’t animate buttons with translate or scale. The press is purely chromatic; stillness suits the calm voice.
- Don’t write breathless marketing copy. Sober, quantified, humane — no exclamation-mark superlatives.
- Don’t compress body tracking. Negative tracking is display-only; long-form copy stays neutral.
15. Agent Prompt Guide
Quick Color Reference
bg: #fff9f3
bg-soft: #fdf4ec
surface: #f7ede1
text: #222222
text-muted: #5c554e
brand: #222222
accent: #e8d5c4
cta-bg: #222222
cta-text: #fff9f3
border: #e7dccd
focus-ring: #222222Example Component Prompts
-
“Create a Hume-style hero section: warm cream
#fff9f3canvas, headline in Fellix at 48px held to ~520 weight with -0.018em tracking and near-black#222222ink, lede in Fellix 400 at 18px / 1.6 line-height in#222222. Primary CTA is a full-pill near-black#222222capsule with cream#fff9f3uppercase text (14px, 0.04em tracking,14px 28pxpadding); secondary CTA is an outlined full-pill with a1px #d9cdbbwarm border and#222222text.” -
“Design a Hume-style product card for a voice model: cream
#fff9f3background,1px #e7dccdwarm hairline, 18px radius,28pxpadding, no shadow. Heading in Fellix 600 / 22px, body in Fellix 400 / 16px / 1.6 in#5c554e, an ‘Open Source’ badge as a#f7ede1sand pill with#5c554etext, and a ghost full-pill ‘Learn more’ action at the bottom.” -
“Build a Hume-style stat strip: a
#efe2d2warm-sand band, three big numbers in Fellix 600 / 44px#222222with -0.02em tracking (50+, 48+, 600+), each with a label beneath in Fellix 500 / 13px#5c554e. No borders between numbers — separate them with whitespace.” -
“Create a Hume-style nav bar: 64px height, cream
#fff9f3background, wordmark left in Fellix 600#222222, nav links right as quiet pills in Fellix 500 / 15px#222222with a#f4e8dawarm hover wash, and a right-most full-pill near-black ‘Contact Research’ CTA with cream uppercase text.” -
“Design a Hume-style newsletter input: cream
#fff9f3field,1px #e7dccdwarm border, 14px radius,12px 16pxpadding, Fellix 400 / 16px with#a89e92placeholder. Focus state darkens the border to#222222and adds a 2px#222222ring with a 2px cream offset. Submit button is a full-pill near-black capsule with cream text.” -
“Build a Hume-style two-up content section: warm cream
#fff9f3on one band and a#f7ede1sand panel (18px radius,28pxpadding) on the other. Section eyebrow in uppercase Fellix 600 / 12px with 0.12em tracking, heading in Fellix 520 / 36px, body in Fellix 400 / 16px / 1.6. Use a soft peach-sand#e8d5c4accent only as a small highlight, never as a large fill.”
Iteration Guide
- Check the canvas first. If a Hume-styled layout looks wrong, the most common cause is a clinical-white
#ffffffbackground. Swap to warm cream#fff9f3. - Verify the display weight is ~520, not 700. A bold headline reads as a product launch; the calm 520 reads as a research lab.
- Make every button a full-pill. If any button has a 4–12px rectangular radius, change it to a full capsule.
- Replace pure
#000ink with#222222. True black punches a hole in the cream warmth. - Warm the shadows. Any neutral-grey shadow should become
rgba(34, 28, 22, …); a grey shadow on cream reads dirty. - Remove any link-blue. Links should be near-black
#222222with a hover underline — the system has no blue. - Use warm-grey secondary text. Swap cool neutrals (
#666,#888) for warm tints (#5c554e,#7a7269). - Strip the clichés. If there’s a purple gradient, glowing waveform, or character mascot, remove it — Hume’s warmth comes from cream and type, not effects.
Theme-toggle audit: score=0, signals=[none]
Drop hume into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add hume 2 · ship landing page
npx agentkit init --design hume