dark · sans · structured · cool · multi-theme
SolidJS
Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram.
By webdesignhot · www.solidjs.com
$ npx design-md add solid-js
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. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. 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
#0c1424 - bg-soft
#142037 - bg-strong
#1a2640 - surface
#1a2640 - surface-strong
#26334d - surface-muted
#0e1828 - text AAA · 16.7
#f0f4fa - text-strong
#ffffff - text-muted
#a8b3c7 - text-soft
#7a8499 - text-faint AA·LG · 3.1
#5a6478 - text-disabled
#3a4258 - brand — · 2.2
#2c4f7c - brand-strong
#1d3a5f - brand-soft
#2c4f7c33 - brand-deep
#0a1a2e - accent
#66e6ff - accent-strong
#33d4ff - accent-soft
#66e6ff22 - gradient-from
#2c4f7c - gradient-to
#66e6ff - glow
#66e6ff44 - link
#66e6ff - link-hover
#33d4ff - link-visited
#a78bfa - selected
#2c4f7c33 - disabled-bg
#26334d - disabled-text
#5a6478 - border
#ffffff14 - border-strong
#ffffff26 - border-subtle
#ffffff0a - border-cyan
#66e6ff66 - divider
#ffffff14 - shadow-deep
rgba(0, 0, 0, 0.4) - shadow-cyan
rgba(102, 230, 255, 0.32) - shadow-blue
rgba(44, 79, 124, 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
#0c1424
Ship faster than ever.
display-hero Gordita 80px w700 -0.025em
Ship faster than ever.
display-large Gordita 64px w700 -0.02em
Ship faster than ever.
display Gordita 52px w700 -0.018em
Ship faster than ever.
h1 Gordita 44px w700 -0.015em
Built for teams that ship.
h2 Gordita 34px w700 -0.012em
A complete kit
h3 Gordita 26px w600 0
The quick brown fox jumps over the lazy dog.
h4 Gordita 21px w600 0
The quick brown fox jumps over the lazy dog.
h5 Gordita 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.1em
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
- micro
2px - sm
4px - md
6px - lg
8px - xl
12px - card
12px - xxl
16px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
SolidJS's identity is one of the most literal logo-to-palette translations in the framework world. The wordmark is two-tone — a deep blue `#2c4f7c` on the left, a bright cyan `#66e6ff` on the right — and the entire site is scaled around that exact gradient. The canvas is `#0c1424`, a navy deep enough to read as technical rather than fashionable; cards lift to `#1a2640`, code blocks sit on `#142037`. Everything is a tonal step in the same blue family, a discipline that reads as engineering-document, not marketing. Type pairs Gordita (a slightly-rounded geometric sans) with Inter for body, and code uses JetBrains Mono — the dev-tool default. The closest design cousin is MDN at night or a hardware company's developer portal: dense, technical, blue-on-blue, with the only chromatic departure being the cyan glow that lights up hover states and CTAs. Solid sells itself on raw performance and fine-grained reactivity, and the site behaves the same way: no decoration that doesn't earn its place.
- Dense technical documentation aesthetic; navy canvas + cyan link.
- Code-as-content treatment; mono blocks foregrounded as primary surface.
- Engineering-document register — blue-tonal palette signaling infrastructure.
- Dark-canvas dev-tool template, gradient-led brand.
- Hardware developer portals (Intel, AMD, ARM)Engineering-portal aesthetic — dense, blue-tonal, code-foregrounded.
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: SolidJS
tagline: 'Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram.'
author: webdesignhot
source_url: https://www.solidjs.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [dev-tools]
tags: [dark, sans, structured, cool, multi-theme]
preview_swatch: ['#0c1424', '#2c4f7c', '#66e6ff']
related: [vite, vercel, tailwindcss]
description: 'SolidJS leans into a deep `#0c1424` navy with a brand gradient that runs from a saturated `#2c4f7c` blue into a glowing `#66e6ff` cyan — the two-tone palette that lives in the Solid wordmark itself. The site reads like a circuit diagram: dense, technical, blue-on-blue-on-cyan, with code blocks treated as primary content rather than chrome. Where Astro feels cosmic and Qwik feels kinetic, Solid feels infrastructural — the developer portal of a chip manufacturer rendered as marketing.'
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 blue+cyan brand gradient is invariant across themes.'
colors:
dark:
bg: '#0c1424' # deep technical navy canvas
bg-soft: '#142037' # secondary panel, code-block
bg-strong: '#1a2640' # card lift
surface: '#1a2640'
surface-strong: '#26334d'
surface-muted: '#0e1828'
text: '#f0f4fa' # near-white with cool tint
text-strong: '#ffffff'
text-muted: '#a8b3c7'
text-soft: '#7a8499'
text-faint: '#5a6478'
text-disabled: '#3a4258'
brand: '#2c4f7c' # Solid deep blue
brand-strong: '#1d3a5f'
brand-soft: '#2c4f7c33'
brand-deep: '#0a1a2e'
accent: '#66e6ff' # Solid bright cyan
accent-strong: '#33d4ff'
accent-soft: '#66e6ff22'
gradient-from: '#2c4f7c'
gradient-to: '#66e6ff'
glow: '#66e6ff44'
link: '#66e6ff'
link-hover: '#33d4ff'
link-visited: '#a78bfa'
selected: '#2c4f7c33'
disabled-bg: '#26334d'
disabled-text: '#5a6478'
border: '#ffffff14'
border-strong: '#ffffff26'
border-subtle: '#ffffff0a'
border-cyan: '#66e6ff66'
divider: '#ffffff14'
shadow-deep: 'rgba(0, 0, 0, 0.4)'
shadow-cyan: 'rgba(102, 230, 255, 0.32)'
shadow-blue: 'rgba(44, 79, 124, 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: '#0c1424'
light:
bg: '#ffffff' # docs light canvas
bg-soft: '#f8fafc' # subtle alt panel
bg-strong: '#f1f5f9' # raised tier
surface: '#ffffff'
surface-strong: '#f1f5f9'
surface-muted: '#fafbfc'
text: '#0c1424' # 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: '#2c4f7c' # deep blue is already AAA on white — invariant
brand-strong: '#1d3a5f'
brand-soft: 'rgba(44, 79, 124, 0.10)'
brand-deep: '#0a1a2e'
accent: '#0a9ad9' # deeper cyan for AAA on white
accent-strong: '#0e7490'
accent-soft: 'rgba(102, 230, 255, 0.18)'
gradient-from: '#2c4f7c' # gradient stays
gradient-to: '#66e6ff'
glow: 'rgba(102, 230, 255, 0.20)'
link: '#0a9ad9'
link-hover: '#0e7490'
link-visited: '#7c3aed'
selected: 'rgba(44, 79, 124, 0.08)'
disabled-bg: '#f1f5f9'
disabled-text: '#94a3b8'
border: '#e2e8f0' # slate-200
border-strong: '#cbd5e1' # slate-300
border-subtle: '#f1f5f9' # slate-100
border-cyan: 'rgba(102, 230, 255, 0.40)'
divider: '#e2e8f0'
shadow-deep: 'rgba(15, 23, 42, 0.12)'
shadow-cyan: 'rgba(102, 230, 255, 0.20)'
shadow-blue: 'rgba(44, 79, 124, 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: 'Gordita, "Inter Display", Inter, -apple-system, "system-ui", sans-serif'
weights: [500, 600, 700]
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: 80, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: 'ss01' }
display-large: { size: 64, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
display: { size: 52, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display }
h1: { size: 44, weight: 700, lineHeight: 1.1, tracking: '-0.015em', family: display }
h2: { size: 34, weight: 700, lineHeight: 1.2, tracking: '-0.012em', family: display }
h3: { size: 26, weight: 600, lineHeight: 1.3, tracking: '0', family: display }
h4: { size: 21, weight: 600, lineHeight: 1.35, tracking: '0', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.4, tracking: '0', family: display }
eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.1em', family: body, transform: 'uppercase' }
body-lg: { size: 18, weight: 400, lineHeight: 1.65, tracking: '-0.005em', family: body }
body: { size: 16, weight: 400, lineHeight: 1.65, 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: 4
md: 6
lg: 8
xl: 12
xxl: 16
card: 12
pill: 9999
spacing:
base: 4
scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128]
layout:
page-width: 1200
prose-width: 680
header-height: 64
gutter: 24
section-padding: 80
grid: 12
components:
button-primary:
bg: 'linear-gradient(90deg, #2c4f7c, #66e6ff)'
color: '#ffffff'
radius: 8
weight: 600
padding: '12px 24px'
font: display
hover: 'shadow #66e6ff44 0 0 24px; brightness(1.05)'
button-ghost:
bg: 'transparent'
color: '#66e6ff'
border: '1px solid #66e6ff66'
radius: 8
weight: 500
hover: 'bg #66e6ff11; border #66e6ff'
button-solid:
bg: '#2c4f7c'
color: '#ffffff'
radius: 8
weight: 600
hover: 'bg #1d3a5f'
button-link:
bg: 'transparent'
color: '#66e6ff'
underline: 'on hover'
weight: 500
card:
bg: '#1a2640'
border: '1px solid #ffffff14'
radius: 12
padding: '24px'
shadow: 'rgba(0, 0, 0, 0.2) 0 4px 12px'
card-tonal:
bg: '#142037'
border: '1px solid #ffffff0a'
radius: 12
padding: '20px'
badge:
bg: '#66e6ff22'
color: '#66e6ff'
radius: 9999
padding: '4px 10px'
weight: 600
font: mono
input:
bg: '#142037'
color: '#f0f4fa'
border: '1px solid #ffffff26'
radius: 8
padding: '10px 14px'
focus-ring: '0 0 0 3px rgba(102, 230, 255, 0.4)'
nav:
bg: '#0c1424cc'
backdrop-blur: 12
border-bottom: '1px solid #ffffff14'
height: 64
code-block:
bg: '#142037'
color: '#e6e6e6'
radius: 8
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-precise: 'cubic-bezier(0.32, 0.72, 0, 1)' # engineering-precise, slight overshoot resistance
duration-fast: 100
duration-standard: 180
duration-slow: 300
duration-page: 400
reduced-motion: 'respects prefers-reduced-motion: reduce — translateY transforms collapse to opacity-only fades; cyan glow halos remain static.'
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'
cyan-glow: 'rgba(102, 230, 255, 0.32) 0 0 24px'
blue-glow: 'rgba(44, 79, 124, 0.4) 0 0 24px'
ring: '0 0 0 3px rgba(102, 230, 255, 0.4)'
accessibility:
contrast-text-on-bg: 14.2 # AAA — #f0f4fa on #0c1424
contrast-muted-on-bg: 7.6 # AAA — #a8b3c7 on #0c1424
contrast-text-on-brand: 6.8 # AA — #ffffff on #2c4f7c
contrast-text-on-accent: 12.6 # AAA — #0c1424 on #66e6ff
contrast-link-on-bg: 11.4 # AAA — #66e6ff on #0c1424
focus-ring: '3px solid rgba(102, 230, 255, 0.4)'
focus-offset: '2px'
reduced-motion-honored: true
min-touch-target: 44
dark-mode: default # Dark IS the default; light variant exists for docs but marketing is dark-only
lineage:
summary: |
SolidJS's identity is one of the most literal logo-to-palette
translations in the framework world. The wordmark is two-tone —
a deep blue `#2c4f7c` on the left, a bright cyan `#66e6ff` on the
right — and the entire site is scaled around that exact gradient.
The canvas is `#0c1424`, a navy deep enough to read as technical
rather than fashionable; cards lift to `#1a2640`, code blocks sit
on `#142037`. Everything is a tonal step in the same blue family,
a discipline that reads as engineering-document, not marketing.
Type pairs Gordita (a slightly-rounded geometric sans) with Inter
for body, and code uses JetBrains Mono — the dev-tool default.
The closest design cousin is MDN at night or a hardware company's
developer portal: dense, technical, blue-on-blue, with the only
chromatic departure being the cyan glow that lights up hover
states and CTAs. Solid sells itself on raw performance and
fine-grained reactivity, and the site behaves the same way: no
decoration that doesn't earn its place.
influences:
- name: MDN Web Docs (dark mode)
role: Dense technical documentation aesthetic; navy canvas + cyan link.
url: https://developer.mozilla.org
- name: Stripe Docs
role: Code-as-content treatment; mono blocks foregrounded as primary surface.
url: https://stripe.com/docs
- name: Cloudflare
role: Engineering-document register — blue-tonal palette signaling infrastructure.
url: https://www.cloudflare.com
- name: Vercel
role: Dark-canvas dev-tool template, gradient-led brand.
url: https://vercel.com
- name: Hardware developer portals (Intel, AMD, ARM)
role: Engineering-portal aesthetic — dense, blue-tonal, code-foregrounded.
---
## 1. Visual Theme & Atmosphere
SolidJS's site is the most literal logo-to-design-system translation
in the framework space. The wordmark is a two-tone gradient — deep
blue `#2c4f7c` flowing into bright cyan `#66e6ff` — and the entire
marketing surface is built from that exact pair. The canvas is
`#0c1424`, a deep technical navy; cards lift to `#1a2640`; code
blocks sit on `#142037`. Every surface is a tonal step in the same
blue family, and the cyan only appears as the brand-gradient endpoint,
on hover states, and on the wordmark itself. The result reads as
**engineering documentation rendered as marketing** — dense,
blue-on-blue, with code treated as primary content rather than chrome.
The atmosphere is **infrastructural-precise**. Where Astro feels
cosmic and Nuxt feels Vue-warm, Solid feels like the developer portal
of a chip manufacturer. The page sells reactive primitives by
behaving like documentation: tight spacing (80px section padding,
slightly tighter than Bun's 96px), dense type, code blocks as the
largest visual element on the page. The cyan glow is not decorative
— it is the brand's depth signal, used on hover halos and CTA
emissions like the trace of an oscilloscope.
Depth is achieved through **tonal-blue stepping**: `#0c1424` →
`#142037` → `#1a2640` → `#26334d`, each step roughly 6% lighter than
the one below. Borders are uniform 8% white hairlines (`#ffffff14`);
shadows are dark-neutral and used sparingly. The signature depth
move is a soft cyan glow (`#66e6ff` at 20–30% alpha) behind hover
states and primary CTAs — the brand's literal visualization of
"reactive emission." Code blocks are foregrounded as primary content;
they are frequently the largest visual element on the page, in
keeping with Solid's documentation-first ethos.
Type pairs **Gordita** (display) with **Inter** (body) and **JetBrains
Mono** (code). Gordita is a slightly-rounded geometric sans — more
Avenir than Inter in feel — with rounder counters that give the
marketing a softer technical register, distinct from the Geist/Inter
monoculture. Body Inter at 16px on a generous 1.65 line-height
signals "read this carefully." Code uses JetBrains Mono at 14px on
the `#142037` panel, deliberately not a custom face, because Solid's
brand voice is "we are infrastructure, not fashion."
**Key Characteristics**
- Deep technical navy canvas (`#0c1424`) — engineering, not fashion
- Two-tone wordmark gradient (`#2c4f7c` → `#66e6ff`) drives the system
- Tonal-blue stepping for depth — every surface in the same family
- Cyan glow (`#66e6ff` at low alpha) as signature depth signal
- 8% white hairline borders, uniform across the system
- Gordita display + Inter body + JetBrains Mono code
- Code blocks as primary content — often largest visual element
- 80px section padding — slightly tighter than dev-tool peers
- 12px card radius, modest geometry
- Engineering-document register, dense and disciplined
## 2. Color Palette & Roles
### Primary
- **bg** (`#0c1424`): deep technical navy, the canvas
- **text** (`#f0f4fa`): primary, near-white with cool tint (not pure white)
- **brand** (`#2c4f7c`): deep blue, left endpoint of wordmark gradient
- **accent** (`#66e6ff`): bright cyan, right endpoint of gradient
- **on-brand** (`#ffffff`): white ON the brand blue
- **on-accent** (`#0c1424`): deep navy ON the cyan (legibility inversion)
### Brand & Dark
- **brand-strong** (`#1d3a5f`): darker pressed blue
- **brand-deep** (`#0a1a2e`): deepest blue near canvas — used for nested panels
- **accent-strong** (`#33d4ff`): pressed cyan
- **gradient-from** (`#2c4f7c`): gradient start
- **gradient-to** (`#66e6ff`): gradient end
- **glow** (`#66e6ff44`): 27% alpha cyan glow halo
### Accent
- **brand-soft** (`#2c4f7c33`): 20% blue wash for callouts
- **accent-soft** (`#66e6ff22`): 13% cyan wash for badges
- **bg-soft** (`#142037`): code-block surface, secondary panel
- **bg-strong** (`#1a2640`): card lift
### Interactive
- **link** (`#66e6ff`): link picks up cyan accent
- **link-hover** (`#33d4ff`): brighter cyan on hover
- **link-visited** (`#a78bfa`): visited soft violet (rare departure from blue)
- **selected** (`#2c4f7c33`): selected-row blue tint
- **disabled-bg** (`#26334d`): disabled control surface
- **disabled-text** (`#5a6478`): disabled label
### Neutral Scale
- **text-strong** (`#ffffff`): absolute white emphasis
- **text** (`#f0f4fa`): primary, slight cool tint — NOT pure white
- **text-muted** (`#a8b3c7`): secondary copy
- **text-soft** (`#7a8499`): tertiary, deemphasized
- **text-faint** (`#5a6478`): quaternary helper labels
- **text-disabled** (`#3a4258`): disabled
### Surface & Borders
- **surface** (`#1a2640`): default card surface
- **surface-strong** (`#26334d`): hovered card
- **surface-muted** (`#0e1828`): pressed card or nested panel
- **border** (`#ffffff14`): 8% white hairline, default
- **border-strong** (`#ffffff26`): 15% white, emphasized
- **border-subtle** (`#ffffff0a`): 4% white
- **border-cyan** (`#66e6ff66`): cyan 40% for emphasized branded borders
- **divider** (`#ffffff14`): table rules
### Shadow Colors
Shadows are **dark-neutral on the dark canvas**, but the brand's depth signature is the **cyan glow** — `rgba(102, 230, 255, 0.32)` blurred at 24px, used behind hover states and CTAs. Where Stripe uses blue-tinted shadows on light grounds, Solid uses cyan-emissive glows on dark grounds — emulating the trace of an oscilloscope or LED indicator on a circuit board.
### 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**: `Gordita`, 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` (Gordita/Inter alternate `g`), `cv01`/`cv11` (Inter character variants), `zero` (slashed zero in JetBrains Mono), `tnum` in benchmark/spec tables
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
| --- | --- | --- | --- | --- | --- | --- | --- |
| display-hero | Gordita | 80 | 700 | 1.0 | -0.025em | ss01 | Hero only |
| display-large | Gordita | 64 | 700 | 1.05 | -0.02em | — | Marketing H1 |
| display | Gordita | 52 | 700 | 1.1 | -0.018em | — | Section openers |
| h1 | Gordita | 44 | 700 | 1.1 | -0.015em | — | Page titles |
| h2 | Gordita | 34 | 700 | 1.2 | -0.012em | — | Sub-section headers |
| h3 | Gordita | 26 | 600 | 1.3 | 0 | — | Feature titles |
| h4 | Gordita | 21 | 600 | 1.35 | 0 | — | Card titles |
| h5 | Gordita | 18 | 600 | 1.4 | 0 | — | Sidebar headers |
| eyebrow | Inter | 12 | 600 | 1.4 | 0.1em | uppercase | Section labels |
| body-lg | Inter | 18 | 400 | 1.65 | -0.005em | — | Hero subhead |
| body | Inter | 16 | 400 | 1.65 | 0 | — | Default body — generous line-height |
| body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Secondary |
| 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 | Spec tables, benchmarks |
### Principles
1. **Gordita over Inter Display.** The slightly-rounded geometric character of Gordita gives Solid a softer technical register without sacrificing the engineering rigor. Inter Display would read as Vercel; Gordita reads as Solid.
2. **Generous line-height on body (1.65).** Body Inter sits on a more generous line-height than Bun's or Deno's 1.6 — signaling "read this carefully", supporting the documentation-first voice.
3. **Negative tracking on display, neutral on body.** Display rolls in tight (`-0.015em` to `-0.025em`); body stays at `0`. Tighter than Vercel's display tracking.
4. **No italic display, no decorative cuts.** Discipline mirrors the engineering-document register.
5. **Slashed zero in mono.** `zero` OpenType feature enabled across all mono surfaces.
6. **JetBrains Mono is canonical.** No custom mono face; the dev-tool-default mono is part of the brand voice. Custom mono would read as fashion; JetBrains reads as infrastructure.
7. **Eyebrow + display + body cadence.** Sections open with an uppercase eyebrow at `0.1em` tracking, then display, then body — the documentation-style hierarchy.
## 4. Component Stylings
### Buttons
**Primary (gradient)**: `linear-gradient(90deg, #2c4f7c, #66e6ff)` background, `#ffffff` text, 8px radius, weight 600 in Gordita, padding `12px 24px`. Hover adds cyan glow (`#66e6ff44 0 0 24px`) and brightens 5%. The signature CTA — used for "Get started", "Read the docs."
**Ghost (cyan)**: transparent background, `#66e6ff` text, 1px solid `#66e6ff66` border, 8px radius, weight 500. Hover fills to `#66e6ff11` and border deepens to `#66e6ff`.
**Solid blue**: `#2c4f7c` background, `#ffffff` text, 8px radius, weight 600. Hover deepens to `#1d3a5f`.
**Link button**: transparent, `#66e6ff` text, weight 500, underline on hover.
### Cards
**Default**: `#1a2640` background, 1px solid `#ffffff14` hairline, 12px radius, padding `24px`, ambient `rgba(0, 0, 0, 0.2) 0 4px 12px` shadow. Hover lifts to `#26334d`.
**Tonal**: `#142037` background (one step lighter than canvas), 1px solid `#ffffff0a` near-invisible border, 12px radius, padding `20px`. Used for nested panels, sidebar cards, less-emphasized content.
### Badges & Tags
`#66e6ff22` (13% cyan) background, `#66e6ff` cyan text, 9999 (pill) radius, padding `4px 10px`, weight 600, JetBrains Mono. Blue variant: `#2c4f7c33` background, `#a8b3c7` text.
### Inputs
`#142037` background, `#f0f4fa` text, 1px solid `#ffffff26` border, 8px radius, padding `10px 14px`. Focus ring: `0 0 0 3px rgba(102, 230, 255, 0.4)` — the cyan halo. Placeholder: `#5a6478`.
### Navigation
`#0c1424cc` (80% canvas) with `12px` backdrop-blur, 1px solid `#ffffff14` bottom border, 64px height. Two-tone wordmark glyph + "SolidJS" wordmark on the left, primary nav center, gradient CTA right.
### Code blocks
`#142037` background (one step lighter than canvas, distinctly its own surface), `#e6e6e6` near-white text, 8px radius, padding `20px 24px`, JetBrains Mono at 14px. Syntax highlighting: cyan for keywords, soft blue for strings, near-white for identifiers, muted gray for comments.
Code blocks are frequently the **largest visual element** on a page — Solid foregrounds them as primary content, in keeping with the documentation-first ethos. Where Bun and Deno treat code as a contrasting island, Solid treats code as the headline.
### Two-tone wordmark glyph
The signature visual — used at multiple scales. Always rendered with the brand gradient (`linear-gradient(90deg, #2c4f7c, #66e6ff)`). The glyph is angular but with slightly-rounded corners, echoing Gordita's geometric character.
## 5. Layout Principles
### Spacing System
Base unit is **4px**. Scale: `2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128`. Density is **mid-tight** — 80px section padding (slightly less than 96px peer default), 24px card padding. The tighter rhythm reflects the documentation register: more content per scroll, less marketing breathing room.
### Grid & Container
Container caps at **1200px** with **24px gutters**. Prose width: 680px. The grid is 12-column with frequent two-pane layouts (prose / code) that mirror Stripe Docs — Solid borrows this structure deliberately, treating documentation pages as a sibling of marketing pages.
### Whitespace Philosophy
The dark canvas absorbs whitespace as void. Solid compensates with explicit hairline borders on sections — borders articulate structure where light-canvas brands let whitespace do the work. The `#142037` `bg-soft` panels also do structural work, dividing sections without requiring large vertical gaps.
### Section Cadence
Canvas runs continuously; alternation happens via `bg-soft` (`#142037`) bands every 2–3 sections. Brand-band moments (full-cyan sections) are essentially absent; cyan is reserved for accents, glows, and the wordmark. Code-block-as-section is a deliberate pattern — entire sections built around large code panels.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
| --- | --- | --- |
| Micro | 2px | Border accents on dividers |
| Standard | 4px | Inline tags, micro-pills |
| Comfortable | 6px | Inputs, secondary buttons |
| Relaxed | 8px | Primary buttons, default UI |
| Large | 12px | Cards |
| Featured | 16px | Hero illustration frames (rare) |
| Pill | 9999px | Badges, status pills |
The geometry is grid-aligned and modest — nothing rounds past 12px except status pills, in keeping with the engineering-document register. Where Qwik leans 16px-rounded for kinetic energy, Solid stays at 8/12px for engineering precision. Compound radii are absent.
## 7. Depth & Elevation
| Level | Treatment | Use |
| --- | --- | --- |
| 0 — Flat | No shadow, no border | Page canvas |
| 1 — Hairline | 1px solid `#ffffff14` | Section dividers, tonal cards |
| 2 — Lifted | 1px border + `rgba(0,0,0,0.2) 0 4px 12px` | Default cards |
| 3 — Hovered | Lifted + brighter surface (`#26334d`) | Card hover |
| 4 — Elevated | `rgba(0,0,0,0.4) 0 12px 24px -8px` | Modals, popovers |
| 5 — Cyan-glow | `rgba(102, 230, 255, 0.32) 0 0 24px` | CTA hover, focus halo |
**Shadow Philosophy** — Solid is a **tonal-step depth** brand. The primary depth strategy is tonal-blue stepping: `#0c1424` → `#142037` → `#1a2640` → `#26334d`, each surface ~6% lighter than the one below. Hairline borders articulate structure; drop shadows are present but understated. The brand-tinted depth signal is the **cyan glow** — `rgba(102, 230, 255, 0.32)` blurred at 24px, used on CTA hovers and focus rings. The glow mimics an oscilloscope trace or LED emission — the engineering-document equivalent of "reactive primitive firing."
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — feature reveals
- **Precise**: `cubic-bezier(0.32, 0.72, 0, 1)` — engineering-precise, used on UI state changes that need to feel deliberate rather than springy
### Durations
- **Fast (100ms)**: hover color shifts, link underline (faster than dev-tool default)
- **Standard (180ms)**: button hover lift, glow fade-in, focus ring
- **Slow (300ms)**: section reveals, modal entrance
- **Page (400ms)**: route transitions
Solid's durations are **slightly faster** than peers (100/180/300 vs typical 120/200/320) — the engineering-precise voice favors responsiveness over indulgence.
### Per-component Micro-states
- **Button hover (gradient)**: cyan glow fades in over 180ms, brightness +5%, no translateY
- **Card hover**: surface brightens from `#1a2640` to `#26334d` over 180ms
- **Link hover**: underline grows 0→100% in 100ms; color brightens from `#66e6ff` to `#33d4ff`
- **Focus**: 3px cyan halo fades in over 100ms
- **Code-block copy**: copy button fades in on block hover over 180ms; on click, "Copied" confirmation appears with cyan glow then fades
### Page Transitions
400ms cross-fade with 16px translateY enter. Canvas remains constant; only inline content shifts. Reduced motion strips the translateY.
### Reduced Motion
`prefers-reduced-motion: reduce` honored. translateY transforms become opacity-only fades. Cyan glows remain static (no fade-in pulse). Page transitions become instantaneous. Focus rings remain visible.
## 9. Accessibility & A11y
### Contrast Pairs
- **Body on canvas** (`#f0f4fa` on `#0c1424`): **14.2:1** — AAA at all sizes
- **Muted on canvas** (`#a8b3c7` on `#0c1424`): **7.6:1** — AAA
- **Body on brand** (`#ffffff` on `#2c4f7c`): **6.8:1** — AA at body sizes
- **Body on accent** (`#0c1424` on `#66e6ff`): **12.6:1** — AAA (the on-accent inversion)
- **Link on canvas** (`#66e6ff` on `#0c1424`): **11.4:1** — AAA
- **Code on code-bg** (`#e6e6e6` on `#142037`): **13.2:1** — AAA
### Focus Indicators
3px solid `rgba(102, 230, 255, 0.4)` cyan 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
- **Two-pane docs**: `role="navigation"` on sidebar, `role="main"` on content, `role="complementary"` on TOC
### Keyboard Navigation
- Tab order follows visual order
- Skip-to-content link visually hidden until focused
- Two-pane docs: Tab cycles sidebar → main → TOC; arrow keys navigate sidebar tree
- Code blocks: Tab to copy button, Enter to copy, focus returns
- Modals: Tab cycles within, Escape closes
### Screen Reader Hints
- Two-tone wordmark: `aria-label="SolidJS"` on the SVG when used as logo
- Decorative SVGs: `aria-hidden="true"`
- Code blocks: language announced via `aria-label`
- Gradient buttons: text content is the label, never overridden
### Reduced Motion
See §8. Cyan glows freeze at static state; non-essential transforms become opacity fades.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Notes |
| --- | --- | --- |
| Mobile | < 640px | Single column, glow halos scale to 16px blur |
| Tablet | 640–1024px | 8-column grid, two-pane docs collapses |
| Desktop | 1024–1280px | Full 12-column grid, two-pane docs active |
| Wide | 1280–1536px | Container caps at 1200px |
| Ultra-wide | > 1536px | Container holds, gutters expand |
### Touch Targets
Minimum 44×44px on mobile. Buttons expand to `14×26px` padding. Nav links get 48px height.
### Collapsing Strategy
- **Hero**: 12-col → single-col; gradient illustration scales 50%
- **Feature grid**: 3-up desktop → 2-up tablet → 1-up mobile
- **Two-pane docs**: 3-col (sidebar / content / TOC) → single-col with drawer-based sidebar at < 1024px
- **Code blocks**: full-bleed on mobile, padded on desktop
- **Glow halos**: scale blur radius down on mobile to avoid overwhelming small screens
### Image Behavior
Two-tone wordmark SVG with gradient defs — scales without loss. Marketing illustrations (rare; Solid is text-heavy) use `srcset` 1x/2x/3x. Card images crop to `aspect-ratio: 16/9` desktop, `4/3` mobile.
### Container Queries
Used in feature cards and code-block-with-prose layouts: at < 480px container width, prose+code splits collapse to vertical stacks regardless of viewport.
## 11. Content & Voice
### Tone
**Engineering-precise, documentation-first.** Solid's voice is calm and technical. Where Qwik says "instant" with excitement, Solid says "fine-grained reactivity" with reserve. Where Bun says "freshly-baked", Solid says "primitives that compose." The brand's confidence comes from rigor, not enthusiasm.
### Microcopy Patterns
- **Button verbs**: prefer technical actions ("Read the docs", "View the API", "Try in playground") over kinetic verbs
- **Error messages**: lead with the technical reality, then the fix. Example: `Reactive context lost. Make sure your `createSignal` is called within a component or `createRoot`.` — names the primitive, names the fix.
- **Success confirmations**: brief, period-terminated, never exclamation. "Saved." "Built."
- **Loading states**: minimal; Solid's voice is "instant by design", so visible loading is rare
### Empty States
What they say: "No signals registered. Use `createSignal()` to begin." (Primitive-named, technical-direct.)
What they don't say: "It looks like you haven't created any signals yet." (Too apologetic; Solid does not apologize for technical depth.)
### CTA Verb Conventions
- **Primary**: "Read the docs" / "Try the playground" / "View the API"
- **Secondary**: "Browse examples" / "See benchmarks" / "Read the RFC"
- **Footer CTA**: "Get started in seconds" — time-anchored
- **Not used**: "Sign up free" — Solid is open source; "Learn more" — too vague for the engineering register
## 12. Dark Mode & Theming
**Dark IS the default for marketing; documentation has a light variant.**
Solid's marketing identity is dark-canvas, blue-tonal, cyan-emissive — a light variant for the homepage would erase the engineering-portal voice and flatten the brand to a generic light-mode SaaS template.
The documentation site **does** offer a light theme, where the canvas becomes `#ffffff`, body type becomes `#0c1424`, the brand gradient is preserved (it works on both grounds), and code blocks remain dark (`#142037`) as the constant island. The light docs theme is functional, not the brand voice — readers who want a less-fatiguing reading experience for long sessions choose it.
If a future light marketing variant ships (currently not planned), the canvas would become `#ffffff`, the brand-soft callouts would become `#dbeafe` (soft blue), the cyan glow would become a soft cyan drop shadow, and the engineering-precise register would be preserved through tight type and dense layout. But until then, marketing is dark-only.
## 13. Lineage & Influences
Solid's design language sits at the intersection of three lineages. From **MDN at night**, Solid inherits the dense technical-documentation aesthetic — navy canvas, cyan link, code-foregrounded layout. From **Stripe Docs**, the code-as-content treatment and the two-pane prose/code layout pattern. From **Cloudflare**, the engineering-document register and the blue-tonal palette signaling infrastructure rather than fashion. From **Vercel**, the dark-canvas dev-tool template and the gradient-led brand convention. From **hardware developer portals** (Intel, AMD, ARM, NVIDIA), the engineering-portal aesthetic — dense, blue-tonal, code-foregrounded, with the kind of restrained chromatic discipline that signals "this is for people who care about clock cycles."
What Solid rejects: warm canvas (Bun, Stripe Press), gradient hero as decoration (Qwik turns the gradient into a light show; Solid keeps it chromatic-only), illustrative mascot (Deno's dinosaur is off-brand for engineering rigor), kinetic motion (Solid's animations are precise, not springy).
**Named influences**
- **MDN Web Docs (dark mode)** — dense technical documentation aesthetic. https://developer.mozilla.org
- **Stripe Docs** — code-as-content treatment. https://stripe.com/docs
- **Cloudflare** — engineering-document register. https://www.cloudflare.com
- **Vercel** — dark-canvas dev-tool template. https://vercel.com
- **Hardware developer portals** (Intel, AMD, ARM) — engineering-portal aesthetic.
## 14. Do's and Don'ts
### Do's
- **Do** scale the entire palette around the wordmark gradient. Every blue should be a tonal step between `#2c4f7c` and `#66e6ff`.
- **Do** treat code blocks as primary content. SolidJS is sold on reactive primitives; mono blocks should feel like the headline, not the footnote.
- **Do** use cyan glow (`#66e6ff` at low alpha) for hover states and CTA halos — it is the brand's depth signal.
- **Do** use Gordita display for the rounded-geometric character. Inter Display is acceptable fallback but loses the Solid voice.
- **Do** keep section padding tight (80px). The engineering-document register favors density.
- **Do** use generous body line-height (1.65). Body Inter at 1.6 reads as marketing; at 1.65, it reads as documentation.
- **Do** keep card radius at 12px maximum. Larger radii read as Qwik or Astro; Solid stays modest.
- **Do** use the on-accent inversion (`#0c1424` ON the cyan) for CTA legibility. White on cyan fails AA.
- **Do** lean on JetBrains Mono. The dev-tool default is part of "we are infrastructure, not fashion."
- **Do** reserve cyan for accents, glows, links, and the wordmark endpoint. It should appear in 5–10% of visual area.
### Don'ts
- **Don't** introduce a non-blue accent. Greens, oranges, and warm hues break the engineering-document register.
- **Don't** soften the canvas with a purple tilt. The exact `#0c1424` is what separates Solid from Astro and Linear; warmer or more colorful navies flatten the brand.
- **Don't** use Gordita below 500 weight for headlines; the rounded geometric character lives in the heavier cuts.
- **Don't** flatten the gradient to a single color. The brand identity is the two-tone — both endpoints must appear together on the wordmark.
- **Don't** use white-on-cyan for buttons. Use `#0c1424` near-black ON the cyan for legibility.
- **Don't** apply illustrative mascots to the marketing surface. Solid's voice is engineering-document; mascots break the register.
- **Don't** add gradients to large surfaces. The two-tone gradient is reserved for wordmark, CTAs, and 1–2 hero illustrations maximum.
- **Don't** use spring or bounce easing. Solid's motion is engineering-precise — clean cubic-beziers, no overshoot.
- **Don't** lean on drop shadows for depth. The depth strategy is tonal-blue stepping plus cyan glow, not shadow stacking.
- **Don't** use Berkeley Mono or Fira Mono for code. JetBrains is the brand-default mono.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #0c1424
bg-soft: #142037
surface: #1a2640
text: #f0f4fa
text-muted: #a8b3c7
brand: #2c4f7c (deep blue)
accent: #66e6ff (cyan)
gradient: linear-gradient(90deg, #2c4f7c, #66e6ff)
glow: #66e6ff44 (27% cyan halo)
border: #ffffff14 (8% white)
link: #66e6ff
on-brand: #ffffff
on-accent: #0c1424
```
### Example Component Prompts
1. *"Create a hero with an 80px Gordita 700 headline at -0.025em tracking, 18px Inter body subhead at 1.65 line-height, a blue-to-cyan gradient CTA button (`linear-gradient(90deg, #2c4f7c, #66e6ff)`) with white text and weight 600. Canvas is `#0c1424`. Two-tone wordmark glyph anchors the top-left."*
2. *"Design a feature card with `#1a2640` background, 1px solid `#ffffff14` hairline border, 12px radius, 24px padding, ambient `rgba(0,0,0,0.2) 0 4px 12px` shadow, a 26px Gordita 600 title, 16px Inter body. On hover, surface brightens to `#26334d` over 180ms."*
3. *"Build a code-block-as-section: full-width `#142037` panel, `#e6e6e6` near-white text, JetBrains Mono at 14px, 8px radius, 20px×24px padding, slashed-zero enabled, cyan keyword highlighting (`#66e6ff`). The code block is the largest visual element on the page."*
4. *"Create a ghost cyan button: transparent background, `#66e6ff` text, 1px solid `#66e6ff66` border, 8px radius, weight 500 in Gordita, padding 12px 24px. Hover fills to `#66e6ff11` and border deepens to solid `#66e6ff`."*
5. *"Render the navigation: 64px height, `#0c1424cc` background with 12px backdrop-blur, 1px `#ffffff14` bottom border, two-tone wordmark glyph (gradient fill) + 'SolidJS' wordmark on left, primary nav center, gradient CTA right."*
6. *"Add a cyan badge: `#66e6ff22` (13% cyan) background, `#66e6ff` cyan text, 9999 (pill) radius, padding 4px 10px, weight 600, JetBrains Mono. Used for version numbers and API status tags."*
### Iteration Guide
1. **Verify the canvas.** If bg is not `#0c1424`, the brand has drifted. Lighter navy reads as Qwik or Astro; warmer reads as Linear.
2. **Confirm tonal stepping.** Cards should be `#1a2640`; bg-soft should be `#142037`. Each step ~6% lighter. If the depth ladder breaks, the engineering-document register flattens.
3. **Audit cyan usage.** Cyan should appear in 5–10% of visual area — accents, links, glow halos, wordmark endpoint. If covering more, the brand has overcorrected toward fashion.
4. **Check display family.** If the hero feels generic, push to Gordita. Inter Display is acceptable fallback but loses the rounded geometric character.
5. **Verify body line-height.** Body Inter should be at 1.65. If at 1.6 or below, the documentation voice has flattened.
6. **Confirm card radius at 12px max.** Larger radii read as Qwik or Astro; Solid stays modest.
7. **Audit code-block prominence.** Code blocks should be foregrounded, often the largest element on a page. If they read as footnotes, the documentation-first ethos has slipped.
8. **Check glow discipline.** Cyan glows should appear on CTA hovers and focus rings only. If glows are everywhere, the brand has over-emoted.
1. Visual Theme & Atmosphere
SolidJS’s site is the most literal logo-to-design-system translation
in the framework space. The wordmark is a two-tone gradient — deep
blue #2c4f7c flowing into bright cyan #66e6ff — and the entire
marketing surface is built from that exact pair. The canvas is
#0c1424, a deep technical navy; cards lift to #1a2640; code
blocks sit on #142037. Every surface is a tonal step in the same
blue family, and the cyan only appears as the brand-gradient endpoint,
on hover states, and on the wordmark itself. The result reads as
engineering documentation rendered as marketing — dense,
blue-on-blue, with code treated as primary content rather than chrome.
The atmosphere is infrastructural-precise. Where Astro feels cosmic and Nuxt feels Vue-warm, Solid feels like the developer portal of a chip manufacturer. The page sells reactive primitives by behaving like documentation: tight spacing (80px section padding, slightly tighter than Bun’s 96px), dense type, code blocks as the largest visual element on the page. The cyan glow is not decorative — it is the brand’s depth signal, used on hover halos and CTA emissions like the trace of an oscilloscope.
Depth is achieved through tonal-blue stepping: #0c1424 →
#142037 → #1a2640 → #26334d, each step roughly 6% lighter than
the one below. Borders are uniform 8% white hairlines (#ffffff14);
shadows are dark-neutral and used sparingly. The signature depth
move is a soft cyan glow (#66e6ff at 20–30% alpha) behind hover
states and primary CTAs — the brand’s literal visualization of
“reactive emission.” Code blocks are foregrounded as primary content;
they are frequently the largest visual element on the page, in
keeping with Solid’s documentation-first ethos.
Type pairs Gordita (display) with Inter (body) and JetBrains
Mono (code). Gordita is a slightly-rounded geometric sans — more
Avenir than Inter in feel — with rounder counters that give the
marketing a softer technical register, distinct from the Geist/Inter
monoculture. Body Inter at 16px on a generous 1.65 line-height
signals “read this carefully.” Code uses JetBrains Mono at 14px on
the #142037 panel, deliberately not a custom face, because Solid’s
brand voice is “we are infrastructure, not fashion.”
Key Characteristics
- Deep technical navy canvas (
#0c1424) — engineering, not fashion - Two-tone wordmark gradient (
#2c4f7c→#66e6ff) drives the system - Tonal-blue stepping for depth — every surface in the same family
- Cyan glow (
#66e6ffat low alpha) as signature depth signal - 8% white hairline borders, uniform across the system
- Gordita display + Inter body + JetBrains Mono code
- Code blocks as primary content — often largest visual element
- 80px section padding — slightly tighter than dev-tool peers
- 12px card radius, modest geometry
- Engineering-document register, dense and disciplined
2. Color Palette & Roles
Primary
- bg (
#0c1424): deep technical navy, the canvas - text (
#f0f4fa): primary, near-white with cool tint (not pure white) - brand (
#2c4f7c): deep blue, left endpoint of wordmark gradient - accent (
#66e6ff): bright cyan, right endpoint of gradient - on-brand (
#ffffff): white ON the brand blue - on-accent (
#0c1424): deep navy ON the cyan (legibility inversion)
Brand & Dark
- brand-strong (
#1d3a5f): darker pressed blue - brand-deep (
#0a1a2e): deepest blue near canvas — used for nested panels - accent-strong (
#33d4ff): pressed cyan - gradient-from (
#2c4f7c): gradient start - gradient-to (
#66e6ff): gradient end - glow (
#66e6ff44): 27% alpha cyan glow halo
Accent
- brand-soft (
#2c4f7c33): 20% blue wash for callouts - accent-soft (
#66e6ff22): 13% cyan wash for badges - bg-soft (
#142037): code-block surface, secondary panel - bg-strong (
#1a2640): card lift
Interactive
- link (
#66e6ff): link picks up cyan accent - link-hover (
#33d4ff): brighter cyan on hover - link-visited (
#a78bfa): visited soft violet (rare departure from blue) - selected (
#2c4f7c33): selected-row blue tint - disabled-bg (
#26334d): disabled control surface - disabled-text (
#5a6478): disabled label
Neutral Scale
- text-strong (
#ffffff): absolute white emphasis - text (
#f0f4fa): primary, slight cool tint — NOT pure white - text-muted (
#a8b3c7): secondary copy - text-soft (
#7a8499): tertiary, deemphasized - text-faint (
#5a6478): quaternary helper labels - text-disabled (
#3a4258): disabled
Surface & Borders
- surface (
#1a2640): default card surface - surface-strong (
#26334d): hovered card - surface-muted (
#0e1828): pressed card or nested panel - border (
#ffffff14): 8% white hairline, default - border-strong (
#ffffff26): 15% white, emphasized - border-subtle (
#ffffff0a): 4% white - border-cyan (
#66e6ff66): cyan 40% for emphasized branded borders - divider (
#ffffff14): table rules
Shadow Colors
Shadows are dark-neutral on the dark canvas, but the brand’s depth signature is the cyan glow — rgba(102, 230, 255, 0.32) blurred at 24px, used behind hover states and CTAs. Where Stripe uses blue-tinted shadows on light grounds, Solid uses cyan-emissive glows on dark grounds — emulating the trace of an oscilloscope or LED indicator on a circuit board.
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:
Gordita, 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(Gordita/Inter alternateg),cv01/cv11(Inter character variants),zero(slashed zero in JetBrains Mono),tnumin benchmark/spec tables
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Gordita | 80 | 700 | 1.0 | -0.025em | ss01 | Hero only |
| display-large | Gordita | 64 | 700 | 1.05 | -0.02em | — | Marketing H1 |
| display | Gordita | 52 | 700 | 1.1 | -0.018em | — | Section openers |
| h1 | Gordita | 44 | 700 | 1.1 | -0.015em | — | Page titles |
| h2 | Gordita | 34 | 700 | 1.2 | -0.012em | — | Sub-section headers |
| h3 | Gordita | 26 | 600 | 1.3 | 0 | — | Feature titles |
| h4 | Gordita | 21 | 600 | 1.35 | 0 | — | Card titles |
| h5 | Gordita | 18 | 600 | 1.4 | 0 | — | Sidebar headers |
| eyebrow | Inter | 12 | 600 | 1.4 | 0.1em | uppercase | Section labels |
| body-lg | Inter | 18 | 400 | 1.65 | -0.005em | — | Hero subhead |
| body | Inter | 16 | 400 | 1.65 | 0 | — | Default body — generous line-height |
| body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Secondary |
| 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 | Spec tables, benchmarks |
Principles
- Gordita over Inter Display. The slightly-rounded geometric character of Gordita gives Solid a softer technical register without sacrificing the engineering rigor. Inter Display would read as Vercel; Gordita reads as Solid.
- Generous line-height on body (1.65). Body Inter sits on a more generous line-height than Bun’s or Deno’s 1.6 — signaling “read this carefully”, supporting the documentation-first voice.
- Negative tracking on display, neutral on body. Display rolls in tight (
-0.015emto-0.025em); body stays at0. Tighter than Vercel’s display tracking. - No italic display, no decorative cuts. Discipline mirrors the engineering-document register.
- Slashed zero in mono.
zeroOpenType feature enabled across all mono surfaces. - JetBrains Mono is canonical. No custom mono face; the dev-tool-default mono is part of the brand voice. Custom mono would read as fashion; JetBrains reads as infrastructure.
- Eyebrow + display + body cadence. Sections open with an uppercase eyebrow at
0.1emtracking, then display, then body — the documentation-style hierarchy.
4. Component Stylings
Buttons
Primary (gradient): linear-gradient(90deg, #2c4f7c, #66e6ff) background, #ffffff text, 8px radius, weight 600 in Gordita, padding 12px 24px. Hover adds cyan glow (#66e6ff44 0 0 24px) and brightens 5%. The signature CTA — used for “Get started”, “Read the docs.”
Ghost (cyan): transparent background, #66e6ff text, 1px solid #66e6ff66 border, 8px radius, weight 500. Hover fills to #66e6ff11 and border deepens to #66e6ff.
Solid blue: #2c4f7c background, #ffffff text, 8px radius, weight 600. Hover deepens to #1d3a5f.
Link button: transparent, #66e6ff text, weight 500, underline on hover.
Cards
Default: #1a2640 background, 1px solid #ffffff14 hairline, 12px radius, padding 24px, ambient rgba(0, 0, 0, 0.2) 0 4px 12px shadow. Hover lifts to #26334d.
Tonal: #142037 background (one step lighter than canvas), 1px solid #ffffff0a near-invisible border, 12px radius, padding 20px. Used for nested panels, sidebar cards, less-emphasized content.
Badges & Tags
#66e6ff22 (13% cyan) background, #66e6ff cyan text, 9999 (pill) radius, padding 4px 10px, weight 600, JetBrains Mono. Blue variant: #2c4f7c33 background, #a8b3c7 text.
Inputs
#142037 background, #f0f4fa text, 1px solid #ffffff26 border, 8px radius, padding 10px 14px. Focus ring: 0 0 0 3px rgba(102, 230, 255, 0.4) — the cyan halo. Placeholder: #5a6478.
Navigation
#0c1424cc (80% canvas) with 12px backdrop-blur, 1px solid #ffffff14 bottom border, 64px height. Two-tone wordmark glyph + “SolidJS” wordmark on the left, primary nav center, gradient CTA right.
Code blocks
#142037 background (one step lighter than canvas, distinctly its own surface), #e6e6e6 near-white text, 8px radius, padding 20px 24px, JetBrains Mono at 14px. Syntax highlighting: cyan for keywords, soft blue for strings, near-white for identifiers, muted gray for comments.
Code blocks are frequently the largest visual element on a page — Solid foregrounds them as primary content, in keeping with the documentation-first ethos. Where Bun and Deno treat code as a contrasting island, Solid treats code as the headline.
Two-tone wordmark glyph
The signature visual — used at multiple scales. Always rendered with the brand gradient (linear-gradient(90deg, #2c4f7c, #66e6ff)). The glyph is angular but with slightly-rounded corners, echoing Gordita’s geometric character.
5. Layout Principles
Spacing System
Base unit is 4px. Scale: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128. Density is mid-tight — 80px section padding (slightly less than 96px peer default), 24px card padding. The tighter rhythm reflects the documentation register: more content per scroll, less marketing breathing room.
Grid & Container
Container caps at 1200px with 24px gutters. Prose width: 680px. The grid is 12-column with frequent two-pane layouts (prose / code) that mirror Stripe Docs — Solid borrows this structure deliberately, treating documentation pages as a sibling of marketing pages.
Whitespace Philosophy
The dark canvas absorbs whitespace as void. Solid compensates with explicit hairline borders on sections — borders articulate structure where light-canvas brands let whitespace do the work. The #142037 bg-soft panels also do structural work, dividing sections without requiring large vertical gaps.
Section Cadence
Canvas runs continuously; alternation happens via bg-soft (#142037) bands every 2–3 sections. Brand-band moments (full-cyan sections) are essentially absent; cyan is reserved for accents, glows, and the wordmark. Code-block-as-section is a deliberate pattern — entire sections built around large code panels.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Border accents on dividers |
| Standard | 4px | Inline tags, micro-pills |
| Comfortable | 6px | Inputs, secondary buttons |
| Relaxed | 8px | Primary buttons, default UI |
| Large | 12px | Cards |
| Featured | 16px | Hero illustration frames (rare) |
| Pill | 9999px | Badges, status pills |
The geometry is grid-aligned and modest — nothing rounds past 12px except status pills, in keeping with the engineering-document register. Where Qwik leans 16px-rounded for kinetic energy, Solid stays at 8/12px for engineering precision. Compound radii are absent.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow, no border | Page canvas |
| 1 — Hairline | 1px solid #ffffff14 | Section dividers, tonal cards |
| 2 — Lifted | 1px border + rgba(0,0,0,0.2) 0 4px 12px | Default cards |
| 3 — Hovered | Lifted + brighter surface (#26334d) | Card hover |
| 4 — Elevated | rgba(0,0,0,0.4) 0 12px 24px -8px | Modals, popovers |
| 5 — Cyan-glow | rgba(102, 230, 255, 0.32) 0 0 24px | CTA hover, focus halo |
Shadow Philosophy — Solid is a tonal-step depth brand. The primary depth strategy is tonal-blue stepping: #0c1424 → #142037 → #1a2640 → #26334d, each surface ~6% lighter than the one below. Hairline borders articulate structure; drop shadows are present but understated. The brand-tinted depth signal is the cyan glow — rgba(102, 230, 255, 0.32) blurred at 24px, used on CTA hovers and focus rings. The glow mimics an oscilloscope trace or LED emission — the engineering-document equivalent of “reactive primitive firing.”
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— feature reveals - Precise:
cubic-bezier(0.32, 0.72, 0, 1)— engineering-precise, used on UI state changes that need to feel deliberate rather than springy
Durations
- Fast (100ms): hover color shifts, link underline (faster than dev-tool default)
- Standard (180ms): button hover lift, glow fade-in, focus ring
- Slow (300ms): section reveals, modal entrance
- Page (400ms): route transitions
Solid’s durations are slightly faster than peers (100/180/300 vs typical 120/200/320) — the engineering-precise voice favors responsiveness over indulgence.
Per-component Micro-states
- Button hover (gradient): cyan glow fades in over 180ms, brightness +5%, no translateY
- Card hover: surface brightens from
#1a2640to#26334dover 180ms - Link hover: underline grows 0→100% in 100ms; color brightens from
#66e6ffto#33d4ff - Focus: 3px cyan halo fades in over 100ms
- Code-block copy: copy button fades in on block hover over 180ms; on click, “Copied” confirmation appears with cyan glow then fades
Page Transitions
400ms cross-fade with 16px translateY enter. Canvas remains constant; only inline content shifts. Reduced motion strips the translateY.
Reduced Motion
prefers-reduced-motion: reduce honored. translateY transforms become opacity-only fades. Cyan glows remain static (no fade-in pulse). Page transitions become instantaneous. Focus rings remain visible.
9. Accessibility & A11y
Contrast Pairs
- Body on canvas (
#f0f4faon#0c1424): 14.2:1 — AAA at all sizes - Muted on canvas (
#a8b3c7on#0c1424): 7.6:1 — AAA - Body on brand (
#ffffffon#2c4f7c): 6.8:1 — AA at body sizes - Body on accent (
#0c1424on#66e6ff): 12.6:1 — AAA (the on-accent inversion) - Link on canvas (
#66e6ffon#0c1424): 11.4:1 — AAA - Code on code-bg (
#e6e6e6on#142037): 13.2:1 — AAA
Focus Indicators
3px solid rgba(102, 230, 255, 0.4) cyan 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 - Two-pane docs:
role="navigation"on sidebar,role="main"on content,role="complementary"on TOC
Keyboard Navigation
- Tab order follows visual order
- Skip-to-content link visually hidden until focused
- Two-pane docs: Tab cycles sidebar → main → TOC; arrow keys navigate sidebar tree
- Code blocks: Tab to copy button, Enter to copy, focus returns
- Modals: Tab cycles within, Escape closes
Screen Reader Hints
- Two-tone wordmark:
aria-label="SolidJS"on the SVG when used as logo - Decorative SVGs:
aria-hidden="true" - Code blocks: language announced via
aria-label - Gradient buttons: text content is the label, never overridden
Reduced Motion
See §8. Cyan glows freeze at static state; non-essential transforms become opacity fades.
10. Responsive Behavior
Breakpoints
| Name | Width | Notes |
|---|---|---|
| Mobile | < 640px | Single column, glow halos scale to 16px blur |
| Tablet | 640–1024px | 8-column grid, two-pane docs collapses |
| Desktop | 1024–1280px | Full 12-column grid, two-pane docs active |
| Wide | 1280–1536px | Container caps at 1200px |
| Ultra-wide | > 1536px | Container holds, gutters expand |
Touch Targets
Minimum 44×44px on mobile. Buttons expand to 14×26px padding. Nav links get 48px height.
Collapsing Strategy
- Hero: 12-col → single-col; gradient illustration scales 50%
- Feature grid: 3-up desktop → 2-up tablet → 1-up mobile
- Two-pane docs: 3-col (sidebar / content / TOC) → single-col with drawer-based sidebar at < 1024px
- Code blocks: full-bleed on mobile, padded on desktop
- Glow halos: scale blur radius down on mobile to avoid overwhelming small screens
Image Behavior
Two-tone wordmark SVG with gradient defs — scales without loss. Marketing illustrations (rare; Solid is text-heavy) use srcset 1x/2x/3x. Card images crop to aspect-ratio: 16/9 desktop, 4/3 mobile.
Container Queries
Used in feature cards and code-block-with-prose layouts: at < 480px container width, prose+code splits collapse to vertical stacks regardless of viewport.
11. Content & Voice
Tone
Engineering-precise, documentation-first. Solid’s voice is calm and technical. Where Qwik says “instant” with excitement, Solid says “fine-grained reactivity” with reserve. Where Bun says “freshly-baked”, Solid says “primitives that compose.” The brand’s confidence comes from rigor, not enthusiasm.
Microcopy Patterns
- Button verbs: prefer technical actions (“Read the docs”, “View the API”, “Try in playground”) over kinetic verbs
- Error messages: lead with the technical reality, then the fix. Example:
Reactive context lost. Make sure yourcreateSignalis called within a component orcreateRoot.— names the primitive, names the fix. - Success confirmations: brief, period-terminated, never exclamation. “Saved.” “Built.”
- Loading states: minimal; Solid’s voice is “instant by design”, so visible loading is rare
Empty States
What they say: “No signals registered. Use createSignal() to begin.” (Primitive-named, technical-direct.)
What they don’t say: “It looks like you haven’t created any signals yet.” (Too apologetic; Solid does not apologize for technical depth.)
CTA Verb Conventions
- Primary: “Read the docs” / “Try the playground” / “View the API”
- Secondary: “Browse examples” / “See benchmarks” / “Read the RFC”
- Footer CTA: “Get started in seconds” — time-anchored
- Not used: “Sign up free” — Solid is open source; “Learn more” — too vague for the engineering register
12. Dark Mode & Theming
Dark IS the default for marketing; documentation has a light variant.
Solid’s marketing identity is dark-canvas, blue-tonal, cyan-emissive — a light variant for the homepage would erase the engineering-portal voice and flatten the brand to a generic light-mode SaaS template.
The documentation site does offer a light theme, where the canvas becomes #ffffff, body type becomes #0c1424, the brand gradient is preserved (it works on both grounds), and code blocks remain dark (#142037) as the constant island. The light docs theme is functional, not the brand voice — readers who want a less-fatiguing reading experience for long sessions choose it.
If a future light marketing variant ships (currently not planned), the canvas would become #ffffff, the brand-soft callouts would become #dbeafe (soft blue), the cyan glow would become a soft cyan drop shadow, and the engineering-precise register would be preserved through tight type and dense layout. But until then, marketing is dark-only.
13. Lineage & Influences
Solid’s design language sits at the intersection of three lineages. From MDN at night, Solid inherits the dense technical-documentation aesthetic — navy canvas, cyan link, code-foregrounded layout. From Stripe Docs, the code-as-content treatment and the two-pane prose/code layout pattern. From Cloudflare, the engineering-document register and the blue-tonal palette signaling infrastructure rather than fashion. From Vercel, the dark-canvas dev-tool template and the gradient-led brand convention. From hardware developer portals (Intel, AMD, ARM, NVIDIA), the engineering-portal aesthetic — dense, blue-tonal, code-foregrounded, with the kind of restrained chromatic discipline that signals “this is for people who care about clock cycles.”
What Solid rejects: warm canvas (Bun, Stripe Press), gradient hero as decoration (Qwik turns the gradient into a light show; Solid keeps it chromatic-only), illustrative mascot (Deno’s dinosaur is off-brand for engineering rigor), kinetic motion (Solid’s animations are precise, not springy).
Named influences
- MDN Web Docs (dark mode) — dense technical documentation aesthetic. https://developer.mozilla.org
- Stripe Docs — code-as-content treatment. https://stripe.com/docs
- Cloudflare — engineering-document register. https://www.cloudflare.com
- Vercel — dark-canvas dev-tool template. https://vercel.com
- Hardware developer portals (Intel, AMD, ARM) — engineering-portal aesthetic.
14. Do’s and Don’ts
Do’s
- Do scale the entire palette around the wordmark gradient. Every blue should be a tonal step between
#2c4f7cand#66e6ff. - Do treat code blocks as primary content. SolidJS is sold on reactive primitives; mono blocks should feel like the headline, not the footnote.
- Do use cyan glow (
#66e6ffat low alpha) for hover states and CTA halos — it is the brand’s depth signal. - Do use Gordita display for the rounded-geometric character. Inter Display is acceptable fallback but loses the Solid voice.
- Do keep section padding tight (80px). The engineering-document register favors density.
- Do use generous body line-height (1.65). Body Inter at 1.6 reads as marketing; at 1.65, it reads as documentation.
- Do keep card radius at 12px maximum. Larger radii read as Qwik or Astro; Solid stays modest.
- Do use the on-accent inversion (
#0c1424ON the cyan) for CTA legibility. White on cyan fails AA. - Do lean on JetBrains Mono. The dev-tool default is part of “we are infrastructure, not fashion.”
- Do reserve cyan for accents, glows, links, and the wordmark endpoint. It should appear in 5–10% of visual area.
Don’ts
- Don’t introduce a non-blue accent. Greens, oranges, and warm hues break the engineering-document register.
- Don’t soften the canvas with a purple tilt. The exact
#0c1424is what separates Solid from Astro and Linear; warmer or more colorful navies flatten the brand. - Don’t use Gordita below 500 weight for headlines; the rounded geometric character lives in the heavier cuts.
- Don’t flatten the gradient to a single color. The brand identity is the two-tone — both endpoints must appear together on the wordmark.
- Don’t use white-on-cyan for buttons. Use
#0c1424near-black ON the cyan for legibility. - Don’t apply illustrative mascots to the marketing surface. Solid’s voice is engineering-document; mascots break the register.
- Don’t add gradients to large surfaces. The two-tone gradient is reserved for wordmark, CTAs, and 1–2 hero illustrations maximum.
- Don’t use spring or bounce easing. Solid’s motion is engineering-precise — clean cubic-beziers, no overshoot.
- Don’t lean on drop shadows for depth. The depth strategy is tonal-blue stepping plus cyan glow, not shadow stacking.
- Don’t use Berkeley Mono or Fira Mono for code. JetBrains is the brand-default mono.
15. Agent Prompt Guide
Quick Color Reference
bg: #0c1424
bg-soft: #142037
surface: #1a2640
text: #f0f4fa
text-muted: #a8b3c7
brand: #2c4f7c (deep blue)
accent: #66e6ff (cyan)
gradient: linear-gradient(90deg, #2c4f7c, #66e6ff)
glow: #66e6ff44 (27% cyan halo)
border: #ffffff14 (8% white)
link: #66e6ff
on-brand: #ffffff
on-accent: #0c1424Example Component Prompts
- “Create a hero with an 80px Gordita 700 headline at -0.025em tracking, 18px Inter body subhead at 1.65 line-height, a blue-to-cyan gradient CTA button (
linear-gradient(90deg, #2c4f7c, #66e6ff)) with white text and weight 600. Canvas is#0c1424. Two-tone wordmark glyph anchors the top-left.” - “Design a feature card with
#1a2640background, 1px solid#ffffff14hairline border, 12px radius, 24px padding, ambientrgba(0,0,0,0.2) 0 4px 12pxshadow, a 26px Gordita 600 title, 16px Inter body. On hover, surface brightens to#26334dover 180ms.” - “Build a code-block-as-section: full-width
#142037panel,#e6e6e6near-white text, JetBrains Mono at 14px, 8px radius, 20px×24px padding, slashed-zero enabled, cyan keyword highlighting (#66e6ff). The code block is the largest visual element on the page.” - “Create a ghost cyan button: transparent background,
#66e6fftext, 1px solid#66e6ff66border, 8px radius, weight 500 in Gordita, padding 12px 24px. Hover fills to#66e6ff11and border deepens to solid#66e6ff.” - “Render the navigation: 64px height,
#0c1424ccbackground with 12px backdrop-blur, 1px#ffffff14bottom border, two-tone wordmark glyph (gradient fill) + ‘SolidJS’ wordmark on left, primary nav center, gradient CTA right.” - “Add a cyan badge:
#66e6ff22(13% cyan) background,#66e6ffcyan text, 9999 (pill) radius, padding 4px 10px, weight 600, JetBrains Mono. Used for version numbers and API status tags.”
Iteration Guide
- Verify the canvas. If bg is not
#0c1424, the brand has drifted. Lighter navy reads as Qwik or Astro; warmer reads as Linear. - Confirm tonal stepping. Cards should be
#1a2640; bg-soft should be#142037. Each step ~6% lighter. If the depth ladder breaks, the engineering-document register flattens. - Audit cyan usage. Cyan should appear in 5–10% of visual area — accents, links, glow halos, wordmark endpoint. If covering more, the brand has overcorrected toward fashion.
- Check display family. If the hero feels generic, push to Gordita. Inter Display is acceptable fallback but loses the rounded geometric character.
- Verify body line-height. Body Inter should be at 1.65. If at 1.6 or below, the documentation voice has flattened.
- Confirm card radius at 12px max. Larger radii read as Qwik or Astro; Solid stays modest.
- Audit code-block prominence. Code blocks should be foregrounded, often the largest element on a page. If they read as footnotes, the documentation-first ethos has slipped.
- Check glow discipline. Cyan glows should appear on CTA hovers and focus rings only. If glows are everywhere, the brand has over-emoted.
Drop solid-js into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add solid-js 2 · ship landing page
npx agentkit init --design solid-js 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