dark · sans · structured · cool · bright · multi-theme
Qwik
Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt.
By webdesignhot · qwik.dev
$ npx design-md add qwik
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. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. 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. 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
#0a0e1a - bg-soft
#11162a - bg-strong
#1a2040 - surface
#1a2040 - surface-strong
#252b50 - surface-muted
#0d1224 - text AAA · 19.3
#ffffff - text-strong
#ffffff - text-muted
#a8b1c2 - text-soft
#7a8499 - text-faint AA·LG · 3.2
#5a6478 - text-disabled
#3a4258 - brand AA · 6.5
#ac7ef4 - brand-strong
#8b5cf0 - brand-soft
#ac7ef422 - accent
#18b6f6 - accent-strong
#0a9ad9 - accent-soft
#18b6f622 - gradient-from
#ac7ef4 - gradient-to
#18b6f6 - gradient-via
#7c3aed - glow
#ac7ef466 - glow-blue
#18b6f666 - link
#18b6f6 - link-hover
#33d4ff - link-visited
#c4b5fd - selected
#ac7ef422 - disabled-bg
#252b50 - disabled-text
#5a6478 - border
#ffffff14 - border-strong
#ffffff26 - border-subtle
#ffffff0a - border-brand
#ac7ef466 - divider
#ffffff14 - shadow-deep
rgba(0, 0, 0, 0.4) - shadow-violet
rgba(172, 126, 244, 0.32) - shadow-blue
rgba(24, 182, 246, 0.32) - success-bg
#0d2818 - success-text
#86efac - success-border
#22c55e - warning-bg
#2a2010 - warning-text
#fbbf24 - warning-border
#f59e0b - danger-bg
#2a1414 - danger-text
#fca5a5 - danger-border
#ef4444 - info-bg
#0c2030 - info-text
#7dd3fc - info-border
#0ea5e9 - on-brand
#ffffff - on-accent
#0a0e1a
Ship faster than ever.
display-hero Poppins 88px w700 -0.025em
Ship faster than ever.
display-large Poppins 72px w700 -0.02em
Ship faster than ever.
display Poppins 56px w700 -0.018em
Ship faster than ever.
h1 Poppins 48px w700 -0.015em
Built for teams that ship.
h2 Poppins 36px w700 -0.012em
A complete kit
h3 Poppins 28px w600 -0.008em
The quick brown fox jumps over the lazy dog.
h4 Poppins 22px w600 -0.005em
The quick brown fox jumps over the lazy dog.
h5 Poppins 18px w600 0
The quick brown fox jumps over the lazy dog.
body-lg Inter 18px w400 -0.005em
The quick brown fox jumps over the lazy dog.
body Inter 16px w400 0
The quick brown fox jumps over the lazy dog.
body-sm Inter 14px w400 0
npx design-md add linear
code "JetBrains Mono" 14px w400 0
npx design-md add linear
code-tabular "JetBrains Mono" 14px w500 0
OUR DESIGN SYSTEM
caption Inter 13px w500 0.01em
The quick brown fox jumps over the lazy dog.
eyebrow Inter 12px w600 0.12em
npx design-md add linear
code-sm "JetBrains Mono" 12px w400 0
The quick brown fox jumps over the lazy dog.
micro Inter 11px w600 0.04em
- 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 - sm
6px - md
10px - lg
14px - xl
16px - card
16px - xxl
20px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Qwik's design language is built around a single gradient with a very specific emotional shape: violet `#ac7ef4` on the left, electric blue `#18b6f6` on the right, sweeping diagonally across the lightning-bolt wordmark glyph. That gradient is the brand — used on the wordmark, on primary CTAs, on key feature illustrations, and as a soft 40%-alpha halo behind hero copy. The canvas is a cool near-black `#0a0e1a`, slightly bluer than Astro's cosmos navy, and softer than Solid's technical navy. Type pairs Inter (with Poppins for select display moments) for marketing copy, giving the brand a crisp, kinetic register distinct from the Geist-Inter monoculture. The lightning-bolt glyph echoes through small UI elements: chevron icons get a slight angular kink, section dividers stagger like waveforms. Where Astro feels cosmic and Solid feels infrastructural, Qwik feels kinetic — the design language sells "instant" and "resumable" by visually behaving like a charging arc.
- Diagonal-gradient hero treatment as primary brand surface.
- Brand-tinted halo behind hero copy as a depth strategy.
- Dark-canvas dev-tool template with single dominant gradient accent.
- Parent company aesthetic — saturated electric accents on dark grounds.
- Synthwave / vaporwave aestheticsViolet-to-cyan gradient register, neon-on-dark chromatic discipline.
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: Qwik
tagline: 'Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt.'
author: webdesignhot
source_url: https://qwik.dev
spec: design.md/v1.5
quality: curated
featured: false
categories: [dev-tools]
tags: [dark, sans, structured, cool, bright, multi-theme]
preview_swatch: ['#0a0e1a', '#ac7ef4', '#18b6f6']
related: [vite, vercel, tailwindcss]
description: 'Qwik''s identity is a high-voltage gradient — `#ac7ef4` violet flowing into `#18b6f6` electric blue — set against a near-black `#0a0e1a` canvas. The lightning-bolt glyph anchors the wordmark, and Inter (paired with Poppins for select display moments) carries the marketing copy. The brand reads as kinetic infrastructure: speed-as-aesthetic, execution-as-electricity. Resumability is the framework''s technical pitch; the violet halo is its visual analog. Where Astro feels cosmic and Solid feels infrastructural, Qwik feels like a charging arc.'
themes:
default: dark
available: [dark, light]
switch-via: 'data-theme on <html>; persisted in localStorage; respects prefers-color-scheme. Marketing site is dark; docs honor user preference. The violet+cyan brand gradient is invariant across themes.'
colors:
dark:
bg: '#0a0e1a' # cool near-black canvas
bg-soft: '#11162a' # secondary panel, code-block surface
bg-strong: '#1a2040' # card lift
surface: '#1a2040' # raised card surface
surface-strong: '#252b50' # hovered card
surface-muted: '#0d1224' # pressed card
text: '#ffffff'
text-strong: '#ffffff'
text-muted: '#a8b1c2'
text-soft: '#7a8499'
text-faint: '#5a6478'
text-disabled: '#3a4258'
brand: '#ac7ef4' # Qwik violet
brand-strong: '#8b5cf0'
brand-soft: '#ac7ef422' # 13% violet
accent: '#18b6f6' # electric blue
accent-strong: '#0a9ad9'
accent-soft: '#18b6f622'
gradient-from: '#ac7ef4'
gradient-to: '#18b6f6'
gradient-via: '#7c3aed'
glow: '#ac7ef466'
glow-blue: '#18b6f666'
link: '#18b6f6'
link-hover: '#33d4ff'
link-visited: '#c4b5fd'
selected: '#ac7ef422'
disabled-bg: '#252b50'
disabled-text: '#5a6478'
border: '#ffffff14'
border-strong: '#ffffff26'
border-subtle: '#ffffff0a'
border-brand: '#ac7ef466'
divider: '#ffffff14'
shadow-deep: 'rgba(0, 0, 0, 0.4)'
shadow-violet: 'rgba(172, 126, 244, 0.32)'
shadow-blue: 'rgba(24, 182, 246, 0.32)'
success-bg: '#0d2818'
success-text: '#86efac'
success-border: '#22c55e'
warning-bg: '#2a2010'
warning-text: '#fbbf24'
warning-border: '#f59e0b'
danger-bg: '#2a1414'
danger-text: '#fca5a5'
danger-border: '#ef4444'
info-bg: '#0c2030'
info-text: '#7dd3fc'
info-border: '#0ea5e9'
on-brand: '#ffffff'
on-accent: '#0a0e1a'
light:
bg: '#ffffff' # docs light canvas
bg-soft: '#f8fafc' # subtle alt panel
bg-strong: '#f1f5f9' # raised surface tier
surface: '#ffffff'
surface-strong: '#f1f5f9'
surface-muted: '#fafbfc'
text: '#0a0e1a' # mirrors dark/bg as text role
text-strong: '#000000'
text-muted: '#475569' # slate-600
text-soft: '#64748b' # slate-500
text-faint: '#94a3b8' # slate-400
text-disabled: '#cbd5e1'
brand: '#7c3aed' # deeper violet for AAA on white
brand-strong: '#6d28d9'
brand-soft: 'rgba(124, 58, 237, 0.10)'
accent: '#0a9ad9' # deeper cyan for legibility
accent-strong: '#0e7490'
accent-soft: 'rgba(24, 182, 246, 0.10)'
gradient-from: '#ac7ef4' # gradient stays — chromatic identity
gradient-to: '#18b6f6'
gradient-via: '#7c3aed'
glow: 'rgba(172, 126, 244, 0.30)'
glow-blue: 'rgba(24, 182, 246, 0.20)'
link: '#0a9ad9' # cyan link
link-hover: '#0e7490'
link-visited: '#7c3aed'
selected: 'rgba(124, 58, 237, 0.08)'
disabled-bg: '#f1f5f9'
disabled-text: '#94a3b8'
border: '#e2e8f0' # slate-200 hairline
border-strong: '#cbd5e1' # slate-300
border-subtle: '#f1f5f9' # slate-100
border-brand: 'rgba(124, 58, 237, 0.40)'
divider: '#e2e8f0'
shadow-deep: 'rgba(15, 23, 42, 0.12)'
shadow-violet: 'rgba(172, 126, 244, 0.18)'
shadow-blue: 'rgba(24, 182, 246, 0.18)'
success-bg: '#f0fdf4'
success-text: '#15803d'
success-border: '#22c55e'
warning-bg: '#fffbeb'
warning-text: '#b45309'
warning-border: '#f59e0b'
danger-bg: '#fef2f2'
danger-text: '#b91c1c'
danger-border: '#ef4444'
info-bg: '#f0f9ff'
info-text: '#0369a1'
info-border: '#0ea5e9'
on-brand: '#ffffff'
on-accent: '#ffffff'
typography:
display:
family: 'Poppins, "Inter Display", Inter, -apple-system, "system-ui", sans-serif'
weights: [500, 600, 700, 800]
opentype-features: ['ss01']
body:
family: 'Inter, -apple-system, "system-ui", "Segoe UI", sans-serif'
weights: [400, 500, 600]
opentype-features: ['cv01', 'cv11']
mono:
family: '"JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace'
weights: [400, 500, 700]
opentype-features: ['zero', 'ss02']
scale:
display-hero: { size: 88, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: 'ss01' }
display-large: { size: 72, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
display: { size: 56, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display }
h1: { size: 48, weight: 700, lineHeight: 1.1, tracking: '-0.015em', family: display }
h2: { size: 36, weight: 700, lineHeight: 1.2, tracking: '-0.012em', family: display }
h3: { size: 28, weight: 600, lineHeight: 1.25, tracking: '-0.008em', family: display }
h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.005em', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.4, tracking: '0', family: display }
eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.12em', family: body, transform: 'uppercase' }
body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '-0.005em', family: body }
body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
caption: { size: 13, weight: 500, lineHeight: 1.5, tracking: '0.01em', family: body }
micro: { size: 11, weight: 600, lineHeight: 1.4, tracking: '0.04em', family: body, transform: 'uppercase' }
code: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono, opentype: 'zero' }
code-sm: { size: 12, weight: 400, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'zero' }
code-tabular: { size: 14, weight: 500, lineHeight: 1.5, tracking: '0', family: mono, opentype: 'zero, tnum' }
radius:
micro: 2
sm: 6
md: 10
lg: 14
xl: 16
xxl: 20
card: 16
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
header-height: 64
gutter: 24
section-padding: 96
grid: 12
components:
button-primary:
bg: 'linear-gradient(90deg, #ac7ef4, #18b6f6)'
color: '#ffffff'
radius: 10
weight: 600
padding: '14px 28px'
font: display
hover: 'shadow #ac7ef466 0 0 24px; brightness(1.05)'
button-ghost:
bg: 'transparent'
color: '#ffffff'
border: '1px solid #ffffff26'
radius: 10
weight: 500
hover: 'bg #ffffff0a; border #ffffff40'
button-violet:
bg: '#ac7ef4'
color: '#0a0e1a'
radius: 10
weight: 600
hover: 'bg #8b5cf0; color #ffffff'
button-link:
bg: 'transparent'
color: '#18b6f6'
underline: 'on hover'
weight: 500
card:
bg: '#1a2040'
border: '1px solid #ffffff14'
radius: 16
padding: '24px'
shadow: 'rgba(0, 0, 0, 0.2) 0 4px 12px'
card-haloed:
bg: '#1a2040'
border: '1px solid #ac7ef466'
radius: 16
padding: '24px'
shadow: 'rgba(172, 126, 244, 0.2) 0 0 32px'
badge:
bg: '#ac7ef422'
color: '#ac7ef4'
radius: 9999
padding: '4px 10px'
weight: 600
font: mono
input:
bg: '#11162a'
color: '#ffffff'
border: '1px solid #ffffff26'
radius: 10
padding: '10px 14px'
focus-ring: '0 0 0 3px rgba(172, 126, 244, 0.4)'
nav:
bg: '#0a0e1acc'
backdrop-blur: 12
border-bottom: '1px solid #ffffff14'
height: 64
code-block:
bg: '#11162a'
color: '#e6e6e6'
radius: 12
padding: '20px 24px'
font: mono
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-electric: 'cubic-bezier(0.16, 1, 0.3, 1)' # snappy, expo-out, kinetic
duration-fast: 120
duration-standard: 200
duration-slow: 360
duration-page: 420
reduced-motion: 'respects prefers-reduced-motion: reduce — gradient animations freeze, halos remain static, translateY transforms become opacity-only fades.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(0, 0, 0, 0.2) 0 1px 3px'
standard: 'rgba(0, 0, 0, 0.3) 0 4px 12px'
elevated: 'rgba(0, 0, 0, 0.4) 0 12px 24px -8px'
violet-halo: 'rgba(172, 126, 244, 0.4) 0 0 32px'
blue-halo: 'rgba(24, 182, 246, 0.4) 0 0 32px'
ring: '0 0 0 3px rgba(172, 126, 244, 0.4)'
accessibility:
contrast-text-on-bg: 17.6 # AAA — #ffffff on #0a0e1a
contrast-muted-on-bg: 8.2 # AAA — #a8b1c2 on #0a0e1a
contrast-text-on-brand: 4.5 # AA — #ffffff on #ac7ef4
contrast-text-on-accent: 12.4 # AAA — #0a0e1a on #18b6f6 (the on-accent inversion)
contrast-link-on-bg: 8.6 # AAA — #18b6f6 on #0a0e1a
focus-ring: '3px solid rgba(172, 126, 244, 0.4)'
focus-offset: '2px'
reduced-motion-honored: true
min-touch-target: 44
dark-mode: default # Dark IS the default; no light variant offered
lineage:
summary: |
Qwik's design language is built around a single gradient with a
very specific emotional shape: violet `#ac7ef4` on the left,
electric blue `#18b6f6` on the right, sweeping diagonally across
the lightning-bolt wordmark glyph. That gradient is the brand —
used on the wordmark, on primary CTAs, on key feature illustrations,
and as a soft 40%-alpha halo behind hero copy. The canvas is a
cool near-black `#0a0e1a`, slightly bluer than Astro's cosmos
navy, and softer than Solid's technical navy. Type pairs Inter
(with Poppins for select display moments) for marketing copy,
giving the brand a crisp, kinetic register distinct from the
Geist-Inter monoculture. The lightning-bolt glyph echoes through
small UI elements: chevron icons get a slight angular kink,
section dividers stagger like waveforms. Where Astro feels cosmic
and Solid feels infrastructural, Qwik feels kinetic — the design
language sells "instant" and "resumable" by visually behaving like
a charging arc.
influences:
- name: Stripe
role: Diagonal-gradient hero treatment as primary brand surface.
url: https://stripe.com
- name: Linear
role: Brand-tinted halo behind hero copy as a depth strategy.
url: https://linear.app
- name: Vercel
role: Dark-canvas dev-tool template with single dominant gradient accent.
url: https://vercel.com
- name: Builder.io
role: Parent company aesthetic — saturated electric accents on dark grounds.
url: https://www.builder.io
- name: Synthwave / vaporwave aesthetics
role: Violet-to-cyan gradient register, neon-on-dark chromatic discipline.
---
## 1. Visual Theme & Atmosphere
Qwik's marketing site is wired for kinetic energy. Open the page and
the first thing you feel is the gradient — `#ac7ef4` violet flowing
into `#18b6f6` electric blue, sweeping diagonally across the lightning-
bolt wordmark and bleeding behind the hero copy as a soft 40%-alpha
halo. The canvas is a cool near-black `#0a0e1a`, slightly bluer than
Astro's cosmos navy and softer than Solid's technical navy, and it
exists primarily as the ground from which the gradient emerges. This
is **speed-as-aesthetic**: the design language sells "instant" and
"resumable" by visually behaving like a charging arc.
The atmosphere is **electric, kinetic, edge-of-the-future**. Where
Solid leans engineering-document and Astro leans content-cosmic, Qwik
leans **runtime-as-lightning**. The gradient is the brand — not an
accent on top of the brand, not a flourish, but the literal expression
of the framework's pitch: violet (the slow, traditional execution) on
the left, electric blue (instant, resumed) on the right, the sweep
between them is the resumability arc. The lightning-bolt glyph is
what holds it together visually.
Depth comes from **tonal-blue layering plus a brand-tinted halo**.
Cards lift from `#0a0e1a` to `#1a2040`; hover brightens to `#252b50`.
The signature depth move is the **violet halo** (`#ac7ef466`, 40%
alpha, heavily blurred at 32px) that bleeds behind hero text and
primary CTAs, mimicking the corona of a charging arc. Borders are
uniform 8% white hairlines (`#ffffff14`); shadows are dark-tinted
and used sparingly. The gradient itself substitutes for most depth
moves — when a CTA needs to feel "lifted", it gets a violet glow,
not a drop shadow.
Type pairs **Inter** for body and most display with **Poppins** as
the optional brand-display alternate for select moments. The
geometric-rounded character of Poppins — when used — gives the
marketing a slightly playful kinetic register, but the bulk of the
type is Inter at heavy weights with negative tracking. Code blocks
sit on `#11162a` (one step lighter than canvas) with JetBrains Mono.
The dev-tool default mono is foregrounded as primary content.
**Key Characteristics**
- Cool near-black canvas (`#0a0e1a`) — slight blue tilt, never warm
- Violet-to-cyan gradient (`#ac7ef4` → `#18b6f6`) as primary brand
- Lightning-bolt glyph in the wordmark — angular, kinetic geometry
- Violet halo (`#ac7ef466`) as signature depth move
- 8% white hairlines for borders — uniform across the system
- Inter Display + Poppins (optional) for kinetic display character
- JetBrains Mono on `#11162a` code panels
- Dark-default — no light variant offered
- Card radii at 16px — slightly more rounded than Solid (12px) or Astro
- Brand discipline: only purple-violet to electric blue, no warm hues
## 2. Color Palette & Roles
### Primary
- **bg** (`#0a0e1a`): cool near-black, the canvas of every section
- **text** (`#ffffff`): primary copy, full strength
- **brand** (`#ac7ef4`): Qwik violet, left endpoint of the gradient
- **accent** (`#18b6f6`): electric blue, right endpoint
- **on-brand** (`#ffffff`): white ON the violet (button text)
- **on-accent** (`#0a0e1a`): near-black ON the cyan (legibility inversion)
### Brand & Dark
- **brand-strong** (`#8b5cf0`): pressed violet, hover-down
- **accent-strong** (`#0a9ad9`): pressed cyan
- **gradient-from** (`#ac7ef4`): the violet endpoint, used in linear-gradient declarations
- **gradient-to** (`#18b6f6`): the cyan endpoint
- **gradient-via** (`#7c3aed`): optional middle stop for thicker gradient compositions
- **glow** (`#ac7ef466`): 40% alpha violet halo, the brand's depth signature
- **glow-blue** (`#18b6f666`): 40% alpha cyan halo, secondary
### Accent
- **brand-soft** (`#ac7ef422`): 13% violet wash for callouts and badges
- **accent-soft** (`#18b6f622`): 13% blue wash
- **bg-soft** (`#11162a`): code-block surface, secondary panel
- **bg-strong** (`#1a2040`): card lift, raised surface
### Interactive
- **link** (`#18b6f6`): link picks up accent cyan, brightest ground-glow
- **link-hover** (`#33d4ff`): brighter cyan on hover
- **link-visited** (`#c4b5fd`): visited violet
- **selected** (`#ac7ef422`): selected-row violet tint
- **disabled-bg** (`#252b50`): disabled control surface
- **disabled-text** (`#5a6478`): disabled label
### Neutral Scale
- **text** (`#ffffff`): body, display
- **text-muted** (`#a8b1c2`): secondary copy, nav metadata
- **text-soft** (`#7a8499`): tertiary, deemphasized
- **text-faint** (`#5a6478`): quaternary helper labels
- **text-disabled** (`#3a4258`): disabled labels
### Surface & Borders
- **surface** (`#1a2040`): default card surface
- **surface-strong** (`#252b50`): hovered card
- **surface-muted** (`#0d1224`): pressed card
- **border** (`#ffffff14`): 8% white hairline, default
- **border-strong** (`#ffffff26`): 15% white, emphasized
- **border-subtle** (`#ffffff0a`): 4% white, near-invisible
- **border-brand** (`#ac7ef466`): violet 40% for branded borders (haloed cards)
- **divider** (`#ffffff14`): table rules
### Shadow Colors
Shadows are **deep-neutral on the dark canvas**, but the brand's depth signature is the **violet halo** — `rgba(172, 126, 244, 0.4)` blurred at 32px, used behind hero copy and primary CTAs. Where Stripe uses blue-tinted shadows on light grounds, Qwik uses violet-tinted glows on dark grounds — the inverse direction with the same brand-coloring intent.
### Semantic
- **success-bg** (`#0d2818`) / **success-text** (`#86efac`) / **success-border** (`#22c55e`)
- **warning-bg** (`#2a2010`) / **warning-text** (`#fbbf24`) / **warning-border** (`#f59e0b`)
- **danger-bg** (`#2a1414`) / **danger-text** (`#fca5a5`) / **danger-border** (`#ef4444`)
- **info-bg** (`#0c2030`) / **info-text** (`#7dd3fc`) / **info-border** (`#0ea5e9`)
## 3. Typography Rules
### Font Family
- **Primary display**: `Poppins`, fallback to `"Inter Display"`, `Inter`, system stack
- **Body**: `Inter`, fallback to `-apple-system`, `"system-ui"`, `"Segoe UI"`
- **Mono**: `"JetBrains Mono"`, fallback to `"Fira Code"`, `ui-monospace`, `Menlo`, `Consolas`
- **OpenType features used**: `ss01` (Poppins/Inter alternates), `cv01`/`cv11` (Inter character variants), `zero` (slashed zero in JetBrains Mono), `tnum` in benchmark tables
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
| --- | --- | --- | --- | --- | --- | --- | --- |
| display-hero | Poppins | 88 | 700 | 1.0 | -0.025em | ss01 | Hero only |
| display-large | Poppins | 72 | 700 | 1.05 | -0.02em | — | Marketing H1 |
| display | Poppins | 56 | 700 | 1.1 | -0.018em | — | Section openers |
| h1 | Poppins | 48 | 700 | 1.1 | -0.015em | — | Page titles |
| h2 | Poppins | 36 | 700 | 1.2 | -0.012em | — | Sub-section headers |
| h3 | Poppins | 28 | 600 | 1.25 | -0.008em | — | Feature titles |
| h4 | Poppins | 22 | 600 | 1.3 | -0.005em | — | Card titles |
| h5 | Poppins | 18 | 600 | 1.4 | 0 | — | Sidebar headers |
| eyebrow | Inter | 12 | 600 | 1.4 | 0.12em | uppercase | Section labels |
| body-lg | Inter | 18 | 400 | 1.6 | -0.005em | — | Hero subhead |
| body | Inter | 16 | 400 | 1.6 | 0 | — | Default body |
| body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Secondary body |
| caption | Inter | 13 | 500 | 1.5 | 0.01em | — | Metadata |
| micro | Inter | 11 | 600 | 1.4 | 0.04em | uppercase | Tags |
| code | JetBrains Mono | 14 | 400 | 1.6 | 0 | zero | Code blocks |
| code-sm | JetBrains Mono | 12 | 400 | 1.55 | 0 | zero | Inline code |
| code-tabular | JetBrains Mono | 14 | 500 | 1.5 | 0 | zero, tnum | Benchmark tables |
### Principles
1. **Poppins for display, Inter for body.** Poppins is geometric-rounded with broader x-height than Inter, lending the marketing a kinetic, slightly playful tone. The choice is deliberate: Poppins reads less Silicon-Valley than Geist, more "we are excited about this" than "we are serious infrastructure."
2. **Negative tracking on display, neutral on body.** Display rolls in tight (`-0.015em` to `-0.025em`); body sits at `0`. The kinetic register depends on tight display.
3. **One sans for body, one for display, one mono.** No secondary cuts, no italic display, no decorative faces.
4. **Slashed zero in mono.** OpenType `zero` is enabled across all mono surfaces.
5. **Eyebrow tracking is wider than peers.** At `0.12em`, eyebrows are slightly more spaced than Inter's typical `0.08em` — the wider tracking signals "label" with extra emphasis.
6. **Weight 700 is the display default.** Where Solid uses 600/700 and Bun uses 800, Qwik centers on 700 — the kinetic-bold register without going woodtype-heavy.
## 4. Component Stylings
### Buttons
**Primary (gradient)**: `linear-gradient(90deg, #ac7ef4, #18b6f6)` background, `#ffffff` text, 10px radius, weight 600 in Poppins, padding `14px 28px`. Hover adds violet halo (`#ac7ef466 0 0 24px`) and brightens 5%. The signature CTA — used for "Get started", "Read the docs."
**Ghost**: transparent background, `#ffffff` text, 1px solid `#ffffff26` border, 10px radius, weight 500. Hover fills to `#ffffff0a` and border deepens to `#ffffff40`.
**Violet (signature)**: `#ac7ef4` solid background, `#0a0e1a` near-black text, 10px radius, weight 600. Hover deepens to `#8b5cf0` with white text.
**Link button**: transparent, `#18b6f6` cyan text, weight 500, underline on hover.
### Cards
**Default**: `#1a2040` background, 1px solid `#ffffff14` hairline, 16px radius, padding `24px`, ambient `rgba(0, 0, 0, 0.2) 0 4px 12px` shadow. Hover lifts to `#252b50` background.
**Haloed (signature)**: `#1a2040` background, 1px solid `#ac7ef466` violet border, 16px radius, padding `24px`, violet halo shadow `rgba(172, 126, 244, 0.2) 0 0 32px`. Used for featured CTAs or primary feature cards — the brand's depth-and-energy moment.
### Badges & Tags
`#ac7ef422` (13% violet) background, `#ac7ef4` violet text, 9999 (pill) radius, padding `4px 10px`, weight 600, mono font. Cyan variant for secondary tags: `#18b6f622` background, `#18b6f6` text.
### Inputs
`#11162a` background, `#ffffff` text, 1px solid `#ffffff26` border, 10px radius, padding `10px 14px`. Focus ring: `0 0 0 3px rgba(172, 126, 244, 0.4)` — the violet halo. Placeholder: `#5a6478`.
### Navigation
`#0a0e1acc` (80% near-black) with `12px` backdrop-blur, 1px solid `#ffffff14` bottom border, 64px height. Lightning-bolt glyph + "Qwik" wordmark on the left, primary nav center, gradient CTA right.
### Code blocks
`#11162a` (one step lighter than canvas) background, `#e6e6e6` near-white text, 12px radius, padding `20px 24px`, JetBrains Mono at 14px. Syntax highlighting: violet for keywords (matches brand), cyan for strings, near-white for identifiers, soft gray for comments.
### Lightning-bolt glyph
The wordmark glyph is the signature visual element. Used at multiple scales — favicon (16px), nav (24px), feature illustrations (~80–120px), hero callouts (~200px). Always rendered with the gradient fill `linear-gradient(135deg, #ac7ef4, #18b6f6)` — never solid-colored, never gradient-rotated to vertical.
## 5. Layout Principles
### Spacing System
Base unit is **4px**. Scale: `2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160`. Density is **mid** — 96px section padding, 24px card padding, 16px between elements.
### Grid & Container
Container caps at **1280px** with **24px gutters** (slightly wider than Solid's 1200px). Prose width: 720px. The grid is 12-column with frequent diagonal-element layouts — feature cards offset slightly, gradient bars sweeping at angles — that visually echo the lightning-bolt geometry.
### Whitespace Philosophy
The dark canvas absorbs whitespace as void rather than as paper. Qwik compensates by using more contained layouts than light-canvas peers — sections often have explicit border-top/border-bottom hairlines to contain the page rather than letting elements float in deep space.
### Section Cadence
Canvas runs continuously; alternation happens via the `bg-soft` (`#11162a`) bands and through gradient-band moments — full-width gradient strips that appear once or twice per page as section transitions.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
| --- | --- | --- |
| Micro | 2px | Border accents, dividers |
| Standard | 6px | Inline tags, micro-pills |
| Comfortable | 10px | Inputs, primary buttons |
| Relaxed | 14px | Secondary cards |
| Large | 16px | Default cards, code blocks |
| Featured | 20px | Hero illustration frames |
| Pill | 9999px | Badges, status pills |
Radii lean slightly more rounded than Solid's grid-aligned 8/12px ladder. The kinetic register supports the softer rounding — Qwik's brand is fast and modern, not engineering-document. The lightning-bolt geometry — sharp angular kinks — echoes through chevron icons, section dividers, and the wordmark itself.
## 7. Depth & Elevation
| Level | Treatment | Use |
| --- | --- | --- |
| 0 — Flat | No shadow, no border | Page canvas, full-bleed sections |
| 1 — Hairline | 1px solid `#ffffff14` | Section dividers, subtle cards |
| 2 — Lifted | 1px border + `rgba(0,0,0,0.2) 0 4px 12px` | Default cards |
| 3 — Hovered | Lifted + brighter surface (`#252b50`) | Card hover |
| 4 — Elevated | `rgba(0,0,0,0.4) 0 12px 24px -8px` | Modals, popovers |
| 5 — Violet-haloed | `rgba(172, 126, 244, 0.4) 0 0 32px` | Featured CTAs, primary feature cards |
| 6 — Cyan-haloed | `rgba(24, 182, 246, 0.4) 0 0 32px` | Secondary brand emphasis (rare) |
**Shadow Philosophy** — Qwik is a **brand-glow depth** brand. Standard cards use deep neutral shadows on the dark canvas, but the brand's signature depth is the **violet halo** — a 40%-alpha violet circle blurred at 32px, used behind hero copy and primary CTAs. The halo mimics the corona of a charging arc; it is the literal visual translation of "resumable execution as electricity." Pure neutral shadows are present but understated; the brand-tinted glow does the emotional work.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — feature reveals
- **Electric**: `cubic-bezier(0.16, 1, 0.3, 1)` — snappy, expo-out, kinetic — used on gradient sweeps, halo entrances, brand moments
### Durations
- **Fast (120ms)**: hover color shifts, link underline, badge state
- **Standard (200ms)**: button hover lift, halo fade-in, focus ring
- **Slow (360ms)**: section reveals, modal entrance, gradient sweeps
- **Page (420ms)**: route transitions
### Per-component Micro-states
- **Button hover (gradient)**: violet halo fades in over 200ms, brightness +5%, no translateY (the halo is the lift)
- **Card hover**: surface brightens from `#1a2040` to `#252b50` over 200ms; if haloed card, halo intensifies from 0.2 to 0.4 alpha
- **Link hover**: underline grows 0→100% in 120ms; color brightens from `#18b6f6` to `#33d4ff`
- **Lightning-bolt glyph**: subtle gradient shimmer on hover — the gradient angle rotates 15° over 360ms ease-electric, then snaps back
- **Page enter**: hero gradient sweeps in from left to right over 360ms ease-electric, mimicking the resumability arc
- **Focus**: 3px violet halo fades in over 120ms
### Page Transitions
420ms cross-fade with 24px translateY enter. Hero gradient sweeps in as part of the page-load animation. Reduced-motion strips this entirely.
### Reduced Motion
`prefers-reduced-motion: reduce` honored. Gradient sweeps freeze (no rotation, no shimmer). Halos remain static (no fade-in pulse). translateY transforms become opacity-only fades. Page transitions become instantaneous. Focus rings remain visible.
## 9. Accessibility & A11y
### Contrast Pairs
- **Body on canvas** (`#ffffff` on `#0a0e1a`): **17.6:1** — AAA at all sizes
- **Muted on canvas** (`#a8b1c2` on `#0a0e1a`): **8.2:1** — AAA
- **Body on violet** (`#ffffff` on `#ac7ef4`): **4.5:1** — AA at body sizes (button text)
- **Body on cyan** (`#0a0e1a` on `#18b6f6`): **12.4:1** — AAA (the on-accent inversion)
- **Link on canvas** (`#18b6f6` on `#0a0e1a`): **8.6:1** — AAA
- **Code text on code-bg** (`#e6e6e6` on `#11162a`): **14.8:1** — AAA
### Focus Indicators
3px solid `rgba(172, 126, 244, 0.4)` violet ring with 2px offset. Consistent across buttons, links, inputs, interactive cards. Visible on dark surfaces.
### ARIA Patterns
- **Combobox**: `role="combobox"` with `aria-expanded`, `aria-controls`, `aria-activedescendant`
- **Dialog**: `role="dialog"` `aria-modal="true"`, focus trap, restore focus on close
- **Tooltip**: `role="tooltip"` with `aria-describedby`
- **Tabs**: `role="tablist"` / `role="tab"` / `role="tabpanel"` with arrow-key navigation
- **Code-copy**: `aria-label="Copy code"` with polite live region
### Keyboard Navigation
- Tab order follows visual order
- Skip-to-content link visually hidden until focused
- Escape closes modals; Tab cycles within
- Code blocks: Tab to copy button, Enter to copy, focus returns
### Screen Reader Hints
- Lightning-bolt glyph: `aria-hidden="true"` when decorative; `aria-label="Qwik"` when used as logo
- Decorative SVGs: `aria-hidden="true"`
- Code blocks: language announced via `aria-label`
- Gradient backgrounds: never communicate information through gradient alone
### Reduced Motion
See §8. Brand-glow effects (halos) freeze at static state when reduced motion is honored.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Notes |
| --- | --- | --- |
| Mobile | < 640px | Single column, halos scale to 24px blur |
| Tablet | 640–1024px | 8-column grid, hero stacks |
| Desktop | 1024–1280px | Full 12-column grid |
| Wide | 1280–1536px | Container caps at 1280px |
| Ultra-wide | > 1536px | Container holds, side gutters expand |
### Touch Targets
Minimum 44×44px on mobile. Buttons expand to `16×32px` padding on mobile. Nav links get 48px height.
### Collapsing Strategy
- **Hero**: 12-col → single-col; gradient halo scales 50%, headline drops one tier
- **Feature grid**: 3-up desktop → 2-up tablet → 1-up mobile
- **Code blocks**: full-bleed mobile, padded desktop
- **Navigation**: horizontal nav becomes hamburger drawer at < 1024px
- **Haloed cards**: halo blur scales down on mobile to avoid overwhelming small screens
### Image Behavior
Lightning-bolt glyph is SVG with gradient defs — scales without loss. Marketing illustrations use `srcset` 1x/2x/3x. Card images crop to `aspect-ratio: 16/9` desktop, `4/3` mobile.
### Container Queries
Used in feature cards: at < 480px container width, internal layout collapses from horizontal to vertical regardless of viewport.
## 11. Content & Voice
### Tone
**Kinetic-technical, edge-of-the-future.** Qwik's voice is excited about speed. Where Solid says "fine-grained reactivity" with engineering reserve, Qwik says "instant" with a slight lean forward. The technical authority is real — resumability, hydration-free execution — but the register is energetic, almost evangelical.
### Microcopy Patterns
- **Button verbs**: prefer kinetic actions ("Get started", "Try it now", "See it in action") with slight enthusiasm
- **Error messages**: lead with the problem, then the fix, with a hint of forward-motion. Example: `Hydration mismatch detected. Qwik resumes — no hydration needed. Make sure your component is server-resumable.`
- **Success confirmations**: brief, can use exclamation-marked when celebratory ("Resumed!" "Loaded instantly")
- **Loading states**: avoid; Qwik's brand is "instant", so visible loading is off-brand. If genuinely deferred, use skeleton with a subtle gradient shimmer
### Empty States
What they say: "No routes registered yet. Try `qwik new route /about` to scaffold one." (Action-shaped, command-named.)
What they don't say: "It looks like you haven't added any routes." (Too apologetic; Qwik leans confident.)
### CTA Verb Conventions
- **Primary**: "Get started" / "Try Qwik" / "Read the docs"
- **Secondary**: "View benchmarks" / "Explore examples" / "See it on GitHub"
- **Footer CTA**: "Build something fast" — speed-anchored
- **Not used**: "Sign up free", "Buy now" — Qwik is open source
## 12. Dark Mode & Theming
**Dark IS the default — no light variant offered.**
Qwik's identity is dark-canvas, gradient-on-dark, halo-on-dark. A light variant would erase the violet halo's emotional impact (halos require dark grounds to glow), would flatten the gradient's saturation against white, and would invert the brand's "edge-of-the-future" register into something closer to corporate SaaS.
The only light surface on the entire site is occasional inverse moments — pricing tables, contrast callouts — where `#ffffff` background is used deliberately to break the dark continuity for emphasis. These appear once or twice per page maximum.
If a light variant ships in the future, the gradient endpoints would need to deepen significantly (`#7c3aed` to `#0ea5e9`) and the halo would need to become a soft drop shadow rather than a glow. But until then, dark is the only mode and the only mode that captures the brand voice.
## 13. Lineage & Influences
Qwik's design language sits at the intersection of three lineages. From **Stripe**, Qwik inherits the diagonal-gradient hero treatment as primary brand surface — both brands commit to a single gradient as the visual signature. From **Linear**, Qwik inherits the brand-tinted halo behind hero copy as a depth strategy. From **Vercel**, the dark-canvas dev-tool template with single dominant accent. From **Builder.io** (Qwik's parent company), the saturated-electric-accents-on-dark-grounds discipline. From **synthwave/vaporwave aesthetics**, the violet-to-cyan gradient register and the neon-on-dark chromatic logic.
What Qwik rejects: light-canvas defaults (Stripe, Deno, Bun), monochrome accent (Solid's blue-on-blue), warm hues entirely (Bun, Astro's cosmos navy with warm twilight). The brand's chromatic discipline is rigorously cool — purple-violet to electric blue, no exceptions.
**Named influences**
- **Stripe** — diagonal-gradient hero treatment as primary brand surface. https://stripe.com
- **Linear** — brand-tinted halo behind hero copy as depth strategy. https://linear.app
- **Vercel** — dark-canvas dev-tool template with single dominant accent. https://vercel.com
- **Builder.io** — parent-company aesthetic, saturated electric accents on dark. https://www.builder.io
- **Synthwave/vaporwave aesthetics** — violet-to-cyan gradient register, neon-on-dark.
## 14. Do's and Don'ts
### Do's
- **Do** lean on the violet-to-blue gradient as the primary brand surface — wordmark, CTA, hero halo. Single accent, no pairing with other hues.
- **Do** use Poppins for display when going for kinetic energy. Inter is the safe fallback; Poppins is the brand voice.
- **Do** apply the soft violet halo (`#ac7ef466` blurred 32px) behind hero copy — it is the brand's depth and energy signal.
- **Do** keep the canvas at exact `#0a0e1a`. Lighter navy reads as Solid; warmer navy reads as Astro.
- **Do** use the lightning-bolt glyph at multiple scales — favicon, nav, feature illustrations, hero callouts.
- **Do** pair white-on-violet for buttons, near-black-on-cyan for legibility moments. The on-brand pair is white; the on-accent inversion is `#0a0e1a`.
- **Do** use 8% white hairlines uniformly across the system. Borders should be invisible until they need to articulate structure.
- **Do** lean on JetBrains Mono in code surfaces. The dev-tool default keeps the brand grounded.
- **Do** use violet halos on featured CTAs, cyan halos sparingly. Halos are scarce by design — one or two per page.
- **Do** keep section padding at 96px. The dark canvas needs breathing room to prevent claustrophobia.
### Don'ts
- **Don't** flatten the gradient to a single color. Both endpoints — the violet and the blue — must appear together; either alone reads as Astro or Solid.
- **Don't** lighten the canvas to pure navy or warm twilight. The exact `#0a0e1a` cool near-black is what holds the gradient's brightness.
- **Don't** mix in green or warm accents. Qwik's chromatic surface is exclusively cool — purple-violet to electric blue, no exceptions.
- **Don't** use white-on-cyan for buttons. The legibility falls below AA — use `#0a0e1a` near-black ON the cyan instead.
- **Don't** apply the gradient to large surfaces. The hex pair is too saturated for full backgrounds; reserve for buttons, wordmark, hero halos, and small feature graphics.
- **Don't** use drop shadows where halos belong. Halos are the brand's depth signature; drop shadows undermine the kinetic register.
- **Don't** rotate the gradient angle freely. The brand convention is `90deg` (left-to-right) for buttons, `135deg` for the wordmark glyph. Other angles read as off-brand.
- **Don't** use solid backgrounds for the lightning-bolt glyph. The gradient fill is non-negotiable.
- **Don't** introduce a light mode as the default. The brand identity depends on the dark canvas.
- **Don't** use Berkeley Mono or other mono families. JetBrains is the brand-default.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #0a0e1a
bg-soft: #11162a
surface: #1a2040
text: #ffffff
text-muted: #a8b1c2
brand: #ac7ef4 (violet)
accent: #18b6f6 (cyan)
gradient: linear-gradient(90deg, #ac7ef4, #18b6f6)
glow: #ac7ef466 (40% violet halo)
border: #ffffff14 (8% white)
link: #18b6f6
```
### Example Component Prompts
1. *"Create a hero with an 88px Poppins 700 headline at -0.025em tracking, 18px Inter body subhead, a violet-to-cyan gradient CTA button (`linear-gradient(90deg, #ac7ef4, #18b6f6)`) with white text and weight 600. Behind the hero copy, place a violet halo (`rgba(172, 126, 244, 0.4)` blurred 32px). Canvas is `#0a0e1a`. Lightning-bolt glyph anchors the wordmark at top-left."*
2. *"Design a haloed feature card with `#1a2040` background, 1px solid `#ac7ef466` violet border, 16px radius, 24px padding, violet halo shadow (`rgba(172, 126, 244, 0.2) 0 0 32px`), a 28px Poppins 600 title, 16px Inter body. On hover, halo intensifies to 0.4 alpha."*
3. *"Build a dark code block with `#11162a` background (one step lighter than canvas), `#e6e6e6` near-white text, JetBrains Mono at 14px, 12px radius, 20px×24px padding, slashed-zero enabled, violet keyword highlighting (`#ac7ef4`), cyan strings (`#18b6f6`)."*
4. *"Create a ghost button: transparent background, white text, 1px solid `#ffffff26` border, 10px radius, weight 500 in Poppins, padding 14px 28px. Hover fills to `#ffffff0a` and border deepens to `#ffffff40`."*
5. *"Render the navigation: 64px height, `#0a0e1acc` background with 12px backdrop-blur, 1px `#ffffff14` bottom border, lightning-bolt glyph (gradient fill) + 'Qwik' wordmark on left, primary nav center, gradient CTA right."*
6. *"Add a violet badge: `#ac7ef422` (13% violet) background, `#ac7ef4` violet text, 9999 (pill) radius, padding 4px 10px, weight 600, JetBrains Mono. Used for version numbers and feature tags."*
### Iteration Guide
1. **Verify the canvas.** If the bg is not exactly `#0a0e1a`, the brand has drifted. Lighter navy reads as Solid; warmer navy reads as Astro.
2. **Confirm gradient direction.** Buttons use `90deg` (left-to-right); the wordmark glyph uses `135deg`. Other angles are off-brand.
3. **Audit halo presence.** If there is no violet halo behind hero copy or featured CTAs, the brand's depth signature is missing. Add `rgba(172, 126, 244, 0.4)` blurred at 32px.
4. **Check display family.** If the hero feels generic, push to Poppins. Inter is the safe fallback but loses the kinetic personality.
5. **Verify on-brand pairing.** White on violet is correct; near-black on cyan is the legibility inversion. White on cyan fails AA — never ship that.
6. **Confirm card radius at 16px.** If cards are at 8 or 12px, they read as Solid. Qwik's slightly-rounder 16px is part of the kinetic register.
7. **Audit gradient surface.** The gradient should appear on wordmark, CTAs, and 1–2 hero illustrations maximum. If covering more, the brand has flattened toward marketing template.
8. **Check border discipline.** All hairlines should be `#ffffff14` (8% white) by default. Random colored or thicker borders break the system.
1. Visual Theme & Atmosphere
Qwik’s marketing site is wired for kinetic energy. Open the page and
the first thing you feel is the gradient — #ac7ef4 violet flowing
into #18b6f6 electric blue, sweeping diagonally across the lightning-
bolt wordmark and bleeding behind the hero copy as a soft 40%-alpha
halo. The canvas is a cool near-black #0a0e1a, slightly bluer than
Astro’s cosmos navy and softer than Solid’s technical navy, and it
exists primarily as the ground from which the gradient emerges. This
is speed-as-aesthetic: the design language sells “instant” and
“resumable” by visually behaving like a charging arc.
The atmosphere is electric, kinetic, edge-of-the-future. Where Solid leans engineering-document and Astro leans content-cosmic, Qwik leans runtime-as-lightning. The gradient is the brand — not an accent on top of the brand, not a flourish, but the literal expression of the framework’s pitch: violet (the slow, traditional execution) on the left, electric blue (instant, resumed) on the right, the sweep between them is the resumability arc. The lightning-bolt glyph is what holds it together visually.
Depth comes from tonal-blue layering plus a brand-tinted halo.
Cards lift from #0a0e1a to #1a2040; hover brightens to #252b50.
The signature depth move is the violet halo (#ac7ef466, 40%
alpha, heavily blurred at 32px) that bleeds behind hero text and
primary CTAs, mimicking the corona of a charging arc. Borders are
uniform 8% white hairlines (#ffffff14); shadows are dark-tinted
and used sparingly. The gradient itself substitutes for most depth
moves — when a CTA needs to feel “lifted”, it gets a violet glow,
not a drop shadow.
Type pairs Inter for body and most display with Poppins as
the optional brand-display alternate for select moments. The
geometric-rounded character of Poppins — when used — gives the
marketing a slightly playful kinetic register, but the bulk of the
type is Inter at heavy weights with negative tracking. Code blocks
sit on #11162a (one step lighter than canvas) with JetBrains Mono.
The dev-tool default mono is foregrounded as primary content.
Key Characteristics
- Cool near-black canvas (
#0a0e1a) — slight blue tilt, never warm - Violet-to-cyan gradient (
#ac7ef4→#18b6f6) as primary brand - Lightning-bolt glyph in the wordmark — angular, kinetic geometry
- Violet halo (
#ac7ef466) as signature depth move - 8% white hairlines for borders — uniform across the system
- Inter Display + Poppins (optional) for kinetic display character
- JetBrains Mono on
#11162acode panels - Dark-default — no light variant offered
- Card radii at 16px — slightly more rounded than Solid (12px) or Astro
- Brand discipline: only purple-violet to electric blue, no warm hues
2. Color Palette & Roles
Primary
- bg (
#0a0e1a): cool near-black, the canvas of every section - text (
#ffffff): primary copy, full strength - brand (
#ac7ef4): Qwik violet, left endpoint of the gradient - accent (
#18b6f6): electric blue, right endpoint - on-brand (
#ffffff): white ON the violet (button text) - on-accent (
#0a0e1a): near-black ON the cyan (legibility inversion)
Brand & Dark
- brand-strong (
#8b5cf0): pressed violet, hover-down - accent-strong (
#0a9ad9): pressed cyan - gradient-from (
#ac7ef4): the violet endpoint, used in linear-gradient declarations - gradient-to (
#18b6f6): the cyan endpoint - gradient-via (
#7c3aed): optional middle stop for thicker gradient compositions - glow (
#ac7ef466): 40% alpha violet halo, the brand’s depth signature - glow-blue (
#18b6f666): 40% alpha cyan halo, secondary
Accent
- brand-soft (
#ac7ef422): 13% violet wash for callouts and badges - accent-soft (
#18b6f622): 13% blue wash - bg-soft (
#11162a): code-block surface, secondary panel - bg-strong (
#1a2040): card lift, raised surface
Interactive
- link (
#18b6f6): link picks up accent cyan, brightest ground-glow - link-hover (
#33d4ff): brighter cyan on hover - link-visited (
#c4b5fd): visited violet - selected (
#ac7ef422): selected-row violet tint - disabled-bg (
#252b50): disabled control surface - disabled-text (
#5a6478): disabled label
Neutral Scale
- text (
#ffffff): body, display - text-muted (
#a8b1c2): secondary copy, nav metadata - text-soft (
#7a8499): tertiary, deemphasized - text-faint (
#5a6478): quaternary helper labels - text-disabled (
#3a4258): disabled labels
Surface & Borders
- surface (
#1a2040): default card surface - surface-strong (
#252b50): hovered card - surface-muted (
#0d1224): pressed card - border (
#ffffff14): 8% white hairline, default - border-strong (
#ffffff26): 15% white, emphasized - border-subtle (
#ffffff0a): 4% white, near-invisible - border-brand (
#ac7ef466): violet 40% for branded borders (haloed cards) - divider (
#ffffff14): table rules
Shadow Colors
Shadows are deep-neutral on the dark canvas, but the brand’s depth signature is the violet halo — rgba(172, 126, 244, 0.4) blurred at 32px, used behind hero copy and primary CTAs. Where Stripe uses blue-tinted shadows on light grounds, Qwik uses violet-tinted glows on dark grounds — the inverse direction with the same brand-coloring intent.
Semantic
- success-bg (
#0d2818) / success-text (#86efac) / success-border (#22c55e) - warning-bg (
#2a2010) / warning-text (#fbbf24) / warning-border (#f59e0b) - danger-bg (
#2a1414) / danger-text (#fca5a5) / danger-border (#ef4444) - info-bg (
#0c2030) / info-text (#7dd3fc) / info-border (#0ea5e9)
3. Typography Rules
Font Family
- Primary display:
Poppins, fallback to"Inter Display",Inter, system stack - Body:
Inter, fallback to-apple-system,"system-ui","Segoe UI" - Mono:
"JetBrains Mono", fallback to"Fira Code",ui-monospace,Menlo,Consolas - OpenType features used:
ss01(Poppins/Inter alternates),cv01/cv11(Inter character variants),zero(slashed zero in JetBrains Mono),tnumin benchmark tables
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Poppins | 88 | 700 | 1.0 | -0.025em | ss01 | Hero only |
| display-large | Poppins | 72 | 700 | 1.05 | -0.02em | — | Marketing H1 |
| display | Poppins | 56 | 700 | 1.1 | -0.018em | — | Section openers |
| h1 | Poppins | 48 | 700 | 1.1 | -0.015em | — | Page titles |
| h2 | Poppins | 36 | 700 | 1.2 | -0.012em | — | Sub-section headers |
| h3 | Poppins | 28 | 600 | 1.25 | -0.008em | — | Feature titles |
| h4 | Poppins | 22 | 600 | 1.3 | -0.005em | — | Card titles |
| h5 | Poppins | 18 | 600 | 1.4 | 0 | — | Sidebar headers |
| eyebrow | Inter | 12 | 600 | 1.4 | 0.12em | uppercase | Section labels |
| body-lg | Inter | 18 | 400 | 1.6 | -0.005em | — | Hero subhead |
| body | Inter | 16 | 400 | 1.6 | 0 | — | Default body |
| body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Secondary body |
| caption | Inter | 13 | 500 | 1.5 | 0.01em | — | Metadata |
| micro | Inter | 11 | 600 | 1.4 | 0.04em | uppercase | Tags |
| code | JetBrains Mono | 14 | 400 | 1.6 | 0 | zero | Code blocks |
| code-sm | JetBrains Mono | 12 | 400 | 1.55 | 0 | zero | Inline code |
| code-tabular | JetBrains Mono | 14 | 500 | 1.5 | 0 | zero, tnum | Benchmark tables |
Principles
- Poppins for display, Inter for body. Poppins is geometric-rounded with broader x-height than Inter, lending the marketing a kinetic, slightly playful tone. The choice is deliberate: Poppins reads less Silicon-Valley than Geist, more “we are excited about this” than “we are serious infrastructure.”
- Negative tracking on display, neutral on body. Display rolls in tight (
-0.015emto-0.025em); body sits at0. The kinetic register depends on tight display. - One sans for body, one for display, one mono. No secondary cuts, no italic display, no decorative faces.
- Slashed zero in mono. OpenType
zerois enabled across all mono surfaces. - Eyebrow tracking is wider than peers. At
0.12em, eyebrows are slightly more spaced than Inter’s typical0.08em— the wider tracking signals “label” with extra emphasis. - Weight 700 is the display default. Where Solid uses 600/700 and Bun uses 800, Qwik centers on 700 — the kinetic-bold register without going woodtype-heavy.
4. Component Stylings
Buttons
Primary (gradient): linear-gradient(90deg, #ac7ef4, #18b6f6) background, #ffffff text, 10px radius, weight 600 in Poppins, padding 14px 28px. Hover adds violet halo (#ac7ef466 0 0 24px) and brightens 5%. The signature CTA — used for “Get started”, “Read the docs.”
Ghost: transparent background, #ffffff text, 1px solid #ffffff26 border, 10px radius, weight 500. Hover fills to #ffffff0a and border deepens to #ffffff40.
Violet (signature): #ac7ef4 solid background, #0a0e1a near-black text, 10px radius, weight 600. Hover deepens to #8b5cf0 with white text.
Link button: transparent, #18b6f6 cyan text, weight 500, underline on hover.
Cards
Default: #1a2040 background, 1px solid #ffffff14 hairline, 16px radius, padding 24px, ambient rgba(0, 0, 0, 0.2) 0 4px 12px shadow. Hover lifts to #252b50 background.
Haloed (signature): #1a2040 background, 1px solid #ac7ef466 violet border, 16px radius, padding 24px, violet halo shadow rgba(172, 126, 244, 0.2) 0 0 32px. Used for featured CTAs or primary feature cards — the brand’s depth-and-energy moment.
Badges & Tags
#ac7ef422 (13% violet) background, #ac7ef4 violet text, 9999 (pill) radius, padding 4px 10px, weight 600, mono font. Cyan variant for secondary tags: #18b6f622 background, #18b6f6 text.
Inputs
#11162a background, #ffffff text, 1px solid #ffffff26 border, 10px radius, padding 10px 14px. Focus ring: 0 0 0 3px rgba(172, 126, 244, 0.4) — the violet halo. Placeholder: #5a6478.
Navigation
#0a0e1acc (80% near-black) with 12px backdrop-blur, 1px solid #ffffff14 bottom border, 64px height. Lightning-bolt glyph + “Qwik” wordmark on the left, primary nav center, gradient CTA right.
Code blocks
#11162a (one step lighter than canvas) background, #e6e6e6 near-white text, 12px radius, padding 20px 24px, JetBrains Mono at 14px. Syntax highlighting: violet for keywords (matches brand), cyan for strings, near-white for identifiers, soft gray for comments.
Lightning-bolt glyph
The wordmark glyph is the signature visual element. Used at multiple scales — favicon (16px), nav (24px), feature illustrations (~80–120px), hero callouts (~200px). Always rendered with the gradient fill linear-gradient(135deg, #ac7ef4, #18b6f6) — never solid-colored, never gradient-rotated to vertical.
5. Layout Principles
Spacing System
Base unit is 4px. Scale: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160. Density is mid — 96px section padding, 24px card padding, 16px between elements.
Grid & Container
Container caps at 1280px with 24px gutters (slightly wider than Solid’s 1200px). Prose width: 720px. The grid is 12-column with frequent diagonal-element layouts — feature cards offset slightly, gradient bars sweeping at angles — that visually echo the lightning-bolt geometry.
Whitespace Philosophy
The dark canvas absorbs whitespace as void rather than as paper. Qwik compensates by using more contained layouts than light-canvas peers — sections often have explicit border-top/border-bottom hairlines to contain the page rather than letting elements float in deep space.
Section Cadence
Canvas runs continuously; alternation happens via the bg-soft (#11162a) bands and through gradient-band moments — full-width gradient strips that appear once or twice per page as section transitions.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Border accents, dividers |
| Standard | 6px | Inline tags, micro-pills |
| Comfortable | 10px | Inputs, primary buttons |
| Relaxed | 14px | Secondary cards |
| Large | 16px | Default cards, code blocks |
| Featured | 20px | Hero illustration frames |
| Pill | 9999px | Badges, status pills |
Radii lean slightly more rounded than Solid’s grid-aligned 8/12px ladder. The kinetic register supports the softer rounding — Qwik’s brand is fast and modern, not engineering-document. The lightning-bolt geometry — sharp angular kinks — echoes through chevron icons, section dividers, and the wordmark itself.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow, no border | Page canvas, full-bleed sections |
| 1 — Hairline | 1px solid #ffffff14 | Section dividers, subtle cards |
| 2 — Lifted | 1px border + rgba(0,0,0,0.2) 0 4px 12px | Default cards |
| 3 — Hovered | Lifted + brighter surface (#252b50) | Card hover |
| 4 — Elevated | rgba(0,0,0,0.4) 0 12px 24px -8px | Modals, popovers |
| 5 — Violet-haloed | rgba(172, 126, 244, 0.4) 0 0 32px | Featured CTAs, primary feature cards |
| 6 — Cyan-haloed | rgba(24, 182, 246, 0.4) 0 0 32px | Secondary brand emphasis (rare) |
Shadow Philosophy — Qwik is a brand-glow depth brand. Standard cards use deep neutral shadows on the dark canvas, but the brand’s signature depth is the violet halo — a 40%-alpha violet circle blurred at 32px, used behind hero copy and primary CTAs. The halo mimics the corona of a charging arc; it is the literal visual translation of “resumable execution as electricity.” Pure neutral shadows are present but understated; the brand-tinted glow does the emotional work.
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— feature reveals - Electric:
cubic-bezier(0.16, 1, 0.3, 1)— snappy, expo-out, kinetic — used on gradient sweeps, halo entrances, brand moments
Durations
- Fast (120ms): hover color shifts, link underline, badge state
- Standard (200ms): button hover lift, halo fade-in, focus ring
- Slow (360ms): section reveals, modal entrance, gradient sweeps
- Page (420ms): route transitions
Per-component Micro-states
- Button hover (gradient): violet halo fades in over 200ms, brightness +5%, no translateY (the halo is the lift)
- Card hover: surface brightens from
#1a2040to#252b50over 200ms; if haloed card, halo intensifies from 0.2 to 0.4 alpha - Link hover: underline grows 0→100% in 120ms; color brightens from
#18b6f6to#33d4ff - Lightning-bolt glyph: subtle gradient shimmer on hover — the gradient angle rotates 15° over 360ms ease-electric, then snaps back
- Page enter: hero gradient sweeps in from left to right over 360ms ease-electric, mimicking the resumability arc
- Focus: 3px violet halo fades in over 120ms
Page Transitions
420ms cross-fade with 24px translateY enter. Hero gradient sweeps in as part of the page-load animation. Reduced-motion strips this entirely.
Reduced Motion
prefers-reduced-motion: reduce honored. Gradient sweeps freeze (no rotation, no shimmer). Halos remain static (no fade-in pulse). translateY transforms become opacity-only fades. Page transitions become instantaneous. Focus rings remain visible.
9. Accessibility & A11y
Contrast Pairs
- Body on canvas (
#ffffffon#0a0e1a): 17.6:1 — AAA at all sizes - Muted on canvas (
#a8b1c2on#0a0e1a): 8.2:1 — AAA - Body on violet (
#ffffffon#ac7ef4): 4.5:1 — AA at body sizes (button text) - Body on cyan (
#0a0e1aon#18b6f6): 12.4:1 — AAA (the on-accent inversion) - Link on canvas (
#18b6f6on#0a0e1a): 8.6:1 — AAA - Code text on code-bg (
#e6e6e6on#11162a): 14.8:1 — AAA
Focus Indicators
3px solid rgba(172, 126, 244, 0.4) violet ring with 2px offset. Consistent across buttons, links, inputs, interactive cards. Visible on dark surfaces.
ARIA Patterns
- Combobox:
role="combobox"witharia-expanded,aria-controls,aria-activedescendant - Dialog:
role="dialog"aria-modal="true", focus trap, restore focus on close - Tooltip:
role="tooltip"witharia-describedby - Tabs:
role="tablist"/role="tab"/role="tabpanel"with arrow-key navigation - Code-copy:
aria-label="Copy code"with polite live region
Keyboard Navigation
- Tab order follows visual order
- Skip-to-content link visually hidden until focused
- Escape closes modals; Tab cycles within
- Code blocks: Tab to copy button, Enter to copy, focus returns
Screen Reader Hints
- Lightning-bolt glyph:
aria-hidden="true"when decorative;aria-label="Qwik"when used as logo - Decorative SVGs:
aria-hidden="true" - Code blocks: language announced via
aria-label - Gradient backgrounds: never communicate information through gradient alone
Reduced Motion
See §8. Brand-glow effects (halos) freeze at static state when reduced motion is honored.
10. Responsive Behavior
Breakpoints
| Name | Width | Notes |
|---|---|---|
| Mobile | < 640px | Single column, halos scale to 24px blur |
| Tablet | 640–1024px | 8-column grid, hero stacks |
| Desktop | 1024–1280px | Full 12-column grid |
| Wide | 1280–1536px | Container caps at 1280px |
| Ultra-wide | > 1536px | Container holds, side gutters expand |
Touch Targets
Minimum 44×44px on mobile. Buttons expand to 16×32px padding on mobile. Nav links get 48px height.
Collapsing Strategy
- Hero: 12-col → single-col; gradient halo scales 50%, headline drops one tier
- Feature grid: 3-up desktop → 2-up tablet → 1-up mobile
- Code blocks: full-bleed mobile, padded desktop
- Navigation: horizontal nav becomes hamburger drawer at < 1024px
- Haloed cards: halo blur scales down on mobile to avoid overwhelming small screens
Image Behavior
Lightning-bolt glyph is SVG with gradient defs — scales without loss. Marketing illustrations use srcset 1x/2x/3x. Card images crop to aspect-ratio: 16/9 desktop, 4/3 mobile.
Container Queries
Used in feature cards: at < 480px container width, internal layout collapses from horizontal to vertical regardless of viewport.
11. Content & Voice
Tone
Kinetic-technical, edge-of-the-future. Qwik’s voice is excited about speed. Where Solid says “fine-grained reactivity” with engineering reserve, Qwik says “instant” with a slight lean forward. The technical authority is real — resumability, hydration-free execution — but the register is energetic, almost evangelical.
Microcopy Patterns
- Button verbs: prefer kinetic actions (“Get started”, “Try it now”, “See it in action”) with slight enthusiasm
- Error messages: lead with the problem, then the fix, with a hint of forward-motion. Example:
Hydration mismatch detected. Qwik resumes — no hydration needed. Make sure your component is server-resumable. - Success confirmations: brief, can use exclamation-marked when celebratory (“Resumed!” “Loaded instantly”)
- Loading states: avoid; Qwik’s brand is “instant”, so visible loading is off-brand. If genuinely deferred, use skeleton with a subtle gradient shimmer
Empty States
What they say: “No routes registered yet. Try qwik new route /about to scaffold one.” (Action-shaped, command-named.)
What they don’t say: “It looks like you haven’t added any routes.” (Too apologetic; Qwik leans confident.)
CTA Verb Conventions
- Primary: “Get started” / “Try Qwik” / “Read the docs”
- Secondary: “View benchmarks” / “Explore examples” / “See it on GitHub”
- Footer CTA: “Build something fast” — speed-anchored
- Not used: “Sign up free”, “Buy now” — Qwik is open source
12. Dark Mode & Theming
Dark IS the default — no light variant offered.
Qwik’s identity is dark-canvas, gradient-on-dark, halo-on-dark. A light variant would erase the violet halo’s emotional impact (halos require dark grounds to glow), would flatten the gradient’s saturation against white, and would invert the brand’s “edge-of-the-future” register into something closer to corporate SaaS.
The only light surface on the entire site is occasional inverse moments — pricing tables, contrast callouts — where #ffffff background is used deliberately to break the dark continuity for emphasis. These appear once or twice per page maximum.
If a light variant ships in the future, the gradient endpoints would need to deepen significantly (#7c3aed to #0ea5e9) and the halo would need to become a soft drop shadow rather than a glow. But until then, dark is the only mode and the only mode that captures the brand voice.
13. Lineage & Influences
Qwik’s design language sits at the intersection of three lineages. From Stripe, Qwik inherits the diagonal-gradient hero treatment as primary brand surface — both brands commit to a single gradient as the visual signature. From Linear, Qwik inherits the brand-tinted halo behind hero copy as a depth strategy. From Vercel, the dark-canvas dev-tool template with single dominant accent. From Builder.io (Qwik’s parent company), the saturated-electric-accents-on-dark-grounds discipline. From synthwave/vaporwave aesthetics, the violet-to-cyan gradient register and the neon-on-dark chromatic logic.
What Qwik rejects: light-canvas defaults (Stripe, Deno, Bun), monochrome accent (Solid’s blue-on-blue), warm hues entirely (Bun, Astro’s cosmos navy with warm twilight). The brand’s chromatic discipline is rigorously cool — purple-violet to electric blue, no exceptions.
Named influences
- Stripe — diagonal-gradient hero treatment as primary brand surface. https://stripe.com
- Linear — brand-tinted halo behind hero copy as depth strategy. https://linear.app
- Vercel — dark-canvas dev-tool template with single dominant accent. https://vercel.com
- Builder.io — parent-company aesthetic, saturated electric accents on dark. https://www.builder.io
- Synthwave/vaporwave aesthetics — violet-to-cyan gradient register, neon-on-dark.
14. Do’s and Don’ts
Do’s
- Do lean on the violet-to-blue gradient as the primary brand surface — wordmark, CTA, hero halo. Single accent, no pairing with other hues.
- Do use Poppins for display when going for kinetic energy. Inter is the safe fallback; Poppins is the brand voice.
- Do apply the soft violet halo (
#ac7ef466blurred 32px) behind hero copy — it is the brand’s depth and energy signal. - Do keep the canvas at exact
#0a0e1a. Lighter navy reads as Solid; warmer navy reads as Astro. - Do use the lightning-bolt glyph at multiple scales — favicon, nav, feature illustrations, hero callouts.
- Do pair white-on-violet for buttons, near-black-on-cyan for legibility moments. The on-brand pair is white; the on-accent inversion is
#0a0e1a. - Do use 8% white hairlines uniformly across the system. Borders should be invisible until they need to articulate structure.
- Do lean on JetBrains Mono in code surfaces. The dev-tool default keeps the brand grounded.
- Do use violet halos on featured CTAs, cyan halos sparingly. Halos are scarce by design — one or two per page.
- Do keep section padding at 96px. The dark canvas needs breathing room to prevent claustrophobia.
Don’ts
- Don’t flatten the gradient to a single color. Both endpoints — the violet and the blue — must appear together; either alone reads as Astro or Solid.
- Don’t lighten the canvas to pure navy or warm twilight. The exact
#0a0e1acool near-black is what holds the gradient’s brightness. - Don’t mix in green or warm accents. Qwik’s chromatic surface is exclusively cool — purple-violet to electric blue, no exceptions.
- Don’t use white-on-cyan for buttons. The legibility falls below AA — use
#0a0e1anear-black ON the cyan instead. - Don’t apply the gradient to large surfaces. The hex pair is too saturated for full backgrounds; reserve for buttons, wordmark, hero halos, and small feature graphics.
- Don’t use drop shadows where halos belong. Halos are the brand’s depth signature; drop shadows undermine the kinetic register.
- Don’t rotate the gradient angle freely. The brand convention is
90deg(left-to-right) for buttons,135degfor the wordmark glyph. Other angles read as off-brand. - Don’t use solid backgrounds for the lightning-bolt glyph. The gradient fill is non-negotiable.
- Don’t introduce a light mode as the default. The brand identity depends on the dark canvas.
- Don’t use Berkeley Mono or other mono families. JetBrains is the brand-default.
15. Agent Prompt Guide
Quick Color Reference
bg: #0a0e1a
bg-soft: #11162a
surface: #1a2040
text: #ffffff
text-muted: #a8b1c2
brand: #ac7ef4 (violet)
accent: #18b6f6 (cyan)
gradient: linear-gradient(90deg, #ac7ef4, #18b6f6)
glow: #ac7ef466 (40% violet halo)
border: #ffffff14 (8% white)
link: #18b6f6Example Component Prompts
- “Create a hero with an 88px Poppins 700 headline at -0.025em tracking, 18px Inter body subhead, a violet-to-cyan gradient CTA button (
linear-gradient(90deg, #ac7ef4, #18b6f6)) with white text and weight 600. Behind the hero copy, place a violet halo (rgba(172, 126, 244, 0.4)blurred 32px). Canvas is#0a0e1a. Lightning-bolt glyph anchors the wordmark at top-left.” - “Design a haloed feature card with
#1a2040background, 1px solid#ac7ef466violet border, 16px radius, 24px padding, violet halo shadow (rgba(172, 126, 244, 0.2) 0 0 32px), a 28px Poppins 600 title, 16px Inter body. On hover, halo intensifies to 0.4 alpha.” - “Build a dark code block with
#11162abackground (one step lighter than canvas),#e6e6e6near-white text, JetBrains Mono at 14px, 12px radius, 20px×24px padding, slashed-zero enabled, violet keyword highlighting (#ac7ef4), cyan strings (#18b6f6).” - “Create a ghost button: transparent background, white text, 1px solid
#ffffff26border, 10px radius, weight 500 in Poppins, padding 14px 28px. Hover fills to#ffffff0aand border deepens to#ffffff40.” - “Render the navigation: 64px height,
#0a0e1accbackground with 12px backdrop-blur, 1px#ffffff14bottom border, lightning-bolt glyph (gradient fill) + ‘Qwik’ wordmark on left, primary nav center, gradient CTA right.” - “Add a violet badge:
#ac7ef422(13% violet) background,#ac7ef4violet text, 9999 (pill) radius, padding 4px 10px, weight 600, JetBrains Mono. Used for version numbers and feature tags.”
Iteration Guide
- Verify the canvas. If the bg is not exactly
#0a0e1a, the brand has drifted. Lighter navy reads as Solid; warmer navy reads as Astro. - Confirm gradient direction. Buttons use
90deg(left-to-right); the wordmark glyph uses135deg. Other angles are off-brand. - Audit halo presence. If there is no violet halo behind hero copy or featured CTAs, the brand’s depth signature is missing. Add
rgba(172, 126, 244, 0.4)blurred at 32px. - Check display family. If the hero feels generic, push to Poppins. Inter is the safe fallback but loses the kinetic personality.
- Verify on-brand pairing. White on violet is correct; near-black on cyan is the legibility inversion. White on cyan fails AA — never ship that.
- Confirm card radius at 16px. If cards are at 8 or 12px, they read as Solid. Qwik’s slightly-rounder 16px is part of the kinetic register.
- Audit gradient surface. The gradient should appear on wordmark, CTAs, and 1–2 hero illustrations maximum. If covering more, the brand has flattened toward marketing template.
- Check border discipline. All hairlines should be
#ffffff14(8% white) by default. Random colored or thicker borders break the system.
Drop qwik into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add qwik 2 · ship landing page
npx agentkit init --design qwik dark minimal
Vite
Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build to…
Docs
Install
Vite
webdesignhot
light minimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
Docs
Install
Vercel
webdesignhot
light sans
Tailwind CSS
The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, e…
Docs
Install
Tailwind CSS
webdesignhot