dark · sans · developer · workflow · neon
DESIGN.md inspired by Trigger.dev
Background jobs in the dark — Satoshi on near-black, one electric lime for action.
By webdesignhot · trigger.dev ↗
$ npx @webdesignhot/design-md add trigger-dev
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Aesop Monochrome-warm apothecary — ivory canvas, charcoal type, Suisse Int'l set small, 0px corners. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Amplitude Light-canvas digital-analytics surface — IBM Plex Sans, grey #565656 body, black full-pill CTAs and a signature #1e61f0 blue. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Anytype Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Black Forest Labs Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Captions Near-white studio canvas, an Exposure display, and a violet brand keyed off a full crayon-box of CSS color vars. Caraway Wholesome non-toxic-cookware DTC — Suisse Works serif on warm off-white, deep teal-green pill CTAs, pastel colorway palette. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudflare Infrastructure-grade calm — white canvas, dark hero band, FT Kunst Grotesk, signature Cloudflare orange, full-pill CTAs. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Coda White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Craft Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. dbt Labs dbt orange Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Drizzle ORM Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glean White enterprise canvas, near-black indigo headlines, and one electric Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Graza Squeeze-bottle olive-oil DTC — quirky GT Alpina Typewriter on peachy-cream, olive type, chartreuse-lime CTAs at 32px. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. Harvey Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. HeyGen Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Inngest Durable workflows on a near-black canvas — Whyte display, muted gold CTAs, sharp 0px edges. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Intercom Cream canvas, near-black Saans display, and electric-cobalt JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lambda Near-black Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. Liquid Death Black canvas, condensed all-caps Acumin Pro, stark black-and-white — heavy-metal brutalism for canned water. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Loom White canvas, Charlie Display sans, and a confident Atlassian blue pill — async video that feels like a calm, friendly workspace. LottieFiles White-canvas animation studio — DM Sans display at 96px, Inter body, near-black text, one signature teal #019d91. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mejuri Monochrome luxury — white canvas, near-black ink, Syndicat Grotesk small caps and a Simon Mono accent. The jewelry photography does all the color work. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Netlify White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Our Place Warm-heritage cookware DTC — Cheltenham serif at light 300 on a cream canvas, terracotta SHOP NOW CTAs, Plaid body. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Penpot Open-source design-and-code platform — dark hero, Work Sans display, mint-green action surface on a white canvas. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. Prisma White-paper canvas, navy ink, a single confident teal — the type-safe data layer dressed as documentation. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Relume Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder. Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Scale AI White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Sierra Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SKIMS Nude-neutral minimal luxury — cream canvas, dark photographic hero, warm near-black #2d2a26, sharp 0px. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spline Pure-black 3D-design canvas with electric-blue CTAs and a playful multi-color accent set — the browser becomes the viewport. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Stability AI A near-black studio floor where Archivo headlines run light and a single lavender pill carries the only colour. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Synthesia A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Temporal Near-black engineering canvas, Aeonik at hairline-light 300, signature indigo CTA — durable-execution gravity for distributed-systems people. Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. Tinybird Near-black developer canvas lit by one bright mint-green — managed ClickHouse with sharp, zero-radius CTAs. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Todoist Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. Upstash Serverless data, daylight calm — a pale-grey canvas, deep green-black type, and one electric Upstash green. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Vapi Near-black developer canvas lit by a signature lime and a playful multi-color set — Avantt display at 80px over Season Sans body, cream text, r12 CTAs. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Vuori Coastal-California performance calm — Aktiv Grotesk on pure white, warm near-black `#333333` ink, restrained small type (28px h1), photography-led, sharp 0px corners. Premium-athletic that never raises its voice. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. Windsurf Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Wispr Flow Pale lemon-cream paper, EB Garamond at 120px, and a lavender download pill — voice dictation that dresses like a literary journal. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. xAI White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#121317 - bg-deep
#0c0e0f - bg-elev-1
#191b1f - bg-elev-2
#212327 - bg-elev-3
#2a2d33 - surface
#212327 - surface-alt
#191b1f - surface-deep
#0c0e0f - brand AAA · 15.1
#a8ff53 - brand-hover
#b8ff73 - brand-pressed
#93e63f - brand-deep
#7ec92f - brand-glow
#a8ff5333 - on-brand
#121317 - accent
#7655fd - accent-hover
#8a6dff - accent-soft
#7655fd26 - accent-deep
#5e40d8 - link
#a8ff53 - link-hover
#b8ff73 - selected
#a8ff5326 - disabled
#2a2d33 - disabled-text
#5e6470 - text AAA · 13.1
#d7d9dd - text-heading
#e8e9ec - text-muted
#878c99 - text-soft
#b5b8c0 - text-faint AA·LG · 3.1
#5e6470 - border — · 1.3
#2a2d33 - border-soft
#ffffff14 - border-strong
#ffffff26 - border-brand
#a8ff5366 - shadow-ambient
rgba(0,0,0,0.4) - shadow-standard
rgba(0,0,0,0.6) - shadow-elevated
rgba(0,0,0,0.75) - shadow-glow
rgba(168,255,83,0.30) - success
#a8ff53 - success-bg
#1a2410 - warning
#fbbf24 - warning-bg
#2a2110 - danger
#fb5151 - danger-bg
#2a1414 - info
#7655fd - info-bg
#1a1530
Ship faster than ever.
display-hero Satoshi-Variable 80px w700 -0.03em
Ship faster than ever.
display-lg Satoshi-Variable 60px w600 -0.025em
Ship faster than ever.
h1 Satoshi-Variable 60px w600 -0.025em
Built for teams that ship.
h2 Satoshi-Variable 40px w600 -0.018em
A complete kit
h3 Satoshi-Variable 28px w600 -0.01em
The quick brown fox jumps over the lazy dog.
h4 Satoshi-Variable 20px w600 -0.005em
The quick brown fox jumps over the lazy dog.
eyebrow Satoshi-Variable 20px w600 0
The quick brown fox jumps over the lazy dog.
body-lg Geist 18px w400 0
The quick brown fox jumps over the lazy dog.
body Geist 16px w400 0
The quick brown fox jumps over the lazy dog.
button Geist 15px w600 0
The quick brown fox jumps over the lazy dog.
body-sm Geist 14px w400 0
The quick brown fox jumps over the lazy dog.
button-sm Geist 14px w600 0
npx @webdesignhot/design-md add stripe
code-body "Geist Mono" 14px w400 0
OUR DESIGN SYSTEM
label Geist 13px w500 0
The quick brown fox jumps over the lazy dog.
badge Geist 12px w600 0.02em
OUR DESIGN SYSTEM
caption Geist 12px w500 0.02em
OUR DESIGN SYSTEM
code-label "Geist Mono" 12px w500 0.04em
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 48px
- step-10 64px
- step-11 80px
- step-12 96px
- step-13 128px
- step-14 160px
- micro
2px - sm
4px - md
8px - lg
12px - xl
16px - featured
20px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 8/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → accent
- muted → text-muted
- border → border
- ring → border-brand
Trigger.dev is the open-source background-jobs and AI-workflow brand taken to its terminal dark conclusion. The canvas is `#121317` — a near-black that reads colder and more clinical than Railway's eggplant or GitHub's charcoal, the colour of a terminal at rest. Display type is Satoshi at 60px / 600 weight with tight `-0.025em` tracking — a geometric grotesque that feels engineered rather than literary, the opposite pole from Railway's serif. Body is Geist (Vercel's open-source workhorse), placing Trigger.dev squarely in the modern Vercel-adjacent developer-tool lineage. What sets it apart is the accent set: a single high-voltage lime `#a8ff53` for every action — the colour of a `200 OK`, a passing test, a successful run — paired with an electric purple `#7655fd` reserved for documents, gradients, and secondary emphasis. The lime-on-black contrast is deliberately loud; it is the brand shouting "it worked" in the only palette a developer trusts. CTAs split their geometry: announcement and filter pills run full `9999px`, while action buttons and control chips hold a sharp `4px` — terminal-square rather than friendly-rounded.
- Geist body font, near-black substrate, single confident accent against dark, generous vertical rhythm.
- Geist Sans for body and Geist Mono for code anchor Trigger.dev in the modern Vercel-class developer aesthetic.
- Geometric grotesque display face at 600 weight — engineered, neutral, the structural opposite of a serif headline.
- Dark developer canvas, restrained palette, square-cornered control chips and segmented toggles.
- Open-source dev-tool register: a single neon-green brand colour signalling "it works" against a dark substrate.
- Lime-on-black as the visual language of a passing run; the page reads like a streaming log rather than a marketing poster.
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: Trigger.dev
tagline: 'Background jobs in the dark — Satoshi on near-black, one electric lime for action.'
updated_at: 2026-05-29T21:44:19.911Z
published_at: 2026-05-29T21:44:19.911Z
author: webdesignhot
source_url: https://trigger.dev
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools]
tags: [dark, sans, developer, workflow, neon]
preview_swatch: ['#121317', '#a8ff53', '#7655fd']
related: [railway, vercel, supabase]
description: 'Trigger.dev''s marketing site is a near-black canvas (`#121317`) running Satoshi at 60px/600 for display and Geist for body, with a single high-voltage lime brand (`#a8ff53`) for action and an electric-purple secondary (`#7655fd`) for documents and gradients. It is the open-source background-jobs / AI-workflow register taken to its terminal conclusion: dark substrate, neon accent, pill CTAs at 9999px alongside square 4px control chips — a developer brand that looks like a running log file rather than a launch poster.'
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
accent: accent
muted: text-muted
border: border
ring: border-brand
colors:
# Primary
bg: '#121317' # near-black canvas — the entire page substrate
bg-deep: '#0c0e0f' # footer / deepest section drop (observed --cc-footer-bg)
bg-elev-1: '#191b1f' # subtle lift above canvas
bg-elev-2: '#212327' # control chip / secondary panel (observed CTA bg)
bg-elev-3: '#2a2d33' # popover / hover surface
surface: '#212327' # secondary panel base
surface-alt: '#191b1f' # card panel
surface-deep: '#0c0e0f' # nested deep panel
# Brand & Lime
brand: '#a8ff53' # electric lime — primary action, rgb(168,255,83)
brand-hover: '#b8ff73' # brightened lime on hover
brand-pressed: '#93e63f' # pressed lime
brand-deep: '#7ec92f' # deep lime for emphasized strokes
brand-glow: '#a8ff5333' # 20% lime wash for glow
on-brand: '#121317' # near-black text on lime (lime is too bright for white)
# Accent (electric purple — documents, gradients, secondary)
accent: '#7655fd' # electric purple secondary
accent-hover: '#8a6dff' # purple hover
accent-soft: '#7655fd26' # 15% purple wash
accent-deep: '#5e40d8' # deeper purple
# Interactive
link: '#a8ff53' # links default to lime
link-hover: '#b8ff73' # brightened
selected: '#a8ff5326' # 15% lime selection wash
disabled: '#2a2d33' # disabled bg
disabled-text: '#5e6470' # disabled text
# Neutral Scale
text: '#d7d9dd' # primary copy — rgb(215,217,221)
text-heading: '#e8e9ec' # headlines — rgb(232,233,236)
text-muted: '#878c99' # secondary copy / H2 sub — rgb(135,140,153)
text-soft: '#b5b8c0' # tertiary / inactive tab — rgb(181,184,192)
text-faint: '#5e6470' # quaternary annotations
# Surface & Borders
border: '#2a2d33' # solid hairline on near-black
border-soft: '#ffffff14' # 8% white translucent
border-strong: '#ffffff26' # 15% white translucent
border-brand: '#a8ff5366' # 40% lime on focus
# Shadow
shadow-ambient: 'rgba(0,0,0,0.4)' # low resting
shadow-standard: 'rgba(0,0,0,0.6)' # card hover
shadow-elevated: 'rgba(0,0,0,0.75)' # popover
shadow-glow: 'rgba(168,255,83,0.30)' # lime focus glow only
# Semantic
success: '#a8ff53' # success reuses brand lime (run succeeded)
success-bg: '#1a2410' # success surface
warning: '#fbbf24' # amber
warning-bg: '#2a2110' # warning surface
danger: '#fb5151' # red — failed run
danger-bg: '#2a1414' # danger surface
info: '#7655fd' # info uses electric purple
info-bg: '#1a1530' # info surface
typography:
display:
family: 'Satoshi-Variable, "Satoshi", system-ui, -apple-system, sans-serif'
weights: [500, 600, 700]
opentype-features: ['kern']
body:
family: 'Geist, "Geist-Regular", system-ui, -apple-system, "Segoe UI", sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern']
mono:
family: '"Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
weights: [400, 500, 600]
opentype-features: ['zero', 'tnum']
scale:
display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-lg: { size: 60, weight: 600, lineHeight: 1.05, tracking: '-0.025em', family: display }
h1: { size: 60, weight: 600, lineHeight: 1.05, tracking: '-0.025em', family: display }
h2: { size: 40, weight: 600, lineHeight: 1.1, tracking: '-0.018em', family: display }
h3: { size: 28, weight: 600, lineHeight: 1.2, tracking: '-0.01em', family: display }
h4: { size: 20, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
eyebrow: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: display }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
button: { size: 15, weight: 600, lineHeight: 1.0, tracking: '0', family: body }
button-sm: { size: 14, weight: 600, lineHeight: 1.0, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
badge: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.02em', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
code-body: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono, opentype: 'zero' }
code-label: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: mono, opentype: 'zero, tnum' }
radius:
micro: 2
sm: 4 # control chips, buttons (observed CTA radius)
md: 8 # cards, inputs
lg: 12 # feature panels
xl: 16 # hero shell
featured: 20 # signature illustrative panels
pill: 9999 # announcement pills, tab toggles (observed CTA radius)
spacing:
base: 4
scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160]
xxs: 2
xs: 4
sm: 8
md: 16
lg: 24
xl: 32
xxl: 48
section-sm: 80
section: 120
section-lg: 160
layout:
page-width: 1280
prose-width: 720
header-height: 64
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
reduced-motion: 'respects prefers-reduced-motion: reduce — gradient drift and lime glow pulses freeze, run-log auto-scroll stops, button scale removed.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'rgba(0,0,0,0.4) 0 1px 2px'
standard: 'rgba(0,0,0,0.6) 0 8px 24px -4px'
elevated: 'rgba(0,0,0,0.75) 0 18px 36px -12px, rgba(0,0,0,0.5) 0 4px 8px'
deep: 'rgba(0,0,0,0.85) 0 30px 60px -16px'
ring: '0 0 0 3px rgba(168,255,83,0.4)'
glow: '0 0 24px rgba(168,255,83,0.30)'
accessibility:
contrast-text-on-bg: 13.2 # AAA — #d7d9dd on #121317
contrast-heading-on-bg: 15.4 # AAA — #e8e9ec on #121317
contrast-on-brand: 16.3 # AAA — #121317 on #a8ff53
contrast-muted-on-bg: 5.1 # AA — #878c99 on #121317
focus-ring: '3px solid rgba(168,255,83,0.4), 0 offset'
reduced-motion-honored: true
keyboard-nav: 'standard tab order; lime focus ring on all interactive controls'
components:
button-primary:
bg: '#a8ff53'
text: '#121317'
padding: '10px 16px'
radius: 4
font: 'button (15/600)'
border: 'none'
hover: 'bg → #b8ff73; subtle lime glow'
active: 'bg → #93e63f'
use: 'primary CTA — Start building, Get started'
button-secondary:
bg: '#212327'
text: '#d7d9dd'
padding: '10px 16px'
radius: 4
font: 'button (15/600)'
border: '1px solid #2a2d33'
hover: 'bg → #2a2d33; border → #3a3d44'
use: 'secondary action — Read the docs, View on GitHub'
button-ghost:
bg: 'transparent'
text: '#d7d9dd'
padding: '10px 16px'
radius: 4
font: 'button (15/600)'
border: 'none'
hover: 'bg → rgba(255,255,255,0.04)'
use: 'tertiary action, in-card link button'
button-danger:
bg: 'transparent'
text: '#fb5151'
padding: '10px 16px'
radius: 4
border: '1px solid rgba(251,81,81,0.4)'
hover: 'bg → rgba(251,81,81,0.08)'
use: 'destructive — Cancel run, Delete project'
card:
bg: '#191b1f'
text: '#d7d9dd'
padding: '24px'
radius: 12
border: '1px solid #2a2d33'
shadow: 'rgba(0,0,0,0.4) 0 1px 2px'
hover: 'border → #3a3d44; shadow → standard'
use: 'feature card, integration card'
card-tinted:
bg: '#212327'
text: '#d7d9dd'
padding: '24px'
radius: 12
border: 'none'
use: 'highlighted panel, recommended tier'
input:
bg: '#0c0e0f'
text: '#d7d9dd'
placeholder: '#5e6470'
padding: '10px 12px'
radius: 8
border: '1px solid #2a2d33'
focus: 'border → #a8ff53; ring 3px solid rgba(168,255,83,0.4)'
use: 'text input, search'
badge:
bg: 'rgba(0,0,0,0.2)'
text: '#d7d9dd'
padding: '4px 12px'
radius: 9999
font: 'badge (12/600)'
border: '1px solid #2a2d33'
use: 'announcement pill — observed NEW pill at 9999px'
badge-brand:
bg: '#a8ff5326'
text: '#a8ff53'
padding: '4px 10px'
radius: 9999
font: 'badge (12/600)'
use: 'status pill — run succeeded'
nav-link:
bg: 'transparent'
text: '#878c99'
padding: '8px 12px'
font: 'body-small (14/500)'
hover: 'text → #d7d9dd'
active: 'text → #e8e9ec'
use: 'top nav, sidebar'
tab-toggle:
bg: '#212327'
text: '#d7d9dd'
text-inactive: '#b5b8c0'
padding: '8px 16px'
radius: 4
font: 'button-sm (14/600)'
use: 'segmented filter — AI agents / Media processing (observed 4px chips)'
lineage:
summary: |
Trigger.dev is the open-source background-jobs and AI-workflow brand taken
to its terminal dark conclusion. The canvas is `#121317` — a near-black
that reads colder and more clinical than Railway's eggplant or GitHub's
charcoal, the colour of a terminal at rest. Display type is Satoshi at
60px / 600 weight with tight `-0.025em` tracking — a geometric grotesque
that feels engineered rather than literary, the opposite pole from
Railway's serif. Body is Geist (Vercel's open-source workhorse), placing
Trigger.dev squarely in the modern Vercel-adjacent developer-tool
lineage. What sets it apart is the accent set: a single high-voltage lime
`#a8ff53` for every action — the colour of a `200 OK`, a passing test, a
successful run — paired with an electric purple `#7655fd` reserved for
documents, gradients, and secondary emphasis. The lime-on-black contrast
is deliberately loud; it is the brand shouting "it worked" in the only
palette a developer trusts. CTAs split their geometry: announcement and
filter pills run full `9999px`, while action buttons and control chips
hold a sharp `4px` — terminal-square rather than friendly-rounded.
influences:
- name: 'Vercel'
role: 'Geist body font, near-black substrate, single confident accent against dark, generous vertical rhythm.'
url: https://vercel.com
- name: 'Geist (font + design system)'
role: 'Geist Sans for body and Geist Mono for code anchor Trigger.dev in the modern Vercel-class developer aesthetic.'
url: https://vercel.com/font
- name: 'Satoshi (Indian Type Foundry)'
role: 'Geometric grotesque display face at 600 weight — engineered, neutral, the structural opposite of a serif headline.'
url: https://www.fontshare.com/fonts/satoshi
- name: 'Linear'
role: 'Dark developer canvas, restrained palette, square-cornered control chips and segmented toggles.'
url: https://linear.app
- name: 'Supabase'
role: 'Open-source dev-tool register: a single neon-green brand colour signalling "it works" against a dark substrate.'
url: https://supabase.com
- name: 'Terminal / log-file aesthetics'
role: 'Lime-on-black as the visual language of a passing run; the page reads like a streaming log rather than a marketing poster.'
url: https://en.wikipedia.org/wiki/Computer_terminal
dark-mode: native # Trigger.dev is committedly dark; the near-black canvas is the brand
---
## 1. Visual Theme & Atmosphere
Trigger.dev opens on a near-black canvas (`#121317`) carrying a single 60px Satoshi headline and one electric-lime button. The first impression is **terminal-at-rest**: a developer tool that looks like the dark editor and running log file its users live in all day, not a launch poster built to convert marketers. Where most SaaS marketing reaches for gradient meshes and pastel illustrations, Trigger.dev holds the entire page on one cold, clinical substrate and lets a single high-voltage accent do all the talking.
The atmosphere is **engineered, not editorial**. Satoshi is a geometric grotesque — even strokes, neutral terminals, no humanist warmth — and at 600 weight with `-0.025em` tracking it reads as something compiled rather than written. This is the structural opposite of Railway's IBM Plex Serif: both are dark dev-tool brands, but Railway tilts toward the literary and Trigger.dev toward the systemic. Body type is Geist, Vercel's open-source sans, which places Trigger.dev firmly in the modern Vercel-adjacent developer lineage and signals "we are of the platform era" without a word of copy.
The brand colour is the whole story. Lime `#a8ff53` (rgb 168, 255, 83) is the colour of a `200 OK`, a green checkmark, a passing CI run, a successful background job. Against the near-black canvas it is deliberately loud — a 16:1 contrast spike that makes every primary action feel like a confirmation. The secondary accent, electric purple `#7655fd`, is held back for documents, gradient washes, and emphasis flourishes, giving the palette a two-pole tension: the cold lime of success and the warm violet of motion. Nothing else competes; there is no third brand hue.
The geometry tells the same story twice. CTAs split into two camps: announcement banners and segmented filter toggles run a full `9999px` pill (observed on the "NEW" announcement chip), while action buttons and control chips hold a sharp `4px` — terminal-square, not friendly-rounded. The result is a page that feels precise and operational: pills for ambient status, squares for things you click to make something run.
The overall mood is **operational confidence**. Sections stack on the single `#121317` canvas with generous 96–160px gaps; cards lift tonally to `#191b1f` and `#212327` rather than through heavy shadow; the lime glows just enough on hover to feel alive. The page reads like a streaming run-log: dark, dense with signal, punctuated by green when something works.
**Key Characteristics**
- Near-black canvas (`#121317`, rgb 18/19/23) — colder and more clinical than Railway's eggplant
- Satoshi display at 600 weight, 60px, `-0.025em` tracking — engineered geometric grotesque, not editorial
- Geist body (Vercel's open-source sans) — anchors the modern dev-tool lineage
- Single high-voltage lime brand `#a8ff53` — the colour of a passing run / `200 OK`
- Electric purple secondary `#7655fd` — documents, gradients, emphasis only
- Split CTA geometry: `9999px` pills for status/filters, sharp `4px` for action buttons
- Near-black text on lime (`#121317` on `#a8ff53`) — lime is too bright to carry white
- Tonal elevation ladder: `#121317` → `#191b1f` → `#212327` → `#2a2d33`
- Terminal / log-file register — page reads like a streaming run rather than a poster
- Restrained two-pole palette: cold lime success + warm purple motion, no third hue
## 2. Color Palette & Roles
### Primary
- **Background** (`#121317`) [→ body `bg`, observed rgb(18,19,23)]: near-black canvas, the entire page sits on this single substrate
- **Background Deep** (`#0c0e0f`) [→ observed `--cc-footer-bg`]: footer and deepest section drop
- **Primary Text** (`#d7d9dd`) [→ body `color`, observed rgb(215,217,221)]: primary copy, slightly warm off-grey
- **Primary CTA Fill** (`#a8ff53`) [→ `--primary`]: electric lime brand
### Brand & Lime
- **Brand Lime** (`#a8ff53`) [→ `--primary`, rgb(168,255,83)]: primary CTA, the single signature colour
- **Brand Hover** (`#b8ff73`): brightened lime on hover
- **Brand Pressed** (`#93e63f`): pressed / active
- **Brand Deep** (`#7ec92f`): deeper lime for emphasized strokes and underlines
- **Brand Glow** (`#a8ff5333`): 20% lime wash for ambient glow
- **On-Brand Text** (`#121317`): near-black on lime — 16.3:1 AAA (lime is too bright for white)
### Accent (Electric Purple)
- **Accent Purple** (`#7655fd`) [→ NOTES, re-probed from SVG system]: electric-purple secondary — documents, gradients
- **Accent Hover** (`#8a6dff`): brightened purple
- **Accent Deep** (`#5e40d8`): deeper purple for emphasized strokes
- **Accent Soft** (`#7655fd26`): 15% purple wash for tinted surfaces
### Interactive
- **Link** (`#a8ff53`): inline links default to lime
- **Link Hover** (`#b8ff73`): brightened
- **Selected** (`#a8ff5326`): 15% lime selection wash
- **Disabled** (`#2a2d33`): disabled control bg
- **Disabled Text** (`#5e6470`): disabled label
### Neutral Scale
- **Text Heading** (`#e8e9ec`) [→ h1 `color`, observed rgb(232,233,236)]: near-white for headlines
- **Text Body** (`#d7d9dd`): primary copy
- **Text Soft** (`#b5b8c0`) [→ observed inactive tab rgb(181,184,192)]: tertiary / inactive tab labels
- **Text Muted** (`#878c99`) [→ h2 `color`, observed rgb(135,140,153)]: secondary copy, sub-headings, nav inactive
- **Text Faint** (`#5e6470`): quaternary annotations, placeholders
### Surface & Borders
- **Surface** (`#212327`) [→ observed CTA bg rgb(33,35,39)]: secondary panel / control chip base
- **Surface Alt** (`#191b1f`): card panel
- **Surface Deep** (`#0c0e0f`): nested deep panel, code-block / input bg
- **Border** (`#2a2d33`): solid hairline on near-black
- **Border Soft** (`#ffffff14`): 8% white translucent
- **Border Strong** (`#ffffff26`): 15% white translucent
- **Border Brand** (`#a8ff5366`): 40% lime on focus
### Shadow Colors
Shadows are pure-black at varying alpha — the lime brand never tints standard depth, so it can foreground without competing:
- **Ambient** (`rgba(0,0,0,0.4)`): low resting
- **Standard** (`rgba(0,0,0,0.6)`): card hover
- **Elevated** (`rgba(0,0,0,0.75)`): popover, dropdown
- **Deep** (`rgba(0,0,0,0.85)`): modal
- **Glow** (`rgba(168,255,83,0.30)`): lime focus glow only
### Semantic
- **Success** (`#a8ff53`): success reuses brand lime — a run that worked
- **Success Bg** (`#1a2410`): success surface
- **Warning** (`#fbbf24`): amber
- **Warning Bg** (`#2a2110`)
- **Danger** (`#fb5151`): red — a failed run
- **Danger Bg** (`#2a1414`)
- **Info** (`#7655fd`): info uses electric purple
- **Info Bg** (`#1a1530`)
## 3. Typography Rules
### Font Family
- **Display**: Satoshi (Satoshi-Variable) — geometric grotesque carrying every headline; engineered and neutral, the structural opposite of a serif display
- **Body**: Geist (Geist-Regular) — Vercel's open-source sans, the modern dev-tool body default
- **Mono**: Geist Mono — completes the Geist family for code blocks, run IDs, and technical labels
- **OpenType**: `kern` enabled on Satoshi and Geist; `zero` (slashed zero) and `tnum` (tabular numerals) on Geist Mono for log-aligned identifiers and timestamps
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-hero | display | 80 | 700 | 1.0 | -0.03em | kern | oversized hero only |
| display-lg | display | 60 | 600 | 1.05 | -0.025em | kern | observed hero @ 60/600 |
| h1 | display | 60 | 600 | 1.05 | -0.025em | kern | page title — observed rgb(232,233,236) |
| h2 | display | 40 | 600 | 1.1 | -0.018em | kern | section heading |
| h2-sub | display | 20 | 600 | 1.3 | 0 | kern | muted sub-head — observed rgb(135,140,153) |
| h3 | display | 28 | 600 | 1.2 | -0.01em | kern | sub-feature |
| h4 | display | 20 | 600 | 1.25 | -0.005em | kern | card title |
| eyebrow | display | 20 | 600 | 1.3 | 0 | kern | section eyebrow in muted grey |
| body-lg | body | 18 | 400 | 1.55 | 0 | kern | hero supporting copy |
| body | body | 16 | 400 | 1.55 | 0 | kern | default — observed rgb(215,217,221) |
| body-sm | body | 14 | 400 | 1.5 | 0 | kern | dense feature blocks |
| button | body | 15 | 600 | 1.0 | 0 | kern | primary CTA copy |
| button-sm | body | 14 | 600 | 1.0 | 0 | kern | dense controls, tab toggles |
| label | body | 13 | 500 | 1.4 | 0 | kern | form labels |
| badge | body | 12 | 600 | 1.3 | 0.02em | kern | announcement / status pill |
| caption | body | 12 | 500 | 1.4 | 0.02em | kern | image caption, metadata |
| code-body | mono | 14 | 400 | 1.6 | 0 | zero | code blocks, run logs |
| code-label | mono | 12 | 500 | 1.3 | 0.04em | zero, tnum | run ID, timestamp, slug |
### Principles
- **Satoshi at 600, not 700**: the hero weight is 600 — substantial but not heavy; 700 is reserved for the oversized display-hero only
- **Tight display tracking**: `-0.025em` at 60px is Trigger.dev's signature compression — the headline reads as typeset/engineered, not loosely set
- **Two-family discipline + mono**: Satoshi (display) + Geist (body) + Geist Mono (code) — each family has exactly one job
- **Headings near-white, body warm-grey**: `#e8e9ec` headings sit above `#d7d9dd` body; never set body at full white, the warm-grey is part of the calm-dark mood
- **Muted sub-heads in `#878c99`**: secondary headings (the observed H2 grey) deliberately recede below the near-white H1
- **Mono with `zero` + `tnum`**: slashed zero and tabular numerals on run IDs, timestamps, and identifiers so log columns align
- **Lime for emphasis, never for body**: inline emphasis can take the lime link colour; body copy stays grey
- **No italic on Satoshi**: the geometric grotesque has no true italic register; emphasize with weight or colour instead
## 4. Component Stylings
### Buttons
**button-primary** — Lime
- Background: `#a8ff53`
- Text: `#121317` near-black at 15/600 Geist
- Padding: 10px 16px
- Radius: 4 (terminal-square, observed control radius)
- Border: none
- Hover: bg → `#b8ff73`, subtle lime glow `0 0 24px rgba(168,255,83,0.30)`
- Active: bg → `#93e63f`
- Focus: 3px solid rgba(168,255,83,0.4) ring
- Use: primary CTA — "Start building", "Get started for free"
**button-secondary** — Filled chip
- Background: `#212327` (observed CTA bg rgb(33,35,39))
- Text: `#d7d9dd` at 15/600
- Padding: 10px 16px
- Radius: 4
- Border: 1px solid `#2a2d33`
- Hover: bg → `#2a2d33`, border → `#3a3d44`
- Use: secondary action — "Read the docs", "View on GitHub"
**button-ghost** — Bare
- Background: transparent
- Text: `#d7d9dd` at 15/600
- Padding: 10px 16px
- Radius: 4
- Hover: bg → rgba(255,255,255,0.04)
- Use: tertiary action, in-card link button
**button-danger** — Destructive
- Background: transparent
- Text: `#fb5151` at 15/600
- Padding: 10px 16px
- Radius: 4
- Border: 1px solid rgba(251,81,81,0.4)
- Hover: bg → rgba(251,81,81,0.08)
- Use: "Cancel run", "Delete project"
### Cards
**card-default** — Feature, integration
- Background: `#191b1f`
- Text: `#d7d9dd`
- Padding: 24px
- Radius: 12
- Border: 1px solid `#2a2d33`
- Shadow: ambient `rgba(0,0,0,0.4) 0 1px 2px`
- Hover: border → `#3a3d44`, shadow → standard
- Use: feature card, integration card
**card-tinted** — Highlighted panel
- Background: `#212327`
- Padding: 24px
- Radius: 12
- Border: none
- Use: highlighted panel, recommended pricing tier
### Badges / Tags / Pills
**badge-announcement** — observed "NEW" pill
- Background: rgba(0,0,0,0.2)
- Text: `#d7d9dd` at 12/600
- Padding: 4px 12px
- Radius: 9999 (full pill — observed)
- Border: 1px solid `#2a2d33`
- Use: announcement banner, "NEW: Errors — find and fix"
**badge-brand** — Status pill
- Background: `#a8ff5326` (15% lime wash)
- Text: `#a8ff53` at 12/600
- Padding: 4px 10px
- Radius: 9999
- Use: status — "Run succeeded", live indicator
**badge-mono** — Run ID
- Background: transparent
- Text: `#878c99` at 12/500 Geist Mono with `zero`, `tnum`
- Border: 1px solid `#2a2d33`
- Padding: 2px 8px
- Radius: 4
- Use: run ID, task slug, timestamp
### Inputs / Forms
**input-text**
- Background: `#0c0e0f`
- Text: `#d7d9dd` at 16/400
- Placeholder: `#5e6470`
- Padding: 10px 12px
- Radius: 8
- Border: 1px solid `#2a2d33`
- Focus: border → `#a8ff53`, ring 3px solid rgba(168,255,83,0.4)
- Use: text input, search
### Navigation
**nav-link**
- Background: transparent
- Text: `#878c99` at 14/500
- Padding: 8px 12px
- Hover: text → `#d7d9dd`
- Active: text → `#e8e9ec`
- Use: top nav, sidebar
**tab-toggle** — observed segmented filter
- Background (active): `#212327`
- Text (active): `#d7d9dd` at 14/600
- Text (inactive): `#b5b8c0` (observed rgb(181,184,192))
- Padding: 8px 16px
- Radius: 4
- Use: segmented filter — "AI agents" / "Media processing"
### Decorative
**code-block** — Run log
- Background: `#0c0e0f`
- Text: `#d7d9dd` at code-body (14/400 Geist Mono) with `zero`
- Padding: 16px 20px
- Radius: 8
- Border: 1px solid `#2a2d33`
- Inline backticks render in `#a8ff53` lime on rgba(168,255,83,0.12) wash
- Success lines tinted lime `#a8ff53`, failure lines red `#fb5151`
**gradient-wash** — Hero / section accent
- Linear or radial gradient from `#7655fd` (electric purple) into transparent over the near-black canvas
- Used sparingly behind hero copy and section dividers
- Lime is never used as a gradient — it stays a flat, high-voltage point accent
## 5. Layout Principles
### Spacing System
- **Base unit**: 4px
- **Scale**: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160
- **Density observation**: Trigger.dev runs **spacious-but-operational** — sections separated by 96–160px, but feature grids and run-log panels pack densely, mirroring the signal-rich feel of a real dashboard
### Grid & Container
- **Page width**: 1280px max
- **Prose width**: 720px (documentation, marketing body)
- **Hero treatment**: full-bleed near-black canvas, content constrained to ~1024px, single lime CTA
- **Feature grid**: 3-col at desktop, 2-col at tablet, 1-col at mobile
- **Integration grid**: dense logo/card grid, 4-col at desktop
### Whitespace Philosophy
- Whitespace is structural breathing room between sections; within panels, density rises to mirror a real run log
- Section gaps at 96–160px keep the operational pacing calm
- Cards lift tonally (`#191b1f`, `#212327`) on the near-black canvas with 1px hairline border, ambient shadow
### Section Cadence
- Hero (near-black + lime CTA) → use-case toggle (AI agents / Media processing) → feature grid → integration grid → run-log demo → pricing → footer (`#0c0e0f`)
- The page rarely shifts canvas colour — the entire experience runs on `#121317`, dropping to `#0c0e0f` only at the footer
- Tonal layering (`#121317` → `#191b1f` → `#212327`) provides separation without changing the base
## 6. Shapes & Radius Scale
| Tier | Px | Use |
|------|----|----|
| Micro | 2 | inline tight chips |
| Standard | 4 | buttons, control chips, tab toggles, mono badges |
| Comfortable | 8 | inputs, code blocks |
| Relaxed | 12 | cards, feature panels |
| Featured | 16 | hero shell |
| Large | 20 | signature illustrative panels |
| Pill | 9999 | announcement banners, status pills |
Trigger.dev's geometry is deliberately **split**: action controls hold a sharp `4px` (terminal-square), while ambient status and filter elements run full `9999px` pills. The contrast is intentional — squares are for clicking to make something run, pills are for status and navigation. Inputs and code blocks sit between at `8px`; cards at `12px`.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|----|
| 0 | flat | hero copy on canvas |
| 1 | 1px solid `#2a2d33` border | inline chips, code blocks |
| 2 | 1px hairline + ambient shadow | feature cards |
| 3 | standard shadow + border lift | hover state |
| 4 | elevated shadow + 1px translucent white edge | popover, dropdown |
| 5 | deep shadow | modal |
**Shadow Philosophy**: Trigger.dev's depth is **tonal-first, shadowed-second**. On the near-black canvas, a panel lifting from `#121317` to `#191b1f` to `#212327` already reads as elevated with no blur — pure tonal lift, the cheapest and cleanest depth on dark. Where real elevation is needed (hovers, popovers, modals), shadows are pure-black at high alpha (0.4–0.85) so the lime brand never competes with depth. The lime glow (`rgba(168,255,83,0.30)`) is reserved exclusively for focus and primary-button hover — depth stays neutral, attention stays lime.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal enter, page transitions
- **Decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — tooltips, dropdowns
### Durations
- **Fast** (150ms): hover, focus, button press
- **Standard** (240ms): card lift, tab switch
- **Slow** (320ms): modal enter, gradient drift
### Per-Component Recipes
- **Button hover**: lime brightens `#a8ff53` → `#b8ff73` with a soft glow appearing over 150ms standard ease
- **Card hover**: border lifts `#2a2d33` → `#3a3d44`, shadow ambient → standard, over 240ms
- **Tab toggle**: active chip background slides/fades to `#212327` over 240ms; inactive label `#b5b8c0` → `#d7d9dd`
- **Link hover**: lime underline grows 0 → 1px over 150ms
- **Run-log demo**: lines auto-scroll/stream in as a looping demo; success lines flash lime briefly
- **Gradient wash**: slow purple gradient drift over 320ms+ behind hero copy
### Page Transitions
- Default: opacity 0 → 1 + translateY 12px → 0 over 320ms emphasized
- Section reveals use staggered fade-in on scroll
### Reduced Motion
When `prefers-reduced-motion: reduce` is set:
- Gradient drift and lime glow pulses freeze
- Run-log auto-scroll/stream stops; log renders statically
- TranslateY page enters become opacity-only fades
- Button scale and card hover lift removed
## 9. Accessibility & A11y
### Contrast Pairs
- **`#d7d9dd` body on `#121317`**: 13.2:1 (AAA, all sizes)
- **`#e8e9ec` heading on `#121317`**: 15.4:1 (AAA, all sizes)
- **`#121317` near-black on `#a8ff53` lime**: 16.3:1 (AAA — this is why lime carries dark text, not white)
- **`#878c99` muted on `#121317`**: 5.1:1 (AA at body sizes)
- **`#b5b8c0` soft on `#121317`**: 9.2:1 (AAA)
- **`#a8ff53` lime link on `#121317`**: 14.9:1 (AAA)
- **`#7655fd` purple on `#121317`**: 3.6:1 (AA Large only — use for ≥18px / decorative; never small purple body text)
### Focus Indicators
- Default: 3px solid rgba(168,255,83,0.4) lime ring, no offset
- Inputs: focus border → `#a8ff53` + 3px ring
- Always visible — never `outline: none` without a replacement ring
### ARIA Patterns
- **Segmented toggle**: `role="tablist"` with `aria-selected` on the active filter chip
- **Dialog**: aria-labelledby + aria-describedby; trap focus; ESC to close
- **Run status**: status colour (lime/red) always paired with a text label and an icon, never colour alone
- **Code blocks**: `<pre><code>` semantic; run IDs in `<code>`
### Keyboard Navigation
- Tab order follows visual order; skip-link at page top
- Enter/Space activate buttons; Enter activates links
- Cmd/Ctrl+K opens command palette / docs search (when present)
- Escape closes modals, dropdowns, command palette
- Arrow keys move between segmented-toggle tabs
### Screen Reader Hints
- Run status (succeeded/failed) announced via text label, not lime/red colour alone
- Decorative purple gradient washes are `aria-hidden`
- Auto-streaming run-log demo carries `aria-live="off"` to avoid announcement spam; a static summary is exposed instead
### Reduced Motion
`prefers-reduced-motion: reduce` honored throughout — see §8.
## 10. Responsive Behavior
### Breakpoints
| Name | Min Width | Use |
|------|-----------|----|
| Mobile | — | default |
| Tablet | 640 | enlarged grids |
| Desktop | 1024 | full feature grid |
| Wide | 1280 | max page width |
| Ultra | 1536 | hero only |
### Touch Targets
- Minimum 44×44px for primary controls
- Pill badges expand hit-area to at least 32×24px
- Segmented toggle chips grow to full-width stacked on mobile
### Collapsing Strategy
- **Nav**: collapses to hamburger ≤ 768px; mobile menu on near-black sheet
- **Feature grid**: 3-col → 2-col @ 1024 → 1-col @ 640
- **Integration grid**: 4-col → 2-col @ 1024 → 2-col @ 640
- **Hero**: display-lg (60px) reduces to ~40px @ 640, tracking eases to `-0.02em`
- **Segmented toggle**: horizontal chips → stacked full-width buttons @ 640
- **Code/run-log blocks**: scroll horizontally on overflow; never reflow log lines
### Image Behavior
- Product screenshots and run-log demos are SVG/PNG; dark-on-dark, no light frames
- Integration logos lock at intrinsic size, monochrome on the near-black grid
- Lime accent stays flat at all sizes — never scaled into a gradient
## 11. Content & Voice
### Tone
Direct, technical, confident. Trigger.dev writes like an engineer explaining a system to another engineer — present tense, concrete nouns ("tasks", "runs", "deploys"), no marketing inflation. The headline register is operational: it describes what the product does, not how it will change your life. The lime brand is the visual equivalent of that voice — "it worked", said plainly.
### Microcopy Patterns
- **Button verbs**: "Start building", "Get started for free", "Read the docs", "View on GitHub", "Deploy" — short, imperative, developer-facing
- **Error message recipe**: concrete cause — "Run failed: the task threw `TimeoutError` after 60s." Surface the real error, not a euphemism
- **Success confirmations**: "[noun] [verb-past]" — "Task deployed", "Run succeeded", in lime
- **Empty states**: "No runs yet. Trigger your first task to see it stream here."
- **Status language**: "succeeded" / "failed" / "queued" / "in progress" — borrowed directly from the run lifecycle
### CTA Verb Conventions
- Top-level: "Start building", "Get started for free"
- Product: "Deploy", "Trigger a run", "Try it free"
- Documentation: "Read the docs", "View the quickstart"
- Open-source: "View on GitHub", "Star us"
- Sales: "Talk to us"
## 12. Dark Mode & Theming
Trigger.dev is **dark-only**. The near-black canvas (`#121317`) is the brand — it is the colour of the terminal, the editor, and the running log its users live in. Flipping to light would collapse the entire register: the lime brand reads as a high-voltage success signal *because* it sits on near-black, and on a light canvas it would lose all its voltage. There is no light-mode marketing variant.
The dashboard product runs the same dark palette, with the run-log views leaning even harder into the terminal aesthetic (Geist Mono throughout, lime/red status lines). Documentation maintains the dark canvas.
If a light variant were ever forced (e.g. an embedded docs widget on a light host), the mapping would be:
- `bg`: `#121317` → `#ffffff`
- `text`: `#d7d9dd` → `#1a1c20`
- `surface`: `#212327` → `#f4f5f6`
- `brand`: `#a8ff53` → darken to `#5fa312` so lime text/borders stay legible on white (the bright lime fails contrast on light)
- `accent`: `#7655fd` → stays (works on both substrates)
The recommendation is don't. The near-black canvas and high-voltage lime are a matched pair; separating them breaks the brand.
## 13. Lineage & Influences
Trigger.dev is the open-source background-jobs and AI-workflow brand taken to its terminal dark conclusion. The canvas is `#121317` — a near-black that reads colder and more clinical than Railway's eggplant or GitHub's charcoal, the colour of a terminal at rest. Display type is Satoshi at 60px / 600 weight with tight `-0.025em` tracking — a geometric grotesque that feels engineered rather than literary, the structural opposite of Railway's serif. Body is Geist (Vercel's open-source workhorse), placing Trigger.dev squarely in the modern Vercel-adjacent developer-tool lineage.
What sets it apart is the accent set. A single high-voltage lime `#a8ff53` carries every action — the colour of a `200 OK`, a passing test, a successful run — paired with an electric purple `#7655fd` reserved for documents, gradients, and secondary emphasis. The lime-on-black contrast is deliberately loud; it is the brand shouting "it worked" in the only palette a developer trusts. CTAs split their geometry: announcement and filter pills run full `9999px`, while action buttons and control chips hold a sharp `4px` — terminal-square rather than friendly-rounded. The result is a page that reads like a streaming run-log: dark, dense with signal, punctuated by green when something works.
- **Vercel** — https://vercel.com — Geist body font, near-black substrate, single confident accent against dark, generous vertical rhythm
- **Geist (font + design system)** — https://vercel.com/font — Geist Sans for body and Geist Mono for code anchor the modern Vercel-class dev aesthetic
- **Satoshi (Indian Type Foundry)** — https://www.fontshare.com/fonts/satoshi — geometric grotesque display at 600 weight, engineered and neutral
- **Linear** — https://linear.app — dark developer canvas, square-cornered control chips and segmented toggles
- **Supabase** — https://supabase.com — open-source dev-tool register: a single neon-green "it works" brand on a dark substrate
- **Terminal / log-file aesthetics** — https://en.wikipedia.org/wiki/Computer_terminal — lime-on-black as the visual language of a passing run
## 14. Do's and Don'ts
### Do
- **Do** keep the action palette to a single high-voltage lime (`#a8ff53`); secondary actions use the `#212327` surface chip, never a different hue
- **Do** put near-black text (`#121317`) on lime buttons — lime is too bright to carry white, and dark-on-lime hits 16:1
- **Do** hold the canvas at `#121317`; warming it toward eggplant reads as Railway, cooling it to pure `#000` reads as Vercel
- **Do** use Satoshi at 600 for display with `-0.025em` tracking — the engineered, compressed grotesque is the brand's voice
- **Do** set body in Geist at `#d7d9dd` (warm off-grey), with headings lifting to `#e8e9ec` — never full white
- **Do** split CTA geometry: `4px` square for action buttons/chips, `9999px` pill for announcements and status
- **Do** reserve electric purple `#7655fd` for documents, gradient washes, and emphasis — never as a second action colour
- **Do** use Geist Mono with `zero` + `tnum` for run IDs, timestamps, and identifiers so log columns align
- **Do** lift cards tonally (`#191b1f` / `#212327`) rather than with heavy drop shadows
- **Do** let the lime glow appear only on focus and primary-button hover — depth stays neutral
- **Do** keep semantic status as lime (succeeded) / red (failed), always paired with a text label
### Don't
- **Don't** put white text on the lime button — it fails contrast and breaks the "dark-on-lime" rule; use `#121317`
- **Don't** introduce a third brand hue; the palette is lime + purple + neutrals, full stop
- **Don't** use the lime as a gradient or large fill — it is a flat, high-voltage point accent, not a wash
- **Don't** flip to a light canvas; the lime loses all its voltage off near-black
- **Don't** swap Satoshi for a serif or a humanist sans — the engineered geometric grotesque is the structural identity
- **Don't** set Satoshi headlines loose — `-0.025em` compression is part of the typeset feel
- **Don't** make every control a pill; action buttons hold a sharp `4px`, pills are for status/filters only
- **Don't** set body copy in full white (`#ffffff`); the warm `#d7d9dd` grey is the calm-dark mood
- **Don't** use small purple body text — `#7655fd` on near-black is AA-Large only; keep purple ≥18px or decorative
- **Don't** layer heavy shadows on cards; depth on near-black is tonal-first
- **Don't** tint shadows lime; the glow is reserved for focus/hover, standard depth stays pure-black
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #121317
bg-deep: #0c0e0f
surface: #212327
surface-alt: #191b1f
text: #d7d9dd
text-heading: #e8e9ec
text-muted: #878c99
brand: #a8ff53
brand-hover: #b8ff73
on-brand: #121317
accent: #7655fd
border: #2a2d33
border-brand: rgba(168,255,83,0.4)
```
### Example Component Prompts
1. "Create a hero section: near-black `#121317` background, a 60px Satoshi headline at 600 weight in `#e8e9ec` with `-0.025em` tracking, body-large 18px Geist subhead in `#878c99`. Add a primary lime button (`#a8ff53` fill, near-black `#121317` text, 4px radius, 10px 16px padding, 15/600 button text) saying 'Start building', plus a secondary filled chip 'View on GitHub' (`#212327` bg, `#d7d9dd` text, 1px `#2a2d33` border, 4px radius). Optional electric-purple `#7655fd` gradient wash behind the copy."
2. "Build an announcement pill above the hero: full `9999px` radius, rgba(0,0,0,0.2) background, 1px `#2a2d33` border, 12px Geist at 600. Show a small lime `#a8ff53` 'NEW' tag then 'Errors — find and fix' in `#d7d9dd'. Hover: border brightens to `#3a3d44`."
3. "Design a 3-card feature grid: each card `#191b1f` bg, 24px padding, 12px radius, 1px `#2a2d33` border. Card title 20px Satoshi at 600 in `#e8e9ec`, body 14px Geist in `#878c99`, optional lime `#a8ff53` icon. Hover: border lifts to `#3a3d44`, ambient → standard shadow."
4. "Create a run-log code block: `#0c0e0f` background, 14px Geist Mono `#d7d9dd` with slashed-zero (`zero`) and tabular numerals (`tnum`), 16px 20px padding, 8px radius, 1px `#2a2d33` border. Success lines in lime `#a8ff53`, failed lines in red `#fb5151`, run IDs in mono. Inline backticks render lime on rgba(168,255,83,0.12) wash."
5. "Build a segmented toggle filter: two chips 'AI agents' and 'Media processing' at 4px radius. Active chip `#212327` bg with `#d7d9dd` 14/600 text; inactive label `#b5b8c0`. Use `role=tablist` with `aria-selected`. Transition active state over 240ms."
6. "Design a top navigation: near-black `#121317` background, 'Trigger.dev' wordmark in `#e8e9ec` Satoshi 600, nav links in 14px Geist 500 at `#878c99` (hover `#d7d9dd`), right-side secondary chip 'Read the docs' and a primary lime 'Get started for free' button at 4px radius with near-black text."
### Iteration Guide
1. **Start with the canvas** — `#121317` near-black; not eggplant (Railway), not pure `#000` (Vercel). The cold, clinical hex is the brand
2. **Lime carries dark text** — `#121317` on `#a8ff53`, never white; this single rule keeps the brand legible and on-voltage
3. **Satoshi at 600 for display** — engineered geometric grotesque with `-0.025em` tracking; a serif or humanist sans collapses the voice
4. **Geist for body** — the Vercel-class open-source sans places it in the modern dev-tool lineage; keep body at `#d7d9dd`, headings at `#e8e9ec`
5. **Split the geometry** — sharp `4px` for action buttons and chips, full `9999px` pills for announcements and status; mixing them up muddies the system
6. **Hold purple in reserve** — `#7655fd` is for documents, gradients, and emphasis only; never let it become a second action colour
7. **Depth is tonal-first** — lift panels through `#191b1f` / `#212327`, not heavy shadows; reserve the lime glow for focus and primary hover
8. **Think log file, not poster** — Geist Mono with aligned numerals, lime/red status lines, dense signal-rich panels; the page should feel operational
---
*Theme-toggle audit: score=0, signals=[none] — Trigger.dev is committedly dark; no light variant offered.*
1. Visual Theme & Atmosphere
Trigger.dev opens on a near-black canvas (#121317) carrying a single 60px Satoshi headline and one electric-lime button. The first impression is terminal-at-rest: a developer tool that looks like the dark editor and running log file its users live in all day, not a launch poster built to convert marketers. Where most SaaS marketing reaches for gradient meshes and pastel illustrations, Trigger.dev holds the entire page on one cold, clinical substrate and lets a single high-voltage accent do all the talking.
The atmosphere is engineered, not editorial. Satoshi is a geometric grotesque — even strokes, neutral terminals, no humanist warmth — and at 600 weight with -0.025em tracking it reads as something compiled rather than written. This is the structural opposite of Railway’s IBM Plex Serif: both are dark dev-tool brands, but Railway tilts toward the literary and Trigger.dev toward the systemic. Body type is Geist, Vercel’s open-source sans, which places Trigger.dev firmly in the modern Vercel-adjacent developer lineage and signals “we are of the platform era” without a word of copy.
The brand colour is the whole story. Lime #a8ff53 (rgb 168, 255, 83) is the colour of a 200 OK, a green checkmark, a passing CI run, a successful background job. Against the near-black canvas it is deliberately loud — a 16:1 contrast spike that makes every primary action feel like a confirmation. The secondary accent, electric purple #7655fd, is held back for documents, gradient washes, and emphasis flourishes, giving the palette a two-pole tension: the cold lime of success and the warm violet of motion. Nothing else competes; there is no third brand hue.
The geometry tells the same story twice. CTAs split into two camps: announcement banners and segmented filter toggles run a full 9999px pill (observed on the “NEW” announcement chip), while action buttons and control chips hold a sharp 4px — terminal-square, not friendly-rounded. The result is a page that feels precise and operational: pills for ambient status, squares for things you click to make something run.
The overall mood is operational confidence. Sections stack on the single #121317 canvas with generous 96–160px gaps; cards lift tonally to #191b1f and #212327 rather than through heavy shadow; the lime glows just enough on hover to feel alive. The page reads like a streaming run-log: dark, dense with signal, punctuated by green when something works.
Key Characteristics
- Near-black canvas (
#121317, rgb 18/19/23) — colder and more clinical than Railway’s eggplant - Satoshi display at 600 weight, 60px,
-0.025emtracking — engineered geometric grotesque, not editorial - Geist body (Vercel’s open-source sans) — anchors the modern dev-tool lineage
- Single high-voltage lime brand
#a8ff53— the colour of a passing run /200 OK - Electric purple secondary
#7655fd— documents, gradients, emphasis only - Split CTA geometry:
9999pxpills for status/filters, sharp4pxfor action buttons - Near-black text on lime (
#121317on#a8ff53) — lime is too bright to carry white - Tonal elevation ladder:
#121317→#191b1f→#212327→#2a2d33 - Terminal / log-file register — page reads like a streaming run rather than a poster
- Restrained two-pole palette: cold lime success + warm purple motion, no third hue
2. Color Palette & Roles
Primary
- Background (
#121317) [→ bodybg, observed rgb(18,19,23)]: near-black canvas, the entire page sits on this single substrate - Background Deep (
#0c0e0f) [→ observed--cc-footer-bg]: footer and deepest section drop - Primary Text (
#d7d9dd) [→ bodycolor, observed rgb(215,217,221)]: primary copy, slightly warm off-grey - Primary CTA Fill (
#a8ff53) [→--primary]: electric lime brand
Brand & Lime
- Brand Lime (
#a8ff53) [→--primary, rgb(168,255,83)]: primary CTA, the single signature colour - Brand Hover (
#b8ff73): brightened lime on hover - Brand Pressed (
#93e63f): pressed / active - Brand Deep (
#7ec92f): deeper lime for emphasized strokes and underlines - Brand Glow (
#a8ff5333): 20% lime wash for ambient glow - On-Brand Text (
#121317): near-black on lime — 16.3:1 AAA (lime is too bright for white)
Accent (Electric Purple)
- Accent Purple (
#7655fd) [→ NOTES, re-probed from SVG system]: electric-purple secondary — documents, gradients - Accent Hover (
#8a6dff): brightened purple - Accent Deep (
#5e40d8): deeper purple for emphasized strokes - Accent Soft (
#7655fd26): 15% purple wash for tinted surfaces
Interactive
- Link (
#a8ff53): inline links default to lime - Link Hover (
#b8ff73): brightened - Selected (
#a8ff5326): 15% lime selection wash - Disabled (
#2a2d33): disabled control bg - Disabled Text (
#5e6470): disabled label
Neutral Scale
- Text Heading (
#e8e9ec) [→ h1color, observed rgb(232,233,236)]: near-white for headlines - Text Body (
#d7d9dd): primary copy - Text Soft (
#b5b8c0) [→ observed inactive tab rgb(181,184,192)]: tertiary / inactive tab labels - Text Muted (
#878c99) [→ h2color, observed rgb(135,140,153)]: secondary copy, sub-headings, nav inactive - Text Faint (
#5e6470): quaternary annotations, placeholders
Surface & Borders
- Surface (
#212327) [→ observed CTA bg rgb(33,35,39)]: secondary panel / control chip base - Surface Alt (
#191b1f): card panel - Surface Deep (
#0c0e0f): nested deep panel, code-block / input bg - Border (
#2a2d33): solid hairline on near-black - Border Soft (
#ffffff14): 8% white translucent - Border Strong (
#ffffff26): 15% white translucent - Border Brand (
#a8ff5366): 40% lime on focus
Shadow Colors
Shadows are pure-black at varying alpha — the lime brand never tints standard depth, so it can foreground without competing:
- Ambient (
rgba(0,0,0,0.4)): low resting - Standard (
rgba(0,0,0,0.6)): card hover - Elevated (
rgba(0,0,0,0.75)): popover, dropdown - Deep (
rgba(0,0,0,0.85)): modal - Glow (
rgba(168,255,83,0.30)): lime focus glow only
Semantic
- Success (
#a8ff53): success reuses brand lime — a run that worked - Success Bg (
#1a2410): success surface - Warning (
#fbbf24): amber - Warning Bg (
#2a2110) - Danger (
#fb5151): red — a failed run - Danger Bg (
#2a1414) - Info (
#7655fd): info uses electric purple - Info Bg (
#1a1530)
3. Typography Rules
Font Family
- Display: Satoshi (Satoshi-Variable) — geometric grotesque carrying every headline; engineered and neutral, the structural opposite of a serif display
- Body: Geist (Geist-Regular) — Vercel’s open-source sans, the modern dev-tool body default
- Mono: Geist Mono — completes the Geist family for code blocks, run IDs, and technical labels
- OpenType:
kernenabled on Satoshi and Geist;zero(slashed zero) andtnum(tabular numerals) on Geist Mono for log-aligned identifiers and timestamps
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | display | 80 | 700 | 1.0 | -0.03em | kern | oversized hero only |
| display-lg | display | 60 | 600 | 1.05 | -0.025em | kern | observed hero @ 60/600 |
| h1 | display | 60 | 600 | 1.05 | -0.025em | kern | page title — observed rgb(232,233,236) |
| h2 | display | 40 | 600 | 1.1 | -0.018em | kern | section heading |
| h2-sub | display | 20 | 600 | 1.3 | 0 | kern | muted sub-head — observed rgb(135,140,153) |
| h3 | display | 28 | 600 | 1.2 | -0.01em | kern | sub-feature |
| h4 | display | 20 | 600 | 1.25 | -0.005em | kern | card title |
| eyebrow | display | 20 | 600 | 1.3 | 0 | kern | section eyebrow in muted grey |
| body-lg | body | 18 | 400 | 1.55 | 0 | kern | hero supporting copy |
| body | body | 16 | 400 | 1.55 | 0 | kern | default — observed rgb(215,217,221) |
| body-sm | body | 14 | 400 | 1.5 | 0 | kern | dense feature blocks |
| button | body | 15 | 600 | 1.0 | 0 | kern | primary CTA copy |
| button-sm | body | 14 | 600 | 1.0 | 0 | kern | dense controls, tab toggles |
| label | body | 13 | 500 | 1.4 | 0 | kern | form labels |
| badge | body | 12 | 600 | 1.3 | 0.02em | kern | announcement / status pill |
| caption | body | 12 | 500 | 1.4 | 0.02em | kern | image caption, metadata |
| code-body | mono | 14 | 400 | 1.6 | 0 | zero | code blocks, run logs |
| code-label | mono | 12 | 500 | 1.3 | 0.04em | zero, tnum | run ID, timestamp, slug |
Principles
- Satoshi at 600, not 700: the hero weight is 600 — substantial but not heavy; 700 is reserved for the oversized display-hero only
- Tight display tracking:
-0.025emat 60px is Trigger.dev’s signature compression — the headline reads as typeset/engineered, not loosely set - Two-family discipline + mono: Satoshi (display) + Geist (body) + Geist Mono (code) — each family has exactly one job
- Headings near-white, body warm-grey:
#e8e9echeadings sit above#d7d9ddbody; never set body at full white, the warm-grey is part of the calm-dark mood - Muted sub-heads in
#878c99: secondary headings (the observed H2 grey) deliberately recede below the near-white H1 - Mono with
zero+tnum: slashed zero and tabular numerals on run IDs, timestamps, and identifiers so log columns align - Lime for emphasis, never for body: inline emphasis can take the lime link colour; body copy stays grey
- No italic on Satoshi: the geometric grotesque has no true italic register; emphasize with weight or colour instead
4. Component Stylings
Buttons
button-primary — Lime
- Background:
#a8ff53 - Text:
#121317near-black at 15/600 Geist - Padding: 10px 16px
- Radius: 4 (terminal-square, observed control radius)
- Border: none
- Hover: bg →
#b8ff73, subtle lime glow0 0 24px rgba(168,255,83,0.30) - Active: bg →
#93e63f - Focus: 3px solid rgba(168,255,83,0.4) ring
- Use: primary CTA — “Start building”, “Get started for free”
button-secondary — Filled chip
- Background:
#212327(observed CTA bg rgb(33,35,39)) - Text:
#d7d9ddat 15/600 - Padding: 10px 16px
- Radius: 4
- Border: 1px solid
#2a2d33 - Hover: bg →
#2a2d33, border →#3a3d44 - Use: secondary action — “Read the docs”, “View on GitHub”
button-ghost — Bare
- Background: transparent
- Text:
#d7d9ddat 15/600 - Padding: 10px 16px
- Radius: 4
- Hover: bg → rgba(255,255,255,0.04)
- Use: tertiary action, in-card link button
button-danger — Destructive
- Background: transparent
- Text:
#fb5151at 15/600 - Padding: 10px 16px
- Radius: 4
- Border: 1px solid rgba(251,81,81,0.4)
- Hover: bg → rgba(251,81,81,0.08)
- Use: “Cancel run”, “Delete project”
Cards
card-default — Feature, integration
- Background:
#191b1f - Text:
#d7d9dd - Padding: 24px
- Radius: 12
- Border: 1px solid
#2a2d33 - Shadow: ambient
rgba(0,0,0,0.4) 0 1px 2px - Hover: border →
#3a3d44, shadow → standard - Use: feature card, integration card
card-tinted — Highlighted panel
- Background:
#212327 - Padding: 24px
- Radius: 12
- Border: none
- Use: highlighted panel, recommended pricing tier
Badges / Tags / Pills
badge-announcement — observed “NEW” pill
- Background: rgba(0,0,0,0.2)
- Text:
#d7d9ddat 12/600 - Padding: 4px 12px
- Radius: 9999 (full pill — observed)
- Border: 1px solid
#2a2d33 - Use: announcement banner, “NEW: Errors — find and fix”
badge-brand — Status pill
- Background:
#a8ff5326(15% lime wash) - Text:
#a8ff53at 12/600 - Padding: 4px 10px
- Radius: 9999
- Use: status — “Run succeeded”, live indicator
badge-mono — Run ID
- Background: transparent
- Text:
#878c99at 12/500 Geist Mono withzero,tnum - Border: 1px solid
#2a2d33 - Padding: 2px 8px
- Radius: 4
- Use: run ID, task slug, timestamp
Inputs / Forms
input-text
- Background:
#0c0e0f - Text:
#d7d9ddat 16/400 - Placeholder:
#5e6470 - Padding: 10px 12px
- Radius: 8
- Border: 1px solid
#2a2d33 - Focus: border →
#a8ff53, ring 3px solid rgba(168,255,83,0.4) - Use: text input, search
Navigation
nav-link
- Background: transparent
- Text:
#878c99at 14/500 - Padding: 8px 12px
- Hover: text →
#d7d9dd - Active: text →
#e8e9ec - Use: top nav, sidebar
tab-toggle — observed segmented filter
- Background (active):
#212327 - Text (active):
#d7d9ddat 14/600 - Text (inactive):
#b5b8c0(observed rgb(181,184,192)) - Padding: 8px 16px
- Radius: 4
- Use: segmented filter — “AI agents” / “Media processing”
Decorative
code-block — Run log
- Background:
#0c0e0f - Text:
#d7d9ddat code-body (14/400 Geist Mono) withzero - Padding: 16px 20px
- Radius: 8
- Border: 1px solid
#2a2d33 - Inline backticks render in
#a8ff53lime on rgba(168,255,83,0.12) wash - Success lines tinted lime
#a8ff53, failure lines red#fb5151
gradient-wash — Hero / section accent
- Linear or radial gradient from
#7655fd(electric purple) into transparent over the near-black canvas - Used sparingly behind hero copy and section dividers
- Lime is never used as a gradient — it stays a flat, high-voltage point accent
5. Layout Principles
Spacing System
- Base unit: 4px
- Scale: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160
- Density observation: Trigger.dev runs spacious-but-operational — sections separated by 96–160px, but feature grids and run-log panels pack densely, mirroring the signal-rich feel of a real dashboard
Grid & Container
- Page width: 1280px max
- Prose width: 720px (documentation, marketing body)
- Hero treatment: full-bleed near-black canvas, content constrained to ~1024px, single lime CTA
- Feature grid: 3-col at desktop, 2-col at tablet, 1-col at mobile
- Integration grid: dense logo/card grid, 4-col at desktop
Whitespace Philosophy
- Whitespace is structural breathing room between sections; within panels, density rises to mirror a real run log
- Section gaps at 96–160px keep the operational pacing calm
- Cards lift tonally (
#191b1f,#212327) on the near-black canvas with 1px hairline border, ambient shadow
Section Cadence
- Hero (near-black + lime CTA) → use-case toggle (AI agents / Media processing) → feature grid → integration grid → run-log demo → pricing → footer (
#0c0e0f) - The page rarely shifts canvas colour — the entire experience runs on
#121317, dropping to#0c0e0fonly at the footer - Tonal layering (
#121317→#191b1f→#212327) provides separation without changing the base
6. Shapes & Radius Scale
| Tier | Px | Use |
|---|---|---|
| Micro | 2 | inline tight chips |
| Standard | 4 | buttons, control chips, tab toggles, mono badges |
| Comfortable | 8 | inputs, code blocks |
| Relaxed | 12 | cards, feature panels |
| Featured | 16 | hero shell |
| Large | 20 | signature illustrative panels |
| Pill | 9999 | announcement banners, status pills |
Trigger.dev’s geometry is deliberately split: action controls hold a sharp 4px (terminal-square), while ambient status and filter elements run full 9999px pills. The contrast is intentional — squares are for clicking to make something run, pills are for status and navigation. Inputs and code blocks sit between at 8px; cards at 12px.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat | hero copy on canvas |
| 1 | 1px solid #2a2d33 border | inline chips, code blocks |
| 2 | 1px hairline + ambient shadow | feature cards |
| 3 | standard shadow + border lift | hover state |
| 4 | elevated shadow + 1px translucent white edge | popover, dropdown |
| 5 | deep shadow | modal |
Shadow Philosophy: Trigger.dev’s depth is tonal-first, shadowed-second. On the near-black canvas, a panel lifting from #121317 to #191b1f to #212327 already reads as elevated with no blur — pure tonal lift, the cheapest and cleanest depth on dark. Where real elevation is needed (hovers, popovers, modals), shadows are pure-black at high alpha (0.4–0.85) so the lime brand never competes with depth. The lime glow (rgba(168,255,83,0.30)) is reserved exclusively for focus and primary-button hover — depth stays neutral, attention stays lime.
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal enter, page transitions - Decelerate:
cubic-bezier(0, 0, 0.2, 1)— tooltips, dropdowns
Durations
- Fast (150ms): hover, focus, button press
- Standard (240ms): card lift, tab switch
- Slow (320ms): modal enter, gradient drift
Per-Component Recipes
- Button hover: lime brightens
#a8ff53→#b8ff73with a soft glow appearing over 150ms standard ease - Card hover: border lifts
#2a2d33→#3a3d44, shadow ambient → standard, over 240ms - Tab toggle: active chip background slides/fades to
#212327over 240ms; inactive label#b5b8c0→#d7d9dd - Link hover: lime underline grows 0 → 1px over 150ms
- Run-log demo: lines auto-scroll/stream in as a looping demo; success lines flash lime briefly
- Gradient wash: slow purple gradient drift over 320ms+ behind hero copy
Page Transitions
- Default: opacity 0 → 1 + translateY 12px → 0 over 320ms emphasized
- Section reveals use staggered fade-in on scroll
Reduced Motion
When prefers-reduced-motion: reduce is set:
- Gradient drift and lime glow pulses freeze
- Run-log auto-scroll/stream stops; log renders statically
- TranslateY page enters become opacity-only fades
- Button scale and card hover lift removed
9. Accessibility & A11y
Contrast Pairs
#d7d9ddbody on#121317: 13.2:1 (AAA, all sizes)#e8e9echeading on#121317: 15.4:1 (AAA, all sizes)#121317near-black on#a8ff53lime: 16.3:1 (AAA — this is why lime carries dark text, not white)#878c99muted on#121317: 5.1:1 (AA at body sizes)#b5b8c0soft on#121317: 9.2:1 (AAA)#a8ff53lime link on#121317: 14.9:1 (AAA)#7655fdpurple on#121317: 3.6:1 (AA Large only — use for ≥18px / decorative; never small purple body text)
Focus Indicators
- Default: 3px solid rgba(168,255,83,0.4) lime ring, no offset
- Inputs: focus border →
#a8ff53+ 3px ring - Always visible — never
outline: nonewithout a replacement ring
ARIA Patterns
- Segmented toggle:
role="tablist"witharia-selectedon the active filter chip - Dialog: aria-labelledby + aria-describedby; trap focus; ESC to close
- Run status: status colour (lime/red) always paired with a text label and an icon, never colour alone
- Code blocks:
<pre><code>semantic; run IDs in<code>
Keyboard Navigation
- Tab order follows visual order; skip-link at page top
- Enter/Space activate buttons; Enter activates links
- Cmd/Ctrl+K opens command palette / docs search (when present)
- Escape closes modals, dropdowns, command palette
- Arrow keys move between segmented-toggle tabs
Screen Reader Hints
- Run status (succeeded/failed) announced via text label, not lime/red colour alone
- Decorative purple gradient washes are
aria-hidden - Auto-streaming run-log demo carries
aria-live="off"to avoid announcement spam; a static summary is exposed instead
Reduced Motion
prefers-reduced-motion: reduce honored throughout — see §8.
10. Responsive Behavior
Breakpoints
| Name | Min Width | Use |
|---|---|---|
| Mobile | — | default |
| Tablet | 640 | enlarged grids |
| Desktop | 1024 | full feature grid |
| Wide | 1280 | max page width |
| Ultra | 1536 | hero only |
Touch Targets
- Minimum 44×44px for primary controls
- Pill badges expand hit-area to at least 32×24px
- Segmented toggle chips grow to full-width stacked on mobile
Collapsing Strategy
- Nav: collapses to hamburger ≤ 768px; mobile menu on near-black sheet
- Feature grid: 3-col → 2-col @ 1024 → 1-col @ 640
- Integration grid: 4-col → 2-col @ 1024 → 2-col @ 640
- Hero: display-lg (60px) reduces to ~40px @ 640, tracking eases to
-0.02em - Segmented toggle: horizontal chips → stacked full-width buttons @ 640
- Code/run-log blocks: scroll horizontally on overflow; never reflow log lines
Image Behavior
- Product screenshots and run-log demos are SVG/PNG; dark-on-dark, no light frames
- Integration logos lock at intrinsic size, monochrome on the near-black grid
- Lime accent stays flat at all sizes — never scaled into a gradient
11. Content & Voice
Tone
Direct, technical, confident. Trigger.dev writes like an engineer explaining a system to another engineer — present tense, concrete nouns (“tasks”, “runs”, “deploys”), no marketing inflation. The headline register is operational: it describes what the product does, not how it will change your life. The lime brand is the visual equivalent of that voice — “it worked”, said plainly.
Microcopy Patterns
- Button verbs: “Start building”, “Get started for free”, “Read the docs”, “View on GitHub”, “Deploy” — short, imperative, developer-facing
- Error message recipe: concrete cause — “Run failed: the task threw
TimeoutErrorafter 60s.” Surface the real error, not a euphemism - Success confirmations: “[noun] [verb-past]” — “Task deployed”, “Run succeeded”, in lime
- Empty states: “No runs yet. Trigger your first task to see it stream here.”
- Status language: “succeeded” / “failed” / “queued” / “in progress” — borrowed directly from the run lifecycle
CTA Verb Conventions
- Top-level: “Start building”, “Get started for free”
- Product: “Deploy”, “Trigger a run”, “Try it free”
- Documentation: “Read the docs”, “View the quickstart”
- Open-source: “View on GitHub”, “Star us”
- Sales: “Talk to us”
12. Dark Mode & Theming
Trigger.dev is dark-only. The near-black canvas (#121317) is the brand — it is the colour of the terminal, the editor, and the running log its users live in. Flipping to light would collapse the entire register: the lime brand reads as a high-voltage success signal because it sits on near-black, and on a light canvas it would lose all its voltage. There is no light-mode marketing variant.
The dashboard product runs the same dark palette, with the run-log views leaning even harder into the terminal aesthetic (Geist Mono throughout, lime/red status lines). Documentation maintains the dark canvas.
If a light variant were ever forced (e.g. an embedded docs widget on a light host), the mapping would be:
bg:#121317→#fffffftext:#d7d9dd→#1a1c20surface:#212327→#f4f5f6brand:#a8ff53→ darken to#5fa312so lime text/borders stay legible on white (the bright lime fails contrast on light)accent:#7655fd→ stays (works on both substrates)
The recommendation is don’t. The near-black canvas and high-voltage lime are a matched pair; separating them breaks the brand.
13. Lineage & Influences
Trigger.dev is the open-source background-jobs and AI-workflow brand taken to its terminal dark conclusion. The canvas is #121317 — a near-black that reads colder and more clinical than Railway’s eggplant or GitHub’s charcoal, the colour of a terminal at rest. Display type is Satoshi at 60px / 600 weight with tight -0.025em tracking — a geometric grotesque that feels engineered rather than literary, the structural opposite of Railway’s serif. Body is Geist (Vercel’s open-source workhorse), placing Trigger.dev squarely in the modern Vercel-adjacent developer-tool lineage.
What sets it apart is the accent set. A single high-voltage lime #a8ff53 carries every action — the colour of a 200 OK, a passing test, a successful run — paired with an electric purple #7655fd reserved for documents, gradients, and secondary emphasis. The lime-on-black contrast is deliberately loud; it is the brand shouting “it worked” in the only palette a developer trusts. CTAs split their geometry: announcement and filter pills run full 9999px, while action buttons and control chips hold a sharp 4px — terminal-square rather than friendly-rounded. The result is a page that reads like a streaming run-log: dark, dense with signal, punctuated by green when something works.
- Vercel — https://vercel.com — Geist body font, near-black substrate, single confident accent against dark, generous vertical rhythm
- Geist (font + design system) — https://vercel.com/font — Geist Sans for body and Geist Mono for code anchor the modern Vercel-class dev aesthetic
- Satoshi (Indian Type Foundry) — https://www.fontshare.com/fonts/satoshi — geometric grotesque display at 600 weight, engineered and neutral
- Linear — https://linear.app — dark developer canvas, square-cornered control chips and segmented toggles
- Supabase — https://supabase.com — open-source dev-tool register: a single neon-green “it works” brand on a dark substrate
- Terminal / log-file aesthetics — https://en.wikipedia.org/wiki/Computer_terminal — lime-on-black as the visual language of a passing run
14. Do’s and Don’ts
Do
- Do keep the action palette to a single high-voltage lime (
#a8ff53); secondary actions use the#212327surface chip, never a different hue - Do put near-black text (
#121317) on lime buttons — lime is too bright to carry white, and dark-on-lime hits 16:1 - Do hold the canvas at
#121317; warming it toward eggplant reads as Railway, cooling it to pure#000reads as Vercel - Do use Satoshi at 600 for display with
-0.025emtracking — the engineered, compressed grotesque is the brand’s voice - Do set body in Geist at
#d7d9dd(warm off-grey), with headings lifting to#e8e9ec— never full white - Do split CTA geometry:
4pxsquare for action buttons/chips,9999pxpill for announcements and status - Do reserve electric purple
#7655fdfor documents, gradient washes, and emphasis — never as a second action colour - Do use Geist Mono with
zero+tnumfor run IDs, timestamps, and identifiers so log columns align - Do lift cards tonally (
#191b1f/#212327) rather than with heavy drop shadows - Do let the lime glow appear only on focus and primary-button hover — depth stays neutral
- Do keep semantic status as lime (succeeded) / red (failed), always paired with a text label
Don’t
- Don’t put white text on the lime button — it fails contrast and breaks the “dark-on-lime” rule; use
#121317 - Don’t introduce a third brand hue; the palette is lime + purple + neutrals, full stop
- Don’t use the lime as a gradient or large fill — it is a flat, high-voltage point accent, not a wash
- Don’t flip to a light canvas; the lime loses all its voltage off near-black
- Don’t swap Satoshi for a serif or a humanist sans — the engineered geometric grotesque is the structural identity
- Don’t set Satoshi headlines loose —
-0.025emcompression is part of the typeset feel - Don’t make every control a pill; action buttons hold a sharp
4px, pills are for status/filters only - Don’t set body copy in full white (
#ffffff); the warm#d7d9ddgrey is the calm-dark mood - Don’t use small purple body text —
#7655fdon near-black is AA-Large only; keep purple ≥18px or decorative - Don’t layer heavy shadows on cards; depth on near-black is tonal-first
- Don’t tint shadows lime; the glow is reserved for focus/hover, standard depth stays pure-black
15. Agent Prompt Guide
Quick Color Reference
bg: #121317
bg-deep: #0c0e0f
surface: #212327
surface-alt: #191b1f
text: #d7d9dd
text-heading: #e8e9ec
text-muted: #878c99
brand: #a8ff53
brand-hover: #b8ff73
on-brand: #121317
accent: #7655fd
border: #2a2d33
border-brand: rgba(168,255,83,0.4)Example Component Prompts
-
“Create a hero section: near-black
#121317background, a 60px Satoshi headline at 600 weight in#e8e9ecwith-0.025emtracking, body-large 18px Geist subhead in#878c99. Add a primary lime button (#a8ff53fill, near-black#121317text, 4px radius, 10px 16px padding, 15/600 button text) saying ‘Start building’, plus a secondary filled chip ‘View on GitHub’ (#212327bg,#d7d9ddtext, 1px#2a2d33border, 4px radius). Optional electric-purple#7655fdgradient wash behind the copy.” -
“Build an announcement pill above the hero: full
9999pxradius, rgba(0,0,0,0.2) background, 1px#2a2d33border, 12px Geist at 600. Show a small lime#a8ff53‘NEW’ tag then ‘Errors — find and fix’ in#d7d9dd'. Hover: border brightens to#3a3d44`.” -
“Design a 3-card feature grid: each card
#191b1fbg, 24px padding, 12px radius, 1px#2a2d33border. Card title 20px Satoshi at 600 in#e8e9ec, body 14px Geist in#878c99, optional lime#a8ff53icon. Hover: border lifts to#3a3d44, ambient → standard shadow.” -
“Create a run-log code block:
#0c0e0fbackground, 14px Geist Mono#d7d9ddwith slashed-zero (zero) and tabular numerals (tnum), 16px 20px padding, 8px radius, 1px#2a2d33border. Success lines in lime#a8ff53, failed lines in red#fb5151, run IDs in mono. Inline backticks render lime on rgba(168,255,83,0.12) wash.” -
“Build a segmented toggle filter: two chips ‘AI agents’ and ‘Media processing’ at 4px radius. Active chip
#212327bg with#d7d9dd14/600 text; inactive label#b5b8c0. Userole=tablistwitharia-selected. Transition active state over 240ms.” -
“Design a top navigation: near-black
#121317background, ‘Trigger.dev’ wordmark in#e8e9ecSatoshi 600, nav links in 14px Geist 500 at#878c99(hover#d7d9dd), right-side secondary chip ‘Read the docs’ and a primary lime ‘Get started for free’ button at 4px radius with near-black text.”
Iteration Guide
- Start with the canvas —
#121317near-black; not eggplant (Railway), not pure#000(Vercel). The cold, clinical hex is the brand - Lime carries dark text —
#121317on#a8ff53, never white; this single rule keeps the brand legible and on-voltage - Satoshi at 600 for display — engineered geometric grotesque with
-0.025emtracking; a serif or humanist sans collapses the voice - Geist for body — the Vercel-class open-source sans places it in the modern dev-tool lineage; keep body at
#d7d9dd, headings at#e8e9ec - Split the geometry — sharp
4pxfor action buttons and chips, full9999pxpills for announcements and status; mixing them up muddies the system - Hold purple in reserve —
#7655fdis for documents, gradients, and emphasis only; never let it become a second action colour - Depth is tonal-first — lift panels through
#191b1f/#212327, not heavy shadows; reserve the lime glow for focus and primary hover - Think log file, not poster — Geist Mono with aligned numerals, lime/red status lines, dense signal-rich panels; the page should feel operational
Theme-toggle audit: score=0, signals=[none] — Trigger.dev is committedly dark; no light variant offered.
Drop trigger-dev into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add trigger-dev 2 · ship landing page
npx agentkit init --design trigger-dev