dark · sans · structured · cool · multi-theme
Nuxt
Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos.
By webdesignhot · nuxt.com
$ npx design-md add nuxt
Learn more about the CLI → Compare to…
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. 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. 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. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. 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. 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. 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. 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. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. 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. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. 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. 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. 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. 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. 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. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. 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. 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. 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. 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. 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. 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. 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. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. 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. 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. 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. 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. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green 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. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. 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. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. 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 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. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. 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. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. 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. 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. 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.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. 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. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. 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. 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. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. 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. 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. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. 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. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. 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. 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 design.md/v1.5
theme: dark
- bg
#020420 - bg-soft
#0a0d2a - bg-deep
#050729 - surface
#10142e - surface-strong
#1a1f42 - text AAA · 20.2
#ffffff - text-strong
#ffffff - text-medium
#dbdfe9 - text-muted
#a0a8b8 - text-soft
#7c8497 - text-faint — · 2.9
#525a6c - brand AAA · 11.1
#00dc82 - brand-hover
#00b86a - brand-deep
#008a4f - brand-soft
#003b22 - brand-bright
#80eeb4 - glow
rgba(0, 220, 130, 0.40) - glow-soft
rgba(0, 220, 130, 0.18) - on-brand
#020420 - link
#00dc82 - link-hover
#80eeb4 - selected-bg
rgba(0, 220, 130, 0.10) - disabled
#525a6c - border — · 1.2
rgba(255, 255, 255, 0.08) - border-strong — · 1.4
rgba(255, 255, 255, 0.15) - border-soft
rgba(255, 255, 255, 0.04) - border-brand
rgba(0, 220, 130, 0.40) - success-bg
rgba(0, 220, 130, 0.12) - success-text
#80eeb4 - warning-bg
rgba(251, 191, 36, 0.12) - warning-text
#fcd34d - warning
#fbbf24 - danger-bg
rgba(239, 68, 68, 0.12) - danger-text
#fca5a5 - info-bg
rgba(96, 165, 250, 0.12) - info-text
#93c5fd
Ship faster than ever.
display-hero "DM Sans" 88px w700 -0.025em
Ship faster than ever.
display "DM Sans" 72px w700 -0.02em
Ship faster than ever.
h1 "DM Sans" 56px w700 -0.02em
Built for teams that ship.
h2 "DM Sans" 44px w700 -0.015em
A complete kit
h3 "DM Sans" 28px w600 -0.01em
The quick brown fox jumps over the lazy dog.
quote-pull "DM Sans" 28px w500
The quick brown fox jumps over the lazy dog.
h4 "DM Sans" 22px w600
The quick brown fox jumps over the lazy dog.
body-large Inter 20px w400
The quick brown fox jumps over the lazy dog.
h5 "DM Sans" 18px w600
The quick brown fox jumps over the lazy dog.
body Inter 16px w400
The quick brown fox jumps over the lazy dog.
body-small Inter 14px w400
npx design-md add linear
code "DM Mono" 14px w400
The quick brown fox jumps over the lazy dog.
eyebrow Inter 13px w500 0.04em
OUR DESIGN SYSTEM
caption Inter 13px w400
OUR DESIGN SYSTEM
caption-tabular "DM Mono" 13px w500
OUR DESIGN SYSTEM
label Inter 12px w500
npx design-md add linear
code-micro "DM Mono" 12px w400
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 48px
- step-10 64px
- step-11 80px
- step-12 96px
- step-13 128px
- step-14 160px
- micro
2px - xs
4px - sm
6px - md
8px - button
8px - lg
12px - xl
16px - card
16px - 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
Nuxt's design language is a deliberate dark-mode reinterpretation of the Vue identity. The brand color — `#00dc82`, a saturated forest-green — comes directly from Vue's `#42b883` lineage but has been pulled cooler and brighter for digital surfaces. The canvas is a deep blue-black at `#020420` (cooler than Astro's cosmos navy, warmer than Linear's true black), and the green appears as both the primary CTA and as a soft 40%-alpha glow behind hero copy. The typography pair — **DM Sans** for display, **Inter** for body — gives the marketing a slightly geometric, Eurostile-flavored register, distinct from the Geist-Inter monoculture of most dev-tool sites. The hex-shaped wordmark glyph is treated as an icon-token, repeated at multiple scales. Where Astro uses violet-to-orange gradients and Svelte uses pure white discipline, Nuxt uses **single-accent green-on-blue-black** — a palette closer to a developer terminal than a marketing page, which suits a framework that sells itself on developer ergonomics.
- Direct lineage — the Nuxt green is a brighter, cooler cut of Vue's `#42b883`
- Dark-canvas dev-tool template; near-black bg with a single brand accent
- Soft brand-tinted halo behind hero copy as a depth strategy
- Dual-theme docs surface polish; light/dark variant feature parity
- DM Sans / Colophon FoundryGeometric humanist DNA reference; the DM Sans + DM Mono pairing gives Nuxt its Eurostile-soft register
- Sister-project visual cousin; dev-tool dark canvas with single-accent green-yellow
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: Nuxt
tagline: Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos.
author: webdesignhot
source_url: https://nuxt.com
spec: design.md/v1.5
quality: curated
featured: true
categories: [dev-tools]
tags: [dark, sans, structured, cool, multi-theme]
preview_swatch: ['#020420', '#00dc82', '#ffffff']
related: [vercel, vite, tailwindcss]
description: 'Nuxt''s site lives on a near-black `#020420` canvas — slightly cooler and bluer than pure black — with the signature `#00dc82` Vue-derived green doing all of the chromatic heavy lifting. Inter and DM Sans handle the type, the wordmark hex glyph anchors the upper-left, and a soft green glow leaks behind hero copy as a brand-tinted halo. Where Vercel runs near-black + Geist + magenta-pink and Astro runs cosmos navy + violet-orange gradients, Nuxt runs deep blue-black + DM Sans/Inter + single-accent green — a palette closer to a developer terminal than a marketing page, which suits a Vue meta-framework that sells itself on developer ergonomics. The brand also ships a polished light variant for documentation surfaces, making Nuxt one of the rare dev-tool brands with a genuinely first-class dual-theme system.'
themes:
default: dark
available: [dark, light]
switch-via: 'data-theme attribute on <html>; persisted in localStorage; respects prefers-color-scheme on first paint'
colors:
dark:
bg: '#020420' # near-black canvas, slight cool-blue tilt
bg-soft: '#0a0d2a' # secondary panel, code blocks
bg-deep: '#050729' # tertiary panel for nested groups
surface: '#10142e' # card lift
surface-strong: '#1a1f42' # hover-lifted card
text: '#ffffff'
text-strong: '#ffffff'
text-medium: '#dbdfe9'
text-muted: '#a0a8b8'
text-soft: '#7c8497'
text-faint: '#525a6c'
brand: '#00dc82' # Nuxt green — identical across themes
brand-hover: '#00b86a'
brand-deep: '#008a4f'
brand-soft: '#003b22'
brand-bright: '#80eeb4'
glow: 'rgba(0, 220, 130, 0.40)'
glow-soft: 'rgba(0, 220, 130, 0.18)'
on-brand: '#020420' # dark text on green button
link: '#00dc82'
link-hover: '#80eeb4'
selected-bg: 'rgba(0, 220, 130, 0.10)'
disabled: '#525a6c'
border: 'rgba(255, 255, 255, 0.08)'
border-strong: 'rgba(255, 255, 255, 0.15)'
border-soft: 'rgba(255, 255, 255, 0.04)'
border-brand: 'rgba(0, 220, 130, 0.40)'
success-bg: 'rgba(0, 220, 130, 0.12)'
success-text: '#80eeb4'
warning-bg: 'rgba(251, 191, 36, 0.12)'
warning-text: '#fcd34d'
warning: '#fbbf24'
danger-bg: 'rgba(239, 68, 68, 0.12)'
danger-text: '#fca5a5'
info-bg: 'rgba(96, 165, 250, 0.12)'
info-text: '#93c5fd'
light:
bg: '#ffffff' # pure white canvas — Nuxt docs light
bg-soft: '#f4f6fb' # secondary panel, code blocks
bg-deep: '#eef1f7' # tertiary panel
surface: '#ffffff' # card surface
surface-strong: '#f8fafc' # hover-lifted card
text: '#020420' # near-black ink, mirrors dark/bg as text
text-strong: '#020420'
text-medium: '#1f2937'
text-muted: '#4b5563'
text-soft: '#6b7280'
text-faint: '#9ca3af'
brand: '#00dc82' # green stays
brand-hover: '#00b86a'
brand-deep: '#008a4f'
brand-soft: 'rgba(0, 220, 130, 0.10)'
brand-bright: '#00dc82'
glow: 'rgba(0, 220, 130, 0.20)' # softer glow on light
glow-soft: 'rgba(0, 220, 130, 0.10)'
on-brand: '#020420'
link: '#008a4f' # deeper green for legibility on white
link-hover: '#00b86a'
selected-bg: 'rgba(0, 220, 130, 0.08)'
disabled: '#9ca3af'
border: 'rgba(2, 4, 32, 0.08)' # 8% near-black hairline
border-strong: 'rgba(2, 4, 32, 0.15)'
border-soft: 'rgba(2, 4, 32, 0.04)'
border-brand: 'rgba(0, 220, 130, 0.40)'
success-bg: 'rgba(0, 220, 130, 0.10)'
success-text: '#008a4f'
warning-bg: 'rgba(251, 191, 36, 0.12)'
warning-text: '#92400e'
warning: '#d97706'
danger-bg: 'rgba(239, 68, 68, 0.10)'
danger-text: '#b91c1c'
info-bg: 'rgba(96, 165, 250, 0.10)'
info-text: '#1e40af'
typography:
display:
family: '"DM Sans", Inter, -apple-system, "system-ui", "Segoe UI", sans-serif'
weights: [500, 600, 700]
opentype-features: ['ss01', 'liga', 'kern']
body:
family: 'Inter, -apple-system, "system-ui", "Segoe UI", sans-serif'
weights: [400, 500, 600, 700]
opentype-features: ['liga', 'kern', 'cv11']
mono:
family: '"DM Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace'
weights: [400, 500]
opentype-features: ['tnum', 'zero']
scale:
display-hero: { size: 88, weight: 700, lineHeight: 1.05, tracking: '-0.025em', family: display, opentype: 'ss01' }
display: { size: 72, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
h1: { size: 56, weight: 700, lineHeight: 1.08, tracking: '-0.02em', family: display }
h2: { size: 44, weight: 700, lineHeight: 1.10, tracking: '-0.015em', family: display }
h3: { size: 28, weight: 600, lineHeight: 1.25, tracking: '-0.01em', family: display }
h4: { size: 22, weight: 600, lineHeight: 1.30, family: display }
h5: { size: 18, weight: 600, lineHeight: 1.40, family: display }
eyebrow: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0.04em', family: body, transform: uppercase }
body-large: { size: 20, weight: 400, lineHeight: 1.6, family: body }
body: { size: 16, weight: 400, lineHeight: 1.6, family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.5, family: body }
caption: { size: 13, weight: 400, lineHeight: 1.4, family: body }
caption-tabular: { size: 13, weight: 500, lineHeight: 1.4, family: mono, opentype: 'tnum' }
label: { size: 12, weight: 500, lineHeight: 1.3, family: body }
code: { size: 14, weight: 400, lineHeight: 1.6, family: mono, opentype: 'tnum zero' }
code-micro: { size: 12, weight: 400, lineHeight: 1.4, family: mono }
quote-pull: { size: 28, weight: 500, lineHeight: 1.3, family: display }
radius:
micro: 2
xs: 4
sm: 6
md: 8
lg: 12
xl: 16
card: 16
button: 8
pill: 9999
spacing:
base: 4
scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 1280
prose-width: 720
site-gutter: 'clamp(24px, 5vw, 64px)'
header-height: 64
grid-columns: 12
section-rhythm: '96-160px'
components:
button-primary:
background: '#00dc82'
text: '#020420'
padding: '12px 22px'
radius: 8
border: 'none'
font: 'Inter 600 / 15px'
hover-bg: '#00b86a'
active-bg: '#008a4f'
use: 'Primary CTA — solid Nuxt-green with dark on-brand text. *Get started, Try Nuxt, Read docs.*'
button-ghost:
background: 'transparent'
text: '#ffffff'
padding: '12px 22px'
radius: 8
border: '1px solid rgba(255, 255, 255, 0.15)'
font: 'Inter 500 / 15px'
hover-bg: 'rgba(255, 255, 255, 0.05)'
use: 'Outlined twin — same shape, hairline border on dark canvas.'
button-glow:
background: 'rgba(0, 220, 130, 0.10)'
text: '#00dc82'
padding: '10px 18px'
radius: 8
border: '1px solid rgba(0, 220, 130, 0.40)'
font: 'Inter 500 / 14px'
hover-bg: 'rgba(0, 220, 130, 0.18)'
use: 'Brand-tinted secondary — green-on-green-glow for accent CTAs.'
button-link:
background: 'transparent'
text: '#00dc82'
padding: '0'
radius: 0
font: 'Inter 500 / 15px'
hover-text: '#80eeb4'
use: 'Inline brand-green action — documentation references, "Read more →".'
card:
background: '#10142e'
border: '1px solid rgba(255, 255, 255, 0.08)'
radius: 16
padding: '28px'
use: 'Capability tile, feature card — tonal-blue lift over canvas, never shadowed.'
card-glow:
background: '#10142e'
border: '1px solid rgba(0, 220, 130, 0.30)'
radius: 16
padding: '28px'
box-shadow: '0 0 80px -20px rgba(0, 220, 130, 0.25)'
use: 'Hero card with subtle green halo bleeding into surrounding negative space.'
code-block:
background: '#0a0d2a'
border: '1px solid rgba(255, 255, 255, 0.08)'
radius: 12
padding: '20px 24px'
font: 'DM Mono 400 / 14px'
use: 'Code surface — slightly lighter than canvas, signals interactivity.'
input:
background: '#0a0d2a'
border: '1px solid rgba(255, 255, 255, 0.15)'
radius: 8
padding: '12px 16px'
font: 'Inter 400 / 15px'
placeholder-color: '#7c8497'
focus-ring: '0 0 0 2px rgba(0, 220, 130, 0.40)'
focus-border: '#00dc82'
use: 'Form fields, search, docs filter — dark surface with green focus ring.'
badge-eyebrow:
background: 'transparent'
text: '#a0a8b8'
padding: '0'
radius: 0
font: 'Inter 500 / 13px / uppercase / 0.04em tracking'
use: 'Section eyebrow — no chrome, just type.'
badge-brand:
background: 'rgba(0, 220, 130, 0.12)'
text: '#80eeb4'
padding: '4px 10px'
radius: 4
font: 'Inter 500 / 12px'
use: 'Subtle green-tinted status pill — version tags, "New" labels.'
hex-glyph:
fill: '#00dc82'
stroke: 'none'
use: 'Six-sided wordmark icon — appears in nav, dividers, decorative spots throughout.'
nav-link:
background: 'transparent'
text: '#a0a8b8'
padding: '8px 12px'
font: 'Inter 500 / 14px'
hover-text: '#ffffff'
active-text: '#00dc82'
use: 'Header nav — muted by default, white on hover, green when active.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-glow: 'cubic-bezier(0.32, 0.72, 0, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 320
duration-page: 480
duration-glow-pulse: 2400
reduced-motion: 'respects prefers-reduced-motion: reduce — glow pulse pauses, transitions become opacity-only, durations halved'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1440
shadows:
none: 'none'
ambient: 'rgba(0, 0, 0, 0.20) 0 1px 3px'
standard: 'rgba(0, 0, 0, 0.30) 0 4px 12px'
elevated: 'rgba(0, 0, 0, 0.40) 0 12px 32px -8px'
glow-soft: '0 0 80px -20px rgba(0, 220, 130, 0.25)'
glow-hero: '0 0 160px -40px rgba(0, 220, 130, 0.45)'
ring: '0 0 0 2px rgba(0, 220, 130, 0.40)'
accessibility:
contrast-text-on-bg: 18.8 # #ffffff on #020420 — AAA at all sizes
contrast-text-on-brand: 11.2 # #020420 on #00dc82 — AAA (high-contrast green button)
contrast-text-muted-on-bg: 8.6 # #a0a8b8 on #020420 — AAA at body
contrast-link-on-bg: 11.4 # #00dc82 on #020420 — AAA at all sizes
contrast-text-soft-on-bg: 5.8 # #7c8497 on #020420 — AA at body
focus-ring: '2px solid rgba(0, 220, 130, 0.40) with 2px offset'
reduced-motion-honored: true
keyboard-nav: 'visible focus on every interactive surface; tab order matches visual flow; glow pulse pauses on prefers-reduced-motion'
prose-line-length: 'capped at 720px (~70 characters) for documentation readability'
contrast-on-glow: 'glow halo applied behind text, not over — never reduces underlying text contrast'
lineage:
summary: |
Nuxt's design language is a deliberate dark-mode reinterpretation
of the Vue identity. The brand color — `#00dc82`, a saturated
forest-green — comes directly from Vue's `#42b883` lineage but
has been pulled cooler and brighter for digital surfaces. The
canvas is a deep blue-black at `#020420` (cooler than Astro's
cosmos navy, warmer than Linear's true black), and the green
appears as both the primary CTA and as a soft 40%-alpha glow
behind hero copy. The typography pair — **DM Sans** for display,
**Inter** for body — gives the marketing a slightly geometric,
Eurostile-flavored register, distinct from the Geist-Inter
monoculture of most dev-tool sites. The hex-shaped wordmark glyph
is treated as an icon-token, repeated at multiple scales. Where
Astro uses violet-to-orange gradients and Svelte uses pure white
discipline, Nuxt uses **single-accent green-on-blue-black** —
a palette closer to a developer terminal than a marketing page,
which suits a framework that sells itself on developer ergonomics.
influences:
- name: Vue.js
role: Direct lineage — the Nuxt green is a brighter, cooler cut of Vue's `#42b883`
url: https://vuejs.org
- name: Vercel
role: Dark-canvas dev-tool template; near-black bg with a single brand accent
url: https://vercel.com
- name: Linear
role: Soft brand-tinted halo behind hero copy as a depth strategy
url: https://linear.app
- name: Tailwind CSS
role: Dual-theme docs surface polish; light/dark variant feature parity
url: https://tailwindcss.com
- name: DM Sans / Colophon Foundry
role: Geometric humanist DNA reference; the DM Sans + DM Mono pairing gives Nuxt its Eurostile-soft register
- name: Vite
role: Sister-project visual cousin; dev-tool dark canvas with single-accent green-yellow
url: https://vitejs.dev
dark-mode: present # default theme; light variant ships for docs surface
colors-light:
bg: '#ffffff' # white canvas for docs surface
bg-soft: '#f6f8fa' # palest-grey panel
bg-deep: '#eef1f5' # tertiary panel
surface: '#ffffff' # cards lift via border, not shadow
surface-strong: '#f6f8fa'
text: '#020420' # near-black text, slight blue tilt
text-strong: '#020420'
text-medium: '#1f2533'
text-muted: '#4a5568'
text-soft: '#6b7280'
brand: '#00b86a' # slightly deeper green for AA contrast on white
brand-hover: '#008a4f'
brand-soft: 'rgba(0, 184, 106, 0.10)'
on-brand: '#ffffff'
link: '#00b86a'
link-hover: '#008a4f'
border: 'rgba(2, 4, 32, 0.10)'
border-strong: 'rgba(2, 4, 32, 0.20)'
border-soft: 'rgba(2, 4, 32, 0.05)'
---
## 1. Visual Theme & Atmosphere
Nuxt's marketing site reads as Vue's identity grown up and moved to a darker neighborhood. The canvas runs to `#020420` — a deep, slightly-blue near-black that's intentionally cooler than Astro's cosmos navy and warmer than Linear's true black. The brand color is the unmistakable `#00dc82` green that traces directly back to Vue's `#42b883`, pulled cooler and brighter for the dark canvas. That green appears as the primary CTA fill, as a soft 40%-alpha halo behind hero copy, and as the accent on the hex-shaped Nuxt glyph that anchors the upper-left of the navigation.
The defining atmospheric move is the **green glow**. Rather than rendering brand identity as a hard-edged accent, Nuxt diffuses Nuxt-green into the surrounding negative space via blurred halos behind hero text and key feature blocks. The glow is `rgba(0, 220, 130, 0.40)` at 40% alpha, blurred 80–160px, sometimes pulsing gently on a 2.4-second cycle. It never hardens into a solid fill, never gets close enough to the brand mark to compete — it just *bleeds* Nuxt-green into the cosmos. The effect is closer to a developer terminal's CRT phosphor than to a marketing illustration.
The type pairing is **DM Sans** for display and **Inter** for body — DM Sans is more geometric than Inter, with rounder counters and a broader x-height, and that geometric quality reads as engineered rather than journalistic. Code surfaces sit on `#0a0d2a` panels using **DM Mono**, completing a typographic family rather than mixing brands. The H1 holds at 56–72px with -0.02em tracking; body at 16px on a 1.6 line; eyebrows at 13px / 0.04em / uppercase Inter for section signals.
Cards are tonal-blue panels at `#10142e` — one step above the canvas — with 8% white hairlines. They're never shadowed; depth comes from value-stepping (`#020420` → `#0a0d2a` → `#10142e` → `#1a1f42`) plus the brand-tinted halo. The four-step ladder is Nuxt's elevation system: each step adds 4–8% lightness without changing hue, building depth via tone alone.
The **hex-shaped Nuxt glyph** echoes through the system as a recurring motif. It appears in the wordmark, in section dividers, in icon-frames, and as a six-sided geometric hint inside small UI moments. The hex is the brand's angular accent against the otherwise soft 8–16px rounding — a deliberate geometric tension that mirrors the Vue-Nuxt relationship (Vue is friendlier; Nuxt is more engineered).
Atmospheric vocabulary that captures the feeling: *cosmos-blue-black, terminal-phosphor, hex-glyph-anchored, tonal-blue-stepped, Vue-green-evolved, glow-haloed-hero, DM-Sans-geometric, single-accent-green, framework-not-app, Nuxt-3-era.* The brand reads as a developer terminal that learned graphic design.
**Key Characteristics**
- Near-black `#020420` canvas — slight cool-blue tilt, *not* pure black, *not* navy
- Single brand color: **Nuxt green `#00dc82`** — Vue-derived, brighter and cooler
- Signature **green glow** halo — 40% alpha bleed behind hero copy
- DM Sans (display) + Inter (body) + DM Mono (code) — unified typographic family
- Hex-shaped wordmark glyph repeats throughout as angular motif
- Tonal-blue elevation ladder: `#020420` → `#0a0d2a` → `#10142e` → `#1a1f42`
- 16px card radius, 8px button radius — modern dev-tool consensus
- 8% white hairlines (`rgba(255, 255, 255, 0.08)`) — every border on dark
- Dark-by-default with **first-class light variant** for docs surface
- Solid green button fill (`#00dc82`) with dark text — high contrast, unmistakable
## 2. Color Palette & Roles
### Primary
- **bg** `#020420` — near-black canvas with a cool-blue tilt; the defining ground. Cooler than Astro, warmer than Linear, never substituted for pure `#000` or pure navy.
- **bg-soft** `#0a0d2a` — secondary panel, code-block ground, input surface.
- **surface** `#10142e` — card lift, one step above the canvas. The dominant card colour.
- **text** `#ffffff` — pure white, full strength. The high contrast against the cool-blue ground reads crisp without harshness.
### Brand & Accent
- **brand** `#00dc82` — Nuxt green, the single accent. Vue-derived (`#42b883` → `#00dc82`), pulled cooler and brighter for digital surfaces.
- **brand-hover** `#00b86a` — pressed / hover green.
- **brand-deep** `#008a4f` — deeper accent for emphasis or active states.
- **brand-soft** `#003b22` — deep tinted background for accent callouts; reads almost black at quick glance, reveals green on closer look.
- **brand-bright** `#80eeb4` — lighter green for highlights, hover-link colour.
- **glow** `rgba(0, 220, 130, 0.40)` — 40% alpha green halo behind hero copy. The signature depth move.
- **glow-soft** `rgba(0, 220, 130, 0.18)` — quieter glow for capability cards.
- **on-brand** `#020420` — dark text on green buttons (high-contrast, AAA).
### Interactive
- **link** `#00dc82` — Nuxt green; underlined inside body copy.
- **link-hover** `#80eeb4` — brighter green on hover (brand-bright).
- **selected-bg** `rgba(0, 220, 130, 0.10)` — nav/selected wash.
- **disabled** `#525a6c` — text-faint doubles as disabled.
### Neutral Scale
- **text-strong** `#ffffff` — pure white, headlines and high-emphasis copy.
- **text-medium** `#dbdfe9` — softer headline variant.
- **text-muted** `#a0a8b8` — secondary copy, nav links, body subordinate.
- **text-soft** `#7c8497` — captions, helper text.
- **text-faint** `#525a6c` — disabled labels, footer microcopy.
### Surface & Borders
- **surface-0 (page)** — `#020420` cosmos canvas.
- **surface-1 (panel)** — `#0a0d2a` secondary panel.
- **surface-2 (card)** — `#10142e` standard card.
- **surface-3 (lifted)** — `#1a1f42` hover-lifted card or modal.
- **border** `rgba(255, 255, 255, 0.08)` — 8% white hairline, the brand's defining border.
- **border-strong** `rgba(255, 255, 255, 0.15)` — emphasized rule, hover deepening.
- **border-soft** `rgba(255, 255, 255, 0.04)` — quietest separation.
- **border-brand** `rgba(0, 220, 130, 0.40)` — rare brand-tinted divider on featured surfaces.
### Shadow Colors
Nuxt's depth on the dark canvas comes primarily from **tonal-blue layering** rather than shadows. Standard cards use no shadow at all — value contrast alone provides the lift. When shadows do appear (modals, popovers), they're deep and saturated (`rgba(0, 0, 0, 0.30–0.40)`) because they need to register on a near-black canvas. The signature elevation is **brand-tinted glow** — `0 0 80px -20px rgba(0, 220, 130, 0.25)` for cards, `0 0 160px -40px rgba(0, 220, 130, 0.45)` for hero halos. Glow is the brand's depth move; box-shadow is the rare overlay-only fallback.
### Semantic
- **success** — bg `rgba(0, 220, 130, 0.12)` (brand-tinted), text `#80eeb4`, border `rgba(0, 220, 130, 0.30)`. Brand green doubles as success — efficient and on-brand.
- **warning** — bg `rgba(251, 191, 36, 0.12)`, text `#fcd34d`, border `rgba(251, 191, 36, 0.30)`.
- **danger** — bg `rgba(239, 68, 68, 0.12)`, text `#fca5a5`, border `rgba(239, 68, 68, 0.30)`.
- **info** — bg `rgba(96, 165, 250, 0.12)`, text `#93c5fd`, border `rgba(96, 165, 250, 0.30)`.
The unusual choice: **success uses brand-green directly** rather than a separate Tailwind green-500. The brand teaches users that green = both Nuxt and OK; that pairing is intentional.
## 3. Typography Rules
### Font Family
- **Display & UI**: `"DM Sans", Inter, -apple-system, "system-ui", "Segoe UI", sans-serif` — DM Sans by Google's Colophon Foundry, weight 600/700. Geometric humanist with rounder counters than Inter.
- **Body**: `Inter, -apple-system, "system-ui", "Segoe UI", sans-serif` — weight 400/500/600 for paragraph copy and UI labels.
- **Mono**: `"DM Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace` — for code blocks, terminal output, version tags. Same family as DM Sans, completing the trio.
- **OpenType features**: `liga` and `kern` always on; `ss01` for stylistic alternate at display sizes; `cv11` (single-storey `a`) in Inter body for cleaner reading; `tnum` and `zero` (slashed zero) in DM Mono.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | DM Sans | 88px | 700 | 1.05 | -0.025em | ss01 liga | Homepage hero ceiling |
| Display | DM Sans | 72px | 700 | 1.05 | -0.02em | ss01 | Section intro at scale |
| H1 | DM Sans | 56px | 700 | 1.08 | -0.02em | liga | Page title |
| H2 | DM Sans | 44px | 700 | 1.10 | -0.015em | liga | Major section |
| H3 | DM Sans | 28px | 600 | 1.25 | -0.01em | — | Sub-section |
| H4 | DM Sans | 22px | 600 | 1.30 | normal | — | Card heading |
| H5 | DM Sans | 18px | 600 | 1.40 | normal | — | Inline emphasis |
| Eyebrow | Inter | 13px | 500 | 1.40 | 0.04em | uppercase | Section pre-label |
| Body Large | Inter | 20px | 400 | 1.60 | normal | cv11 | Lede paragraph |
| Body | Inter | 16px | 400 | 1.60 | normal | cv11 | Default body |
| Body Small | Inter | 14px | 400 | 1.50 | normal | — | Compact copy |
| Caption | Inter | 13px | 400 | 1.40 | normal | — | Image captions |
| Caption Tabular | DM Mono | 13px | 500 | 1.40 | normal | tnum | Stats, version tags |
| Label | Inter | 12px | 500 | 1.30 | normal | — | UI labels |
| Pull Quote | DM Sans | 28px | 500 | 1.30 | normal | — | Testimonial pull-quote |
| Code | DM Mono | 14px | 400 | 1.60 | normal | tnum zero | Inline + block |
| Code Micro | DM Mono | 12px | 400 | 1.40 | normal | — | API endpoint refs |
### Principles
- **DM Sans for display, Inter for body, DM Mono for code.** This trio is non-negotiable; mixing in Geist or JetBrains breaks the geometric register.
- **DM Sans is rounder than Inter.** The slight geometric quality — broader counters, rounder x-height — gives the marketing a *Eurostile-flavored* register that distinguishes Nuxt from the Vercel-Geist monoculture of dev-tool sites.
- **Weight 700 is the headline ceiling.** DM Sans 700 hits 56–72px on hero blocks; H3+ drops to 600. The geometric face needs the weight to assert presence on the dark canvas.
- **Negative tracking scales with size.** -0.025em at 88px, -0.02em at 56–72px, -0.015em at 44px, -0.01em at 28px, normal below.
- **Body line-height 1.6.** Inter on dark needs the extra leading; the cosmos canvas is unforgiving to tight body type.
- **Code keeps the family.** DM Mono pairs visually with DM Sans (same designer/foundry); it doesn't fight the display register the way JetBrains Mono would.
- **Single-storey `a` in body.** `cv11` enabled in Inter body so the alternate single-storey `a` reads cleaner at small sizes.
- **Tabular figures in mono.** `tnum` and `zero` discipline in DM Mono for terminal output and version-tag alignment.
- **No italic in display.** Italics reserved for body emphasis only. The geometric face doesn't italicise gracefully.
## 4. Component Stylings
### Buttons
**Primary (Solid Green)**
- Background: `#00dc82` Nuxt green.
- Text: `#020420` cosmos canvas (high-contrast, AAA).
- Padding: `12px 22px`. Radius: `8px`. Border: none. Font: Inter 600 / 15px.
- Hover: bg → `#00b86a`; transition `200ms ease-standard`.
- Active: bg → `#008a4f` (deeper green press).
- Use: Primary CTA — *Get started, Try Nuxt, Read docs.* The signature solid green button.
**Ghost (Outlined)**
- Background: transparent.
- Text: `#ffffff`. Border: `1px solid rgba(255, 255, 255, 0.15)`. Radius: `8px`. Padding: `12px 22px`. Font: Inter 500 / 15px.
- Hover: bg → `rgba(255, 255, 255, 0.05)`.
- Use: Twin to primary — *View on GitHub, Read announcement, Watch video.*
**Glow (Brand-Tinted)**
- Background: `rgba(0, 220, 130, 0.10)`. Text: `#00dc82`. Border: `1px solid rgba(0, 220, 130, 0.40)`. Radius: `8px`. Padding: `10px 18px`.
- Hover: bg → `rgba(0, 220, 130, 0.18)`.
- Use: Brand-tinted secondary — green-on-green-glow for accent CTAs, "Try the playground".
**Link (Inline Brand Green)**
- Background: transparent. Text: `#00dc82`. Padding: 0. Font: Inter 500 / 15px.
- Hover: text → `#80eeb4`.
- Use: Inline CTAs — *"learn more →", "see the docs"*. The brand green's text home.
### Cards
**Standard Card (Tonal Lift)**
- Background: `#10142e`. Border: `1px solid rgba(255, 255, 255, 0.08)`. Radius: `16px`. Padding: `28px`.
- Shadow: none — value contrast alone provides separation.
- Hover: bg → `#1a1f42`; border → `rgba(255, 255, 255, 0.15)`; transition `200ms`.
- Use: Capability tile, feature card, blog excerpt.
**Glow Card (Hero)**
- Background: `#10142e`. Border: `1px solid rgba(0, 220, 130, 0.30)`. Radius: `16px`. Padding: `28px`.
- Box-shadow: `0 0 80px -20px rgba(0, 220, 130, 0.25)` — soft green halo bleeding into surrounding space.
- Use: Hero feature card, "Why Nuxt" callout — the signature glow-haloed surface.
**Code Block**
- Background: `#0a0d2a` (one step lighter than canvas). Border: `1px solid rgba(255, 255, 255, 0.08)`. Radius: `12px`. Padding: `20px 24px`.
- Font: DM Mono 400 / 14px. Syntax highlighting in muted brand-adjacent palette (green for keywords, soft white for strings, muted blue for numbers).
- Use: Documentation code samples, terminal output.
### Badges, Tags, Pills
**Mono Eyebrow Label** — bg transparent, text `#a0a8b8`, padding 0, font `Inter 500 / 13px / 0.04em / uppercase`. Section pre-label, no chrome.
**Brand-Green Status Pill** — bg `rgba(0, 220, 130, 0.12)`, text `#80eeb4`, radius `4px`, padding `4px 10px`, font `Inter 500 / 12px`. Version tags, "New" labels, "Beta" indicators.
**Hex Glyph** — six-sided SVG mark in `#00dc82`. Appears in nav, dividers, decorative spots throughout. Geometric counter-balance to the otherwise soft 8–16px rounding.
**Semantic Status** — bg from semantic palette (success / warning / danger / info), radius `4px`, padding `4px 10px`. Tinted with the brand's saturation discipline.
### Inputs / Forms
- Background: `#0a0d2a`. Border: `1px solid rgba(255, 255, 255, 0.15)`. Radius: `8px`. Padding: `12px 16px`.
- Font: Inter 400 / 15px. Placeholder: `#7c8497`.
- Focus: `0 0 0 2px rgba(0, 220, 130, 0.40)` ring, border → `#00dc82`. Transition 120ms.
- Error: border → `#fca5a5`, ring → `rgba(239, 68, 68, 0.30)`.
- Helper: caption 13px text-soft below.
### Navigation
- Header height `64px`. Background `rgba(2, 4, 32, 0.80)` with `backdrop-filter: blur(12px)` (transparent over hero, frosted as you scroll).
- Logo: Nuxt wordmark with hex glyph anchored upper-left, glyph in `#00dc82`.
- Nav links: Inter 500 / 14px, colour `#a0a8b8`, padding `8px 12px`. Hover → `#ffffff`; active → `#00dc82`.
- Right-side CTA pair: ghost "GitHub" + solid-green "Get started".
- Mobile: full-screen sheet, links stack at 18px / 500 with hex-glyph divider.
### Optional Components
**Pull Quote** — DM Sans 28px / 500, text-medium, with a 3px Nuxt-green left rule.
**Tooltip** — bg `#10142e`, text `#ffffff`, border `1px solid rgba(255, 255, 255, 0.15)`, radius `6px`, padding `8px 12px`, font `Inter 500 / 13px`.
**Modal** — bg `#0a0d2a`, radius `16px`, shadow `rgba(0, 0, 0, 0.40) 0 24px 64px -16px`, max-width `560px`. Cosmos backdrop overlay at 70% opacity with backdrop-filter blur.
**Toast** — bg `#10142e`, border `1px solid rgba(0, 220, 130, 0.30)`, radius `8px`, padding `12px 20px`, with brand-green left accent for success state.
**Glow Halo (Hero Effect)** — pseudo-element behind hero text: `width: 80%`, `height: 60%`, `background: radial-gradient(rgba(0, 220, 130, 0.40), transparent 70%)`, `filter: blur(80px)`, gentle 2.4-second pulse cycle.
## 5. Layout Principles
### Spacing System
- **Base unit**: 4px.
- **Scale**: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160 — modular, generous at the upper end.
- **Density observation**: Nuxt is *medium-density* — denser than Anthropic's editorial layout but lighter than tightly-packed product UIs. Section padding sits at 96–160px vertical; intra-section spacing uses 16–32px.
### Grid & Container
- **Page max width**: `1280px` — generous, terminal-window proportions.
- **Site gutter**: `clamp(24px, 5vw, 64px)` — comfortable on desktop, accommodating on mobile.
- **Grid**: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 8 columns; supporting sidebars span 4.
- **Hero treatment**: full-bleed cosmos canvas, 56–72px headline anchored centre or left, body confined to a 720px column. Glow halo behind centred headline.
- **Capability rail**: 3-up cards on desktop, 2-up on tablet, 1-up on mobile. Glow card every fourth tile for sectional rhythm.
### Whitespace Philosophy
The whitespace is *cosmos negative space* — Nuxt treats the dark canvas as positive composition territory. Section gutters run **96–160px** between major blocks; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. The cosmos canvas does sectional work without needing dividers; the green glow does emotional punctuation without needing illustration.
### Section Cadence
- Hero (cosmos) → Glow-haloed H1 + lede + dual CTA → Capability rail (3-up tonal-blue cards on cosmos) → Code block showcase (`#0a0d2a` panel with DM Mono) → Glow card (brand-tinted halo) → Quote / testimonial → Footer (cosmos with hex-glyph dividers).
- Glow halos appear once or twice per page — never more, or the chromatic punctuation dilutes.
- Tonal-blue elevation steps create vertical rhythm: canvas → panel → card → lifted card.
- The hex-glyph repeats as section divider — angular geometric counter-balance to the soft 16px card radii.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, slim chip corners |
| XS | 4px | Status pills, inline tags, semantic badges |
| Small (sm) | 6px | Tooltip corners, code-inline pills |
| Comfortable (md) | 8px | **Buttons, inputs, dropdowns** — the dominant interactive radius |
| Relaxed (lg) | 12px | Code blocks, nested panels |
| Featured (xl) | 16px | **Cards** — capability tiles, feature cards, modals |
| Pill | 9999px | Reserved for status chips and tags |
The signature radii are **8px** on buttons / inputs and **16px** on cards. The 16px card corners are slightly softer than Vercel's 12px and notably softer than Linear's 8px — Nuxt sits at the Eurostile-soft end of the dev-tool ladder, matching the rounder DM Sans typography.
The **hex glyph** is the angular counter-balance: the Nuxt wordmark glyph repeats throughout the system as a six-sided geometric mark. Chevrons in carousels, dividers between sections, icon-frames inside capability cards — all carry the hex motif. The angular hex against the soft 16px rounding creates a deliberate geometric tension that mirrors the Vue-Nuxt brand relationship.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — canvas `#020420` | Default page surface, hero |
| 1 | Tonal lift to `#0a0d2a` (panel) | Code blocks, input fields, secondary panels |
| 2 | Tonal lift to `#10142e` + 8% white border | Standard cards — the dominant elevation |
| 3 | Tonal lift to `#1a1f42` + 15% white border | Hover-lifted cards, dropdown menus |
| 4 | `rgba(0, 0, 0, 0.40) 0 12px 32px -8px` | Popover layers, tooltips |
| 5 | `rgba(0, 0, 0, 0.40) 0 24px 64px -16px` | Modals, dialogs |
| Glow | `0 0 80px -20px rgba(0, 220, 130, 0.25)` | Brand-haloed hero cards, signature depth |
| Glow Hero | `0 0 160px -40px rgba(0, 220, 130, 0.45)` | Full hero halo behind H1 |
### Shadow Philosophy
Nuxt's depth is **tonal-blue layered + brand-tinted glow**. The four-step canvas → panel → card → lifted card ladder builds depth via lightness alone, with 8% / 15% white hairlines reinforcing the steps. Box-shadows are reserved for overlay layers (modals, popovers) where the visual stack must be unambiguous. The signature elevation is the **green glow** — brand-tinted radial blur behind hero copy and feature cards. It's never a hard accent, always a soft bleed that diffuses Nuxt-green into the surrounding cosmos. Where Vercel uses gradient meshes and Linear uses uniform tonal stacking, Nuxt uses tonal-stacking *plus* selective brand-tinted glow — the combination is the brand's depth signature.
## 8. Interaction & Motion
### Easing Curves
- `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions.
- `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter, hero reveal.
- `ease-glow`: `cubic-bezier(0.32, 0.72, 0, 1)` — slow-out, fast-settle; used on glow pulse cycles.
### Duration Buckets
- **Fast (120ms)** — colour transitions, focus rings, link hovers.
- **Standard (200ms)** — button hover, card hover, dropdown reveal.
- **Slow (320ms)** — modal enter/exit, page-section fade-in.
- **Page (480ms)** — route transitions, hero reveal sequences.
- **Glow Pulse (2400ms)** — gentle brand halo pulsing cycle, ease-glow.
### Per-Component Micro-States
- **Button hover (solid green)**: bg `#00dc82` → `#00b86a` over 200ms. No lift, no scale.
- **Button hover (ghost)**: bg transparent → `rgba(255, 255, 255, 0.05)`; border stays at 0.15.
- **Card hover**: bg `#10142e` → `#1a1f42`; border → `rgba(255, 255, 255, 0.15)`; transition `200ms`.
- **Glow card hover**: glow intensifies from `0 0 80px -20px rgba(0, 220, 130, 0.25)` to `0 0 100px -20px rgba(0, 220, 130, 0.40)` over 320ms.
- **Link hover**: text `#00dc82` → `#80eeb4` over 120ms; underline thickens 1px → 2px.
- **Input focus**: 2px brand-green ring fades in over 120ms; border `rgba(255, 255, 255, 0.15)` → `#00dc82`.
- **Nav link hover**: colour `#a0a8b8` → `#ffffff` over 120ms.
- **Glow pulse**: hero halo opacity oscillates between 0.32 and 0.45 on a 2.4-second sine cycle. Subtle, ambient — closer to a CRT phosphor's persistence than to a UI animation.
### Page Transitions
Hero text fades in over 480ms with a 16px translate-up; glow halo fades in 320ms after text settles. Below-fold sections use `IntersectionObserver` triggered at 70% viewport, 320ms duration, opacity-only with subtle 12px translate-up. Code-block examples animate in with a typewriter-style character cascade for marketing screenshots (rare; reserved for hero featured code).
### Reduced Motion
`@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. **Glow pulse pauses entirely** (the halo remains at 40% alpha but stops oscillating). Translate animations disabled; scroll-linked reveals snap to final state. The brand respects motion preferences as a first-class a11y concern, especially because the glow pulse is the most visible motion on the site.
## 9. Accessibility & A11y
### Contrast Pairs
- **`#ffffff` text on `#020420` bg**: 18.8:1 — AAA at all sizes (maximum contrast).
- **`#a0a8b8` text-muted on `#020420` bg**: 8.6:1 — AAA at body sizes.
- **`#7c8497` text-soft on `#020420` bg**: 5.8:1 — AA at body sizes.
- **`#020420` text on `#00dc82` brand button**: 11.2:1 — AAA (high-contrast green button).
- **`#00dc82` link on `#020420` bg**: 11.4:1 — AAA at all sizes.
- **`#80eeb4` text on `rgba(0, 220, 130, 0.12)` brand-tinted bg**: 7.4:1 effective — AAA.
- **`#ffffff` text on `#10142e` card**: 14.6:1 — AAA at all sizes.
### Focus Indicators
- Default focus ring: `0 0 0 2px rgba(0, 220, 130, 0.40)` with 2px offset on dark canvas.
- Inputs: ring + border colour shift to `#00dc82`.
- Glow card focus: ring overlays the existing brand glow without conflict (different colour stops).
- All interactive surfaces have visible focus states — no `outline: none` without a replacement.
### ARIA Patterns
- **Navigation**: `<nav aria-label="Main">` with skip-link to main content.
- **Disclosure**: `<button aria-expanded aria-controls>` for collapsible doc-tree sections.
- **Dialog**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Combobox** (search palette): `role="combobox" aria-expanded aria-autocomplete="list"` with `aria-activedescendant` for keyboard arrows.
- **Live regions**: `aria-live="polite"` for form validation messages.
- **Code blocks**: include `<code>` semantic + visible "Copy" button with `aria-label="Copy code"`.
- **Hex glyph**: `aria-hidden="true"` when decorative; full SVG `<title>` when used as the wordmark.
- **Glow halos**: `aria-hidden="true"` — pure decoration, never carries content meaning.
### Keyboard Navigation
- Tab order matches visual flow: skip-link → nav → hero CTA → main content → footer.
- All buttons, links, inputs, code-block copy buttons reachable via Tab.
- Modals trap focus inside until dismissed.
- `Esc` closes modals, dropdowns, search palette.
- Search palette: Cmd/Ctrl+K opens; arrow keys navigate; Enter selects; Esc closes.
### Screen Reader Hints
- Decorative SVGs (hex glyph as ornament, illustration art) marked `aria-hidden="true"`.
- Icon-only buttons (copy code, share, close) have `aria-label`.
- Stat callouts include hidden context: "30,000+ stars on GitHub" reads as full sentence.
- Brand-green glow announced as decorative; never carries semantic meaning.
### Reduced Motion
Honoured via the global media query. Glow pulse pauses; translate animations disabled; durations halved. The brand never requires motion to convey information — motion is decoration, not signal.
### Contrast on Glow
The brand-tinted glow is applied **behind** text via pseudo-element with `z-index: -1`, never **over** text. The glow never reduces underlying text contrast — `#ffffff` on `#020420` always tests at 18.8:1 even when the halo is in frame.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single column, full-bleed sections, hamburger nav |
| Tablet | 640–1024px | 2-column rails, narrower gutters, condensed hero |
| Desktop | 1024–1280px | Full 12-col grid, 720px prose column |
| Wide | 1280–1440px | Site max width hits at 1280px |
| Ultra | > 1440px | Page locks to 1280, gutters expand symmetrically |
### Touch Targets
- Minimum tap target: 44×44px (WCAG AAA).
- Buttons: 44px minimum height on mobile (12px vertical padding × 2 + line-height accommodates).
- Nav link tap area: 44×44px even when visual padding is smaller.
- Hex-glyph icon buttons: 32×32px hit area extended via padding.
### Collapsing Strategy
- **Header**: full nav at ≥1024px; hamburger sheet below.
- **Hero**: 88px headline → 56px → 40px across desktop / tablet / mobile.
- **Capability grid**: 3-up at desktop, 2-up at tablet, 1-up at mobile.
- **Body width**: 720px → fluid 92vw at mobile.
- **Section spacing**: 160px → 96px → 64px across sizes.
- **Glow halo**: scales proportionally with hero text; reduces alpha by 20% at mobile to avoid overwhelming small viewports.
### Image Behavior
- Code-block screenshots use `srcset` with 1x/2x for retina.
- Hero imagery uses `aspect-ratio` to prevent layout shift.
- Lazy-loading on below-fold images; eager on hero.
- SVG illustrations preferred for crisp rendering at any size.
- Hex-glyph SVGs use `currentColor` so they theme correctly across light/dark modes.
### Container Queries
Used inside capability cards to switch layout when card width crosses 360px (icon-left vs. icon-top) and to scale the glow halo proportionally.
## 11. Content & Voice
### Tone
**Friendly-engineered, developer-first, slightly enthusiastic.** Nuxt writes like an open-source maintainer who's excited about Vue 3 — full sentences, technical specificity, occasional warmth, no overt sales-pitch but no false-modesty either. Headlines describe capability ("The intuitive Vue framework"); subheads explain mechanism. The brand sounds like a senior developer who'd happily review your PR.
### Microcopy Patterns
- **Button verbs**: "Get started," "Try Nuxt," "Read the docs," "View on GitHub," "Watch the talk," "Explore modules." Occasionally enthusiastic: "Try the playground". Never "Get instant access!" or "Sign up free →".
- **Error messages**: "We couldn't load the docs. Try refreshing, or [report the issue]." Specific, actionable, no shame, no over-apology.
- **Success confirmations**: "Copied." "Subscribed." Brief, present-tense.
- **Loading states**: "Loading…", "Compiling…", "Generating…" — process-aware, dev-tool-flavoured.
- **CLI / docs voice**: Imperative and direct. "Run `npx nuxi init` to get started." "Add the module to your `nuxt.config.ts`."
### Empty States
What they say: explain the empty state and offer the next step. *"No modules installed yet. Browse the marketplace to add your first."* *"Your search returned no results. Try a broader query."*
What they don't say: "Oops!", "Sorry!", any apologetic exclamation. The dev-tool register is matter-of-fact.
### CTA Verb Conventions
- Primary on hero: "Get started," "Try Nuxt," "Read the docs"
- Secondary: "View on GitHub," "Explore modules," "Read the announcement"
- Footer: "Browse modules," "Join Discord," "Sponsor on GitHub"
The brand uses *enthusiastic-but-restrained* verbs. "Try the playground" is acceptable; "Try Nuxt today!" is not. The voice is community-engineering, never marketing-pitch.
## 12. Dark Mode & Theming
**Dark-by-default with a polished light variant.** Nuxt is one of the rare dev-tool brands with a genuinely first-class dual-theme system. The cosmos `#020420` canvas is the homepage and marketing default; the docs surface respects user OS preference and ships an equally-polished light variant. The light theme isn't an afterthought — it's a complete token swap with adjusted brand saturation for AA contrast on white.
### Light Variant Tokens
When light mode is active, the palette swaps as follows:
- **bg**: `#ffffff` — white canvas for docs surface.
- **bg-soft**: `#f6f8fa` — palest-grey panel.
- **bg-deep**: `#eef1f5` — tertiary panel for nested groups.
- **surface**: `#ffffff` — cards lift via border, not shadow.
- **text**: `#020420` — near-black text with the brand's signature blue tilt.
- **text-muted**: `#4a5568` — secondary copy.
- **brand**: `#00b86a` — slightly deeper green for AA contrast on white (the dark-mode `#00dc82` falls below AA at body sizes on white; `#00b86a` hits 4.7:1).
- **brand-soft**: `rgba(0, 184, 106, 0.10)`.
- **on-brand**: `#ffffff` — white label on green button (4.7:1 AA).
- **link**: `#00b86a` — adjusted for white-canvas readability.
- **border**: `rgba(2, 4, 32, 0.10)` — 10% near-black hairline.
### Theming Discipline
The light variant preserves all brand identity decisions: the **hex-glyph stays angular**, the **brand green retains its identity** (just tuned for contrast), the **typographic family remains DM Sans + Inter + DM Mono**. The only loss in light mode is the **glow halo** — the brand-tinted blur doesn't translate well to a white canvas without becoming muddy, so light-mode pages drop the halo and lean harder on tonal contrast and the green CTA for chromatic punctuation.
If a downstream surface needs a custom theme (e.g. for a Nuxt module's marketing page), the rules: keep the **single-accent green** discipline, keep the **DM Sans / Inter / DM Mono** trio, keep the **hex-glyph motif**, and pick **one canvas** — either cosmos `#020420` or pure `#ffffff`. Mid-tone canvases (greys, off-whites, navy) collapse the brand identity.
## 13. Lineage & Influences
Nuxt's design language is a **deliberate dark-mode reinterpretation of the Vue identity**. The brand color — `#00dc82`, a saturated forest-green — comes directly from Vue's `#42b883` lineage but has been pulled cooler and brighter for digital surfaces. The canvas is a deep blue-black at `#020420` (cooler than Astro's cosmos navy, warmer than Linear's true black), and the green appears as both the primary CTA and as a soft 40%-alpha glow behind hero copy.
The typography pair — **DM Sans** for display, **Inter** for body — gives the marketing a slightly geometric, Eurostile-flavored register, distinct from the Geist-Inter monoculture of most dev-tool sites. The hex-shaped wordmark glyph is treated as an icon-token, repeated at multiple scales. Where Astro uses violet-to-orange gradients and Svelte uses pure white discipline, Nuxt uses **single-accent green-on-blue-black** — a palette closer to a developer terminal than a marketing page, which suits a framework that sells itself on developer ergonomics.
What it inherits: **Vue's brand-green DNA** (cooler/brighter for dark surfaces), **dev-tool dark canvas** discipline (Vercel-Linear lineage), **soft brand-halo depth** (Linear's tinted glow tradition). What it borrows from contemporaries: Vercel's near-black + single-accent template, Linear's tonal-blue elevation ladder, Tailwind's documentation-page polish. What it rejects: gradient meshes (Astro / Mistral), purple-tech accents (early OpenAI), uniform-grayscale dev-tool minimalism (early Svelte), Geist-monoculture typography.
**Named influences:**
- **Vue.js** — Direct lineage — the Nuxt green is a brighter, cooler cut of Vue's `#42b883`. *https://vuejs.org*
- **Vercel** — Dark-canvas dev-tool template; near-black bg with a single brand accent. *https://vercel.com*
- **Linear** — Soft brand-tinted halo behind hero copy as a depth strategy. *https://linear.app*
- **Tailwind CSS** — Dual-theme docs surface polish; light/dark variant feature parity. *https://tailwindcss.com*
- **DM Sans / Colophon Foundry (Google Fonts)** — Geometric humanist DNA reference. The DM Sans + DM Mono pairing gives Nuxt its Eurostile-soft register.
- **Vite** — Sister-project visual cousin; dev-tool dark canvas with single-accent green-yellow.
## 14. Do's and Don'ts
### Do
- **Do** treat the green (`#00dc82`) as the single brand color; pair it only with the deep blue-black canvas, never with a second accent.
- **Do** use the green-glow halo behind hero copy — the 40% alpha bleed is Nuxt's signature depth move and distinguishes it from Vercel.
- **Do** keep the typographic family unified: DM Sans / Inter / DM Mono. Mixing in Geist or JetBrains breaks the geometric register.
- **Do** ship the primary CTA as solid green (`#00dc82` bg, `#020420` text, 8px radius) — high-contrast and unmistakable.
- **Do** anchor the hex-glyph in the upper-left wordmark and repeat it as a six-sided motif throughout (chevrons, dividers, icon-frames).
- **Do** layer depth tonally: `#020420` → `#0a0d2a` → `#10142e` → `#1a1f42`. Each step adds 4–8% lightness without changing hue.
- **Do** ship a polished light variant for docs surfaces — Nuxt is one of the rare dev-tool brands where light mode gets first-class attention.
- **Do** keep all motion under 320ms (except the gentle 2.4-second glow pulse) and respect `prefers-reduced-motion`.
- **Do** mark all decorative SVGs (hex-glyph ornaments, glow halos, illustrations) as `aria-hidden="true"`.
- **Do** lift cards via tonal stepping + 8% white hairline, never via drop shadow.
### Don't
- **Don't** lighten the canvas to pure black or pure navy. The exact `#020420` blue undertone is what separates Nuxt from Linear and Astro.
- **Don't** apply Nuxt-green to large fills. Reserve it for the CTA, the wordmark hex, and the soft halo; full-bleed green flattens the page.
- **Don't** mix in Vue's `#42b883` directly. Nuxt's green is brighter and cooler — using Vue's exact green muddles the brand lineage.
- **Don't** introduce gradients, conic backgrounds, or mesh shaders. The page is flat-tonal-with-glow.
- **Don't** reach for Geist or JetBrains Mono. The DM Sans / Inter / DM Mono trio is the brand's typographic signature.
- **Don't** use weight 700 below H2. The geometric DM Sans face needs the weight only at headline scale; over-using 700 in body breaks the register.
- **Don't** harden the glow into a solid edge. The 40% alpha halo must always blur and bleed; a hard accent collapses the brand depth move.
- **Don't** stack the hex-glyph in tight clusters. The angular motif is a counter-balance — too much hex turns into visual noise.
- **Don't** apply the dark glow to the light variant. Light-mode pages drop the halo and lean on tonal contrast.
- **Don't** ship marketing copy with exclamation marks, urgency CTAs, or emoji. The voice is dev-tool-engineering, not marketing-pitch.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #020420
bg-soft: #0a0d2a
surface: #10142e
text: #ffffff
text-muted: #a0a8b8
brand: #00dc82
brand-hover: #00b86a
glow: rgba(0, 220, 130, 0.40)
on-brand: #020420
border: rgba(255, 255, 255, 0.08)
```
### Example Component Prompts
1. **"Create a Nuxt-style hero — cosmos `#020420` canvas, 72px DM Sans 700 H1 with -0.02em tracking, 20px Inter 400 lede in `#a0a8b8`, dual CTA: solid Nuxt-green primary `#00dc82` / `#020420` text + ghost outlined `rgba(255, 255, 255, 0.15)` border at 8px radius. Behind the H1: blurred radial-gradient halo `rgba(0, 220, 130, 0.40)` with 80px blur, gentle 2.4s pulse. Hex-glyph anchored upper-left."**
2. **"Design a capability card — `#10142e` background (one tonal step above canvas), 16px radius, 1px `rgba(255, 255, 255, 0.08)` border, 28px interior padding. 22px DM Sans 600 heading in white, 16px Inter 400 body in `#a0a8b8`. Hover: bg `#1a1f42`, border `rgba(255, 255, 255, 0.15)`. No drop shadow."**
3. **"Build a glow card — `#10142e` background, 16px radius, 1px `rgba(0, 220, 130, 0.30)` brand-tinted border, 28px padding, plus `box-shadow: 0 0 80px -20px rgba(0, 220, 130, 0.25)` for the signature green halo bleed. Hover intensifies the glow to `0 0 100px -20px rgba(0, 220, 130, 0.40)`."**
4. **"Compose a dark code block — `#0a0d2a` background, 12px radius, 1px `rgba(255, 255, 255, 0.08)` border, 20×24px padding, DM Mono 400 / 14px / 1.6 line-height. Syntax highlighting: keywords `#00dc82`, strings `#dbdfe9`, numbers `#80eeb4`, comments `#525a6c`. Top-right Copy button with `aria-label`."**
5. **"Render the hex-glyph mark — six-sided SVG in `#00dc82`, 24px size, used as wordmark anchor and repeated as section divider. Geometric angular counter-balance to the otherwise soft 16px card radii. `aria-hidden=\"true\"` when decorative; full SVG `<title>` when used as the brand mark."**
6. **"Create the primary nav — 64px header height, `rgba(2, 4, 32, 0.80)` background with `backdrop-filter: blur(12px)`, Nuxt wordmark + hex-glyph in `#00dc82` left-aligned, links 14px Inter 500 in `#a0a8b8` with white hover and `#00dc82` active. Right-aligned ghost 'GitHub' + solid-green 'Get started' at 8px radius."**
### Iteration Guide
1. **Cosmos `#020420`, not pure black.** If the canvas is `#000000`, change it to `#020420`. The cool-blue tilt is Nuxt's identity.
2. **Solid green CTA, dark text.** If the primary button has white text or a different green, change to `#00dc82` background with `#020420` on-brand text. The inverted-contrast green button is the brand signature.
3. **Add the glow.** If the hero has no halo, add a blurred radial gradient `rgba(0, 220, 130, 0.40)` behind the H1 with 80px blur. The signature depth move.
4. **Switch type to DM Sans / Inter.** If headlines are in Geist or Inter alone, change display to DM Sans 700 with -0.02em tracking. The geometric register is the typographic signature.
5. **Tonal-stack cards.** Replace any drop-shadow on cards with tonal-blue background steps (`#10142e` → `#1a1f42` on hover) plus 8% white hairlines.
6. **Drop the second accent.** If you've added a magenta, purple, or yellow, remove it. Nuxt is single-accent green; second colours muddy the brand.
7. **Add the hex.** Anchor the hex-glyph in the upper-left wordmark and repeat it as a section divider or icon-frame motif.
8. **Calm the verbs.** Replace "Get started for free!" with "Get started" or "Try Nuxt"; replace "Sign up today →" with "Read the docs". The voice is dev-tool-engineering, never urgent.
1. Visual Theme & Atmosphere
Nuxt’s marketing site reads as Vue’s identity grown up and moved to a darker neighborhood. The canvas runs to #020420 — a deep, slightly-blue near-black that’s intentionally cooler than Astro’s cosmos navy and warmer than Linear’s true black. The brand color is the unmistakable #00dc82 green that traces directly back to Vue’s #42b883, pulled cooler and brighter for the dark canvas. That green appears as the primary CTA fill, as a soft 40%-alpha halo behind hero copy, and as the accent on the hex-shaped Nuxt glyph that anchors the upper-left of the navigation.
The defining atmospheric move is the green glow. Rather than rendering brand identity as a hard-edged accent, Nuxt diffuses Nuxt-green into the surrounding negative space via blurred halos behind hero text and key feature blocks. The glow is rgba(0, 220, 130, 0.40) at 40% alpha, blurred 80–160px, sometimes pulsing gently on a 2.4-second cycle. It never hardens into a solid fill, never gets close enough to the brand mark to compete — it just bleeds Nuxt-green into the cosmos. The effect is closer to a developer terminal’s CRT phosphor than to a marketing illustration.
The type pairing is DM Sans for display and Inter for body — DM Sans is more geometric than Inter, with rounder counters and a broader x-height, and that geometric quality reads as engineered rather than journalistic. Code surfaces sit on #0a0d2a panels using DM Mono, completing a typographic family rather than mixing brands. The H1 holds at 56–72px with -0.02em tracking; body at 16px on a 1.6 line; eyebrows at 13px / 0.04em / uppercase Inter for section signals.
Cards are tonal-blue panels at #10142e — one step above the canvas — with 8% white hairlines. They’re never shadowed; depth comes from value-stepping (#020420 → #0a0d2a → #10142e → #1a1f42) plus the brand-tinted halo. The four-step ladder is Nuxt’s elevation system: each step adds 4–8% lightness without changing hue, building depth via tone alone.
The hex-shaped Nuxt glyph echoes through the system as a recurring motif. It appears in the wordmark, in section dividers, in icon-frames, and as a six-sided geometric hint inside small UI moments. The hex is the brand’s angular accent against the otherwise soft 8–16px rounding — a deliberate geometric tension that mirrors the Vue-Nuxt relationship (Vue is friendlier; Nuxt is more engineered).
Atmospheric vocabulary that captures the feeling: cosmos-blue-black, terminal-phosphor, hex-glyph-anchored, tonal-blue-stepped, Vue-green-evolved, glow-haloed-hero, DM-Sans-geometric, single-accent-green, framework-not-app, Nuxt-3-era. The brand reads as a developer terminal that learned graphic design.
Key Characteristics
- Near-black
#020420canvas — slight cool-blue tilt, not pure black, not navy - Single brand color: Nuxt green
#00dc82— Vue-derived, brighter and cooler - Signature green glow halo — 40% alpha bleed behind hero copy
- DM Sans (display) + Inter (body) + DM Mono (code) — unified typographic family
- Hex-shaped wordmark glyph repeats throughout as angular motif
- Tonal-blue elevation ladder:
#020420→#0a0d2a→#10142e→#1a1f42 - 16px card radius, 8px button radius — modern dev-tool consensus
- 8% white hairlines (
rgba(255, 255, 255, 0.08)) — every border on dark - Dark-by-default with first-class light variant for docs surface
- Solid green button fill (
#00dc82) with dark text — high contrast, unmistakable
2. Color Palette & Roles
Primary
- bg
#020420— near-black canvas with a cool-blue tilt; the defining ground. Cooler than Astro, warmer than Linear, never substituted for pure#000or pure navy. - bg-soft
#0a0d2a— secondary panel, code-block ground, input surface. - surface
#10142e— card lift, one step above the canvas. The dominant card colour. - text
#ffffff— pure white, full strength. The high contrast against the cool-blue ground reads crisp without harshness.
Brand & Accent
- brand
#00dc82— Nuxt green, the single accent. Vue-derived (#42b883→#00dc82), pulled cooler and brighter for digital surfaces. - brand-hover
#00b86a— pressed / hover green. - brand-deep
#008a4f— deeper accent for emphasis or active states. - brand-soft
#003b22— deep tinted background for accent callouts; reads almost black at quick glance, reveals green on closer look. - brand-bright
#80eeb4— lighter green for highlights, hover-link colour. - glow
rgba(0, 220, 130, 0.40)— 40% alpha green halo behind hero copy. The signature depth move. - glow-soft
rgba(0, 220, 130, 0.18)— quieter glow for capability cards. - on-brand
#020420— dark text on green buttons (high-contrast, AAA).
Interactive
- link
#00dc82— Nuxt green; underlined inside body copy. - link-hover
#80eeb4— brighter green on hover (brand-bright). - selected-bg
rgba(0, 220, 130, 0.10)— nav/selected wash. - disabled
#525a6c— text-faint doubles as disabled.
Neutral Scale
- text-strong
#ffffff— pure white, headlines and high-emphasis copy. - text-medium
#dbdfe9— softer headline variant. - text-muted
#a0a8b8— secondary copy, nav links, body subordinate. - text-soft
#7c8497— captions, helper text. - text-faint
#525a6c— disabled labels, footer microcopy.
Surface & Borders
- surface-0 (page) —
#020420cosmos canvas. - surface-1 (panel) —
#0a0d2asecondary panel. - surface-2 (card) —
#10142estandard card. - surface-3 (lifted) —
#1a1f42hover-lifted card or modal. - border
rgba(255, 255, 255, 0.08)— 8% white hairline, the brand’s defining border. - border-strong
rgba(255, 255, 255, 0.15)— emphasized rule, hover deepening. - border-soft
rgba(255, 255, 255, 0.04)— quietest separation. - border-brand
rgba(0, 220, 130, 0.40)— rare brand-tinted divider on featured surfaces.
Shadow Colors
Nuxt’s depth on the dark canvas comes primarily from tonal-blue layering rather than shadows. Standard cards use no shadow at all — value contrast alone provides the lift. When shadows do appear (modals, popovers), they’re deep and saturated (rgba(0, 0, 0, 0.30–0.40)) because they need to register on a near-black canvas. The signature elevation is brand-tinted glow — 0 0 80px -20px rgba(0, 220, 130, 0.25) for cards, 0 0 160px -40px rgba(0, 220, 130, 0.45) for hero halos. Glow is the brand’s depth move; box-shadow is the rare overlay-only fallback.
Semantic
- success — bg
rgba(0, 220, 130, 0.12)(brand-tinted), text#80eeb4, borderrgba(0, 220, 130, 0.30). Brand green doubles as success — efficient and on-brand. - warning — bg
rgba(251, 191, 36, 0.12), text#fcd34d, borderrgba(251, 191, 36, 0.30). - danger — bg
rgba(239, 68, 68, 0.12), text#fca5a5, borderrgba(239, 68, 68, 0.30). - info — bg
rgba(96, 165, 250, 0.12), text#93c5fd, borderrgba(96, 165, 250, 0.30).
The unusual choice: success uses brand-green directly rather than a separate Tailwind green-500. The brand teaches users that green = both Nuxt and OK; that pairing is intentional.
3. Typography Rules
Font Family
- Display & UI:
"DM Sans", Inter, -apple-system, "system-ui", "Segoe UI", sans-serif— DM Sans by Google’s Colophon Foundry, weight 600/700. Geometric humanist with rounder counters than Inter. - Body:
Inter, -apple-system, "system-ui", "Segoe UI", sans-serif— weight 400/500/600 for paragraph copy and UI labels. - Mono:
"DM Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace— for code blocks, terminal output, version tags. Same family as DM Sans, completing the trio. - OpenType features:
ligaandkernalways on;ss01for stylistic alternate at display sizes;cv11(single-storeya) in Inter body for cleaner reading;tnumandzero(slashed zero) in DM Mono.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | DM Sans | 88px | 700 | 1.05 | -0.025em | ss01 liga | Homepage hero ceiling |
| Display | DM Sans | 72px | 700 | 1.05 | -0.02em | ss01 | Section intro at scale |
| H1 | DM Sans | 56px | 700 | 1.08 | -0.02em | liga | Page title |
| H2 | DM Sans | 44px | 700 | 1.10 | -0.015em | liga | Major section |
| H3 | DM Sans | 28px | 600 | 1.25 | -0.01em | — | Sub-section |
| H4 | DM Sans | 22px | 600 | 1.30 | normal | — | Card heading |
| H5 | DM Sans | 18px | 600 | 1.40 | normal | — | Inline emphasis |
| Eyebrow | Inter | 13px | 500 | 1.40 | 0.04em | uppercase | Section pre-label |
| Body Large | Inter | 20px | 400 | 1.60 | normal | cv11 | Lede paragraph |
| Body | Inter | 16px | 400 | 1.60 | normal | cv11 | Default body |
| Body Small | Inter | 14px | 400 | 1.50 | normal | — | Compact copy |
| Caption | Inter | 13px | 400 | 1.40 | normal | — | Image captions |
| Caption Tabular | DM Mono | 13px | 500 | 1.40 | normal | tnum | Stats, version tags |
| Label | Inter | 12px | 500 | 1.30 | normal | — | UI labels |
| Pull Quote | DM Sans | 28px | 500 | 1.30 | normal | — | Testimonial pull-quote |
| Code | DM Mono | 14px | 400 | 1.60 | normal | tnum zero | Inline + block |
| Code Micro | DM Mono | 12px | 400 | 1.40 | normal | — | API endpoint refs |
Principles
- DM Sans for display, Inter for body, DM Mono for code. This trio is non-negotiable; mixing in Geist or JetBrains breaks the geometric register.
- DM Sans is rounder than Inter. The slight geometric quality — broader counters, rounder x-height — gives the marketing a Eurostile-flavored register that distinguishes Nuxt from the Vercel-Geist monoculture of dev-tool sites.
- Weight 700 is the headline ceiling. DM Sans 700 hits 56–72px on hero blocks; H3+ drops to 600. The geometric face needs the weight to assert presence on the dark canvas.
- Negative tracking scales with size. -0.025em at 88px, -0.02em at 56–72px, -0.015em at 44px, -0.01em at 28px, normal below.
- Body line-height 1.6. Inter on dark needs the extra leading; the cosmos canvas is unforgiving to tight body type.
- Code keeps the family. DM Mono pairs visually with DM Sans (same designer/foundry); it doesn’t fight the display register the way JetBrains Mono would.
- Single-storey
ain body.cv11enabled in Inter body so the alternate single-storeyareads cleaner at small sizes. - Tabular figures in mono.
tnumandzerodiscipline in DM Mono for terminal output and version-tag alignment. - No italic in display. Italics reserved for body emphasis only. The geometric face doesn’t italicise gracefully.
4. Component Stylings
Buttons
Primary (Solid Green)
- Background:
#00dc82Nuxt green. - Text:
#020420cosmos canvas (high-contrast, AAA). - Padding:
12px 22px. Radius:8px. Border: none. Font: Inter 600 / 15px. - Hover: bg →
#00b86a; transition200ms ease-standard. - Active: bg →
#008a4f(deeper green press). - Use: Primary CTA — Get started, Try Nuxt, Read docs. The signature solid green button.
Ghost (Outlined)
- Background: transparent.
- Text:
#ffffff. Border:1px solid rgba(255, 255, 255, 0.15). Radius:8px. Padding:12px 22px. Font: Inter 500 / 15px. - Hover: bg →
rgba(255, 255, 255, 0.05). - Use: Twin to primary — View on GitHub, Read announcement, Watch video.
Glow (Brand-Tinted)
- Background:
rgba(0, 220, 130, 0.10). Text:#00dc82. Border:1px solid rgba(0, 220, 130, 0.40). Radius:8px. Padding:10px 18px. - Hover: bg →
rgba(0, 220, 130, 0.18). - Use: Brand-tinted secondary — green-on-green-glow for accent CTAs, “Try the playground”.
Link (Inline Brand Green)
- Background: transparent. Text:
#00dc82. Padding: 0. Font: Inter 500 / 15px. - Hover: text →
#80eeb4. - Use: Inline CTAs — “learn more →”, “see the docs”. The brand green’s text home.
Cards
Standard Card (Tonal Lift)
- Background:
#10142e. Border:1px solid rgba(255, 255, 255, 0.08). Radius:16px. Padding:28px. - Shadow: none — value contrast alone provides separation.
- Hover: bg →
#1a1f42; border →rgba(255, 255, 255, 0.15); transition200ms. - Use: Capability tile, feature card, blog excerpt.
Glow Card (Hero)
- Background:
#10142e. Border:1px solid rgba(0, 220, 130, 0.30). Radius:16px. Padding:28px. - Box-shadow:
0 0 80px -20px rgba(0, 220, 130, 0.25)— soft green halo bleeding into surrounding space. - Use: Hero feature card, “Why Nuxt” callout — the signature glow-haloed surface.
Code Block
- Background:
#0a0d2a(one step lighter than canvas). Border:1px solid rgba(255, 255, 255, 0.08). Radius:12px. Padding:20px 24px. - Font: DM Mono 400 / 14px. Syntax highlighting in muted brand-adjacent palette (green for keywords, soft white for strings, muted blue for numbers).
- Use: Documentation code samples, terminal output.
Badges, Tags, Pills
Mono Eyebrow Label — bg transparent, text #a0a8b8, padding 0, font Inter 500 / 13px / 0.04em / uppercase. Section pre-label, no chrome.
Brand-Green Status Pill — bg rgba(0, 220, 130, 0.12), text #80eeb4, radius 4px, padding 4px 10px, font Inter 500 / 12px. Version tags, “New” labels, “Beta” indicators.
Hex Glyph — six-sided SVG mark in #00dc82. Appears in nav, dividers, decorative spots throughout. Geometric counter-balance to the otherwise soft 8–16px rounding.
Semantic Status — bg from semantic palette (success / warning / danger / info), radius 4px, padding 4px 10px. Tinted with the brand’s saturation discipline.
Inputs / Forms
- Background:
#0a0d2a. Border:1px solid rgba(255, 255, 255, 0.15). Radius:8px. Padding:12px 16px. - Font: Inter 400 / 15px. Placeholder:
#7c8497. - Focus:
0 0 0 2px rgba(0, 220, 130, 0.40)ring, border →#00dc82. Transition 120ms. - Error: border →
#fca5a5, ring →rgba(239, 68, 68, 0.30). - Helper: caption 13px text-soft below.
Navigation
- Header height
64px. Backgroundrgba(2, 4, 32, 0.80)withbackdrop-filter: blur(12px)(transparent over hero, frosted as you scroll). - Logo: Nuxt wordmark with hex glyph anchored upper-left, glyph in
#00dc82. - Nav links: Inter 500 / 14px, colour
#a0a8b8, padding8px 12px. Hover →#ffffff; active →#00dc82. - Right-side CTA pair: ghost “GitHub” + solid-green “Get started”.
- Mobile: full-screen sheet, links stack at 18px / 500 with hex-glyph divider.
Optional Components
Pull Quote — DM Sans 28px / 500, text-medium, with a 3px Nuxt-green left rule.
Tooltip — bg #10142e, text #ffffff, border 1px solid rgba(255, 255, 255, 0.15), radius 6px, padding 8px 12px, font Inter 500 / 13px.
Modal — bg #0a0d2a, radius 16px, shadow rgba(0, 0, 0, 0.40) 0 24px 64px -16px, max-width 560px. Cosmos backdrop overlay at 70% opacity with backdrop-filter blur.
Toast — bg #10142e, border 1px solid rgba(0, 220, 130, 0.30), radius 8px, padding 12px 20px, with brand-green left accent for success state.
Glow Halo (Hero Effect) — pseudo-element behind hero text: width: 80%, height: 60%, background: radial-gradient(rgba(0, 220, 130, 0.40), transparent 70%), filter: blur(80px), gentle 2.4-second pulse cycle.
5. Layout Principles
Spacing System
- Base unit: 4px.
- Scale: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160 — modular, generous at the upper end.
- Density observation: Nuxt is medium-density — denser than Anthropic’s editorial layout but lighter than tightly-packed product UIs. Section padding sits at 96–160px vertical; intra-section spacing uses 16–32px.
Grid & Container
- Page max width:
1280px— generous, terminal-window proportions. - Site gutter:
clamp(24px, 5vw, 64px)— comfortable on desktop, accommodating on mobile. - Grid: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 8 columns; supporting sidebars span 4.
- Hero treatment: full-bleed cosmos canvas, 56–72px headline anchored centre or left, body confined to a 720px column. Glow halo behind centred headline.
- Capability rail: 3-up cards on desktop, 2-up on tablet, 1-up on mobile. Glow card every fourth tile for sectional rhythm.
Whitespace Philosophy
The whitespace is cosmos negative space — Nuxt treats the dark canvas as positive composition territory. Section gutters run 96–160px between major blocks; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. The cosmos canvas does sectional work without needing dividers; the green glow does emotional punctuation without needing illustration.
Section Cadence
- Hero (cosmos) → Glow-haloed H1 + lede + dual CTA → Capability rail (3-up tonal-blue cards on cosmos) → Code block showcase (
#0a0d2apanel with DM Mono) → Glow card (brand-tinted halo) → Quote / testimonial → Footer (cosmos with hex-glyph dividers). - Glow halos appear once or twice per page — never more, or the chromatic punctuation dilutes.
- Tonal-blue elevation steps create vertical rhythm: canvas → panel → card → lifted card.
- The hex-glyph repeats as section divider — angular geometric counter-balance to the soft 16px card radii.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, slim chip corners |
| XS | 4px | Status pills, inline tags, semantic badges |
| Small (sm) | 6px | Tooltip corners, code-inline pills |
| Comfortable (md) | 8px | Buttons, inputs, dropdowns — the dominant interactive radius |
| Relaxed (lg) | 12px | Code blocks, nested panels |
| Featured (xl) | 16px | Cards — capability tiles, feature cards, modals |
| Pill | 9999px | Reserved for status chips and tags |
The signature radii are 8px on buttons / inputs and 16px on cards. The 16px card corners are slightly softer than Vercel’s 12px and notably softer than Linear’s 8px — Nuxt sits at the Eurostile-soft end of the dev-tool ladder, matching the rounder DM Sans typography.
The hex glyph is the angular counter-balance: the Nuxt wordmark glyph repeats throughout the system as a six-sided geometric mark. Chevrons in carousels, dividers between sections, icon-frames inside capability cards — all carry the hex motif. The angular hex against the soft 16px rounding creates a deliberate geometric tension that mirrors the Vue-Nuxt brand relationship.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — canvas #020420 | Default page surface, hero |
| 1 | Tonal lift to #0a0d2a (panel) | Code blocks, input fields, secondary panels |
| 2 | Tonal lift to #10142e + 8% white border | Standard cards — the dominant elevation |
| 3 | Tonal lift to #1a1f42 + 15% white border | Hover-lifted cards, dropdown menus |
| 4 | rgba(0, 0, 0, 0.40) 0 12px 32px -8px | Popover layers, tooltips |
| 5 | rgba(0, 0, 0, 0.40) 0 24px 64px -16px | Modals, dialogs |
| Glow | 0 0 80px -20px rgba(0, 220, 130, 0.25) | Brand-haloed hero cards, signature depth |
| Glow Hero | 0 0 160px -40px rgba(0, 220, 130, 0.45) | Full hero halo behind H1 |
Shadow Philosophy
Nuxt’s depth is tonal-blue layered + brand-tinted glow. The four-step canvas → panel → card → lifted card ladder builds depth via lightness alone, with 8% / 15% white hairlines reinforcing the steps. Box-shadows are reserved for overlay layers (modals, popovers) where the visual stack must be unambiguous. The signature elevation is the green glow — brand-tinted radial blur behind hero copy and feature cards. It’s never a hard accent, always a soft bleed that diffuses Nuxt-green into the surrounding cosmos. Where Vercel uses gradient meshes and Linear uses uniform tonal stacking, Nuxt uses tonal-stacking plus selective brand-tinted glow — the combination is the brand’s depth signature.
8. Interaction & Motion
Easing Curves
ease-standard:cubic-bezier(0.4, 0, 0.2, 1)— Material-style; default for hover, focus, colour transitions.ease-emphasized:cubic-bezier(0.2, 0, 0, 1)— punchier exit; modal enter, hero reveal.ease-glow:cubic-bezier(0.32, 0.72, 0, 1)— slow-out, fast-settle; used on glow pulse cycles.
Duration Buckets
- Fast (120ms) — colour transitions, focus rings, link hovers.
- Standard (200ms) — button hover, card hover, dropdown reveal.
- Slow (320ms) — modal enter/exit, page-section fade-in.
- Page (480ms) — route transitions, hero reveal sequences.
- Glow Pulse (2400ms) — gentle brand halo pulsing cycle, ease-glow.
Per-Component Micro-States
- Button hover (solid green): bg
#00dc82→#00b86aover 200ms. No lift, no scale. - Button hover (ghost): bg transparent →
rgba(255, 255, 255, 0.05); border stays at 0.15. - Card hover: bg
#10142e→#1a1f42; border →rgba(255, 255, 255, 0.15); transition200ms. - Glow card hover: glow intensifies from
0 0 80px -20px rgba(0, 220, 130, 0.25)to0 0 100px -20px rgba(0, 220, 130, 0.40)over 320ms. - Link hover: text
#00dc82→#80eeb4over 120ms; underline thickens 1px → 2px. - Input focus: 2px brand-green ring fades in over 120ms; border
rgba(255, 255, 255, 0.15)→#00dc82. - Nav link hover: colour
#a0a8b8→#ffffffover 120ms. - Glow pulse: hero halo opacity oscillates between 0.32 and 0.45 on a 2.4-second sine cycle. Subtle, ambient — closer to a CRT phosphor’s persistence than to a UI animation.
Page Transitions
Hero text fades in over 480ms with a 16px translate-up; glow halo fades in 320ms after text settles. Below-fold sections use IntersectionObserver triggered at 70% viewport, 320ms duration, opacity-only with subtle 12px translate-up. Code-block examples animate in with a typewriter-style character cascade for marketing screenshots (rare; reserved for hero featured code).
Reduced Motion
@media (prefers-reduced-motion: reduce) — all transitions become opacity-only, durations halved. Glow pulse pauses entirely (the halo remains at 40% alpha but stops oscillating). Translate animations disabled; scroll-linked reveals snap to final state. The brand respects motion preferences as a first-class a11y concern, especially because the glow pulse is the most visible motion on the site.
9. Accessibility & A11y
Contrast Pairs
#fffffftext on#020420bg: 18.8:1 — AAA at all sizes (maximum contrast).#a0a8b8text-muted on#020420bg: 8.6:1 — AAA at body sizes.#7c8497text-soft on#020420bg: 5.8:1 — AA at body sizes.#020420text on#00dc82brand button: 11.2:1 — AAA (high-contrast green button).#00dc82link on#020420bg: 11.4:1 — AAA at all sizes.#80eeb4text onrgba(0, 220, 130, 0.12)brand-tinted bg: 7.4:1 effective — AAA.#fffffftext on#10142ecard: 14.6:1 — AAA at all sizes.
Focus Indicators
- Default focus ring:
0 0 0 2px rgba(0, 220, 130, 0.40)with 2px offset on dark canvas. - Inputs: ring + border colour shift to
#00dc82. - Glow card focus: ring overlays the existing brand glow without conflict (different colour stops).
- All interactive surfaces have visible focus states — no
outline: nonewithout a replacement.
ARIA Patterns
- Navigation:
<nav aria-label="Main">with skip-link to main content. - Disclosure:
<button aria-expanded aria-controls>for collapsible doc-tree sections. - Dialog:
role="dialog" aria-modal="true" aria-labelledbywith focus trap and Esc-to-close. - Combobox (search palette):
role="combobox" aria-expanded aria-autocomplete="list"witharia-activedescendantfor keyboard arrows. - Live regions:
aria-live="polite"for form validation messages. - Code blocks: include
<code>semantic + visible “Copy” button witharia-label="Copy code". - Hex glyph:
aria-hidden="true"when decorative; full SVG<title>when used as the wordmark. - Glow halos:
aria-hidden="true"— pure decoration, never carries content meaning.
Keyboard Navigation
- Tab order matches visual flow: skip-link → nav → hero CTA → main content → footer.
- All buttons, links, inputs, code-block copy buttons reachable via Tab.
- Modals trap focus inside until dismissed.
Esccloses modals, dropdowns, search palette.- Search palette: Cmd/Ctrl+K opens; arrow keys navigate; Enter selects; Esc closes.
Screen Reader Hints
- Decorative SVGs (hex glyph as ornament, illustration art) marked
aria-hidden="true". - Icon-only buttons (copy code, share, close) have
aria-label. - Stat callouts include hidden context: “30,000+ stars on GitHub” reads as full sentence.
- Brand-green glow announced as decorative; never carries semantic meaning.
Reduced Motion
Honoured via the global media query. Glow pulse pauses; translate animations disabled; durations halved. The brand never requires motion to convey information — motion is decoration, not signal.
Contrast on Glow
The brand-tinted glow is applied behind text via pseudo-element with z-index: -1, never over text. The glow never reduces underlying text contrast — #ffffff on #020420 always tests at 18.8:1 even when the halo is in frame.
10. Responsive Behavior
Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single column, full-bleed sections, hamburger nav |
| Tablet | 640–1024px | 2-column rails, narrower gutters, condensed hero |
| Desktop | 1024–1280px | Full 12-col grid, 720px prose column |
| Wide | 1280–1440px | Site max width hits at 1280px |
| Ultra | > 1440px | Page locks to 1280, gutters expand symmetrically |
Touch Targets
- Minimum tap target: 44×44px (WCAG AAA).
- Buttons: 44px minimum height on mobile (12px vertical padding × 2 + line-height accommodates).
- Nav link tap area: 44×44px even when visual padding is smaller.
- Hex-glyph icon buttons: 32×32px hit area extended via padding.
Collapsing Strategy
- Header: full nav at ≥1024px; hamburger sheet below.
- Hero: 88px headline → 56px → 40px across desktop / tablet / mobile.
- Capability grid: 3-up at desktop, 2-up at tablet, 1-up at mobile.
- Body width: 720px → fluid 92vw at mobile.
- Section spacing: 160px → 96px → 64px across sizes.
- Glow halo: scales proportionally with hero text; reduces alpha by 20% at mobile to avoid overwhelming small viewports.
Image Behavior
- Code-block screenshots use
srcsetwith 1x/2x for retina. - Hero imagery uses
aspect-ratioto prevent layout shift. - Lazy-loading on below-fold images; eager on hero.
- SVG illustrations preferred for crisp rendering at any size.
- Hex-glyph SVGs use
currentColorso they theme correctly across light/dark modes.
Container Queries
Used inside capability cards to switch layout when card width crosses 360px (icon-left vs. icon-top) and to scale the glow halo proportionally.
11. Content & Voice
Tone
Friendly-engineered, developer-first, slightly enthusiastic. Nuxt writes like an open-source maintainer who’s excited about Vue 3 — full sentences, technical specificity, occasional warmth, no overt sales-pitch but no false-modesty either. Headlines describe capability (“The intuitive Vue framework”); subheads explain mechanism. The brand sounds like a senior developer who’d happily review your PR.
Microcopy Patterns
- Button verbs: “Get started,” “Try Nuxt,” “Read the docs,” “View on GitHub,” “Watch the talk,” “Explore modules.” Occasionally enthusiastic: “Try the playground”. Never “Get instant access!” or “Sign up free →”.
- Error messages: “We couldn’t load the docs. Try refreshing, or [report the issue].” Specific, actionable, no shame, no over-apology.
- Success confirmations: “Copied.” “Subscribed.” Brief, present-tense.
- Loading states: “Loading…”, “Compiling…”, “Generating…” — process-aware, dev-tool-flavoured.
- CLI / docs voice: Imperative and direct. “Run
npx nuxi initto get started.” “Add the module to yournuxt.config.ts.”
Empty States
What they say: explain the empty state and offer the next step. “No modules installed yet. Browse the marketplace to add your first.” “Your search returned no results. Try a broader query.” What they don’t say: “Oops!”, “Sorry!”, any apologetic exclamation. The dev-tool register is matter-of-fact.
CTA Verb Conventions
- Primary on hero: “Get started,” “Try Nuxt,” “Read the docs”
- Secondary: “View on GitHub,” “Explore modules,” “Read the announcement”
- Footer: “Browse modules,” “Join Discord,” “Sponsor on GitHub”
The brand uses enthusiastic-but-restrained verbs. “Try the playground” is acceptable; “Try Nuxt today!” is not. The voice is community-engineering, never marketing-pitch.
12. Dark Mode & Theming
Dark-by-default with a polished light variant. Nuxt is one of the rare dev-tool brands with a genuinely first-class dual-theme system. The cosmos #020420 canvas is the homepage and marketing default; the docs surface respects user OS preference and ships an equally-polished light variant. The light theme isn’t an afterthought — it’s a complete token swap with adjusted brand saturation for AA contrast on white.
Light Variant Tokens
When light mode is active, the palette swaps as follows:
- bg:
#ffffff— white canvas for docs surface. - bg-soft:
#f6f8fa— palest-grey panel. - bg-deep:
#eef1f5— tertiary panel for nested groups. - surface:
#ffffff— cards lift via border, not shadow. - text:
#020420— near-black text with the brand’s signature blue tilt. - text-muted:
#4a5568— secondary copy. - brand:
#00b86a— slightly deeper green for AA contrast on white (the dark-mode#00dc82falls below AA at body sizes on white;#00b86ahits 4.7:1). - brand-soft:
rgba(0, 184, 106, 0.10). - on-brand:
#ffffff— white label on green button (4.7:1 AA). - link:
#00b86a— adjusted for white-canvas readability. - border:
rgba(2, 4, 32, 0.10)— 10% near-black hairline.
Theming Discipline
The light variant preserves all brand identity decisions: the hex-glyph stays angular, the brand green retains its identity (just tuned for contrast), the typographic family remains DM Sans + Inter + DM Mono. The only loss in light mode is the glow halo — the brand-tinted blur doesn’t translate well to a white canvas without becoming muddy, so light-mode pages drop the halo and lean harder on tonal contrast and the green CTA for chromatic punctuation.
If a downstream surface needs a custom theme (e.g. for a Nuxt module’s marketing page), the rules: keep the single-accent green discipline, keep the DM Sans / Inter / DM Mono trio, keep the hex-glyph motif, and pick one canvas — either cosmos #020420 or pure #ffffff. Mid-tone canvases (greys, off-whites, navy) collapse the brand identity.
13. Lineage & Influences
Nuxt’s design language is a deliberate dark-mode reinterpretation of the Vue identity. The brand color — #00dc82, a saturated forest-green — comes directly from Vue’s #42b883 lineage but has been pulled cooler and brighter for digital surfaces. The canvas is a deep blue-black at #020420 (cooler than Astro’s cosmos navy, warmer than Linear’s true black), and the green appears as both the primary CTA and as a soft 40%-alpha glow behind hero copy.
The typography pair — DM Sans for display, Inter for body — gives the marketing a slightly geometric, Eurostile-flavored register, distinct from the Geist-Inter monoculture of most dev-tool sites. The hex-shaped wordmark glyph is treated as an icon-token, repeated at multiple scales. Where Astro uses violet-to-orange gradients and Svelte uses pure white discipline, Nuxt uses single-accent green-on-blue-black — a palette closer to a developer terminal than a marketing page, which suits a framework that sells itself on developer ergonomics.
What it inherits: Vue’s brand-green DNA (cooler/brighter for dark surfaces), dev-tool dark canvas discipline (Vercel-Linear lineage), soft brand-halo depth (Linear’s tinted glow tradition). What it borrows from contemporaries: Vercel’s near-black + single-accent template, Linear’s tonal-blue elevation ladder, Tailwind’s documentation-page polish. What it rejects: gradient meshes (Astro / Mistral), purple-tech accents (early OpenAI), uniform-grayscale dev-tool minimalism (early Svelte), Geist-monoculture typography.
Named influences:
- Vue.js — Direct lineage — the Nuxt green is a brighter, cooler cut of Vue’s
#42b883. https://vuejs.org - Vercel — Dark-canvas dev-tool template; near-black bg with a single brand accent. https://vercel.com
- Linear — Soft brand-tinted halo behind hero copy as a depth strategy. https://linear.app
- Tailwind CSS — Dual-theme docs surface polish; light/dark variant feature parity. https://tailwindcss.com
- DM Sans / Colophon Foundry (Google Fonts) — Geometric humanist DNA reference. The DM Sans + DM Mono pairing gives Nuxt its Eurostile-soft register.
- Vite — Sister-project visual cousin; dev-tool dark canvas with single-accent green-yellow.
14. Do’s and Don’ts
Do
- Do treat the green (
#00dc82) as the single brand color; pair it only with the deep blue-black canvas, never with a second accent. - Do use the green-glow halo behind hero copy — the 40% alpha bleed is Nuxt’s signature depth move and distinguishes it from Vercel.
- Do keep the typographic family unified: DM Sans / Inter / DM Mono. Mixing in Geist or JetBrains breaks the geometric register.
- Do ship the primary CTA as solid green (
#00dc82bg,#020420text, 8px radius) — high-contrast and unmistakable. - Do anchor the hex-glyph in the upper-left wordmark and repeat it as a six-sided motif throughout (chevrons, dividers, icon-frames).
- Do layer depth tonally:
#020420→#0a0d2a→#10142e→#1a1f42. Each step adds 4–8% lightness without changing hue. - Do ship a polished light variant for docs surfaces — Nuxt is one of the rare dev-tool brands where light mode gets first-class attention.
- Do keep all motion under 320ms (except the gentle 2.4-second glow pulse) and respect
prefers-reduced-motion. - Do mark all decorative SVGs (hex-glyph ornaments, glow halos, illustrations) as
aria-hidden="true". - Do lift cards via tonal stepping + 8% white hairline, never via drop shadow.
Don’t
- Don’t lighten the canvas to pure black or pure navy. The exact
#020420blue undertone is what separates Nuxt from Linear and Astro. - Don’t apply Nuxt-green to large fills. Reserve it for the CTA, the wordmark hex, and the soft halo; full-bleed green flattens the page.
- Don’t mix in Vue’s
#42b883directly. Nuxt’s green is brighter and cooler — using Vue’s exact green muddles the brand lineage. - Don’t introduce gradients, conic backgrounds, or mesh shaders. The page is flat-tonal-with-glow.
- Don’t reach for Geist or JetBrains Mono. The DM Sans / Inter / DM Mono trio is the brand’s typographic signature.
- Don’t use weight 700 below H2. The geometric DM Sans face needs the weight only at headline scale; over-using 700 in body breaks the register.
- Don’t harden the glow into a solid edge. The 40% alpha halo must always blur and bleed; a hard accent collapses the brand depth move.
- Don’t stack the hex-glyph in tight clusters. The angular motif is a counter-balance — too much hex turns into visual noise.
- Don’t apply the dark glow to the light variant. Light-mode pages drop the halo and lean on tonal contrast.
- Don’t ship marketing copy with exclamation marks, urgency CTAs, or emoji. The voice is dev-tool-engineering, not marketing-pitch.
15. Agent Prompt Guide
Quick Color Reference
bg: #020420
bg-soft: #0a0d2a
surface: #10142e
text: #ffffff
text-muted: #a0a8b8
brand: #00dc82
brand-hover: #00b86a
glow: rgba(0, 220, 130, 0.40)
on-brand: #020420
border: rgba(255, 255, 255, 0.08)Example Component Prompts
-
“Create a Nuxt-style hero — cosmos
#020420canvas, 72px DM Sans 700 H1 with -0.02em tracking, 20px Inter 400 lede in#a0a8b8, dual CTA: solid Nuxt-green primary#00dc82/#020420text + ghost outlinedrgba(255, 255, 255, 0.15)border at 8px radius. Behind the H1: blurred radial-gradient halorgba(0, 220, 130, 0.40)with 80px blur, gentle 2.4s pulse. Hex-glyph anchored upper-left.” -
“Design a capability card —
#10142ebackground (one tonal step above canvas), 16px radius, 1pxrgba(255, 255, 255, 0.08)border, 28px interior padding. 22px DM Sans 600 heading in white, 16px Inter 400 body in#a0a8b8. Hover: bg#1a1f42, borderrgba(255, 255, 255, 0.15). No drop shadow.” -
“Build a glow card —
#10142ebackground, 16px radius, 1pxrgba(0, 220, 130, 0.30)brand-tinted border, 28px padding, plusbox-shadow: 0 0 80px -20px rgba(0, 220, 130, 0.25)for the signature green halo bleed. Hover intensifies the glow to0 0 100px -20px rgba(0, 220, 130, 0.40).” -
“Compose a dark code block —
#0a0d2abackground, 12px radius, 1pxrgba(255, 255, 255, 0.08)border, 20×24px padding, DM Mono 400 / 14px / 1.6 line-height. Syntax highlighting: keywords#00dc82, strings#dbdfe9, numbers#80eeb4, comments#525a6c. Top-right Copy button witharia-label.” -
“Render the hex-glyph mark — six-sided SVG in
#00dc82, 24px size, used as wordmark anchor and repeated as section divider. Geometric angular counter-balance to the otherwise soft 16px card radii.aria-hidden=\"true\"when decorative; full SVG<title>when used as the brand mark.” -
“Create the primary nav — 64px header height,
rgba(2, 4, 32, 0.80)background withbackdrop-filter: blur(12px), Nuxt wordmark + hex-glyph in#00dc82left-aligned, links 14px Inter 500 in#a0a8b8with white hover and#00dc82active. Right-aligned ghost ‘GitHub’ + solid-green ‘Get started’ at 8px radius.”
Iteration Guide
- Cosmos
#020420, not pure black. If the canvas is#000000, change it to#020420. The cool-blue tilt is Nuxt’s identity. - Solid green CTA, dark text. If the primary button has white text or a different green, change to
#00dc82background with#020420on-brand text. The inverted-contrast green button is the brand signature. - Add the glow. If the hero has no halo, add a blurred radial gradient
rgba(0, 220, 130, 0.40)behind the H1 with 80px blur. The signature depth move. - Switch type to DM Sans / Inter. If headlines are in Geist or Inter alone, change display to DM Sans 700 with -0.02em tracking. The geometric register is the typographic signature.
- Tonal-stack cards. Replace any drop-shadow on cards with tonal-blue background steps (
#10142e→#1a1f42on hover) plus 8% white hairlines. - Drop the second accent. If you’ve added a magenta, purple, or yellow, remove it. Nuxt is single-accent green; second colours muddy the brand.
- Add the hex. Anchor the hex-glyph in the upper-left wordmark and repeat it as a section divider or icon-frame motif.
- Calm the verbs. Replace “Get started for free!” with “Get started” or “Try Nuxt”; replace “Sign up today →” with “Read the docs”. The voice is dev-tool-engineering, never urgent.
Drop nuxt into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add nuxt 2 · ship landing page
npx agentkit init --design nuxt light minimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
Docs
Install
Vercel
webdesignhot
dark minimal
Vite
Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build to…
Docs
Install
Vite
webdesignhot
light sans
Tailwind CSS
The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, e…
Docs
Install
Tailwind CSS
webdesignhot