light · minimal · sans · research · sharp
DESIGN.md inspired by Magic
Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent.
By webdesignhot · magic.dev ↗
$ npx @webdesignhot/design-md add magic-dev
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Aesop Monochrome-warm apothecary — ivory canvas, charcoal type, Suisse Int'l set small, 0px corners. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Amplitude Light-canvas digital-analytics surface — IBM Plex Sans, grey #565656 body, black full-pill CTAs and a signature #1e61f0 blue. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Anytype Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Black Forest Labs Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Captions Near-white studio canvas, an Exposure display, and a violet brand keyed off a full crayon-box of CSS color vars. Caraway Wholesome non-toxic-cookware DTC — Suisse Works serif on warm off-white, deep teal-green pill CTAs, pastel colorway palette. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudflare Infrastructure-grade calm — white canvas, dark hero band, FT Kunst Grotesk, signature Cloudflare orange, full-pill CTAs. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Coda White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Craft Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. dbt Labs dbt orange Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Drizzle ORM Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glean White enterprise canvas, near-black indigo headlines, and one electric Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Graza Squeeze-bottle olive-oil DTC — quirky GT Alpina Typewriter on peachy-cream, olive type, chartreuse-lime CTAs at 32px. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. Harvey Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. HeyGen Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Inngest Durable workflows on a near-black canvas — Whyte display, muted gold CTAs, sharp 0px edges. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Intercom Cream canvas, near-black Saans display, and electric-cobalt JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lambda Near-black Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. Liquid Death Black canvas, condensed all-caps Acumin Pro, stark black-and-white — heavy-metal brutalism for canned water. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Loom White canvas, Charlie Display sans, and a confident Atlassian blue pill — async video that feels like a calm, friendly workspace. LottieFiles White-canvas animation studio — DM Sans display at 96px, Inter body, near-black text, one signature teal #019d91. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mejuri Monochrome luxury — white canvas, near-black ink, Syndicat Grotesk small caps and a Simon Mono accent. The jewelry photography does all the color work. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Netlify White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Our Place Warm-heritage cookware DTC — Cheltenham serif at light 300 on a cream canvas, terracotta SHOP NOW CTAs, Plaid body. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Penpot Open-source design-and-code platform — dark hero, Work Sans display, mint-green action surface on a white canvas. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. Prisma White-paper canvas, navy ink, a single confident teal — the type-safe data layer dressed as documentation. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Relume Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder. Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Scale AI White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Sierra Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SKIMS Nude-neutral minimal luxury — cream canvas, dark photographic hero, warm near-black #2d2a26, sharp 0px. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spline Pure-black 3D-design canvas with electric-blue CTAs and a playful multi-color accent set — the browser becomes the viewport. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Stability AI A near-black studio floor where Archivo headlines run light and a single lavender pill carries the only colour. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Synthesia A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Temporal Near-black engineering canvas, Aeonik at hairline-light 300, signature indigo CTA — durable-execution gravity for distributed-systems people. Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. Tinybird Near-black developer canvas lit by one bright mint-green — managed ClickHouse with sharp, zero-radius CTAs. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Todoist Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Trigger.dev Background jobs in the dark — Satoshi on near-black, one electric lime for action. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. Upstash Serverless data, daylight calm — a pale-grey canvas, deep green-black type, and one electric Upstash green. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Vapi Near-black developer canvas lit by a signature lime and a playful multi-color set — Avantt display at 80px over Season Sans body, cream text, r12 CTAs. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Vuori Coastal-California performance calm — Aktiv Grotesk on pure white, warm near-black `#333333` ink, restrained small type (28px h1), photography-led, sharp 0px corners. Premium-athletic that never raises its voice. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. Windsurf Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Wispr Flow Pale lemon-cream paper, EB Garamond at 120px, and a lavender download pill — voice dictation that dresses like a literary journal. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. xAI White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#ffffff - surface
#ffffff - surface-soft
#fcfcfd - surface-muted
#f9f9fb - text AAA · 16.4
#1c2024 - text-strong
#1c2024 - text-body
#2c2d2f - text-muted
#60646c - text-faint AA·LG · 3.8
#80838d - text-disabled
#8b8d98 - brand AA·LG · 3.3
#0090ff - brand-hover
#0586f0 - brand-strong
#0d74ce - brand-ink
#113264 - on-brand
#ffffff - link
#0d74ce - link-hover
#0090ff - border — · 1.2
#e8e8ec - border-soft
#f0f0f3 - border-strong — · 1.4
#d9d9e0 - border-translucent
rgba(0, 8, 48, 0.094) - diff-insert-bg
#ecfdee - diff-delete-bg
#feeced - diff-delete-surface
#fcf7f8 - success
#2c8849 - warning
#bb6a00 - danger
#c62a44 - info
#0090ff - shadow-tint
rgba(0, 5, 9, 0.06)
Ship faster than ever.
display-hero Aeonik 64px w400 -0.02em
Ship faster than ever.
display-lg Aeonik 52px w400 -0.018em
Ship faster than ever.
h1 Aeonik 46px w400 -0.016em
Built for teams that ship.
h2 Aeonik 34px w500 -0.012em
A complete kit
h3 Aeonik 26px w500 -0.008em
The quick brown fox jumps over the lazy dog.
h4 Aeonik 20px w500 -0.004em
The quick brown fox jumps over the lazy dog.
body-lg "Suisse Intl" 17.5px w400 0
The quick brown fox jumps over the lazy dog.
body "Suisse Intl" 16px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow "Suisse Intl" 15.5px w700 0
The quick brown fox jumps over the lazy dog.
button "Suisse Intl" 15px w500 0
The quick brown fox jumps over the lazy dog.
body-sm "Suisse Intl" 14px w400 0
npx @webdesignhot/design-md add stripe
code ui-monospace 13.5px w400 0
OUR DESIGN SYSTEM
label "Suisse Intl" 13px w500 0
OUR DESIGN SYSTEM
caption "Suisse Intl" 12px w400 0.01em
OUR DESIGN SYSTEM
code-label ui-monospace 12px w500 0.02em
- 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
- none
0px - micro
2px - sm
4px - md
6px - lg
8px - xl
12px - 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 7/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 → —
- muted → text-muted
- border → border
- ring → border-strong
Magic's site is frontier-lab minimalism. The canvas is pure white `#ffffff`, the ink is a cool near-black `#1c2024` (the top step of the Radix gray scale, gray-12), and the entire neutral system is Radix gray 1–12 plus its alpha companions — a deliberate, engineered ramp rather than ad-hoc grays. Display runs in Aeonik, held at weight 400 even at the 46px hero, with negative tracking; body is Suisse Intl at a calm 17.5px, also weight 400. The only chromatic voltage is a single radix blue `#0090ff` (--color-blue-9), and the audit found it used as an accent — links, focus, the odd highlight — never as a filled hero CTA. Corners are sharp (the document body computes 0px radius), depth is hairline-only, and diff/code surfaces carry their own quiet green/red gutter tints. Where most AI-lab marketing reaches for gradients, glow and a loud hero button, Magic does the opposite: white space, restrained type, one blue, and a register that reads like a research note. The two Swiss-Intl/Aeonik families place it squarely in the modern Swiss-grotesque dev-tool lineage — closer to a typeset paper than a SaaS landing page.
- Geometric grotesque display family — held at weight 400 across the hero and headings for a calm, neutral voice
- Swiss neo-grotesque body family — running text at 17.5px/400, the quiet workhorse of the page
- The entire neutral (gray 1–12 + alpha) and accent (blue 1–12) ramp — gray-12 ink, blue-9 brand
- Paper-white editorial restraint, hairline-only depth, type-led layout with generous whitespace
- Dev-tool grotesque discipline — sharp neutral surfaces, a single cool accent, minimal chrome
- Frontier-lab research register — sparse, sober, type-forward pages that read like notes, not pitches
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: Magic
tagline: 'Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent.'
updated_at: 2026-05-29T21:43:38.103Z
published_at: 2026-05-29T21:43:38.103Z
author: webdesignhot
source_url: https://magic.dev
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, dev-tools]
tags: [light, minimal, sans, research, sharp]
preview_swatch: ['#ffffff', '#0090ff', '#1c2024']
related: []
description: 'Magic builds frontier code-generation models, and the site reads like the lab notebook rather than the launch poster. The canvas is pure white `#ffffff`, the ink is a cool near-black `#1c2024` (Radix gray-12), and the display family is Aeonik — held at weight 400 even at the 46px hero, paired with Suisse Intl for body at a calm 17.5px. The only chromatic voltage is a single radix blue `#0090ff` (--color-blue-9), used as an accent rather than a hero CTA fill — the audit found no colored hero button at all. Corners are sharp (0px radius on the document body), depth is hairline-only, and the whole surface holds a sparse research register: lots of white, very little decoration, type doing nearly all the work.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
muted: text-muted
border: border
ring: border-strong
themes:
default: light
available: [light]
switch-via: 'none — light-only research surface; no theme toggle present in production'
colors:
bg: '#ffffff' # pure white page canvas
surface: '#ffffff' # cards share the canvas — depth via hairline only
surface-soft: '#fcfcfd' # Radix gray-1 — faintest tonal break band
surface-muted: '#f9f9fb' # Radix gray-2 — alternate quiet band
text: '#1c2024' # cool near-black ink (Radix gray-12)
text-strong: '#1c2024'
text-body: '#2c2d2f' # Radix gray-11.5 — running paragraph ink
text-muted: '#60646c' # Radix gray-11 — secondary copy, captions (AA on white)
text-faint: '#80838d' # Radix gray-10 — low-emphasis hints
text-disabled: '#8b8d98' # Radix gray-9 — disabled / placeholder
brand: '#0090ff' # radix blue-9 — the single accent; not a hero CTA fill
brand-hover: '#0586f0' # radix blue-10 — hover/press step
brand-strong: '#0d74ce' # radix blue-11 — AA-safe blue for body-size links
brand-ink: '#113264' # radix blue-12 — deepest blue, rare emphasis
on-brand: '#ffffff' # white on blue — for the rare filled blue surface
link: '#0d74ce' # body-size links use blue-11 (AA), not blue-9
link-hover: '#0090ff' # hover lifts to the brand blue-9
border: '#e8e8ec' # Radix gray-4 — 1px hairline divider, the primary depth tool
border-soft: '#f0f0f3' # Radix gray-3 — lighter divider for nested rows
border-strong: '#d9d9e0' # Radix gray-6 — input / focused panel outline
border-translucent: 'rgba(0, 8, 48, 0.094)' # Radix gray-a4 — alpha hairline over imagery
diff-insert-bg: '#ecfdee' # inserted-line gutter tint inside code/diff blocks
diff-delete-bg: '#feeced' # removed-line gutter tint inside code/diff blocks
diff-delete-surface: '#fcf7f8' # removed-line body tint inside code/diff blocks
success: '#2c8849' # quiet green — confirmation states
warning: '#bb6a00' # amber — caution states (rare on a research surface)
danger: '#c62a44' # red — validation errors, destructive confirms
info: '#0090ff' # informational banners reuse the brand blue
shadow-tint: 'rgba(0, 5, 9, 0.06)' # cool ink-with-alpha — every shadow is tinted, never pure black
typography:
display:
family: 'Aeonik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600]
opentype: ['kern', 'liga']
body:
family: '"Suisse Intl", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600, 700]
opentype: ['kern', 'liga']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
weights: [400, 500]
scale:
display-hero: { size: 64, weight: 400, lineHeight: 1.04, tracking: '-0.02em', family: display }
display-lg: { size: 52, weight: 400, lineHeight: 1.06, tracking: '-0.018em', family: display }
h1: { size: 46, weight: 400, lineHeight: 1.08, tracking: '-0.016em', family: display }
h2: { size: 34, weight: 500, lineHeight: 1.15, tracking: '-0.012em', family: display }
h3: { size: 26, weight: 500, lineHeight: 1.22, tracking: '-0.008em', family: display }
h4: { size: 20, weight: 500, lineHeight: 1.3, tracking: '-0.004em', family: display }
eyebrow: { size: 15.5, weight: 700, lineHeight: 1.3, tracking: '0', family: body }
body-lg: { size: 17.5, 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', family: body }
caption: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0.01em', family: body }
button: { size: 15, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
code: { size: 13.5, weight: 400, lineHeight: 1.55, tracking: '0', family: mono }
code-label: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: mono }
radius:
none: 0
micro: 2
sm: 4
md: 6
lg: 8
xl: 12
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
layout:
page-width: 1200
prose-width: 680
header-height: 64
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 320
reduced-motion: 'respects prefers-reduced-motion: reduce — transitions collapse to opacity-only'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none — depth comes from 1px hairline + white-canvas contrast'
ambient: 'rgba(0, 5, 9, 0.04) 0 1px 2px'
standard: 'rgba(0, 5, 9, 0.06) 0 4px 16px'
elevated: 'rgba(0, 5, 9, 0.10) 0 12px 32px'
ring: '0 0 0 2px rgba(0, 144, 255, 0.45)'
accessibility:
contrast-text-on-bg: 16.39 # #1c2024 on #ffffff — AAA at all sizes
contrast-body-on-bg: 5.94 # #60646c muted on #ffffff — AA at body
contrast-link-on-bg: 4.77 # #0d74ce blue-11 on #ffffff — AA at body
contrast-brand-on-bg: 3.26 # #0090ff blue-9 on #ffffff — UI/large only, NOT AA body
focus-ring: '2px solid #0090ff with 2px offset on #ffffff'
reduced-motion-honored: true
keyboard-nav: 'tab order follows visual order; visible focus ring on every interactive element'
components:
button-primary:
background: '#1c2024'
text: '#ffffff'
radius: 6
padding: '10px 18px'
height: 40
font: button
hover: 'background #2c2d2f; no transform'
use: 'primary action — ink-on-white, the page has no colored hero CTA so ink carries it'
button-secondary:
background: '#ffffff'
text: '#1c2024'
border: '1px solid #d9d9e0'
radius: 6
padding: '9px 17px'
height: 40
font: button
hover: 'background #fcfcfd; border #cdced6'
use: 'secondary action — bordered ghost on white'
button-ghost:
background: 'transparent'
text: '#1c2024'
radius: 6
padding: '9px 14px'
font: button
hover: 'background rgba(0, 8, 48, 0.094)'
use: 'tertiary text-only action in dense rows / nav'
button-link:
background: 'transparent'
text: '#0d74ce'
radius: 0
padding: '0'
font: button
hover: 'text #0090ff; underline appears'
use: 'inline blue text action — the closest thing to a brand-colored button'
card:
background: '#ffffff'
text: '#1c2024'
border: '1px solid #e8e8ec'
radius: 8
padding: 24
shadow: 'none — hairline + white-canvas contrast'
use: 'feature card / research entry / index row'
input:
background: '#ffffff'
text: '#1c2024'
border: '1px solid #d9d9e0'
radius: 6
padding: '10px 14px'
height: 40
focus: 'border #0090ff; ring 0 0 0 2px rgba(0, 144, 255, 0.20)'
use: 'email / search / form input'
badge:
background: '#f0f0f3'
text: '#60646c'
radius: 4
padding: '3px 8px'
font: label
use: 'NEW / RESEARCH / status tag — quiet gray, sharp corners'
badge-accent:
background: '#e7f4fe'
text: '#0d74ce'
radius: 4
padding: '3px 8px'
font: label
use: 'accented tag — pale blue-3 ground, blue-11 text'
nav-link:
background: 'transparent'
text: '#1c2024'
font: button
padding: '8px 12px'
hover: 'text #0090ff'
use: 'top-nav menu items'
dark-mode: none
lineage:
summary: |
Magic's site is frontier-lab minimalism. The canvas is pure
white `#ffffff`, the ink is a cool near-black `#1c2024` (the top
step of the Radix gray scale, gray-12), and the entire neutral
system is Radix gray 1–12 plus its alpha companions — a deliberate,
engineered ramp rather than ad-hoc grays. Display runs in Aeonik,
held at weight 400 even at the 46px hero, with negative tracking;
body is Suisse Intl at a calm 17.5px, also weight 400. The only
chromatic voltage is a single radix blue `#0090ff` (--color-blue-9),
and the audit found it used as an accent — links, focus, the odd
highlight — never as a filled hero CTA. Corners are sharp (the
document body computes 0px radius), depth is hairline-only, and
diff/code surfaces carry their own quiet green/red gutter tints.
Where most AI-lab marketing reaches for gradients, glow and a loud
hero button, Magic does the opposite: white space, restrained type,
one blue, and a register that reads like a research note. The two
Swiss-Intl/Aeonik families place it squarely in the modern
Swiss-grotesque dev-tool lineage — closer to a typeset paper than
a SaaS landing page.
influences:
- name: 'Aeonik'
role: 'Geometric grotesque display family — held at weight 400 across the hero and headings for a calm, neutral voice'
url: 'https://cstmfonts.com/aeonik'
- name: 'Suisse Intl'
role: 'Swiss neo-grotesque body family — running text at 17.5px/400, the quiet workhorse of the page'
url: 'https://www.swisstypefaces.com/fonts/suisse/'
- name: 'Radix Colors'
role: 'The entire neutral (gray 1–12 + alpha) and accent (blue 1–12) ramp — gray-12 ink, blue-9 brand'
url: 'https://www.radix-ui.com/colors'
- name: 'Stripe Press'
role: 'Paper-white editorial restraint, hairline-only depth, type-led layout with generous whitespace'
url: 'https://press.stripe.com'
- name: 'Linear'
role: 'Dev-tool grotesque discipline — sharp neutral surfaces, a single cool accent, minimal chrome'
url: 'https://linear.app'
- name: 'Anthropic Research'
role: 'Frontier-lab research register — sparse, sober, type-forward pages that read like notes, not pitches'
url: 'https://www.anthropic.com/research'
---
## 1. Visual Theme & Atmosphere
Magic builds frontier code-generation models, and the marketing
surface is tuned to read like the lab's notebook rather than its
launch poster. The canvas is pure white `#ffffff` — no cream, no
tint, no gradient wash — and the ink is `#1c2024`, a cool near-black
that is literally the top step of the Radix gray scale (gray-12).
The whole neutral system underneath is Radix gray 1 through 12 plus
the alpha companions, which means every divider, every muted caption,
every faint hint is a considered step on an engineered ramp rather
than an ad-hoc gray. The effect is sober and precise.
The display family is Aeonik, a geometric grotesque, and the most
telling decision is that it is held at weight **400** even at the
46px hero. Where nearly every AI-lab site reaches for 600/700 to
shout, Magic lets a regular-weight grotesque carry the headline with
negative tracking (`-0.016em` at h1). Body is Suisse Intl — a Swiss
neo-grotesque — at a calm 17.5px, also weight 400, with a generous
1.6 line height. The one place weight jumps is the small eyebrow /
sub-label (15.5px at weight 700), which acts as a typographic
punctuation mark inside the otherwise even-weight field.
The single chromatic voltage is a radix blue `#0090ff` — Radix
blue-9, `hsl(206, 100%, 50%)`. Critically, the audit found **no
colored hero CTA**: the page does not lean on a big blue button.
The blue shows up as an accent — links (in its AA-safe blue-11 step
`#0d74ce` at body size), focus rings, the occasional highlight — and
otherwise the page is ink-on-white. Primary actions, where they
exist, are carried by ink `#1c2024` on white, not by chroma.
Corners are sharp. The document body computes a 0px radius, and the
radius ladder stays tight (6–8px on the few rounded elements). Depth
is hairline-only: a 1px Radix gray-4 `#e8e8ec` border does the work
that a drop shadow does elsewhere, and the rare shadow is cool-tinted
(`rgba(0, 5, 9, alpha)`) rather than pure black. Even the code and
diff surfaces are restrained — quiet green `#ecfdee` and red `#feeced`
gutter tints, nothing saturated.
Reading the page feels like reading a typeset research note:
abundant white space, restrained type, one blue, and almost no
decoration. The type does nearly all of the work, and the sparseness
is the message — this is a lab confident enough to under-design.
**Key Characteristics:**
- Pure white canvas `#ffffff` — never tinted, never gradient-washed.
- Cool near-black ink `#1c2024` — Radix gray-12, not pure black.
- Aeonik display held at weight 400 even at the 46px hero.
- Suisse Intl body at 17.5px/400 with calm 1.6 line height.
- Single accent: radix blue `#0090ff` (blue-9) — used as accent, not hero CTA.
- No colored hero button — primary action is ink-on-white.
- Body-size links use AA-safe blue-11 `#0d74ce`, not blue-9.
- Entire neutral ramp is Radix gray 1–12 + alpha companions.
- Sharp corners (0px body radius; 6–8px on the few rounded elements).
- Hairline-only depth — 1px `#e8e8ec` borders, cool-tinted shadows.
- Sparse research register — whitespace-led, decoration-minimal.
## 2. Color Palette & Roles
### Canvas / Surface
- **Background** (`#ffffff`) [→ body bg]: pure white page canvas. Cards share it; depth is hairline, not fill.
- **Surface** (`#ffffff`): cards and panels sit on the same white as the page — separation comes from a 1px border.
- **Surface Soft** (`#fcfcfd`) [→ --color-gray-1]: faintest tonal break for an alternate band.
- **Surface Muted** (`#f9f9fb`) [→ --color-gray-2]: second quiet band, e.g. table zebra or footer ground.
### Text
- **Text** (`#1c2024`) [→ --color-gray-12]: cool near-black ink. Carries display and body alike — AAA on white.
- **Text Body** (`#2c2d2f`) [→ --color-gray-11.5]: long-form running paragraph ink, a hair softer than gray-12.
- **Text Muted** (`#60646c`) [→ --color-gray-11]: secondary copy, captions, metadata — AA at body on white.
- **Text Faint** (`#80838d`) [→ --color-gray-10]: low-emphasis hints (large/UI only).
- **Text Disabled** (`#8b8d98`) [→ --color-gray-9]: disabled labels and placeholder text.
### Brand / Accent
- **Brand** (`#0090ff`) [→ --color-blue-9]: the single accent. UI accent, focus, highlights — not a filled hero CTA. UI/large contrast only.
- **Brand Hover** (`#0586f0`) [→ --color-blue-10]: hover / press step on interactive blue.
- **Brand Strong** (`#0d74ce`) [→ --color-blue-11]: the AA-safe blue for body-size text and links on white.
- **Brand Ink** (`#113264`) [→ --color-blue-12]: deepest blue, rare heavy emphasis on pale blue grounds.
### Interactive
- **Link** (`#0d74ce`): body-size links default to blue-11 for AA contrast — never raw blue-9.
- **Link Hover** (`#0090ff`): hover lifts to brand blue-9; underline appears.
- **Focus Ring** (`rgba(0, 144, 255, 0.45)`): blue focus ring on every interactive element.
### Borders
- **Border** (`#e8e8ec`) [→ --color-gray-4]: 1px hairline divider — the system's primary depth tool.
- **Border Soft** (`#f0f0f3`) [→ --color-gray-3]: lighter divider for nested rows and table lines.
- **Border Strong** (`#d9d9e0`) [→ --color-gray-6]: input outlines and stronger panel edges.
- **Border Translucent** (`rgba(0, 8, 48, 0.094)`) [→ --color-gray-a4]: alpha hairline for overlays on imagery.
### Code & Diff
- **Diff Insert BG** (`#ecfdee`): inserted-line gutter tint inside code / diff blocks.
- **Diff Delete BG** (`#feeced`): removed-line gutter tint inside code / diff blocks.
- **Diff Delete Surface** (`#fcf7f8`): removed-line body tint, softer than the gutter.
### Shadow
- **Shadow Tint** (`rgba(0, 5, 9, 0.06)`): every shadow is cool ink-with-alpha, never pure black — keeps the neutral cool.
### Semantic
- **Success** (`#2c8849`): quiet green — confirmation states, success toasts.
- **Warning** (`#bb6a00`): amber — caution states (rare on a research surface).
- **Danger** (`#c62a44`): red — validation errors, destructive confirms.
- **Info** (`#0090ff`): informational banners reuse the brand blue.
## 3. Typography Rules
### Font Family
- **Display:** `Aeonik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`. Aeonik is a geometric grotesque held at weight 400 across the hero and headings — neutral, calm, slightly mechanical apertures.
- **Body:** `"Suisse Intl", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`. Suisse Intl is a Swiss neo-grotesque — the running-text workhorse at 17.5px/400.
- **Mono:** `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. System mono on code and diff surfaces; no licensed mono shipped.
- **OpenType features:** `kern`, `liga` enabled site-wide.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Aeonik | 64 | 400 | 1.04 | -0.02em | Largest hero, top of homepage |
| display-lg | Aeonik | 52 | 400 | 1.06 | -0.018em | Section-opening display |
| h1 | Aeonik | 46 | 400 | 1.08 | -0.016em | Page h1 — calm 400 weight (live: 46.4px) |
| h2 | Aeonik | 34 | 500 | 1.15 | -0.012em | Section heads |
| h3 | Aeonik | 26 | 500 | 1.22 | -0.008em | Sub-section heads |
| h4 | Aeonik | 20 | 500 | 1.30 | -0.004em | Card group titles |
| eyebrow | Suisse Intl | 15.5 | 700 | 1.30 | 0 | Bold mini-label / kicker (live: 15.5px/700) |
| body-lg | Suisse Intl | 17.5 | 400 | 1.60 | 0 | Default running body (live: 17.5px/400) |
| body | Suisse Intl | 16 | 400 | 1.60 | 0 | Dense paragraph copy |
| body-sm | Suisse Intl | 14 | 400 | 1.55 | 0 | Footer body, fine print |
| label | Suisse Intl | 13 | 500 | 1.40 | 0 | Form labels, badge text |
| caption | Suisse Intl | 12 | 400 | 1.40 | 0.01em | Figure / photo captions |
| button | Suisse Intl | 15 | 500 | 1.00 | 0 | Button labels |
| code | mono | 13.5 | 400 | 1.55 | 0 | Default code / diff block |
| code-label | mono | 12 | 500 | 1.40 | 0.02em | Code-block filename header |
### Principles
- **Display stays at weight 400.** Aeonik carries the 46px hero at regular weight; the calm, neutral voice depends on refusing 600/700 at headline scale.
- **Negative tracking on display only.** Range is roughly `-0.02em` at hero down to `-0.004em` at h4. Body holds at neutral tracking.
- **One bold note: the eyebrow.** The single place weight jumps to 700 is the 15.5px sub-label — it punctuates the otherwise even-weight field.
- **Two-family contract.** Aeonik for display, Suisse Intl for body — both Swiss-grotesque, so the page reads as one coherent typographic voice with a quiet display/body distinction.
- **Body breathes at 1.6.** Suisse Intl running text uses a generous line height to keep the research register readable in long passages.
- **Open-source substitutes.** Inter at 400 with `-1%` tracking approximates Aeonik for cloned implementations; Inter or Helvetica Neue stand in for Suisse Intl.
- **No bold body copy.** Emphasis comes from the eyebrow weight or the blue link color, never from setting paragraph text to 700.
## 4. Component Stylings
### Buttons
**Primary (Ink)** — Background `#1c2024`, text `#ffffff`, 6px radius, padding `10px 18px`, height 40px, button font (15/500). Hover lifts to `#2c2d2f` with no transform. **Use:** the primary action. Because the page has no colored hero CTA, ink-on-white carries the strongest button.
**Secondary (Bordered)** — Background `#ffffff`, text `#1c2024`, 1px `#d9d9e0` border, 6px radius, padding `9px 17px`. Hover: background `#fcfcfd`, border deepens to `#cdced6`. **Use:** secondary action beside the ink primary.
**Ghost** — Background transparent, text `#1c2024`, 6px radius, padding `9px 14px`. Hover background `rgba(0, 8, 48, 0.094)` (gray-a4). **Use:** tertiary text-only action inside dense rows and the nav.
**Link (Blue text)** — Transparent, text `#0d74ce` (blue-11), no padding, square. Hover shifts to brand blue `#0090ff` and reveals an underline. **Use:** inline text action — the closest the system gets to a brand-colored button.
### Cards
**Feature / Research Card** — Background `#ffffff` (shares the canvas), 1px `#e8e8ec` border, 8px radius, padding 24px. **No shadow** — depth is the hairline plus white-canvas contrast. Heading in Aeonik 20/500, body in Suisse Intl 16/400.
**Index Row** — A borderless variant: 1px `#f0f0f3` (gray-3) divider between rows, no card fill. Used for research lists and link indexes. Hover tints the row with `#fcfcfd`.
### Badges & Tags
**Badge (Neutral)** — Background `#f0f0f3` (gray-3), text `#60646c` (gray-11), 4px radius, padding `3px 8px`, label font (13/500). Sharp-ish corners, not pills. **Use:** NEW / RESEARCH / status tags.
**Badge (Accent)** — Background `#e7f4fe` (blue-3), text `#0d74ce` (blue-11), 4px radius, padding `3px 8px`. **Use:** accented status tag where a touch of blue is warranted.
### Inputs & Forms
**Text Input** — Background `#ffffff`, 1px `#d9d9e0` border, 6px radius, padding `10px 14px`, height 40px, body 16/400. Focus: border `#0090ff`, ring `0 0 0 2px rgba(0, 144, 255, 0.20)`. Placeholder in `#8b8d98` (gray-9). **Use:** email / search / contact form.
### Navigation
**Top Nav** — Background `#ffffff` (matches canvas), 64px height, optional 1px `#e8e8ec` bottom hairline on scroll. Layout: Magic wordmark left, sparse horizontal menu, single ink or ghost action right. No colored CTA in the nav.
**Nav Link** — Transparent background, ink `#1c2024` text, button font (15/500), `8px 12px` padding. Hover shifts text to brand blue `#0090ff`.
### Code Block
**Code / Diff Surface** — `#ffffff` or `#fcfcfd` ground, 1px `#e8e8ec` border, 8px radius, system mono 13.5/400. Inserted lines tint `#ecfdee`, removed lines `#feeced` (gutter) / `#fcf7f8` (body). Filename header in code-label mono (12/500/0.02em).
## 5. Layout Principles
### Spacing System
- **Base unit:** 4px.
- **Scale:** 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- **Section padding:** 64–96px standard; up to 128px between major regions.
- **Density:** generous, research-note pacing — whitespace is the dominant element on every screen.
### Grid & Container
- **Max content width:** ~1200px.
- **Prose width:** ~680px — narrow measure for long-form research reading.
- **Feature grids:** 2-up for splits, 3-up for benefit rows; collapse on narrower viewports.
- **Footer:** multi-column at desktop, ink wordmark plus quiet gray links.
### Whitespace Philosophy
White space is the primary design material. Headlines sit alone with
ample margin; sections are separated by air rather than rules or
bands. The page resists filling the canvas — emptiness reads as
confidence, and the single blue accent only registers because so
little else competes with it.
### Section Cadence
- White hero (ink h1, body subhead, ink or ghost action) → white research / feature band → optional faint `#fcfcfd` band for a quiet break → white CTA region → white footer.
- No dark sections, no gradient bands, no colored hero. The whole page stays white with hairline separation.
## 6. Shapes & Radius Scale
| Token | Value | Tier | Use |
|---|---|---|---|
| none | 0px | Sharp | Document body, dividers, many edges (live body radius = 0) |
| micro | 2px | Micro | Tiny inline chips |
| sm | 4px | Standard | Badges, tags |
| md | 6px | Comfortable | Buttons, inputs — the interactive default |
| lg | 8px | Relaxed | Cards, code blocks |
| xl | 12px | Large | Larger feature shells (rare) |
| pill | 9999px | Pill | Avatars, the rare round element |
The defining shape note is **sharpness**: the document body computes
a 0px radius, and rounded elements stay tight (6px buttons, 8px
cards). Aeonik's geometric grotesque forms echo the rectilinear
edges — flat baselines, even apertures — so the type and the shape
language agree. There is no soft, pill-heavy SaaS rounding here.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | `#ffffff` canvas | Body regions, footer |
| 1 — Card | `#ffffff` + 1px `#e8e8ec` hairline | Feature / research cards, code blocks |
| 2 — Ambient | `#ffffff` + hairline + `rgba(0, 5, 9, 0.04) 0 1px 2px` | Subtle lift on a hovered card |
| 3 — Elevated | `#ffffff` + hairline + `rgba(0, 5, 9, 0.10) 0 12px 32px` | Dropdowns, popovers (rare) |
### Shadow Philosophy
The system uses **hairline-only depth** as its default — every card
relies on a 1px `#e8e8ec` (gray-4) border, and shadows appear only on
transient floating UI like dropdowns. When a shadow is used it is
cool ink-with-alpha (`rgba(0, 5, 9, alpha)`), never neutral black, so
elevation keeps the cool character of the gray ramp. On a pure-white
canvas, contrast and a single hairline read as cleanly as a drop
shadow would — and far more quietly, which suits the research tone.
## 8. Interaction & Motion
### Easing & Duration
- **ease-standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — material-style; most UI transitions.
- **ease-out:** `cubic-bezier(0, 0, 0.2, 1)` — content fading in from below.
- **duration-fast:** 120ms — color shifts on hover (links, nav, buttons).
- **duration-standard:** 200ms — opacity / border transitions on cards.
- **duration-slow:** 320ms — larger reveals (rare).
### Per-Component Micro-States
- **Button hover:** color shift only, no transform. Ink primary `#1c2024` → `#2c2d2f` over 120ms.
- **Card hover:** border deepens from `#e8e8ec` to `#d9d9e0`, or a faint `#fcfcfd` row tint. No shadow jump. 200ms.
- **Link hover:** blue-11 `#0d74ce` → brand blue `#0090ff`, underline appears. 120ms.
- **Input focus:** border shifts to `#0090ff`, blue ring fades in over 120ms.
- **Nav link hover:** ink → brand blue `#0090ff`. 120ms.
### Page Transitions
The page is largely static from first paint — no autoplaying hero,
no scroll-jacking. Sections may fade in from below on first scroll
(ease-out, 200–320ms), but nothing animates continuously. The
stillness is part of the research register.
### Reduced Motion
Respects `prefers-reduced-motion: reduce`. When set, all transitions
collapse to opacity-only, scroll-reveal fades are disabled (content
appears immediately), and hover color shifts are retained because
they carry meaning, not decoration.
## 9. Accessibility & A11y
### Contrast Pairs
| Pair | Ratio | WCAG |
|---|---|---|
| `#1c2024` ink on `#ffffff` | 16.39 | AAA at all sizes |
| `#2c2d2f` body ink on `#ffffff` | 14.0+ | AAA at body |
| `#60646c` muted on `#ffffff` | 5.94 | AA at body |
| `#0d74ce` link (blue-11) on `#ffffff` | 4.77 | AA at body |
| `#0090ff` brand (blue-9) on `#ffffff` | 3.26 | UI / large text only — NOT AA body |
| `#ffffff` on `#1c2024` ink button | 16.39 | AAA at all sizes |
| `#80838d` faint (gray-10) on `#ffffff` | 3.78 | UI / large only |
The critical rule: **`#0090ff` blue-9 only clears 3.26 on white**, so
it is valid for UI elements, icons and large display text, but body
links and small text must use blue-11 `#0d74ce` (4.77, AA).
### Focus Indicators
2px solid `#0090ff` focus ring with 2px offset on the white canvas.
Applied to every interactive element — buttons, links, inputs, nav.
Never `outline: none` without an equivalent replacement.
### ARIA Patterns
- **Combobox:** `role="combobox"` with `aria-expanded` + `aria-controls` on any search field.
- **Dialog:** `role="dialog"` + `aria-modal="true"` + focus trap on modals.
- **Navigation:** `nav` landmark with `aria-label`; current page marked `aria-current="page"`.
### Keyboard Nav
- Tab order follows visual order strictly.
- Skip-link present in the header, visible on focus.
- Escape closes modals and popovers; arrow keys move within menus.
### Screen Reader
- Decorative imagery and code mockups marked `aria-hidden="true"`.
- Diff blocks expose inserted/removed lines via hidden labels, not color alone.
- Icon-only actions carry a visually-hidden text label.
### Reduced Motion
Honored — see §8.
## 10. Responsive Behavior
| Breakpoint | Range | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero h1 46→30px; feature grid 1-up; nav hamburger; section padding 48–64px |
| Tablet | 640–1024px | Hero h1 ~38px; feature grid 2-up; section padding 64px |
| Desktop | 1024–1280px | Full hero h1 46px; feature grid 3-up; section padding 96px |
| Wide | > 1280px | Content caps at 1200px; prose caps at 680px |
### Touch Targets
- Primary / secondary buttons: 40px height — padded internally to a comfortable tap target.
- Nav links: 32px visual, padded to a 44px tap zone on mobile.
- Inputs: 40px height; spacing increases on touch viewports.
### Collapsing Strategy
- Top nav switches to a hamburger below ~768px.
- Feature grid: 3-up → 2-up → 1-up.
- Code blocks: horizontal scroll preserved (no wrap) so code stays readable.
- Multi-column footer stacks to a single column on mobile.
### Image Behavior
Product / research figures use `srcset` for 1x/2x. Diagrams sit on the
white canvas with a 1px hairline frame; no rounded raster cards.
### Container Queries
Used where cards reflow independently of the viewport — feature grids
inside a constrained column swap to a stacked layout based on the
card's own width.
## 11. Content & Voice
### Tone
Sober, precise, research-forward. Magic's voice sounds like a frontier
lab describing its work to peers — declarative sentences, no hype, no
exclamation marks, no emoji. Copy reads like a note from the team, not
a sales pitch. Claims are specific and quantified where possible.
### Microcopy Patterns
- **Button verbs:** "Read the research", "Get in touch", "Join us", "Learn more". Plain, infinitive, no urgency punctuation.
- **Error recipe:** `[What failed] — [Why] — [What to do]`. Example: "Couldn't send. Your message was empty. Add a note and try again."
- **Success confirmations:** terse — "Sent", "Saved", "Subscribed". No exclamation.
- **Empty states:** describe the mechanism, not the feeling. "No results. Try a different query."
### CTA Verb Conventions
- Primary: "Read the research", "Get in touch", "Join us".
- Secondary: "Learn more", "View the paper".
- Avoid: "Sign up now!", "Get started free", "Join the revolution", "Supercharge your...".
### Empty States
Empty and loading states stay minimal — a single line of muted gray-11
text on white, no illustration. The blank space is consistent with the
rest of the page rather than dressed up.
## 12. Dark Mode & Theming
Magic's site is **light-only**. The audit found no theme toggle and no
dark companion — the pure-white canvas is the brand. There is no
`prefers-color-scheme` dark override in production.
If a dark variant were ever derived, it should invert through the same
Radix ramp rather than switching palettes: `bg` → Radix gray-1 dark
(`#111113`), `text` → Radix gray-12 dark (`#eeeef0`), borders → Radix
gray-4 dark, and the brand blue `#0090ff` retained (its blue-9 step
holds AA against a dark ground). But this is hypothetical — ship
light-only to match production.
## 13. Lineage & Influences
Magic sits at the intersection of three traditions: **Swiss grotesque
type discipline** (Aeonik display, Suisse Intl body — both
neo-grotesque faces), **frontier-lab research minimalism** (sober,
type-led pages that read like notes rather than pitches), and
**engineered color systems** (the entire neutral and accent ramp is
Radix Colors — gray 1–12 for neutrals, blue 1–12 for the accent). It
rejects the AI-lab orthodoxy of gradients, glow, dark hero sections
and a big colored CTA. There is no hero button at all; primary action
is ink-on-white, and the lone blue `#0090ff` is an accent, not a fill.
The deepest signal is restraint. Where most code-tool marketing fills
the canvas, Magic empties it — whitespace, two grotesque families held
mostly at weight 400, sharp corners, hairline depth, one blue. The
Radix foundation means the grays are not improvised: gray-12 ink,
gray-11 muted, gray-4 borders are all exact steps on a published ramp,
which gives the neutral field its even, engineered calm.
**Named influences:**
- **Aeonik** — geometric grotesque display, held at weight 400 across the hero.
- **Suisse Intl** — Swiss neo-grotesque body, the running-text workhorse.
- **Radix Colors** — the full neutral (gray) and accent (blue) ramp under the page.
- **Stripe Press** — paper-white editorial restraint, hairline-only depth.
- **Linear** — dev-tool grotesque discipline, single cool accent, minimal chrome.
- **Anthropic Research** — frontier-lab research register, sparse and type-forward.
## 14. Do's and Don'ts
### Do
- **Do** anchor the canvas at pure white `#ffffff` — no cream, no tint, no gradient.
- **Do** keep ink at `#1c2024` (Radix gray-12) — a cool near-black, not pure black.
- **Do** hold Aeonik display at weight 400 even at the 46px hero. The calm voice depends on it.
- **Do** apply negative tracking on display only (`-0.02em` hero → `-0.004em` h4); body stays neutral.
- **Do** set body in Suisse Intl at 17.5px/400 with a 1.6 line height.
- **Do** treat `#0090ff` blue-9 as an accent — links, focus, highlights — not a hero CTA fill.
- **Do** use blue-11 `#0d74ce` for body-size links so contrast clears AA (4.77).
- **Do** carry the primary action with ink-on-white `#1c2024` since there is no colored hero button.
- **Do** rely on hairline-only depth — 1px `#e8e8ec` (gray-4) borders carry every card.
- **Do** keep corners sharp — 0px on edges, 6px buttons, 8px cards.
- **Do** source neutrals and the accent from the Radix ramp (gray 1–12, blue 1–12).
- **Do** let whitespace dominate — empty space reads as confidence.
### Don't
- **Don't** introduce a second accent color. The single radix blue is the only chroma.
- **Don't** use `#0090ff` blue-9 for body-size text or small links — it only clears 3.26 on white.
- **Don't** add a big colored hero CTA. The audit found none; primary action is ink-on-white.
- **Don't** set display to bold weights (600/700) at headline scale. Aeonik stays at 400.
- **Don't** add drop shadows to cards. Hairlines + white-canvas contrast carry depth.
- **Don't** round corners heavily. This is a sharp system — no pill buttons, no soft SaaS cards.
- **Don't** tint the canvas. White is the brand; cream or gray-washed backgrounds break it.
- **Don't** improvise grays. Use the Radix gray steps so the neutral field stays engineered and even.
- **Don't** add gradients, glow, or dark hero bands. The page is flat white throughout.
- **Don't** use exclamation marks, emoji, or hype verbs in copy. The register is research-sober.
- **Don't** ship a dark mode to match production — the site is light-only.
- **Don't** fill the canvas. Resist the urge to decorate; the sparseness is the design.
## 15. Agent Prompt Guide
### Quick Color Reference
```
Background: #ffffff
Surface: #ffffff
Surface Soft: #fcfcfd
Text: #1c2024
Body Text: #2c2d2f
Muted Text: #60646c
Brand (accent):#0090ff
Brand Strong: #0d74ce (use for body-size links — AA)
Brand Hover: #0586f0
Border: #e8e8ec
Border Strong: #d9d9e0
Danger: #c62a44
```
### Example Component Prompts
- **"Create a hero section in the Magic style"** — Pure white `#ffffff` canvas, 46px Aeonik h1 at weight 400 with `-0.016em` tracking, 17.5px Suisse Intl body subhead in `#2c2d2f`, and an ink `#1c2024` text or button action — NO colored hero button. Abundant whitespace, sharp edges, no gradient.
- **"Design a card in the Magic style"** — White `#ffffff` background (shares the canvas), 1px `#e8e8ec` border, 8px radius, 24px padding, no shadow. Heading in Aeonik 20/500, body in Suisse Intl 16/400. Hover: border deepens to `#d9d9e0`.
- **"Build a primary button in the Magic style"** — Ink `#1c2024` background, white text, 6px radius, `10px 18px` padding, 40px height, Suisse Intl 15/500. Hover: `#2c2d2f`. No transform, no shadow.
- **"Style an inline link in the Magic style"** — Text in blue-11 `#0d74ce` (AA on white). Hover: shift to brand blue `#0090ff` and reveal an underline. Never use raw blue-9 for body-size link text.
- **"Make a research / index list in the Magic style"** — Borderless rows separated by 1px `#f0f0f3` dividers, Aeonik title at 20/500, muted `#60646c` metadata in Suisse Intl 14/400. Hover tints the row `#fcfcfd`. No card fills, no shadows.
- **"Render a code / diff block in the Magic style"** — White or `#fcfcfd` ground, 1px `#e8e8ec` border, 8px radius, system mono 13.5/400. Inserted lines tint `#ecfdee`, removed lines `#feeced`. Filename header in mono 12/500/0.02em uppercase.
### Iteration Guide
1. Start with pure white `#ffffff`. Never tint the canvas — the white is the brand.
2. Set type before layout. Aeonik display at weight 400 with negative tracking; Suisse Intl body at 17.5px/400.
3. Keep the accent scarce. `#0090ff` is an accent only — links, focus, highlights. There is no colored hero button.
4. For any body-size link or small blue text, switch to blue-11 `#0d74ce` so contrast clears AA.
5. Carry the primary action with ink-on-white `#1c2024`, not chroma.
6. Sharpen the corners — 0px edges, 6px buttons, 8px cards. No pills, no soft rounding.
7. Use hairline depth — 1px `#e8e8ec` borders, no drop shadows on cards.
8. Add whitespace until it feels almost too empty, then stop. The sparse research register is the goal.
*Theme-toggle audit: score=0, signals=[none] — light-only, confirmed against live probe.*
1. Visual Theme & Atmosphere
Magic builds frontier code-generation models, and the marketing
surface is tuned to read like the lab’s notebook rather than its
launch poster. The canvas is pure white #ffffff — no cream, no
tint, no gradient wash — and the ink is #1c2024, a cool near-black
that is literally the top step of the Radix gray scale (gray-12).
The whole neutral system underneath is Radix gray 1 through 12 plus
the alpha companions, which means every divider, every muted caption,
every faint hint is a considered step on an engineered ramp rather
than an ad-hoc gray. The effect is sober and precise.
The display family is Aeonik, a geometric grotesque, and the most
telling decision is that it is held at weight 400 even at the
46px hero. Where nearly every AI-lab site reaches for 600/700 to
shout, Magic lets a regular-weight grotesque carry the headline with
negative tracking (-0.016em at h1). Body is Suisse Intl — a Swiss
neo-grotesque — at a calm 17.5px, also weight 400, with a generous
1.6 line height. The one place weight jumps is the small eyebrow /
sub-label (15.5px at weight 700), which acts as a typographic
punctuation mark inside the otherwise even-weight field.
The single chromatic voltage is a radix blue #0090ff — Radix
blue-9, hsl(206, 100%, 50%). Critically, the audit found no
colored hero CTA: the page does not lean on a big blue button.
The blue shows up as an accent — links (in its AA-safe blue-11 step
#0d74ce at body size), focus rings, the occasional highlight — and
otherwise the page is ink-on-white. Primary actions, where they
exist, are carried by ink #1c2024 on white, not by chroma.
Corners are sharp. The document body computes a 0px radius, and the
radius ladder stays tight (6–8px on the few rounded elements). Depth
is hairline-only: a 1px Radix gray-4 #e8e8ec border does the work
that a drop shadow does elsewhere, and the rare shadow is cool-tinted
(rgba(0, 5, 9, alpha)) rather than pure black. Even the code and
diff surfaces are restrained — quiet green #ecfdee and red #feeced
gutter tints, nothing saturated.
Reading the page feels like reading a typeset research note: abundant white space, restrained type, one blue, and almost no decoration. The type does nearly all of the work, and the sparseness is the message — this is a lab confident enough to under-design.
Key Characteristics:
- Pure white canvas
#ffffff— never tinted, never gradient-washed. - Cool near-black ink
#1c2024— Radix gray-12, not pure black. - Aeonik display held at weight 400 even at the 46px hero.
- Suisse Intl body at 17.5px/400 with calm 1.6 line height.
- Single accent: radix blue
#0090ff(blue-9) — used as accent, not hero CTA. - No colored hero button — primary action is ink-on-white.
- Body-size links use AA-safe blue-11
#0d74ce, not blue-9. - Entire neutral ramp is Radix gray 1–12 + alpha companions.
- Sharp corners (0px body radius; 6–8px on the few rounded elements).
- Hairline-only depth — 1px
#e8e8ecborders, cool-tinted shadows. - Sparse research register — whitespace-led, decoration-minimal.
2. Color Palette & Roles
Canvas / Surface
- Background (
#ffffff) [→ body bg]: pure white page canvas. Cards share it; depth is hairline, not fill. - Surface (
#ffffff): cards and panels sit on the same white as the page — separation comes from a 1px border. - Surface Soft (
#fcfcfd) [→ —color-gray-1]: faintest tonal break for an alternate band. - Surface Muted (
#f9f9fb) [→ —color-gray-2]: second quiet band, e.g. table zebra or footer ground.
Text
- Text (
#1c2024) [→ —color-gray-12]: cool near-black ink. Carries display and body alike — AAA on white. - Text Body (
#2c2d2f) [→ —color-gray-11.5]: long-form running paragraph ink, a hair softer than gray-12. - Text Muted (
#60646c) [→ —color-gray-11]: secondary copy, captions, metadata — AA at body on white. - Text Faint (
#80838d) [→ —color-gray-10]: low-emphasis hints (large/UI only). - Text Disabled (
#8b8d98) [→ —color-gray-9]: disabled labels and placeholder text.
Brand / Accent
- Brand (
#0090ff) [→ —color-blue-9]: the single accent. UI accent, focus, highlights — not a filled hero CTA. UI/large contrast only. - Brand Hover (
#0586f0) [→ —color-blue-10]: hover / press step on interactive blue. - Brand Strong (
#0d74ce) [→ —color-blue-11]: the AA-safe blue for body-size text and links on white. - Brand Ink (
#113264) [→ —color-blue-12]: deepest blue, rare heavy emphasis on pale blue grounds.
Interactive
- Link (
#0d74ce): body-size links default to blue-11 for AA contrast — never raw blue-9. - Link Hover (
#0090ff): hover lifts to brand blue-9; underline appears. - Focus Ring (
rgba(0, 144, 255, 0.45)): blue focus ring on every interactive element.
Borders
- Border (
#e8e8ec) [→ —color-gray-4]: 1px hairline divider — the system’s primary depth tool. - Border Soft (
#f0f0f3) [→ —color-gray-3]: lighter divider for nested rows and table lines. - Border Strong (
#d9d9e0) [→ —color-gray-6]: input outlines and stronger panel edges. - Border Translucent (
rgba(0, 8, 48, 0.094)) [→ —color-gray-a4]: alpha hairline for overlays on imagery.
Code & Diff
- Diff Insert BG (
#ecfdee): inserted-line gutter tint inside code / diff blocks. - Diff Delete BG (
#feeced): removed-line gutter tint inside code / diff blocks. - Diff Delete Surface (
#fcf7f8): removed-line body tint, softer than the gutter.
Shadow
- Shadow Tint (
rgba(0, 5, 9, 0.06)): every shadow is cool ink-with-alpha, never pure black — keeps the neutral cool.
Semantic
- Success (
#2c8849): quiet green — confirmation states, success toasts. - Warning (
#bb6a00): amber — caution states (rare on a research surface). - Danger (
#c62a44): red — validation errors, destructive confirms. - Info (
#0090ff): informational banners reuse the brand blue.
3. Typography Rules
Font Family
- Display:
Aeonik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif. Aeonik is a geometric grotesque held at weight 400 across the hero and headings — neutral, calm, slightly mechanical apertures. - Body:
"Suisse Intl", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif. Suisse Intl is a Swiss neo-grotesque — the running-text workhorse at 17.5px/400. - Mono:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace. System mono on code and diff surfaces; no licensed mono shipped. - OpenType features:
kern,ligaenabled site-wide.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Aeonik | 64 | 400 | 1.04 | -0.02em | Largest hero, top of homepage |
| display-lg | Aeonik | 52 | 400 | 1.06 | -0.018em | Section-opening display |
| h1 | Aeonik | 46 | 400 | 1.08 | -0.016em | Page h1 — calm 400 weight (live: 46.4px) |
| h2 | Aeonik | 34 | 500 | 1.15 | -0.012em | Section heads |
| h3 | Aeonik | 26 | 500 | 1.22 | -0.008em | Sub-section heads |
| h4 | Aeonik | 20 | 500 | 1.30 | -0.004em | Card group titles |
| eyebrow | Suisse Intl | 15.5 | 700 | 1.30 | 0 | Bold mini-label / kicker (live: 15.5px/700) |
| body-lg | Suisse Intl | 17.5 | 400 | 1.60 | 0 | Default running body (live: 17.5px/400) |
| body | Suisse Intl | 16 | 400 | 1.60 | 0 | Dense paragraph copy |
| body-sm | Suisse Intl | 14 | 400 | 1.55 | 0 | Footer body, fine print |
| label | Suisse Intl | 13 | 500 | 1.40 | 0 | Form labels, badge text |
| caption | Suisse Intl | 12 | 400 | 1.40 | 0.01em | Figure / photo captions |
| button | Suisse Intl | 15 | 500 | 1.00 | 0 | Button labels |
| code | mono | 13.5 | 400 | 1.55 | 0 | Default code / diff block |
| code-label | mono | 12 | 500 | 1.40 | 0.02em | Code-block filename header |
Principles
- Display stays at weight 400. Aeonik carries the 46px hero at regular weight; the calm, neutral voice depends on refusing 600/700 at headline scale.
- Negative tracking on display only. Range is roughly
-0.02emat hero down to-0.004emat h4. Body holds at neutral tracking. - One bold note: the eyebrow. The single place weight jumps to 700 is the 15.5px sub-label — it punctuates the otherwise even-weight field.
- Two-family contract. Aeonik for display, Suisse Intl for body — both Swiss-grotesque, so the page reads as one coherent typographic voice with a quiet display/body distinction.
- Body breathes at 1.6. Suisse Intl running text uses a generous line height to keep the research register readable in long passages.
- Open-source substitutes. Inter at 400 with
-1%tracking approximates Aeonik for cloned implementations; Inter or Helvetica Neue stand in for Suisse Intl. - No bold body copy. Emphasis comes from the eyebrow weight or the blue link color, never from setting paragraph text to 700.
4. Component Stylings
Buttons
Primary (Ink) — Background #1c2024, text #ffffff, 6px radius, padding 10px 18px, height 40px, button font (15/500). Hover lifts to #2c2d2f with no transform. Use: the primary action. Because the page has no colored hero CTA, ink-on-white carries the strongest button.
Secondary (Bordered) — Background #ffffff, text #1c2024, 1px #d9d9e0 border, 6px radius, padding 9px 17px. Hover: background #fcfcfd, border deepens to #cdced6. Use: secondary action beside the ink primary.
Ghost — Background transparent, text #1c2024, 6px radius, padding 9px 14px. Hover background rgba(0, 8, 48, 0.094) (gray-a4). Use: tertiary text-only action inside dense rows and the nav.
Link (Blue text) — Transparent, text #0d74ce (blue-11), no padding, square. Hover shifts to brand blue #0090ff and reveals an underline. Use: inline text action — the closest the system gets to a brand-colored button.
Cards
Feature / Research Card — Background #ffffff (shares the canvas), 1px #e8e8ec border, 8px radius, padding 24px. No shadow — depth is the hairline plus white-canvas contrast. Heading in Aeonik 20/500, body in Suisse Intl 16/400.
Index Row — A borderless variant: 1px #f0f0f3 (gray-3) divider between rows, no card fill. Used for research lists and link indexes. Hover tints the row with #fcfcfd.
Badges & Tags
Badge (Neutral) — Background #f0f0f3 (gray-3), text #60646c (gray-11), 4px radius, padding 3px 8px, label font (13/500). Sharp-ish corners, not pills. Use: NEW / RESEARCH / status tags.
Badge (Accent) — Background #e7f4fe (blue-3), text #0d74ce (blue-11), 4px radius, padding 3px 8px. Use: accented status tag where a touch of blue is warranted.
Inputs & Forms
Text Input — Background #ffffff, 1px #d9d9e0 border, 6px radius, padding 10px 14px, height 40px, body 16/400. Focus: border #0090ff, ring 0 0 0 2px rgba(0, 144, 255, 0.20). Placeholder in #8b8d98 (gray-9). Use: email / search / contact form.
Navigation
Top Nav — Background #ffffff (matches canvas), 64px height, optional 1px #e8e8ec bottom hairline on scroll. Layout: Magic wordmark left, sparse horizontal menu, single ink or ghost action right. No colored CTA in the nav.
Nav Link — Transparent background, ink #1c2024 text, button font (15/500), 8px 12px padding. Hover shifts text to brand blue #0090ff.
Code Block
Code / Diff Surface — #ffffff or #fcfcfd ground, 1px #e8e8ec border, 8px radius, system mono 13.5/400. Inserted lines tint #ecfdee, removed lines #feeced (gutter) / #fcf7f8 (body). Filename header in code-label mono (12/500/0.02em).
5. Layout Principles
Spacing System
- Base unit: 4px.
- Scale: 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- Section padding: 64–96px standard; up to 128px between major regions.
- Density: generous, research-note pacing — whitespace is the dominant element on every screen.
Grid & Container
- Max content width: ~1200px.
- Prose width: ~680px — narrow measure for long-form research reading.
- Feature grids: 2-up for splits, 3-up for benefit rows; collapse on narrower viewports.
- Footer: multi-column at desktop, ink wordmark plus quiet gray links.
Whitespace Philosophy
White space is the primary design material. Headlines sit alone with ample margin; sections are separated by air rather than rules or bands. The page resists filling the canvas — emptiness reads as confidence, and the single blue accent only registers because so little else competes with it.
Section Cadence
- White hero (ink h1, body subhead, ink or ghost action) → white research / feature band → optional faint
#fcfcfdband for a quiet break → white CTA region → white footer. - No dark sections, no gradient bands, no colored hero. The whole page stays white with hairline separation.
6. Shapes & Radius Scale
| Token | Value | Tier | Use |
|---|---|---|---|
| none | 0px | Sharp | Document body, dividers, many edges (live body radius = 0) |
| micro | 2px | Micro | Tiny inline chips |
| sm | 4px | Standard | Badges, tags |
| md | 6px | Comfortable | Buttons, inputs — the interactive default |
| lg | 8px | Relaxed | Cards, code blocks |
| xl | 12px | Large | Larger feature shells (rare) |
| pill | 9999px | Pill | Avatars, the rare round element |
The defining shape note is sharpness: the document body computes a 0px radius, and rounded elements stay tight (6px buttons, 8px cards). Aeonik’s geometric grotesque forms echo the rectilinear edges — flat baselines, even apertures — so the type and the shape language agree. There is no soft, pill-heavy SaaS rounding here.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | #ffffff canvas | Body regions, footer |
| 1 — Card | #ffffff + 1px #e8e8ec hairline | Feature / research cards, code blocks |
| 2 — Ambient | #ffffff + hairline + rgba(0, 5, 9, 0.04) 0 1px 2px | Subtle lift on a hovered card |
| 3 — Elevated | #ffffff + hairline + rgba(0, 5, 9, 0.10) 0 12px 32px | Dropdowns, popovers (rare) |
Shadow Philosophy
The system uses hairline-only depth as its default — every card
relies on a 1px #e8e8ec (gray-4) border, and shadows appear only on
transient floating UI like dropdowns. When a shadow is used it is
cool ink-with-alpha (rgba(0, 5, 9, alpha)), never neutral black, so
elevation keeps the cool character of the gray ramp. On a pure-white
canvas, contrast and a single hairline read as cleanly as a drop
shadow would — and far more quietly, which suits the research tone.
8. Interaction & Motion
Easing & Duration
- ease-standard:
cubic-bezier(0.4, 0, 0.2, 1)— material-style; most UI transitions. - ease-out:
cubic-bezier(0, 0, 0.2, 1)— content fading in from below. - duration-fast: 120ms — color shifts on hover (links, nav, buttons).
- duration-standard: 200ms — opacity / border transitions on cards.
- duration-slow: 320ms — larger reveals (rare).
Per-Component Micro-States
- Button hover: color shift only, no transform. Ink primary
#1c2024→#2c2d2fover 120ms. - Card hover: border deepens from
#e8e8ecto#d9d9e0, or a faint#fcfcfdrow tint. No shadow jump. 200ms. - Link hover: blue-11
#0d74ce→ brand blue#0090ff, underline appears. 120ms. - Input focus: border shifts to
#0090ff, blue ring fades in over 120ms. - Nav link hover: ink → brand blue
#0090ff. 120ms.
Page Transitions
The page is largely static from first paint — no autoplaying hero, no scroll-jacking. Sections may fade in from below on first scroll (ease-out, 200–320ms), but nothing animates continuously. The stillness is part of the research register.
Reduced Motion
Respects prefers-reduced-motion: reduce. When set, all transitions
collapse to opacity-only, scroll-reveal fades are disabled (content
appears immediately), and hover color shifts are retained because
they carry meaning, not decoration.
9. Accessibility & A11y
Contrast Pairs
| Pair | Ratio | WCAG |
|---|---|---|
#1c2024 ink on #ffffff | 16.39 | AAA at all sizes |
#2c2d2f body ink on #ffffff | 14.0+ | AAA at body |
#60646c muted on #ffffff | 5.94 | AA at body |
#0d74ce link (blue-11) on #ffffff | 4.77 | AA at body |
#0090ff brand (blue-9) on #ffffff | 3.26 | UI / large text only — NOT AA body |
#ffffff on #1c2024 ink button | 16.39 | AAA at all sizes |
#80838d faint (gray-10) on #ffffff | 3.78 | UI / large only |
The critical rule: #0090ff blue-9 only clears 3.26 on white, so
it is valid for UI elements, icons and large display text, but body
links and small text must use blue-11 #0d74ce (4.77, AA).
Focus Indicators
2px solid #0090ff focus ring with 2px offset on the white canvas.
Applied to every interactive element — buttons, links, inputs, nav.
Never outline: none without an equivalent replacement.
ARIA Patterns
- Combobox:
role="combobox"witharia-expanded+aria-controlson any search field. - Dialog:
role="dialog"+aria-modal="true"+ focus trap on modals. - Navigation:
navlandmark witharia-label; current page markedaria-current="page".
Keyboard Nav
- Tab order follows visual order strictly.
- Skip-link present in the header, visible on focus.
- Escape closes modals and popovers; arrow keys move within menus.
Screen Reader
- Decorative imagery and code mockups marked
aria-hidden="true". - Diff blocks expose inserted/removed lines via hidden labels, not color alone.
- Icon-only actions carry a visually-hidden text label.
Reduced Motion
Honored — see §8.
10. Responsive Behavior
| Breakpoint | Range | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero h1 46→30px; feature grid 1-up; nav hamburger; section padding 48–64px |
| Tablet | 640–1024px | Hero h1 ~38px; feature grid 2-up; section padding 64px |
| Desktop | 1024–1280px | Full hero h1 46px; feature grid 3-up; section padding 96px |
| Wide | > 1280px | Content caps at 1200px; prose caps at 680px |
Touch Targets
- Primary / secondary buttons: 40px height — padded internally to a comfortable tap target.
- Nav links: 32px visual, padded to a 44px tap zone on mobile.
- Inputs: 40px height; spacing increases on touch viewports.
Collapsing Strategy
- Top nav switches to a hamburger below ~768px.
- Feature grid: 3-up → 2-up → 1-up.
- Code blocks: horizontal scroll preserved (no wrap) so code stays readable.
- Multi-column footer stacks to a single column on mobile.
Image Behavior
Product / research figures use srcset for 1x/2x. Diagrams sit on the
white canvas with a 1px hairline frame; no rounded raster cards.
Container Queries
Used where cards reflow independently of the viewport — feature grids inside a constrained column swap to a stacked layout based on the card’s own width.
11. Content & Voice
Tone
Sober, precise, research-forward. Magic’s voice sounds like a frontier lab describing its work to peers — declarative sentences, no hype, no exclamation marks, no emoji. Copy reads like a note from the team, not a sales pitch. Claims are specific and quantified where possible.
Microcopy Patterns
- Button verbs: “Read the research”, “Get in touch”, “Join us”, “Learn more”. Plain, infinitive, no urgency punctuation.
- Error recipe:
[What failed] — [Why] — [What to do]. Example: “Couldn’t send. Your message was empty. Add a note and try again.” - Success confirmations: terse — “Sent”, “Saved”, “Subscribed”. No exclamation.
- Empty states: describe the mechanism, not the feeling. “No results. Try a different query.”
CTA Verb Conventions
- Primary: “Read the research”, “Get in touch”, “Join us”.
- Secondary: “Learn more”, “View the paper”.
- Avoid: “Sign up now!”, “Get started free”, “Join the revolution”, “Supercharge your…”.
Empty States
Empty and loading states stay minimal — a single line of muted gray-11 text on white, no illustration. The blank space is consistent with the rest of the page rather than dressed up.
12. Dark Mode & Theming
Magic’s site is light-only. The audit found no theme toggle and no
dark companion — the pure-white canvas is the brand. There is no
prefers-color-scheme dark override in production.
If a dark variant were ever derived, it should invert through the same
Radix ramp rather than switching palettes: bg → Radix gray-1 dark
(#111113), text → Radix gray-12 dark (#eeeef0), borders → Radix
gray-4 dark, and the brand blue #0090ff retained (its blue-9 step
holds AA against a dark ground). But this is hypothetical — ship
light-only to match production.
13. Lineage & Influences
Magic sits at the intersection of three traditions: Swiss grotesque
type discipline (Aeonik display, Suisse Intl body — both
neo-grotesque faces), frontier-lab research minimalism (sober,
type-led pages that read like notes rather than pitches), and
engineered color systems (the entire neutral and accent ramp is
Radix Colors — gray 1–12 for neutrals, blue 1–12 for the accent). It
rejects the AI-lab orthodoxy of gradients, glow, dark hero sections
and a big colored CTA. There is no hero button at all; primary action
is ink-on-white, and the lone blue #0090ff is an accent, not a fill.
The deepest signal is restraint. Where most code-tool marketing fills the canvas, Magic empties it — whitespace, two grotesque families held mostly at weight 400, sharp corners, hairline depth, one blue. The Radix foundation means the grays are not improvised: gray-12 ink, gray-11 muted, gray-4 borders are all exact steps on a published ramp, which gives the neutral field its even, engineered calm.
Named influences:
- Aeonik — geometric grotesque display, held at weight 400 across the hero.
- Suisse Intl — Swiss neo-grotesque body, the running-text workhorse.
- Radix Colors — the full neutral (gray) and accent (blue) ramp under the page.
- Stripe Press — paper-white editorial restraint, hairline-only depth.
- Linear — dev-tool grotesque discipline, single cool accent, minimal chrome.
- Anthropic Research — frontier-lab research register, sparse and type-forward.
14. Do’s and Don’ts
Do
- Do anchor the canvas at pure white
#ffffff— no cream, no tint, no gradient. - Do keep ink at
#1c2024(Radix gray-12) — a cool near-black, not pure black. - Do hold Aeonik display at weight 400 even at the 46px hero. The calm voice depends on it.
- Do apply negative tracking on display only (
-0.02emhero →-0.004emh4); body stays neutral. - Do set body in Suisse Intl at 17.5px/400 with a 1.6 line height.
- Do treat
#0090ffblue-9 as an accent — links, focus, highlights — not a hero CTA fill. - Do use blue-11
#0d74cefor body-size links so contrast clears AA (4.77). - Do carry the primary action with ink-on-white
#1c2024since there is no colored hero button. - Do rely on hairline-only depth — 1px
#e8e8ec(gray-4) borders carry every card. - Do keep corners sharp — 0px on edges, 6px buttons, 8px cards.
- Do source neutrals and the accent from the Radix ramp (gray 1–12, blue 1–12).
- Do let whitespace dominate — empty space reads as confidence.
Don’t
- Don’t introduce a second accent color. The single radix blue is the only chroma.
- Don’t use
#0090ffblue-9 for body-size text or small links — it only clears 3.26 on white. - Don’t add a big colored hero CTA. The audit found none; primary action is ink-on-white.
- Don’t set display to bold weights (600/700) at headline scale. Aeonik stays at 400.
- Don’t add drop shadows to cards. Hairlines + white-canvas contrast carry depth.
- Don’t round corners heavily. This is a sharp system — no pill buttons, no soft SaaS cards.
- Don’t tint the canvas. White is the brand; cream or gray-washed backgrounds break it.
- Don’t improvise grays. Use the Radix gray steps so the neutral field stays engineered and even.
- Don’t add gradients, glow, or dark hero bands. The page is flat white throughout.
- Don’t use exclamation marks, emoji, or hype verbs in copy. The register is research-sober.
- Don’t ship a dark mode to match production — the site is light-only.
- Don’t fill the canvas. Resist the urge to decorate; the sparseness is the design.
15. Agent Prompt Guide
Quick Color Reference
Background: #ffffff
Surface: #ffffff
Surface Soft: #fcfcfd
Text: #1c2024
Body Text: #2c2d2f
Muted Text: #60646c
Brand (accent):#0090ff
Brand Strong: #0d74ce (use for body-size links — AA)
Brand Hover: #0586f0
Border: #e8e8ec
Border Strong: #d9d9e0
Danger: #c62a44Example Component Prompts
-
“Create a hero section in the Magic style” — Pure white
#ffffffcanvas, 46px Aeonik h1 at weight 400 with-0.016emtracking, 17.5px Suisse Intl body subhead in#2c2d2f, and an ink#1c2024text or button action — NO colored hero button. Abundant whitespace, sharp edges, no gradient. -
“Design a card in the Magic style” — White
#ffffffbackground (shares the canvas), 1px#e8e8ecborder, 8px radius, 24px padding, no shadow. Heading in Aeonik 20/500, body in Suisse Intl 16/400. Hover: border deepens to#d9d9e0. -
“Build a primary button in the Magic style” — Ink
#1c2024background, white text, 6px radius,10px 18pxpadding, 40px height, Suisse Intl 15/500. Hover:#2c2d2f. No transform, no shadow. -
“Style an inline link in the Magic style” — Text in blue-11
#0d74ce(AA on white). Hover: shift to brand blue#0090ffand reveal an underline. Never use raw blue-9 for body-size link text. -
“Make a research / index list in the Magic style” — Borderless rows separated by 1px
#f0f0f3dividers, Aeonik title at 20/500, muted#60646cmetadata in Suisse Intl 14/400. Hover tints the row#fcfcfd. No card fills, no shadows. -
“Render a code / diff block in the Magic style” — White or
#fcfcfdground, 1px#e8e8ecborder, 8px radius, system mono 13.5/400. Inserted lines tint#ecfdee, removed lines#feeced. Filename header in mono 12/500/0.02em uppercase.
Iteration Guide
- Start with pure white
#ffffff. Never tint the canvas — the white is the brand. - Set type before layout. Aeonik display at weight 400 with negative tracking; Suisse Intl body at 17.5px/400.
- Keep the accent scarce.
#0090ffis an accent only — links, focus, highlights. There is no colored hero button. - For any body-size link or small blue text, switch to blue-11
#0d74ceso contrast clears AA. - Carry the primary action with ink-on-white
#1c2024, not chroma. - Sharpen the corners — 0px edges, 6px buttons, 8px cards. No pills, no soft rounding.
- Use hairline depth — 1px
#e8e8ecborders, no drop shadows on cards. - Add whitespace until it feels almost too empty, then stop. The sparse research register is the goal.
Theme-toggle audit: score=0, signals=[none] — light-only, confirmed against live probe.
Drop magic-dev into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add magic-dev 2 · ship landing page
npx agentkit init --design magic-dev