dark · structured · sans · mono · cool · bright · playful
Sentry
Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs.
By webdesignhot · sentry.io
$ npx design-md add sentry
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#1f1633 - bg-deep
#150f23 - bg-soft
#0f0c1a - bg-elevated
#2b1b3d - surface
#181225 - surface-deep
#362d59 - surface-violet
#36265c - text AAA · 17.2
#ffffff - text-muted
#c8c5d8 - text-soft
#9b97ad - text-faint AA·LG · 3.3
#6e6a82 - text-on-brand
#ffffff - text-on-cta
#1a1a1a - text-on-light
#1f1633 - code-yellow
#dcdcaa - brand AA·LG · 3.6
#7553ff - brand-hover
#6240e8 - brand-active
#5230d4 - brand-deep
#422082 - brand-soft
#36265c - brand-mid
#6a5fc1 - brand-muted
#79628c - accent-pink
#ff70bc - accent-coral
#ffb287 - accent-fuchsia
#fa7faa - accent-yellow
#fdb81b - accent-blue
#63b3ed - accent-lime
#c2ef4e - cta-bg
#efefef - cta-fg
#1a1a1a - cta-bg-hover
#ffffff - cta-border
transparent - border — · 1.2
rgba(255,255,255,0.08) - border-soft
rgba(255,255,255,0.04) - border-strong — · 1.6
rgba(255,255,255,0.16) - border-violet
#584674 - border-light-input
#cfcfdb - glass-white
rgba(255,255,255,0.18) - glass-violet
rgba(54,22,107,0.14) - input-white
#ffffff - on-brand
#ffffff - on-cta
#1a1a1a - semantic-success
#c2ef4e - semantic-warning
#fdb81b - semantic-danger
#ff70bc - semantic-info
#7553ff
Ship faster than ever.
display-hero "Dammit Sans" 88px w700
Ship faster than ever.
display-large "Dammit Sans" 72px w700 -0.005em
Ship faster than ever.
display-secondary "Dammit Sans" 60px w500
Ship faster than ever.
h1 "Dammit Sans" 56px w700 -0.01em
Built for teams that ship.
h2 Rubik 44px w700 -0.01em
A complete kit
h3 Rubik 32px w600 0
The quick brown fox jumps over the lazy dog.
h4 Rubik 27px w500 0
The quick brown fox jumps over the lazy dog.
h5 Rubik 24px w500 0
The quick brown fox jumps over the lazy dog.
feature-title Rubik 20px w600 0
The quick brown fox jumps over the lazy dog.
body-large Rubik 18px w400 0
The quick brown fox jumps over the lazy dog.
body Rubik 16px w400 0
The quick brown fox jumps over the lazy dog.
body-emphasis Rubik 16px w500 0
The quick brown fox jumps over the lazy dog.
nav-link Rubik 15px w500 0
OUR DESIGN SYSTEM
label Rubik 15px w500 0
The quick brown fox jumps over the lazy dog.
button Rubik 14px w500 0.014em
The quick brown fox jumps over the lazy dog.
button-strong Rubik 14px w700 0.014em
OUR DESIGN SYSTEM
caption Rubik 14px w500 0.014em
npx design-md add linear
code "JetBrains Mono" 14px w400 0
npx design-md add linear
code-bold "JetBrains Mono" 14px w500 0
npx design-md add linear
code-block "JetBrains Mono" 13px w400 0
The quick brown fox jumps over the lazy dog.
micro Rubik 10px w600 0.018em
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 24px
- step-6 32px
- step-7 40px
- step-8 48px
- step-9 64px
- step-10 80px
- step-11 96px
- step-12 128px
- step-13 160px
- none
0px - micro
4px - xs
4px - sm
6px - md
8px - lg
12px - tactile
13px - card
16px - xl
18px - pill
9999px - button
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
Sentry's site is what happens when a developer-tooling brand decides not to be a flat-black terminal. The body canvas is a deep aubergine `#1f1633` — warm enough to feel handmade, dark enough to function as a focus surface for screenshots and illustration. The signature `#7553ff` violet operates as a single-hue brand axis (link colour, accent, stamp), exactly the way Stripe uses its blue, but pitched into the violet end of the spectrum where almost no infra brand lives. Type pairs the custom **Dammit Sans** display with **Rubik** for body — Rubik is the same humanist geometric used by Mailchimp and Webflow, giving the marketing copy a friendly, slightly rounded warmth that contrasts with the Linear-style coolness of most observability competitors. Code samples use **JetBrains Mono**, the standard JetBrains/IntelliJ monospace, which is a quiet credibility move: Sentry's audience already lives inside JetBrains IDEs. Pill buttons (`border-radius: 9999px`) round off the developer-edginess and pull the system toward consumer-app friendliness — a deliberate softening against the brutalism of `posthog` and the structural rigour of `linear`. Tactile inset shadows on muted-purple buttons (`#79628c` with `1px solid #584674` and `inset` shadow) add a physical-button register that almost no other infra brand reaches for. The result is observability that feels less like a SOC dashboard and more like a record label.
- Single-hue brand discipline — one confident colour does all the heavy lifting (violet ≈ blue, pitched 80° around the colour wheel).
- JetBrains Mono and the developer-IDE chromatic register — warm darks, syntax violets, the same monospace Sentry users see every morning.
- Rubik humanist sans paired with quirky display typography — friendlier tech voice, less Inter-everywhere monoculture.
- Adjacent dev-tool peer that Sentry softens against — Linear is structural-rigorous, Sentry is illustration-rich and consumer-warm.
- Closest observability competitor in the violet spectrum — Sentry pushes brighter, warmer, less corporate.
- Dammit Sans (custom)Custom geometric display face — gives Sentry its bulletin-board energy ("Code breaks. Fix it faster.").
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: Sentry
tagline: 'Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs.'
author: webdesignhot
source_url: https://sentry.io
spec: design.md/v1.5
quality: curated
featured: false
categories: [dev-tools, saas]
tags: [dark, structured, sans, mono, cool, bright, playful]
preview_swatch: ['#1f1633', '#7553ff', '#ffffff']
related: [vercel, linear, posthog]
description: 'Sentry''s marketing site is a dark-violet developer cathedral pitched at error-report registers. The body bg is `#1f1633` (a deep aubergine plum, never pure black), Rubik handles UI text at 400/500/600, the custom Dammit Sans does the headline shouting at 88px/700 ("Code breaks. Fix it faster."), and JetBrains Mono carries every code sample, error trace, and dashboard label. The signature `#7553ff` violet operates as link colour, illustration accent, and product stamp — a single-hue brand discipline borrowed from Stripe but pitched into the violet end of the spectrum where almost no infra brand lives. Pill buttons (`border-radius: 9999px`) and warm purple-tinted shadows pull the system away from terminal-black brutalism toward consumer-friendly developer warmth.'
colors:
# Primary canvas — warm aubergine ladder
bg: '#1f1633' # primary body canvas — deep aubergine, warm not cool
bg-deep: '#150f23' # deeper sections, footer ground, second-level bands
bg-soft: '#0f0c1a' # darkest tier — code blocks, footer near-black
bg-elevated: '#2b1b3d' # raised card surface inside hero zones
surface: '#181225' # secondary surface panels
surface-deep: '#362d59' # tinted callout surface
surface-violet: '#36265c' # tinted brand surface for callouts / chips
# Text scale on dark canvas
text: '#ffffff' # primary copy on dark
text-muted: '#c8c5d8' # body paragraphs, slightly violet-tinted
text-soft: '#9b97ad' # captions, metadata
text-faint: '#6e6a82' # disabled, faint
text-on-brand: '#ffffff' # white on signature violet
text-on-cta: '#1a1a1a' # near-black on near-white pill CTA
text-on-light: '#1f1633' # aubergine ink on light surfaces
code-yellow: '#dcdcaa' # syntax highlighting accent
# Brand spectrum — the signature violet axis
brand: '#7553ff' # Sentry signature violet — link, accent, stamp
brand-hover: '#6240e8' # pressed state, slightly deeper violet
brand-active: '#5230d4' # depressed
brand-deep: '#422082' # deep violet — select / dropdown / high-emphasis
brand-soft: '#36265c' # tinted brand surface for callouts
brand-mid: '#6a5fc1' # mid-violet — alternate link colour
brand-muted: '#79628c' # muted purple — tactile button background
# Accent spectrum — illustration-only accents
accent-pink: '#ff70bc' # secondary illustration colour, error-pink
accent-coral: '#ffb287' # focus state warm accent
accent-fuchsia: '#fa7faa' # focus outlines, decorative
accent-yellow: '#fdb81b' # warning, chart highlight, dashboard badge
accent-blue: '#63b3ed' # documentation link colour
accent-lime: '#c2ef4e' # rare lime highlight — special links / badges
# CTA system
cta-bg: '#efefef' # near-white "Try Sentry Free" pill
cta-fg: '#1a1a1a' # near-black ink on pill
cta-bg-hover: '#ffffff' # pure white on hover
cta-border: 'transparent' # no border on white pill
# Borders & dividers
border: 'rgba(255,255,255,0.08)' # ~8% white hairline on dark surfaces
border-soft: 'rgba(255,255,255,0.04)' # softer divider, code block trim
border-strong: 'rgba(255,255,255,0.16)' # hover/focus
border-violet: '#584674' # tactile button border — muted purple trim
border-light-input: '#cfcfdb' # form field border on white inputs
# Surface variants
glass-white: 'rgba(255,255,255,0.18)' # frosted glass button bg
glass-violet: 'rgba(54,22,107,0.14)' # hover overlay on glass
input-white: '#ffffff' # form input background
# On-brand foregrounds
on-brand: '#ffffff' # white on violet
on-cta: '#1a1a1a' # near-black on pill CTA
# Semantic
semantic-success: '#c2ef4e' # lime — also accent
semantic-warning: '#fdb81b' # yellow — dashboard warnings
semantic-danger: '#ff70bc' # error pink — playful danger register
semantic-info: '#7553ff' # signature violet doubles as info
typography:
display:
family: '"Dammit Sans", Rubik, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif'
weights: [500, 700]
opentype: ['kern', 'liga']
body:
family: 'Rubik, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600, 700]
opentype: ['kern', 'liga']
mono:
family: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
weights: [400, 500, 700]
opentype: ['kern', 'tnum', 'zero', 'calt']
scale:
display-hero: { size: 88, weight: 700, lineHeight: 1.2, tracking: 'normal', family: display, opentype: 'kern, liga' }
display-large: { size: 72, weight: 700, lineHeight: 1.15, tracking: '-0.005em', family: display, opentype: 'kern, liga' }
display-secondary: { size: 60, weight: 500, lineHeight: 1.1, tracking: 'normal', family: display, opentype: 'kern, liga' }
h1: { size: 56, weight: 700, lineHeight: 1.1, tracking: '-0.01em', family: display, opentype: 'kern, liga' }
h2: { size: 44, weight: 700, lineHeight: 1.15, tracking: '-0.01em', family: body, opentype: 'kern, liga' }
h3: { size: 32, weight: 600, lineHeight: 1.25, tracking: '0', family: body, opentype: 'kern, liga' }
h4: { size: 27, weight: 500, lineHeight: 1.25, tracking: '0', family: body, opentype: 'kern, liga' }
h5: { size: 24, weight: 500, lineHeight: 1.25, tracking: '0', family: body, opentype: 'kern, liga' }
feature-title: { size: 20, weight: 600, lineHeight: 1.25, tracking: '0', family: body, opentype: 'kern, liga' }
body-large: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body, opentype: 'kern, liga' }
body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body, opentype: 'kern, liga' }
body-emphasis: { size: 16, weight: 500, lineHeight: 1.6, tracking: '0', family: body, opentype: 'kern, liga' }
nav-link: { size: 15, weight: 500, lineHeight: 1.4, tracking: '0', family: body, opentype: 'kern' }
button: { size: 14, weight: 500, lineHeight: 1.2, tracking: '0.014em', family: body, transform: 'uppercase' }
button-strong: { size: 14, weight: 700, lineHeight: 1.2, tracking: '0.014em', family: body, transform: 'uppercase' }
label: { size: 15, weight: 500, lineHeight: 1.25, tracking: '0', family: body, transform: 'uppercase' }
caption: { size: 14, weight: 500, lineHeight: 1.4, tracking: '0.014em', family: body }
micro: { size: 10, weight: 600, lineHeight: 1.8, tracking: '0.018em', family: body, transform: 'uppercase' }
code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'tnum, zero, calt' }
code-bold: { size: 14, weight: 500, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'tnum, zero' }
code-block: { size: 13, weight: 400, lineHeight: 1.6, tracking: '0', family: mono, opentype: 'tnum, zero, calt' }
radius:
none: 0
micro: 4
xs: 4
sm: 6
md: 8
lg: 12
card: 16
xl: 18
pill: 9999
button: 9999 # observed pill buttons (border-radius: 9999px)
tactile: 13 # muted purple tactile button radius
spacing:
base: 4
xxs: 2
xs: 4
sm: 8
md: 12
lg: 16
xl: 24
xxl: 32
section-sm: 64
section: 96
section-lg: 128
scale: [2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 1280
prose-width: 720
container: 1280
gutter: 24
header-height: 64
hero-height: 720
section: 96
grid: 12
grid-gap: 24
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
ease-out: 'cubic-bezier(0.16, 1, 0.3, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 320
duration-hero: 480
reduced-motion: 'respects prefers-reduced-motion: reduce — translateY rises collapse to opacity-only, illustration parallax freezes, hover lifts persist as opacity transitions only'
breakpoints:
mobile: 576
tablet: 768
desktop: 992
wide: 1152
ultra: 1440
shadows:
ambient: 'rgba(22,15,36,0.90) 0 4px 4px 9px'
inset-button: 'rgba(0,0,0,0.10) 0 1px 3px 0 inset'
card: 'rgba(0,0,0,0.10) 0 10px 15px -3px'
glass: 'rgba(0,0,0,0.08) 0 2px 8px'
hover: 'rgba(0,0,0,0.18) 0 0.5rem 1.5rem'
prominent: 'rgba(0,0,0,0.24) 0 24px 48px -12px'
ring: '0 0 0 2px #7553ff'
ring-soft: '0 0 0 3px rgba(117,83,255,0.30)'
ring-coral: 'rgba(106,95,193,1) solid 0.125rem'
accessibility:
contrast-text-on-bg: 16.4 # #ffffff on #1f1633 — AAA
contrast-text-on-brand: 5.1 # #ffffff on #7553ff — AA at body, AAA at large
contrast-text-on-cta: 14.6 # #1a1a1a on #efefef — AAA
contrast-muted-on-bg: 9.8 # #c8c5d8 on #1f1633 — AAA
contrast-soft-on-bg: 5.7 # #9b97ad on #1f1633 — AA
focus-ring: '2px solid #7553ff with 4px purple-tinted halo (0 0 0 3px rgba(117,83,255,0.30))'
reduced-motion-honored: true
keyboard-nav: 'tab order follows visual; skip-link to #main-content; nav arrow-keys swap dropdowns; Esc closes modals'
components:
button-pill-cta:
background: '#efefef'
text: '#1a1a1a'
radius: 9999
padding: '12px 20px'
height: 44
font: 'Rubik 14 / 500 / uppercase / 0.014em'
border: 'none'
hover: 'background #ffffff; subtle scale(1.02)'
active: 'background #e6e6e6'
use: 'primary near-white pill CTA — Try Sentry Free, Get Started'
button-pill-brand:
background: '#7553ff'
text: '#ffffff'
radius: 9999
padding: '12px 20px'
height: 44
font: 'Rubik 14 / 500 / uppercase / 0.014em'
border: 'none'
hover: 'background #6240e8'
active: 'background #5230d4'
use: 'signature-violet pill CTA — secondary actions, in-product links'
button-tactile-muted:
background: '#79628c'
text: '#ffffff'
radius: 13
padding: '10px 18px'
height: 42
font: 'Rubik 14 / 500-700 / uppercase / 0.014em'
border: '1px solid #584674'
shadow: 'rgba(0,0,0,0.10) 0 1px 3px 0 inset'
hover: 'shadow rgba(0,0,0,0.18) 0 0.5rem 1.5rem'
use: 'tactile pressed-INTO-surface secondary button — feels physical'
button-glass:
background: 'rgba(255,255,255,0.18)'
text: '#ffffff'
radius: 12
padding: '8px'
border: 'none'
backdrop: 'blur(18px) saturate(180%)'
shadow: 'rgba(0,0,0,0.08) 0 2px 8px'
hover: 'background rgba(54,22,107,0.14)'
use: 'frosted secondary action over hero illustrations'
button-deep-violet:
background: '#422082'
text: '#ffffff'
radius: 8
padding: '8px 16px'
height: 36
font: 'Rubik 14 / 500'
use: 'select / dropdown / high-emphasis filter chip'
button-ghost:
background: 'transparent'
text: '#ffffff'
radius: 9999
padding: '10px 16px'
font: 'Rubik 14 / 500 / uppercase / 0.014em'
hover: 'background rgba(255,255,255,0.06)'
use: 'inline ghost CTA, nav button'
card-elevated:
background: '#2b1b3d'
text: '#ffffff'
border: '1px solid rgba(255,255,255,0.08)'
radius: 16
padding: '32px'
shadow: 'rgba(0,0,0,0.10) 0 10px 15px -3px'
use: 'elevated feature card on aubergine canvas'
card-glass:
background: 'rgba(255,255,255,0.18)'
text: '#ffffff'
border: '1px solid rgba(255,255,255,0.16)'
radius: 12
padding: '24px'
backdrop: 'blur(18px) saturate(180%)'
use: 'frosted glass panel — overlaid on hero illustrations'
card-deep:
background: '#181225'
text: '#ffffff'
border: '1px solid rgba(255,255,255,0.04)'
radius: 12
padding: '28px'
use: 'secondary surface panel — flat trim'
code-block:
background: '#0f0c1a'
text: '#ffffff'
border: '1px solid rgba(255,255,255,0.04)'
radius: 12
padding: '16px 20px'
font: 'JetBrains Mono 13 / 400 / 1.6'
use: 'multi-line code sample, error stack trace'
code-chip:
background: '#0f0c1a'
text: '#7553ff'
border: '1px solid rgba(255,255,255,0.08)'
radius: 6
padding: '4px 8px'
font: 'JetBrains Mono 14 / 400'
use: 'inline code chip — error code, package names'
badge-pill:
background: 'rgba(117,83,255,0.20)'
text: '#c8c5d8'
border: '1px solid rgba(117,83,255,0.40)'
radius: 9999
padding: '4px 12px'
font: 'Rubik 10 / 600 / uppercase / 0.018em'
use: 'NEW / category badge — violet tint'
badge-yellow:
background: 'rgba(253,184,27,0.20)'
text: '#fdb81b'
border: '1px solid rgba(253,184,27,0.40)'
radius: 9999
padding: '4px 12px'
font: 'Rubik 10 / 600 / uppercase / 0.018em'
use: 'warning / dashboard severity badge'
input-light:
background: '#ffffff'
text: '#1f1633'
border: '1px solid #cfcfdb'
radius: 6
padding: '8px 12px'
height: 40
font: 'Rubik 16 / 400'
focus: 'shadow rgba(0,0,0,0.15) 0 2px 10px inset'
use: 'light-context email/form input'
input-dark:
background: '#0f0c1a'
text: '#ffffff'
border: '1px solid rgba(255,255,255,0.08)'
radius: 8
padding: '10px 14px'
height: 42
font: 'Rubik 16 / 400'
focus: 'border #7553ff; ring 0 0 0 3px rgba(117,83,255,0.30)'
use: 'dark-context input — search, signup'
nav-link:
background: 'transparent'
text: '#ffffff'
font: 'Rubik 15 / 500'
padding: '8px 14px'
hover: 'color #6a5fc1'
use: 'top nav menu — Product / Pricing / Docs / Customers'
nav-label:
background: 'transparent'
text: '#c8c5d8'
font: 'Rubik 15 / 500 / uppercase / 0.014em'
use: 'nav category eyebrow — uppercase letterspaced label'
illustration-3d:
background: 'transparent'
use: 'recurring 3D character illustrations + colorful product screenshots — punctuate dark canvas with bursts of pink/coral/lime'
dark-mode: dark-only
lineage:
summary: |
Sentry's site is what happens when a developer-tooling brand
decides not to be a flat-black terminal. The body canvas is a
deep aubergine `#1f1633` — warm enough to feel handmade, dark
enough to function as a focus surface for screenshots and
illustration. The signature `#7553ff` violet operates as a
single-hue brand axis (link colour, accent, stamp), exactly the
way Stripe uses its blue, but pitched into the violet end of
the spectrum where almost no infra brand lives. Type pairs the
custom **Dammit Sans** display with **Rubik** for body — Rubik
is the same humanist geometric used by Mailchimp and Webflow,
giving the marketing copy a friendly, slightly rounded warmth
that contrasts with the Linear-style coolness of most observability
competitors. Code samples use **JetBrains Mono**, the standard
JetBrains/IntelliJ monospace, which is a quiet credibility move:
Sentry's audience already lives inside JetBrains IDEs. Pill buttons
(`border-radius: 9999px`) round off the developer-edginess and pull
the system toward consumer-app friendliness — a deliberate softening
against the brutalism of `posthog` and the structural rigour of
`linear`. Tactile inset shadows on muted-purple buttons (`#79628c`
with `1px solid #584674` and `inset` shadow) add a physical-button
register that almost no other infra brand reaches for. The result
is observability that feels less like a SOC dashboard and more
like a record label.
influences:
- name: Stripe
role: 'Single-hue brand discipline — one confident colour does all the heavy lifting (violet ≈ blue, pitched 80° around the colour wheel).'
url: https://stripe.com
- name: JetBrains
role: 'JetBrains Mono and the developer-IDE chromatic register — warm darks, syntax violets, the same monospace Sentry users see every morning.'
url: https://www.jetbrains.com
- name: Mailchimp
role: 'Rubik humanist sans paired with quirky display typography — friendlier tech voice, less Inter-everywhere monoculture.'
url: https://mailchimp.com
- name: Linear
role: 'Adjacent dev-tool peer that Sentry softens against — Linear is structural-rigorous, Sentry is illustration-rich and consumer-warm.'
url: https://linear.app
- name: Datadog
role: 'Closest observability competitor in the violet spectrum — Sentry pushes brighter, warmer, less corporate.'
url: https://www.datadoghq.com
- name: 'Dammit Sans (custom)'
role: 'Custom geometric display face — gives Sentry its bulletin-board energy ("Code breaks. Fix it faster.").'
---
## 1. Visual Theme & Atmosphere
Sentry's marketing surface is a **deep-violet observability cathedral**. The body canvas sits at `#1f1633` — a warm aubergine plum that registers as *intentional darkness* rather than terminal-black. Headlines hit 88px at weight 700 in the custom **Dammit Sans**, a chunky geometric display face that gives the site its bulletin-board energy ("Code breaks. Fix it faster."). Beneath the display, **Rubik** carries body copy in a humanist register that pulls away from the Inter-everywhere monoculture, and **JetBrains Mono** handles every code sample, error trace, and dashboard label.
The signature gesture is a single confident violet — `#7553ff` — that operates as link colour, accent stamp, and brand identifier all at once. Where Datadog uses purple as a logo-mark, Sentry uses purple as a *wayfinding system*: every interactive surface eventually resolves to this hue. The discipline is borrowed from Stripe's blue, but pitched 80° around the colour wheel into a violet register where almost no infra brand lives.
What makes Sentry distinctive in dev-tools is its embrace of the dark-IDE aesthetic *without* feeling cold or sterile. Warm aubergine replaces the cool grays of Datadog and the terminal-blacks of Vercel; bold illustrative elements (3D characters, colorful product screenshots, error-pink decorative bursts) punctuate the dark canvas. The tactile button system — muted purple `#79628c` with inset shadows — creates a "pressed-INTO-surface" quality that almost no other observability brand reaches for. Buttons feel physical, almost analog, against the digital cathedral.
The pill-button discipline is the most visually distinctive shape decision. `border-radius: 9999px` reserved for primary CTAs pulls Sentry away from the "8px square button" default of Linear/Vercel and signals a more consumer-friendly, illustration-rich product personality. Combined with frosted glass effects (`backdrop-filter: blur(18px) saturate(180%)`) and the deep purple ambient shadow (`rgba(22,15,36,0.9) 0 4px 4px 9px`), the page reads as bioluminescent — content seems to emit its own purple-tinted light against the aubergine ground.
Mid-page, illustration bursts in pink (`#ff70bc`), coral (`#ffb287`), and the occasional lime accent (`#c2ef4e`) puncture the violet ground — these are *illustration-only* accents, never structural. They appear in 3D character art, error-state mockups, and dashboard screenshots, never in chrome. The discipline is Stripe-style: one structural brand, many illustrative voices.
**Key Characteristics:**
- Deep aubergine canvas `#1f1633` — warm not cool, never pure black
- Three-step tonal ladder: `#0f0c1a` → `#1f1633` → `#2b1b3d` for depth without shadows
- Signature violet `#7553ff` as single-hue brand axis (Stripe-style discipline)
- **Dammit Sans** custom display at 88px / 700 — bulletin-board energy
- **Rubik** humanist body at 400/500/600/700 — friendly, slightly rounded
- **JetBrains Mono** for every code sample — IDE-credibility move
- Pill buttons (`9999px`) for primary CTAs — consumer-friendly softening
- Tactile muted-purple buttons with inset shadows — physical register
- Frosted glass panels with `blur(18px) saturate(180%)` — layered surfaces
- Deep purple ambient shadows — bioluminescent glow, not punching black
- Uppercase + 0.014em tracking on buttons and labels — systematic technical pattern
- Illustration bursts (pink, coral, lime) — never structural, always decorative
## 2. Color Palette & Roles
### Primary
- **Background** (`#1f1633`): the deep aubergine canvas — warm not cool, has purple undertone, never pure black. The defining ground.
- **Background Deep** (`#150f23`): deeper sections, footer ground, second-level bands.
- **Background Soft** (`#0f0c1a`): darkest tier — code blocks, footer near-black band.
- **Text** (`#ffffff`): primary copy on dark canvas.
- **Brand** (`#7553ff`): signature violet — link, accent, stamp.
### Brand & Dark
The signature violet operates as a single-hue brand axis. Variants for state:
- **Brand** (`#7553ff`): primary violet — link colour, accent stamp, brand identifier.
- **Brand Hover** (`#6240e8`): pressed state, slightly deeper violet.
- **Brand Active** (`#5230d4`): depressed.
- **Brand Deep** (`#422082`): high-emphasis surfaces — select dropdowns, active filter chips.
- **Brand Soft** (`#36265c`): tinted brand surface for callouts.
- **Brand Mid** (`#6a5fc1`): mid-violet — alternate link colour, navigation hover.
- **Brand Muted** (`#79628c`): muted purple — tactile button background, secondary interactive.
The dark band ground:
- **Surface** (`#181225`): secondary surface panels.
- **Surface Deep** (`#362d59`): tinted callout surface, border ladder.
- **BG Elevated** (`#2b1b3d`): raised card surface inside hero zones.
### Accent
Illustration-only accents — never structural chrome, always decorative bursts:
- **Pink** (`#ff70bc`): error-pink — secondary illustration colour, error chips.
- **Coral** (`#ffb287`): focus state warm accent, illustration warmth.
- **Fuchsia** (`#fa7faa`): focus outlines, decorative accents.
- **Yellow** (`#fdb81b`): warning, chart highlight, dashboard badge.
- **Blue** (`#63b3ed`): documentation link colour (rare).
- **Lime** (`#c2ef4e`): rare lime highlight — special links / badge highlights, used once per section maximum.
### Interactive
- **Brand** (`#7553ff`): primary link colour, primary CTA when violet variant.
- **Brand Hover** (`#6240e8`): pressed state.
- **Brand Mid** (`#6a5fc1`): nav hover, secondary link.
- **Coral** (`#ffb287`): focus state background (rare, decorative).
- **Focus Ring**: `2px solid #7553ff` + `0 0 0 3px rgba(117,83,255,0.30)` purple halo.
### Neutral Scale
White-to-violet tinted ramp:
- **Text** (`#ffffff`): primary copy, pure white on dark.
- **Text Muted** (`#c8c5d8`): body paragraphs, slightly violet-tinted (warmer than pure gray).
- **Text Soft** (`#9b97ad`): captions, metadata, footer secondary.
- **Text Faint** (`#6e6a82`): disabled, faintest, tertiary metadata.
- **Code Yellow** (`#dcdcaa`): syntax highlighting accent.
- **Text on Brand** (`#ffffff`): white on violet pill.
- **Text on CTA** (`#1a1a1a`): near-black on near-white pill (intentionally not pure black — softer ink).
- **Text on Light** (`#1f1633`): aubergine ink on light surfaces — matches canvas tone.
### Surface & Borders
- **Surface** (`#181225`): secondary surface panels.
- **Surface Deep** (`#362d59`): tinted callout, border ladder.
- **BG Elevated** (`#2b1b3d`): raised card surface.
- **Glass White** (`rgba(255,255,255,0.18)`): frosted glass button bg.
- **Glass Violet** (`rgba(54,22,107,0.14)`): hover overlay on glass.
- **Border** (`rgba(255,255,255,0.08)`): primary hairline divider — ~8% white tint.
- **Border Soft** (`rgba(255,255,255,0.04)`): softer divider, code block trim.
- **Border Strong** (`rgba(255,255,255,0.16)`): hover/focus outline on cards.
- **Border Violet** (`#584674`): tactile button border — muted purple trim.
- **Border Light Input** (`#cfcfdb`): form field border on light context.
### Shadow Colors
Sentry's shadow vocabulary is **warm-purple-tinted**, never neutral gray. The signature is the deep aubergine ambient glow:
- **Inset Button** (`rgba(0,0,0,0.10) 0 1px 3px 0 inset`): tactile pressed-into-surface — the brand's most physical move.
- **Glass** (`rgba(0,0,0,0.08) 0 2px 8px`): subtle lift on frosted panels.
- **Card** (`rgba(0,0,0,0.10) 0 10px 15px -3px`): standard card elevation.
- **Hover** (`rgba(0,0,0,0.18) 0 0.5rem 1.5rem`): elevated hover state.
- **Ambient Glow** (`rgba(22,15,36,0.90) 0 4px 4px 9px`): the deep aubergine ambient glow around hero — bioluminescent quality.
- **Prominent** (`rgba(0,0,0,0.24) 0 24px 48px -12px`): modal backdrop.
- **Ring** (`0 0 0 2px #7553ff`): primary focus indicator.
- **Ring Soft** (`0 0 0 3px rgba(117,83,255,0.30)`): secondary focus halo.
The `rgba(22,15,36,0.90)` ambient is Sentry's signature — that warm aubergine-tinted shadow is what creates the "content emits its own purple light" quality. Pure-black shadows would punch through; the violet-tinted glow merges into the canvas.
### Semantic
- **Success** (`#c2ef4e`): lime — also illustration accent.
- **Warning** (`#fdb81b`): yellow — dashboard severity, warning chips.
- **Danger** (`#ff70bc`): error pink — playful danger register (Sentry's most distinctive choice — most observability brands use saturated red here).
- **Info** (`#7553ff`): signature violet doubles as info colour.
The choice of pink-not-red for danger is a brand fingerprint. Sentry's whole register insists that "errors are not catastrophes — errors are the product." Pink danger softens the panic.
## 3. Typography Rules
### Font Family
- **Display:** `"Dammit Sans", Rubik, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif`. Custom geometric display face — slightly chunky, almost cartoon-confident. Used at 88px / 700 for the homepage hero. The face has bulletin-board energy that gives Sentry's marketing its "you can fix this" voice.
- **Body / UI:** `Rubik, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif`. Humanist geometric originally designed for Hebrew/Latin pairing. Rubik gives Sentry warmth that Inter and Söhne don't — body copy reads as approachable rather than systemic. Weights 400 / 500 / 600 / 700.
- **Mono:** `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`. JetBrains' standard IDE monospace — quiet credibility move: Sentry's audience already opens IntelliJ, PyCharm, WebStorm every morning and sees this typeface daily.
- **OpenType:** `kern`, `liga` standard. Mono enables `tnum` (tabular figures for stack traces), `zero` (slashed zero), and `calt` (contextual alternates for `==>`, `!=`, etc.).
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Dammit Sans | 88 | 700 | 1.20 | normal | kern, liga | Maximum impact — "Code breaks. Fix it faster." |
| display-large | Dammit Sans | 72 | 700 | 1.15 | -0.005em | kern, liga | Section hero |
| display-secondary | Dammit Sans | 60 | 500 | 1.10 | normal | kern, liga | Secondary hero text |
| h1 | Dammit Sans | 56 | 700 | 1.10 | -0.01em | kern, liga | Page H1 |
| h2 | Rubik | 44 | 700 | 1.15 | -0.01em | kern, liga | Section heads — Rubik takes over below display tier |
| h3 | Rubik | 32 | 600 | 1.25 | 0 | kern, liga | Sub-section heads |
| h4 | Rubik | 27 | 500 | 1.25 | 0 | kern, liga | Feature card headings |
| h5 | Rubik | 24 | 500 | 1.25 | 0 | kern, liga | Card and block headings |
| feature-title | Rubik | 20 | 600 | 1.25 | 0 | kern, liga | Emphasized feature names |
| body-large | Rubik | 18 | 400 | 1.60 | 0 | kern, liga | Hero deck |
| body | Rubik | 16 | 400 | 1.60 | 0 | kern, liga | Default body |
| body-emphasis | Rubik | 16 | 500 | 1.60 | 0 | kern, liga | Bold body, nav items |
| nav-link | Rubik | 15 | 500 | 1.40 | 0 | kern | Top nav links |
| button | Rubik | 14 | 500 | 1.20 | 0.014em | uppercase | Primary CTA label |
| button-strong | Rubik | 14 | 700 | 1.20 | 0.014em | uppercase | Tactile button — heavy weight |
| label | Rubik | 15 | 500 | 1.25 | 0 | uppercase | Section eyebrow uppercase |
| caption | Rubik | 14 | 500 | 1.40 | 0.014em | kern | Caption, often uppercase |
| micro | Rubik | 10 | 600 | 1.80 | 0.018em | uppercase | Subtle annotations |
| code | JetBrains Mono | 14 | 400 | 1.55 | 0 | tnum, zero, calt | Inline code chip |
| code-bold | JetBrains Mono | 14 | 500 | 1.55 | 0 | tnum, zero | Code emphasis |
| code-block | JetBrains Mono | 13 | 400 | 1.60 | 0 | tnum, zero, calt | Multi-line code, stack traces |
### Principles
- **Dual personality.** Dammit Sans brings irreverent brand character at display tier (88–56px); Rubik provides clean professionalism for everything functional (44px and below). The handoff is exactly at the h1/h2 line — display is custom, structural is humanist.
- **Uppercase as system.** Buttons, captions, labels, and micro-text all use `text-transform: uppercase` with subtle letter-spacing (0.014em–0.018em), creating a systematic "technical label" pattern throughout. Body and headlines stay sentence case.
- **Weight stratification on Rubik.** Four-tier weight system: 400 (body), 500 (emphasis/nav), 600 (titles/strong), 700 (buttons/CTAs). Each weight has a specific role; mixing within a tier is forbidden.
- **Tight headings, relaxed body.** All headings use 1.10–1.25 line-height; body uses 1.60; small captions expand to 1.80 for readability at tiny sizes. The contrast is deliberate — display tier is dense and confident, body tier is open and readable.
- **JetBrains Mono is non-negotiable for code.** Every code sample, error trace, dashboard label, install command, and inline `<code>` chip uses JetBrains Mono. The OpenType `calt` (contextual alternates) ligatures `==>`, `!=`, `=>` render Sentry's docs and error traces with the same arrows users see in IntelliJ/PyCharm.
- **Slashed zero by default.** Mono `zero` feature is on always — distinguishes 0 from O in error codes, hashes, and DSN strings. Critical for ops/debugging context.
- **No display below 56px.** Dammit Sans never appears below h1 size. The custom display is reserved for moments where its character earns the load; using it at 32px would dilute the bulletin-board energy.
- **Tracking discipline.** Display tier uses near-zero or slightly negative tracking (-0.005em to -0.01em). Body tier is zero. Uppercase labels and buttons get +0.014em to +0.018em — uppercase always needs space.
## 4. Component Stylings
### Buttons
**Primary Pill CTA (Near-White)**
- Background: `#efefef` (intentionally not pure white — softer pill against deep aubergine)
- Text: `#1a1a1a` near-black, uppercase, 14px Rubik weight 500, letter-spacing 0.014em
- Padding: `12px 20px`, height 44
- Radius: 9999 (full pill)
- Border: none
- Hover: background lifts to `#ffffff`; subtle `scale(1.02)` transform
- Active: background `#e6e6e6`
- Use: hero CTA — Try Sentry Free, Get Started. The signature near-white pill.
**Brand Pill (Signature Violet)**
- Background: `#7553ff`
- Text: `#ffffff`, uppercase, 14px Rubik weight 500
- Padding: `12px 20px`, height 44
- Radius: 9999
- Hover: background `#6240e8`
- Active: background `#5230d4`
- Use: secondary actions, in-product CTAs, anywhere violet wants to lead.
**Tactile Muted-Purple (Pressed-INTO-Surface)**
- Background: `#79628c` (muted purple)
- Text: `#ffffff`, uppercase, 14px Rubik weight 500–700, letter-spacing 0.014em
- Border: `1px solid #584674` (slightly darker muted-purple trim)
- Radius: 13 (tactile, not pill)
- Padding: `10px 18px`, height 42
- Shadow: `rgba(0,0,0,0.10) 0 1px 3px 0 inset` (the inset shadow is the signature — button feels pressed INTO the surface)
- Hover: shadow elevates to `rgba(0,0,0,0.18) 0 0.5rem 1.5rem` (pulls UP from the surface)
- Use: secondary actions where physicality matters — pricing CTAs, dashboard chips. The tactile button is Sentry's most physical move.
**Glass White (Frosted)**
- Background: `rgba(255,255,255,0.18)`
- Text: `#ffffff`
- Padding: 8px (split-rounded variant: `12px 0 0 12px`)
- Radius: 12 (or compound for attached variants)
- Backdrop: `blur(18px) saturate(180%)`
- Shadow: `rgba(0,0,0,0.08) 0 2px 8px`
- Hover: background `rgba(54,22,107,0.14)` violet overlay
- Use: secondary action overlaid on hero illustrations.
**Deep Violet (Select / Dropdown)**
- Background: `#422082`
- Text: `#ffffff`, 14px Rubik weight 500
- Padding: `8px 16px`, height 36
- Radius: 8
- Use: filter chips, dropdown buttons, high-emphasis selectors.
**Ghost (Inline)**
- Background: transparent
- Text: `#ffffff`, uppercase, 14px Rubik weight 500
- Padding: `10px 16px`
- Radius: 9999
- Hover: background `rgba(255,255,255,0.06)`
- Use: nav button, inline ghost CTA.
### Cards
**Elevated Card**
- Background: `#2b1b3d`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: 16
- Padding: 32
- Shadow: `rgba(0,0,0,0.10) 0 10px 15px -3px`
- Use: feature card on aubergine canvas — the default elevated tier.
**Glass Card**
- Background: `rgba(255,255,255,0.18)`
- Border: `1px solid rgba(255,255,255,0.16)`
- Radius: 12
- Padding: 24
- Backdrop: `blur(18px) saturate(180%)`
- Use: frosted glass panel — overlaid on hero illustrations or screenshots.
**Deep Card**
- Background: `#181225`
- Border: `1px solid rgba(255,255,255,0.04)`
- Radius: 12
- Padding: 28
- Use: secondary surface panel — flat trim, no shadow.
### Code Blocks & Chips
**Code Block (Multi-line)**
- Background: `#0f0c1a` (the darkest tier)
- Text: `#ffffff` with syntax highlighting in `#7553ff` / `#dcdcaa` / `#ff70bc`
- Border: `1px solid rgba(255,255,255,0.04)`
- Radius: 12
- Padding: `16px 20px`
- Font: JetBrains Mono 13 / 400 / 1.6
- Use: error stack traces, multi-line samples.
**Code Chip (Inline)**
- Background: `#0f0c1a`
- Text: `#7553ff` (signature violet ink for inline code emphasis)
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: 6
- Padding: `4px 8px`
- Font: JetBrains Mono 14 / 400
- Use: inline code chip — error code, package names, DSN snippets.
### Inputs / Forms
**Light Input**
- Background: `#ffffff`
- Text: `#1f1633` (aubergine ink, not pure black)
- Border: `1px solid #cfcfdb`
- Padding: `8px 12px`, height 40
- Radius: 6
- Focus: shadow `rgba(0,0,0,0.15) 0 2px 10px inset` (border stays — the inset shadow is the focus signal)
- Use: light-context email/form input.
**Dark Input**
- Background: `#0f0c1a`
- Text: `#ffffff`
- Border: `1px solid rgba(255,255,255,0.08)`
- Padding: `10px 14px`, height 42
- Radius: 8
- Focus: border `#7553ff` + ring `0 0 0 3px rgba(117,83,255,0.30)` purple halo
- Use: dark-context input — search, signup form on aubergine canvas.
### Badges
**Violet Pill Badge**
- Background: `rgba(117,83,255,0.20)` violet tint
- Text: `#c8c5d8` muted-cream
- Border: `1px solid rgba(117,83,255,0.40)`
- Radius: 9999, Padding: `4px 12px`
- Font: Rubik 10 / 600 / uppercase / 0.018em
- Use: NEW / category badges.
**Yellow Severity Badge**
- Background: `rgba(253,184,27,0.20)` yellow tint
- Text: `#fdb81b`
- Border: `1px solid rgba(253,184,27,0.40)`
- Radius: 9999
- Use: warning / dashboard severity / "BETA" tag.
### Navigation
**Top Nav**
- 64px tall, transparent over hero (or `#1f1633` solid on scroll)
- 1px `rgba(255,255,255,0.04)` border-bottom on scroll
- Links: Rubik 15 / 500 / `#ffffff`, hover color `#6a5fc1` (mid-violet)
- Category labels: uppercase, 0.014em letter-spacing, `#c8c5d8` muted
**Nav Link**
- Background: transparent
- Text: `#ffffff`, Rubik 15 / 500
- Padding: `8px 14px`
- Hover: color `#6a5fc1`
- Use: top nav menu — Product / Pricing / Docs / Customers / Pricing.
### Decorative
**3D Character Illustrations**
- Recurring 3D character art, colorful product screenshots, error-state mockups
- Use: punctuate dark canvas with bursts of pink (`#ff70bc`), coral (`#ffb287`), lime (`#c2ef4e`)
- Always decorative — never carry information that isn't also in text.
**Ambient Purple Glow**
- Shadow: `rgba(22,15,36,0.90) 0 4px 4px 9px`
- Use: hero zone ambient glow — content seems to emit purple light against the canvas.
## 5. Layout Principles
### Spacing System
Base 4px. Scale: 2 / 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128 / 160. Section gaps 96px (the standard rhythm); inside-card padding 28–32; nav padding `8px 14px`; grid gap 24.
The density observation: Sentry's whitespace is **generous between sections** but **tight within cards**. Hero zones often run 720px+ tall to give the deep aubergine room to breathe; cards are dense with content. The light/dark *tonal* shift (rather than spacing) is the primary section-rhythm device.
### Grid & Container
- **Page width:** 1280px max container
- **Prose width:** 720px (intro paragraphs, long-form copy)
- **Header height:** 64px
- **Hero height:** 720px (often 720px+ on homepage)
- **Grid gap:** 24px between feature cards
- **Grid:** 12-column, honored quietly under feature comparison tables and pricing grids
The hero is **left-aligned** (rare for product analytics — most observability brands center their hero). Headlines run 88px Dammit Sans / 700 with the call to action stacked below, leaving the right column open for 3D illustration or product screenshot.
Below the hero, multi-column dense product surface — feature panels stack horizontally and vertically. Cards stack 3-col → 2-col → 1-col responsive collapse. The pricing surface is a 3-tier grid with a "Most Popular" middle tier slightly elevated.
### Whitespace Philosophy
Sentry's whitespace is **dark breathing room**. Generous vertical spacing between sections (96px standard, 128px for hero-to-feature transitions) lets the deep aubergine canvas serve as a visual rest. Inside cards and panels, density is moderate — the 32px card padding gives text room without feeling lavish.
The trick: the dark canvas itself functions as whitespace. Where a light-canvas brand would need 160px of section padding to feel airy, Sentry can run 96px because the aubergine is doing emotional whitespace work.
### Section Cadence
Aubergine canvas (`#1f1633`) → deeper section (`#150f23`) → aubergine → near-black band (`#0f0c1a`, often code-heavy) → footer (`#150f23`). The tonal violet-ladder sections are the page's rhythm device — there are almost no light-canvas inversions on Sentry's marketing surface. The system stays dark.
A typical homepage flow:
1. Hero (`#1f1633`) with 88px Dammit Sans + near-white pill CTA — 720px+
2. "How it works" feature spread (`#1f1633` with elevated `#2b1b3d` cards) — 800px
3. Code-block emphasis section (`#0f0c1a` band, JetBrains Mono samples) — 600px
4. Customer logos / social proof (`#150f23` deeper band) — 300px
5. Pricing tier grid (`#1f1633`) — 700px
6. "Sentry for [language]" SDK strip (`#150f23`) — 400px
7. Footer (`#150f23`)
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Edge-bound elements |
| Micro | 4 | Decorative pills, smallest chips |
| XS | 4 | Tag chips |
| SM | 6 | Form inputs, code chips, small interactive |
| MD | 8 | Buttons (deep-violet variant), cards (default minimum), dropdowns |
| LG | 12 | Glass panels, code blocks, larger containers |
| **Card** | **16** | **Elevated cards — default feature card** |
| XL | 18 | Image containers, badge variants |
| **Tactile** | **13** | **Muted-purple tactile button — physical register** |
| **Pill** | **9999** | **Primary CTAs — full pill, the brand fingerprint** |
The radii ladder is **4 / 6 / 8 / 12 / 16 / 18**, with `9999px` pill reserved for primary CTAs. The pill-button discipline is the most visually distinctive shape decision: it pulls Sentry away from the "8px square button" default of Linear/Vercel and signals consumer-friendly, illustration-rich product personality.
The tactile 13px radius on the muted-purple button is unusual — neither pill nor squared. The slightly-non-standard radius reads as physical, almost analog, against the systematic 4/8/12/16 grid. It's a deliberate misalignment that gives the tactile button its hand-crafted feel.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| -1 (Sunken) | `rgba(0,0,0,0.10) 0 1px 3px 0 inset` | Tactile primary buttons — pressed-INTO-surface |
| 0 (Flat) | No shadow, hairline border only | Default surfaces, dark backgrounds, text bands |
| 1 (Surface) | `rgba(0,0,0,0.08) 0 2px 8px` | Glass buttons, subtle cards |
| 2 (Elevated) | `rgba(0,0,0,0.10) 0 10px 15px -3px` | Cards, floating panels |
| 3 (Prominent) | `rgba(0,0,0,0.18) 0 0.5rem 1.5rem` | Hover states, modals, popovers |
| 4 (Ambient) | `rgba(22,15,36,0.90) 0 4px 4px 9px` | Deep purple ambient glow — hero zones |
| 5 (Modal Backdrop) | `rgba(0,0,0,0.24) 0 24px 48px -12px` | Modal backdrop |
### Shadow Philosophy
Sentry uses a unique **three-layer depth system**: tonal stacking, inset shadows, and ambient glow. Each handles a different elevation problem:
1. **Tonal stacking on the violet axis** (`#0f0c1a` → `#1f1633` → `#2b1b3d`) is the dominant strategy. The 8% white hairline (`rgba(255,255,255,0.08)`) separates raised surfaces. There are almost no traditional shadows in chrome — the colour-temperature shift between layers does the work. Code blocks drop to the darkest tier; hero illustrations float on the elevated tier.
2. **Inset shadows on tactile buttons** (`rgba(0,0,0,0.10) 0 1px 3px 0 inset`) create a sunken, pressed-INTO-surface quality. This is Sentry's most physical move — almost no other observability brand uses sunken depth. The inset shadow is what makes the muted-purple button feel like a physical key.
3. **Ambient purple glow** (`rgba(22,15,36,0.90) 0 4px 4px 9px`) is the signature. The deep aubergine ambient shadow creates a bioluminescent quality where content seems to emit its own purple-tinted light. Pure-black shadows would punch through; the violet-tinted glow merges into the canvas. Reserved for hero zones, large illustrations, and the rare pricing-tier "Most Popular" card.
Hover lifts use `rgba(0,0,0,0.18) 0 0.5rem 1.5rem` — neutral black, slight elevation. The transition from inset → elevated on tactile buttons is the brand's most satisfying micro-state.
## 8. Interaction & Motion
### Easing Curves
- **Standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — default ease-in-out for hover transitions, color shifts.
- **Emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — modal entrance, hero reveal.
- **Entrance:** `cubic-bezier(0, 0, 0.2, 1)` — content fade-in on scroll.
- **Out:** `cubic-bezier(0.16, 1, 0.3, 1)` — overshoots on illustration entrance.
### Duration Buckets
- **Fast (120ms):** color transitions, button hover, link hover.
- **Standard (200ms):** card hover, dropdown open, transitions.
- **Slow (320ms):** hero fade-in, modal entrance.
- **Hero (480ms):** section parallax, hero illustration entrance.
### Per-Component Micro-States
- **Pill CTA (near-white):** background `#efefef` → `#ffffff` on hover with `scale(1.02)` transform. 120ms standard.
- **Pill CTA (violet):** background `#7553ff` → `#6240e8` on hover. 120ms.
- **Tactile button (muted-purple):** the signature transition — inset shadow `rgba(0,0,0,0.10) 0 1px 3px 0 inset` → hover lifts to `rgba(0,0,0,0.18) 0 0.5rem 1.5rem`. The button rises from sunken to elevated. 200ms standard ease-out.
- **Card (elevated):** border opacity 0.08 → 0.16 on hover; subtle `translateY(-2px)`. 200ms.
- **Glass card:** backdrop-filter blur intensifies subtly; opacity stays. 200ms.
- **Code chip:** background `#0f0c1a` → `#181225` on hover. 120ms.
- **Link / nav-link:** color `#ffffff` → `#6a5fc1` (mid-violet). 120ms.
- **Brand link (in-text):** color `#7553ff` → `#6240e8` with underline grow from 0 → full. 120ms.
### Page Transitions
- **Hero:** content fades + 12px translateY rise. 480ms ease-emphasized.
- **Below-fold sections:** fade + 8px translateY on scroll-into-viewport. 320ms ease-entrance.
- **Modal entrance:** scale `0.96 → 1` + fade. 200ms ease-emphasized.
- **Dropdown open:** translateY `-4px → 0` + fade. 120ms.
- **Tab swap:** cross-fade 200ms, no translation.
### Scroll Behavior
- Sticky nav becomes opaque (`#1f1633` solid + `1px rgba(255,255,255,0.04)` border-bottom) after 64px scroll.
- Hero illustrations parallax slowly (~0.3 multiplier) for the first 480px.
- Section reveal: `opacity: 0 → 1` + `translateY(8px → 0)` on `IntersectionObserver` 0.1 threshold.
### Reduced Motion
`@media (prefers-reduced-motion: reduce)`:
- All translateY rises collapse to opacity-only.
- Scale transforms freeze.
- Illustration parallax disabled.
- Hover lift transitions persist as opacity-only (they aid usability).
- Color transitions persist (purely informational).
- Hero entrance becomes instant fade.
## 9. Accessibility & A11y
### Contrast Pairs
- **Primary text on canvas:** `#ffffff` on `#1f1633` → 16.4:1. **AAA at body sizes.**
- **Muted text on canvas:** `#c8c5d8` on `#1f1633` → 9.8:1. **AAA at body.**
- **Soft text on canvas:** `#9b97ad` on `#1f1633` → 5.7:1. **AA at body, AAA at large.**
- **White on signature violet:** `#ffffff` on `#7553ff` → 5.1:1. **AA at body, AAA at large.**
- **Near-black on near-white pill:** `#1a1a1a` on `#efefef` → 14.6:1. **AAA.**
- **White on tactile muted-purple:** `#ffffff` on `#79628c` → 4.7:1. **AA at body** (passes by 0.2 — careful with small text).
- **White on deep violet:** `#ffffff` on `#422082` → 9.2:1. **AAA.**
- **Code violet on darkest:** `#7553ff` on `#0f0c1a` → 5.6:1. **AA at body, AAA at large** (used for inline code chip ink).
- **Faint text:** `#6e6a82` on `#1f1633` → 3.0:1 — *fails body sizes*. Reserve for disabled states only.
### Focus Indicators
- **Primary focus ring:** `2px solid #7553ff` + `0 0 0 3px rgba(117,83,255,0.30)` purple halo (4px combined offset). The violet ring matches signature brand colour and is highly visible against the aubergine canvas.
- **Form fields (light context):** shadow `rgba(0,0,0,0.15) 0 2px 10px inset` — the inset focus is the pattern.
- **Form fields (dark context):** border `#7553ff` + ring `0 0 0 3px rgba(117,83,255,0.30)`.
- **Coral focus variant:** rare — `rgba(106,95,193,1) solid 0.125rem` for special-emphasis focusable elements.
### ARIA Pattern Recommendations
- **Top nav:** `<nav aria-label="Primary">` with skip-link to `#main-content`.
- **Mega-menu dropdowns:** `role="menu"` + `aria-haspopup` on trigger, `aria-expanded` on open.
- **Pricing toggle (monthly/yearly):** `role="group"` + `aria-pressed` on each option.
- **Modal / dialog:** `role="dialog"` + `aria-modal="true"` + focus trap; Esc closes.
- **Code blocks:** `<pre><code>` with `aria-label="Error stack trace example"` for context.
- **Decorative illustrations:** `aria-hidden="true"` — purely decorative.
- **CTA buttons:** semantic `<button>`/`<a>`, descriptive labels ("Try Sentry Free" not "Try Free", "Get a demo of Sentry" not "Get demo").
### Keyboard Navigation
- **Tab order:** skip-link → nav → primary CTA → secondary CTA → page content → footer.
- **Skip-link** to `#main-content` first focus stop.
- **Mega-menu:** arrow keys navigate within open menu; Esc closes; Tab continues to next nav item.
- **Pricing toggle:** arrow keys swap monthly/yearly.
- **FAQ accordion:** Tab to expand, Enter/Space to toggle, Esc to collapse.
- **Modal:** focus trap inside open modal; Esc closes; Tab cycles within.
### Screen Reader Hints
- Decorative 3D character illustrations: `aria-hidden="true"`.
- Code chips: rendered in `<code>` so screen readers announce as code.
- Install commands: announce literally — `"npx @sentry/wizard@latest -i nextjs"`.
- Severity badges: `aria-label="Severity: warning"` for color-only context.
- Logo: `aria-label="Sentry"`.
### Reduced Motion
`prefers-reduced-motion: reduce` honored globally. Translation transforms collapse to opacity. Parallax disabled. Hover state colour transitions persist for usability.
## 10. Responsive Behavior
### Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–576px | Single column, hamburger nav, stacked CTAs |
| Small Tablet | 576–768px | 2-column features begin |
| Tablet | 768–992px | Full nav visible, side-by-side layouts |
| Desktop | 992–1152px | Standard layout |
| Wide | 1152–1440px | Max-width 1280px container caps |
| Ultra | 1440px+ | Container caps; generous side margins |
### Touch Targets
- **Pill CTAs:** 44px height — meets WCAG 2.5.5 with surrounding hit area.
- **Tactile buttons:** 42px — pad to 44 with `py-1` surrounding hit zone.
- **Nav links:** 44px hit area on mobile (smaller visual chrome, larger tap target).
- **Code chips:** 28px tall — not tap targets, decorative only.
### Collapsing Strategy
- **Hero text:** Dammit Sans 88 → 72 → 60 → 44. Line-height stays 1.10–1.20.
- **Navigation:** horizontal → hamburger with full-width slide-out menu at <768px.
- **Feature grid:** 3-col → 2-col → 1-col stacked. Card padding 32 → 28 → 24.
- **Pricing grid:** 3-col → vertical stack on mobile, "Most Popular" tier first.
- **Hero illustration:** 3D character art column collapses below content on mobile.
- **CTA pair:** inline pair → full-width stacked, primary on top.
- **Container padding:** 64 → 32 → 16 horizontal.
### Image Behavior
- 3D character illustrations: SVG / WebP, scale fluidly.
- Product UI screenshots: aspect-ratio container, lazy-loaded below fold.
- Customer logos: SVG, low opacity hover restores to full.
- Hero ambient glow: fixed pixel offset, scales with viewport but not container.
### Container Queries
The pricing grid and feature card surfaces are good candidates for `@container` queries — switching between 3-col and stacked layouts based on container width rather than viewport, especially in dashboard embed contexts.
## 11. Content & Voice
### Tone
**Confident, irreverent, technical.** Sentry talks like a senior engineer who's seen production incidents and refuses to dress them up. The voice is matter-of-fact about errors ("Code breaks. Fix it faster."), allergic to corporate marketing-speak, and willing to be funny. The brand insists errors are *not catastrophes — errors are the product*. That posture is what licenses the pink-not-red danger color, the bulletin-board display type, and the playful 3D illustrations.
### Microcopy Patterns
- **Headlines:** capability + bluntness. "Code breaks. Fix it faster." "Application monitoring built for engineers." "Stop guessing. Get to the root cause."
- **Decks:** specifics over claims. "Sentry combines error tracking, session replay, performance monitoring, and profiling — all in one developer-friendly platform with first-class integrations for every framework."
- **CTA verbs:** "Try Sentry Free", "Get Started", "Install with one command", "Talk to sales", "Read the docs". Always concrete + actionable.
- **Error messages** (in-product convention): friendly + recovery-oriented. "We couldn't connect to your project. Check your DSN and try again." Never stack-trace-leaking.
- **Empty states:** instructional, often with a code suggestion or install command.
### Empty States
In-product: "No errors yet — that's a good thing! Install the Sentry SDK to start tracking." The pattern is **friendly + concrete next step** — never just "No data." Often pairs with an install command rendered in JetBrains Mono.
### Success Confirmations
- After install: "Welcome! Your first event will appear here once your app sends data."
- After signup: "Check your email — we sent you a magic link to sign in."
- Toast pattern: icon (small 3D illustration) + short message + optional action button. 320ms ease-out entrance.
### CTA Verb Conventions
The verbs Sentry uses, ranked:
1. **Try Sentry Free** (primary conversion — always with brand name)
2. **Get Started**
3. **Install with one command**
4. **Read the docs**
5. **Talk to sales** (enterprise tier)
6. **Watch demo** (rare — Sentry prefers self-serve)
7. **Sign In** (returning users)
What Sentry *doesn't* say: "Sign up now" (too aggressive), "Schedule a meeting" (Sentry avoids gated demos as primary CTA), "Click here" (never), "Contact us" (replaced by "Talk to sales" for enterprise). The voice avoids B2B marketing-speak entirely.
### Voice in Code Examples
Code samples often include intentionally human comments — `// this is the line that broke prod`, `// catch all the things` — anchoring Sentry's "we are engineers writing for engineers" register. The comments aren't generic Lorem-Ipsum placeholder text.
## 12. Dark Mode & Theming
Sentry's marketing site is **dark-mode-first and dark-only**. The brand was built for dark canvas — the deep aubergine `#1f1633` is non-negotiable, and there is no light-canvas variant of the marketing surface. The entire colour, type, illustration, and shadow system assumes dark ground.
The in-product app does support both light and dark themes (the dashboard offers a light variant for users who prefer it), but the marketing site never inverts. The aesthetic case: Sentry is for developers, who already work in dark IDEs; pretending the brand is canvas-agnostic would dilute its register.
If a third party wanted to render Sentry-flavored chrome on a light canvas (e.g., embedded in a documentation site that's light-mode), the canonical inversion would be:
```yaml
# Hypothetical light-canvas variant — NOT used on sentry.io marketing
colors-light:
bg: '#ffffff' # pure white canvas
bg-deep: '#f7f6fa' # tinted-violet near-white
bg-soft: '#efeef4' # deepest near-white tier
surface: '#ffffff'
surface-elev: '#faf9fc'
text: '#1f1633' # aubergine ink stays — matches brand
text-muted: '#4a3f6b'
text-soft: '#7e7494'
brand: '#7553ff' # signature violet stays — high contrast on both
brand-hover: '#5230d4'
brand-deep: '#422082'
border: 'rgba(31,22,51,0.08)'
border-soft: 'rgba(31,22,51,0.04)'
shadow-card: 'rgba(31,22,51,0.06)'
on-brand: '#ffffff'
```
Note: the signature violet `#7553ff` and aubergine ink `#1f1633` remain unchanged — they're high-contrast against both dark and light. The mode is a tonal inversion, not a chromatic swap. Sentry's marketing site does not use this variant.
## 13. Lineage & Influences
Sentry's design lineage is **dark-mode developer warmth** — a tradition that pulls from JetBrains' IDE chromatic register (warm darks, syntax violets), Stripe's single-hue brand discipline (one confident colour does all the heavy lifting), and Mailchimp's quirky display-typography move (custom display + humanist body). The design rejects the cold corporate grays of Datadog, the terminal-blacks of Vercel, and the structural rigour of Linear — Sentry chooses warmth, illustration, and bulletin-board confidence over any of those.
The type stack is the brand's most explicit signal: **Dammit Sans** (custom display) + **Rubik** (humanist Apache 2.0) + **JetBrains Mono** (Apache 2.0) is a fully open-license-or-custom type stack. The choice of JetBrains Mono is especially load-bearing — it's the same monospace Sentry's audience sees every day inside IntelliJ, PyCharm, and WebStorm. Using it on marketing is a credibility move: Sentry is part of the JetBrains visual lineage that its users already trust.
What Sentry *rejects*: the SOC-dashboard aesthetic of Datadog (corporate gray-and-purple); the terminal-black brutalism of Vercel; the structural rigour of Linear; the white-canvas-and-blue-CTA monoculture of every other observability brand. The brand chooses to look hand-crafted, illustrated, and willing to be funny — in exchange for trust from developers who are tired of glossy SaaS.
The pill-button discipline (`9999px` radius) is the most distinctive single decision. Square-cornered 8px buttons are the dev-tool default; Sentry's pill softens the entire register and pulls the system toward consumer-app friendliness. Combined with the tactile inset-shadow muted-purple button, the system has *two* button registers — one consumer-warm pill, one engineer-physical tactile. That duality is Sentry's clever middle-ground between Linear-style minimalism and Mailchimp-style playfulness.
**Influences:**
- **Stripe** — single-hue brand discipline, one confident colour does the work (https://stripe.com)
- **JetBrains** — JetBrains Mono and the IDE chromatic register; warm darks, syntax violets (https://www.jetbrains.com)
- **Mailchimp** — Rubik humanist sans + quirky custom display pairing for friendlier tech voice (https://mailchimp.com)
- **Linear** — adjacent dev-tool peer; Sentry softens against Linear's structural rigour (https://linear.app)
- **Datadog** — closest observability competitor in violet spectrum; Sentry pushes brighter and warmer (https://www.datadoghq.com)
- **Dammit Sans** (custom) — bulletin-board energy; "Code breaks. Fix it faster." voice
- **Rubik** (Hubert & Fischer / Google Fonts) — humanist Hebrew/Latin pairing; Apache 2.0
- **JetBrains Mono** (JetBrains) — open-license IDE monospace; ligature-rich; Apache 2.0
## 14. Do's and Don'ts
### Do's
- **Do** use deep aubergine `#1f1633` as the canvas — never pure black `#000000`. The warm purple undertone is the brand's defining gesture.
- **Do** stack three violet-tonal layers (`#0f0c1a` → `#1f1633` → `#2b1b3d`) for depth instead of reaching for shadows. Tonal stacking is the primary elevation strategy.
- **Do** keep the signature violet `#7553ff` as the only structural brand colour. Secondary accents (pink, coral, lime) are illustration-only, never structural chrome.
- **Do** use Dammit Sans **only** for hero/display tier (56px and above). Below that, hand off to Rubik. The custom display is reserved for moments where its character earns the load.
- **Do** use JetBrains Mono for **every** code sample, error trace, install command, and inline code chip. It's the typographic stamp that ties Sentry to the JetBrains IDE lineage.
- **Do** use full pill (`9999px`) for primary CTAs. The pill is the brand's friendliness signal — consumer-warm against the developer-dark canvas.
- **Do** apply inset shadows (`rgba(0,0,0,0.10) 0 1px 3px 0 inset`) on tactile muted-purple buttons. The pressed-INTO-surface quality is signature.
- **Do** apply uppercase + 0.014em tracking on buttons and labels. The systematic technical-label pattern is brand DNA.
- **Do** use Rubik's 4-tier weight system: 400 (body), 500 (nav/emphasis), 600 (titles), 700 (CTAs). Each weight has a specific role.
- **Do** ship 3D character illustrations and colorful product screenshots as decorative bursts. The illustration-rich register is the anti-corporate signal.
- **Do** use frosted glass (`backdrop-filter: blur(18px) saturate(180%)`) for layered surfaces over hero illustrations.
- **Do** maintain warm purple-tinted shadow tones. The deep aubergine ambient (`rgba(22,15,36,0.90)`) creates the bioluminescent quality.
### Don'ts
- **Don't** flatten the body bg to pure black `#000000`. The warm aubergine is what gives Sentry its handmade character — terminal-black would tilt the brand toward Vercel's brutalism.
- **Don't** use Dammit Sans below 56px or for body text. The custom display loses its character at small sizes; Rubik does that work.
- **Don't** mix Rubik with Inter or Söhne in the same module. Rubik's humanist warmth is intentional contrast against the systemic-sans observability competition.
- **Don't** swap pill buttons for square 8px-radius buttons. The full pill is the brand's friendliness signal — square corners pull the register toward Linear's structural rigour.
- **Don't** drop the inset shadow on tactile muted-purple buttons. The pressed-into-surface quality is signature; flat shadows would dilute it.
- **Don't** drop the uppercase + letter-spacing treatment on buttons and labels. It's a system-wide pattern; breaking it makes UI feel inconsistent.
- **Don't** use saturated red for danger states. Sentry uses error-pink `#ff70bc` because the brand register insists errors are *the product*, not catastrophes.
- **Don't** mix the lime-green accent with the coral/pink accents in the same component. The illustration palette uses one accent at a time per surface.
- **Don't** use neutral gray shadows. Sentry's shadows are warm-purple-tinted (`rgba(22,15,36,...)`) — neutral grays would punch through the canvas.
- **Don't** use standard gray (`#666`, `#999`) for borders. Use white-tinted alphas (`rgba(255,255,255,0.08)`) on dark or violet-tinted neutrals (`#362d59`, `#584674`).
- **Don't** center-align the hero. Sentry's left-aligned hero leaves room for 3D illustration on the right column — centering the hero would orphan the illustration system.
- **Don't** schedule-a-demo as the primary CTA. Sentry's brand explicitly prefers self-serve "Try Sentry Free" over gated demos.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg (aubergine): #1f1633
bg-deep: #150f23
bg-soft (darkest): #0f0c1a
bg-elevated (card): #2b1b3d
text: #ffffff
text-muted: #c8c5d8
text-soft: #9b97ad
brand (violet): #7553ff
brand-hover: #6240e8
brand-deep: #422082
brand-muted (tactile):#79628c
accent-pink: #ff70bc
accent-yellow: #fdb81b
cta-bg (near-white): #efefef
cta-fg (near-black): #1a1a1a
border: rgba(255,255,255,0.08)
on-brand: #ffffff
```
### Example Component Prompts
- **Hero:** "Create a left-aligned hero on a `#1f1633` deep-aubergine canvas with an 88px Dammit Sans / weight 700 / line-height 1.20 headline reading 'Code breaks. Fix it faster.', an 18px Rubik 400 / line-height 1.60 deck below in `#c8c5d8` muted-violet text. Place a near-white pill CTA — `#efefef` background, `#1a1a1a` text, full pill (9999px radius), `12px 20px` padding, height 44, Rubik 14/500 uppercase 0.014em label 'Try Sentry Free'. Add a violet pill secondary `#7553ff` next to it. Right column shows a 3D character illustration with subtle parallax (~0.3 multiplier on scroll). Apply a deep purple ambient glow `rgba(22,15,36,0.90) 0 4px 4px 9px` around the hero zone."
- **Feature card:** "Design an elevated feature card on aubergine canvas with `#2b1b3d` background, `1px solid rgba(255,255,255,0.08)` hairline border, 16px radius, 32px padding, shadow `rgba(0,0,0,0.10) 0 10px 15px -3px`. Title in Rubik 27/500 white, body in Rubik 16/400 line-height 1.60 in `#c8c5d8`. Optional uppercase eyebrow label at 10/600 letter-spacing 0.018em in `#9b97ad`."
- **Tactile muted-purple button:** "Build a tactile secondary button: background `#79628c`, border `1px solid #584674`, inset shadow `rgba(0,0,0,0.10) 0 1px 3px 0 inset`, white uppercase Rubik 14/500-700 letter-spacing 0.014em label, 13px radius, `10px 18px` padding, height 42. Hover transitions inset shadow OUT to elevated `rgba(0,0,0,0.18) 0 0.5rem 1.5rem` over 200ms — the button rises from sunken to lifted."
- **JetBrains Mono code block:** "Create a code block with `#0f0c1a` (darkest tier) background, `1px solid rgba(255,255,255,0.04)` border, 12px radius, `16px 20px` padding. Render in JetBrains Mono 13/400 line-height 1.60 with `tnum, zero, calt` OpenType features. Apply syntax highlighting in `#7553ff` (keywords), `#dcdcaa` (strings), `#ff70bc` (error tokens). Include intentional human comments like `// this is the line that broke prod`."
- **Glass card panel:** "Design a frosted glass panel: background `rgba(255,255,255,0.18)`, `1px solid rgba(255,255,255,0.16)` border, `backdrop-filter: blur(18px) saturate(180%)`, 12px radius, 24px padding. White text content. Use over hero illustrations or product screenshots — never over plain canvas."
- **Pricing tier card (Most Popular):** "Design a 3-column pricing grid on `#1f1633` canvas. Each tier card: `#2b1b3d` background, `1px solid rgba(255,255,255,0.08)` border, 16px radius, 40px padding. The middle 'Most Popular' tier elevated with the deep purple ambient `rgba(22,15,36,0.90) 0 4px 4px 9px`. Tier name in Rubik 24/500 white. Price in Dammit Sans 56/700. Feature list in Rubik 16/400 `#c8c5d8` with violet check icons `#7553ff`. CTA: violet pill `#7553ff` for popular, near-white pill `#efefef` for others."
### Iteration Guide
1. **Anchor the canvas at `#1f1633` aubergine.** Pure black tilts the brand toward Vercel's terminal-brutalism. The warm purple undertone is the differentiation — every other infra brand is cold-gray or terminal-black.
2. **Use the violet `#7553ff` as the only structural brand colour.** Pink, coral, yellow, and lime are illustration-only. If your CTAs and links aren't violet, you've drifted from the brand axis.
3. **Set Dammit Sans at 88/700 for the hero.** Lighter weights or smaller sizes lose the bulletin-board energy. The custom display is the voice.
4. **Hand off to Rubik below 56px.** Dammit Sans below display tier reads as decorative; Rubik takes over for h2 and below. The handoff is exact.
5. **Use JetBrains Mono for everything code.** Inline chips, multi-line blocks, install commands, error traces, dashboard labels. The OpenType `calt` ligatures (`==>`, `!=`) are part of the lineage.
6. **Pill all primary CTAs.** `border-radius: 9999px` on the near-white pill is the brand's most distinctive shape decision. Square corners signal Linear/Vercel; pills signal Sentry.
7. **Add tactile inset shadows on muted-purple buttons.** The pressed-INTO-surface quality is what makes secondary CTAs feel physical against the dark canvas.
8. **Stack three violet-tonal layers for depth, not shadows.** `#0f0c1a` → `#1f1633` → `#2b1b3d` ladder does the work that drop shadows would do on a light-canvas brand.
9. **Apply uppercase + 0.014em tracking on buttons and labels.** It's system-wide. Sentence case headlines + uppercase chrome is the typographic discipline.
10. **Use the warm aubergine ambient glow** `rgba(22,15,36,0.90) 0 4px 4px 9px` around hero zones. The bioluminescent quality is signature — neutral black shadows would punch through.
11. **Never schedule-a-demo as primary.** Sentry's brand explicitly prefers self-serve "Try Sentry Free". Gated demos belong in tertiary tier.
12. **Include 3D character illustrations and colorful product screenshots.** The illustration-rich register is the anti-corporate signal — without illustrations, the page tilts toward generic dark-mode dev tool.
1. Visual Theme & Atmosphere
Sentry’s marketing surface is a deep-violet observability cathedral. The body canvas sits at #1f1633 — a warm aubergine plum that registers as intentional darkness rather than terminal-black. Headlines hit 88px at weight 700 in the custom Dammit Sans, a chunky geometric display face that gives the site its bulletin-board energy (“Code breaks. Fix it faster.”). Beneath the display, Rubik carries body copy in a humanist register that pulls away from the Inter-everywhere monoculture, and JetBrains Mono handles every code sample, error trace, and dashboard label.
The signature gesture is a single confident violet — #7553ff — that operates as link colour, accent stamp, and brand identifier all at once. Where Datadog uses purple as a logo-mark, Sentry uses purple as a wayfinding system: every interactive surface eventually resolves to this hue. The discipline is borrowed from Stripe’s blue, but pitched 80° around the colour wheel into a violet register where almost no infra brand lives.
What makes Sentry distinctive in dev-tools is its embrace of the dark-IDE aesthetic without feeling cold or sterile. Warm aubergine replaces the cool grays of Datadog and the terminal-blacks of Vercel; bold illustrative elements (3D characters, colorful product screenshots, error-pink decorative bursts) punctuate the dark canvas. The tactile button system — muted purple #79628c with inset shadows — creates a “pressed-INTO-surface” quality that almost no other observability brand reaches for. Buttons feel physical, almost analog, against the digital cathedral.
The pill-button discipline is the most visually distinctive shape decision. border-radius: 9999px reserved for primary CTAs pulls Sentry away from the “8px square button” default of Linear/Vercel and signals a more consumer-friendly, illustration-rich product personality. Combined with frosted glass effects (backdrop-filter: blur(18px) saturate(180%)) and the deep purple ambient shadow (rgba(22,15,36,0.9) 0 4px 4px 9px), the page reads as bioluminescent — content seems to emit its own purple-tinted light against the aubergine ground.
Mid-page, illustration bursts in pink (#ff70bc), coral (#ffb287), and the occasional lime accent (#c2ef4e) puncture the violet ground — these are illustration-only accents, never structural. They appear in 3D character art, error-state mockups, and dashboard screenshots, never in chrome. The discipline is Stripe-style: one structural brand, many illustrative voices.
Key Characteristics:
- Deep aubergine canvas
#1f1633— warm not cool, never pure black - Three-step tonal ladder:
#0f0c1a→#1f1633→#2b1b3dfor depth without shadows - Signature violet
#7553ffas single-hue brand axis (Stripe-style discipline) - Dammit Sans custom display at 88px / 700 — bulletin-board energy
- Rubik humanist body at 400/500/600/700 — friendly, slightly rounded
- JetBrains Mono for every code sample — IDE-credibility move
- Pill buttons (
9999px) for primary CTAs — consumer-friendly softening - Tactile muted-purple buttons with inset shadows — physical register
- Frosted glass panels with
blur(18px) saturate(180%)— layered surfaces - Deep purple ambient shadows — bioluminescent glow, not punching black
- Uppercase + 0.014em tracking on buttons and labels — systematic technical pattern
- Illustration bursts (pink, coral, lime) — never structural, always decorative
2. Color Palette & Roles
Primary
- Background (
#1f1633): the deep aubergine canvas — warm not cool, has purple undertone, never pure black. The defining ground. - Background Deep (
#150f23): deeper sections, footer ground, second-level bands. - Background Soft (
#0f0c1a): darkest tier — code blocks, footer near-black band. - Text (
#ffffff): primary copy on dark canvas. - Brand (
#7553ff): signature violet — link, accent, stamp.
Brand & Dark
The signature violet operates as a single-hue brand axis. Variants for state:
- Brand (
#7553ff): primary violet — link colour, accent stamp, brand identifier. - Brand Hover (
#6240e8): pressed state, slightly deeper violet. - Brand Active (
#5230d4): depressed. - Brand Deep (
#422082): high-emphasis surfaces — select dropdowns, active filter chips. - Brand Soft (
#36265c): tinted brand surface for callouts. - Brand Mid (
#6a5fc1): mid-violet — alternate link colour, navigation hover. - Brand Muted (
#79628c): muted purple — tactile button background, secondary interactive.
The dark band ground:
- Surface (
#181225): secondary surface panels. - Surface Deep (
#362d59): tinted callout surface, border ladder. - BG Elevated (
#2b1b3d): raised card surface inside hero zones.
Accent
Illustration-only accents — never structural chrome, always decorative bursts:
- Pink (
#ff70bc): error-pink — secondary illustration colour, error chips. - Coral (
#ffb287): focus state warm accent, illustration warmth. - Fuchsia (
#fa7faa): focus outlines, decorative accents. - Yellow (
#fdb81b): warning, chart highlight, dashboard badge. - Blue (
#63b3ed): documentation link colour (rare). - Lime (
#c2ef4e): rare lime highlight — special links / badge highlights, used once per section maximum.
Interactive
- Brand (
#7553ff): primary link colour, primary CTA when violet variant. - Brand Hover (
#6240e8): pressed state. - Brand Mid (
#6a5fc1): nav hover, secondary link. - Coral (
#ffb287): focus state background (rare, decorative). - Focus Ring:
2px solid #7553ff+0 0 0 3px rgba(117,83,255,0.30)purple halo.
Neutral Scale
White-to-violet tinted ramp:
- Text (
#ffffff): primary copy, pure white on dark. - Text Muted (
#c8c5d8): body paragraphs, slightly violet-tinted (warmer than pure gray). - Text Soft (
#9b97ad): captions, metadata, footer secondary. - Text Faint (
#6e6a82): disabled, faintest, tertiary metadata. - Code Yellow (
#dcdcaa): syntax highlighting accent. - Text on Brand (
#ffffff): white on violet pill. - Text on CTA (
#1a1a1a): near-black on near-white pill (intentionally not pure black — softer ink). - Text on Light (
#1f1633): aubergine ink on light surfaces — matches canvas tone.
Surface & Borders
- Surface (
#181225): secondary surface panels. - Surface Deep (
#362d59): tinted callout, border ladder. - BG Elevated (
#2b1b3d): raised card surface. - Glass White (
rgba(255,255,255,0.18)): frosted glass button bg. - Glass Violet (
rgba(54,22,107,0.14)): hover overlay on glass. - Border (
rgba(255,255,255,0.08)): primary hairline divider — ~8% white tint. - Border Soft (
rgba(255,255,255,0.04)): softer divider, code block trim. - Border Strong (
rgba(255,255,255,0.16)): hover/focus outline on cards. - Border Violet (
#584674): tactile button border — muted purple trim. - Border Light Input (
#cfcfdb): form field border on light context.
Shadow Colors
Sentry’s shadow vocabulary is warm-purple-tinted, never neutral gray. The signature is the deep aubergine ambient glow:
- Inset Button (
rgba(0,0,0,0.10) 0 1px 3px 0 inset): tactile pressed-into-surface — the brand’s most physical move. - Glass (
rgba(0,0,0,0.08) 0 2px 8px): subtle lift on frosted panels. - Card (
rgba(0,0,0,0.10) 0 10px 15px -3px): standard card elevation. - Hover (
rgba(0,0,0,0.18) 0 0.5rem 1.5rem): elevated hover state. - Ambient Glow (
rgba(22,15,36,0.90) 0 4px 4px 9px): the deep aubergine ambient glow around hero — bioluminescent quality. - Prominent (
rgba(0,0,0,0.24) 0 24px 48px -12px): modal backdrop. - Ring (
0 0 0 2px #7553ff): primary focus indicator. - Ring Soft (
0 0 0 3px rgba(117,83,255,0.30)): secondary focus halo.
The rgba(22,15,36,0.90) ambient is Sentry’s signature — that warm aubergine-tinted shadow is what creates the “content emits its own purple light” quality. Pure-black shadows would punch through; the violet-tinted glow merges into the canvas.
Semantic
- Success (
#c2ef4e): lime — also illustration accent. - Warning (
#fdb81b): yellow — dashboard severity, warning chips. - Danger (
#ff70bc): error pink — playful danger register (Sentry’s most distinctive choice — most observability brands use saturated red here). - Info (
#7553ff): signature violet doubles as info colour.
The choice of pink-not-red for danger is a brand fingerprint. Sentry’s whole register insists that “errors are not catastrophes — errors are the product.” Pink danger softens the panic.
3. Typography Rules
Font Family
- Display:
"Dammit Sans", Rubik, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif. Custom geometric display face — slightly chunky, almost cartoon-confident. Used at 88px / 700 for the homepage hero. The face has bulletin-board energy that gives Sentry’s marketing its “you can fix this” voice. - Body / UI:
Rubik, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif. Humanist geometric originally designed for Hebrew/Latin pairing. Rubik gives Sentry warmth that Inter and Söhne don’t — body copy reads as approachable rather than systemic. Weights 400 / 500 / 600 / 700. - Mono:
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace. JetBrains’ standard IDE monospace — quiet credibility move: Sentry’s audience already opens IntelliJ, PyCharm, WebStorm every morning and sees this typeface daily. - OpenType:
kern,ligastandard. Mono enablestnum(tabular figures for stack traces),zero(slashed zero), andcalt(contextual alternates for==>,!=, etc.).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Dammit Sans | 88 | 700 | 1.20 | normal | kern, liga | Maximum impact — “Code breaks. Fix it faster.” |
| display-large | Dammit Sans | 72 | 700 | 1.15 | -0.005em | kern, liga | Section hero |
| display-secondary | Dammit Sans | 60 | 500 | 1.10 | normal | kern, liga | Secondary hero text |
| h1 | Dammit Sans | 56 | 700 | 1.10 | -0.01em | kern, liga | Page H1 |
| h2 | Rubik | 44 | 700 | 1.15 | -0.01em | kern, liga | Section heads — Rubik takes over below display tier |
| h3 | Rubik | 32 | 600 | 1.25 | 0 | kern, liga | Sub-section heads |
| h4 | Rubik | 27 | 500 | 1.25 | 0 | kern, liga | Feature card headings |
| h5 | Rubik | 24 | 500 | 1.25 | 0 | kern, liga | Card and block headings |
| feature-title | Rubik | 20 | 600 | 1.25 | 0 | kern, liga | Emphasized feature names |
| body-large | Rubik | 18 | 400 | 1.60 | 0 | kern, liga | Hero deck |
| body | Rubik | 16 | 400 | 1.60 | 0 | kern, liga | Default body |
| body-emphasis | Rubik | 16 | 500 | 1.60 | 0 | kern, liga | Bold body, nav items |
| nav-link | Rubik | 15 | 500 | 1.40 | 0 | kern | Top nav links |
| button | Rubik | 14 | 500 | 1.20 | 0.014em | uppercase | Primary CTA label |
| button-strong | Rubik | 14 | 700 | 1.20 | 0.014em | uppercase | Tactile button — heavy weight |
| label | Rubik | 15 | 500 | 1.25 | 0 | uppercase | Section eyebrow uppercase |
| caption | Rubik | 14 | 500 | 1.40 | 0.014em | kern | Caption, often uppercase |
| micro | Rubik | 10 | 600 | 1.80 | 0.018em | uppercase | Subtle annotations |
| code | JetBrains Mono | 14 | 400 | 1.55 | 0 | tnum, zero, calt | Inline code chip |
| code-bold | JetBrains Mono | 14 | 500 | 1.55 | 0 | tnum, zero | Code emphasis |
| code-block | JetBrains Mono | 13 | 400 | 1.60 | 0 | tnum, zero, calt | Multi-line code, stack traces |
Principles
- Dual personality. Dammit Sans brings irreverent brand character at display tier (88–56px); Rubik provides clean professionalism for everything functional (44px and below). The handoff is exactly at the h1/h2 line — display is custom, structural is humanist.
- Uppercase as system. Buttons, captions, labels, and micro-text all use
text-transform: uppercasewith subtle letter-spacing (0.014em–0.018em), creating a systematic “technical label” pattern throughout. Body and headlines stay sentence case. - Weight stratification on Rubik. Four-tier weight system: 400 (body), 500 (emphasis/nav), 600 (titles/strong), 700 (buttons/CTAs). Each weight has a specific role; mixing within a tier is forbidden.
- Tight headings, relaxed body. All headings use 1.10–1.25 line-height; body uses 1.60; small captions expand to 1.80 for readability at tiny sizes. The contrast is deliberate — display tier is dense and confident, body tier is open and readable.
- JetBrains Mono is non-negotiable for code. Every code sample, error trace, dashboard label, install command, and inline
<code>chip uses JetBrains Mono. The OpenTypecalt(contextual alternates) ligatures==>,!=,=>render Sentry’s docs and error traces with the same arrows users see in IntelliJ/PyCharm. - Slashed zero by default. Mono
zerofeature is on always — distinguishes 0 from O in error codes, hashes, and DSN strings. Critical for ops/debugging context. - No display below 56px. Dammit Sans never appears below h1 size. The custom display is reserved for moments where its character earns the load; using it at 32px would dilute the bulletin-board energy.
- Tracking discipline. Display tier uses near-zero or slightly negative tracking (-0.005em to -0.01em). Body tier is zero. Uppercase labels and buttons get +0.014em to +0.018em — uppercase always needs space.
4. Component Stylings
Buttons
Primary Pill CTA (Near-White)
- Background:
#efefef(intentionally not pure white — softer pill against deep aubergine) - Text:
#1a1a1anear-black, uppercase, 14px Rubik weight 500, letter-spacing 0.014em - Padding:
12px 20px, height 44 - Radius: 9999 (full pill)
- Border: none
- Hover: background lifts to
#ffffff; subtlescale(1.02)transform - Active: background
#e6e6e6 - Use: hero CTA — Try Sentry Free, Get Started. The signature near-white pill.
Brand Pill (Signature Violet)
- Background:
#7553ff - Text:
#ffffff, uppercase, 14px Rubik weight 500 - Padding:
12px 20px, height 44 - Radius: 9999
- Hover: background
#6240e8 - Active: background
#5230d4 - Use: secondary actions, in-product CTAs, anywhere violet wants to lead.
Tactile Muted-Purple (Pressed-INTO-Surface)
- Background:
#79628c(muted purple) - Text:
#ffffff, uppercase, 14px Rubik weight 500–700, letter-spacing 0.014em - Border:
1px solid #584674(slightly darker muted-purple trim) - Radius: 13 (tactile, not pill)
- Padding:
10px 18px, height 42 - Shadow:
rgba(0,0,0,0.10) 0 1px 3px 0 inset(the inset shadow is the signature — button feels pressed INTO the surface) - Hover: shadow elevates to
rgba(0,0,0,0.18) 0 0.5rem 1.5rem(pulls UP from the surface) - Use: secondary actions where physicality matters — pricing CTAs, dashboard chips. The tactile button is Sentry’s most physical move.
Glass White (Frosted)
- Background:
rgba(255,255,255,0.18) - Text:
#ffffff - Padding: 8px (split-rounded variant:
12px 0 0 12px) - Radius: 12 (or compound for attached variants)
- Backdrop:
blur(18px) saturate(180%) - Shadow:
rgba(0,0,0,0.08) 0 2px 8px - Hover: background
rgba(54,22,107,0.14)violet overlay - Use: secondary action overlaid on hero illustrations.
Deep Violet (Select / Dropdown)
- Background:
#422082 - Text:
#ffffff, 14px Rubik weight 500 - Padding:
8px 16px, height 36 - Radius: 8
- Use: filter chips, dropdown buttons, high-emphasis selectors.
Ghost (Inline)
- Background: transparent
- Text:
#ffffff, uppercase, 14px Rubik weight 500 - Padding:
10px 16px - Radius: 9999
- Hover: background
rgba(255,255,255,0.06) - Use: nav button, inline ghost CTA.
Cards
Elevated Card
- Background:
#2b1b3d - Border:
1px solid rgba(255,255,255,0.08) - Radius: 16
- Padding: 32
- Shadow:
rgba(0,0,0,0.10) 0 10px 15px -3px - Use: feature card on aubergine canvas — the default elevated tier.
Glass Card
- Background:
rgba(255,255,255,0.18) - Border:
1px solid rgba(255,255,255,0.16) - Radius: 12
- Padding: 24
- Backdrop:
blur(18px) saturate(180%) - Use: frosted glass panel — overlaid on hero illustrations or screenshots.
Deep Card
- Background:
#181225 - Border:
1px solid rgba(255,255,255,0.04) - Radius: 12
- Padding: 28
- Use: secondary surface panel — flat trim, no shadow.
Code Blocks & Chips
Code Block (Multi-line)
- Background:
#0f0c1a(the darkest tier) - Text:
#ffffffwith syntax highlighting in#7553ff/#dcdcaa/#ff70bc - Border:
1px solid rgba(255,255,255,0.04) - Radius: 12
- Padding:
16px 20px - Font: JetBrains Mono 13 / 400 / 1.6
- Use: error stack traces, multi-line samples.
Code Chip (Inline)
- Background:
#0f0c1a - Text:
#7553ff(signature violet ink for inline code emphasis) - Border:
1px solid rgba(255,255,255,0.08) - Radius: 6
- Padding:
4px 8px - Font: JetBrains Mono 14 / 400
- Use: inline code chip — error code, package names, DSN snippets.
Inputs / Forms
Light Input
- Background:
#ffffff - Text:
#1f1633(aubergine ink, not pure black) - Border:
1px solid #cfcfdb - Padding:
8px 12px, height 40 - Radius: 6
- Focus: shadow
rgba(0,0,0,0.15) 0 2px 10px inset(border stays — the inset shadow is the focus signal) - Use: light-context email/form input.
Dark Input
- Background:
#0f0c1a - Text:
#ffffff - Border:
1px solid rgba(255,255,255,0.08) - Padding:
10px 14px, height 42 - Radius: 8
- Focus: border
#7553ff+ ring0 0 0 3px rgba(117,83,255,0.30)purple halo - Use: dark-context input — search, signup form on aubergine canvas.
Badges
Violet Pill Badge
- Background:
rgba(117,83,255,0.20)violet tint - Text:
#c8c5d8muted-cream - Border:
1px solid rgba(117,83,255,0.40) - Radius: 9999, Padding:
4px 12px - Font: Rubik 10 / 600 / uppercase / 0.018em
- Use: NEW / category badges.
Yellow Severity Badge
- Background:
rgba(253,184,27,0.20)yellow tint - Text:
#fdb81b - Border:
1px solid rgba(253,184,27,0.40) - Radius: 9999
- Use: warning / dashboard severity / “BETA” tag.
Navigation
Top Nav
- 64px tall, transparent over hero (or
#1f1633solid on scroll) - 1px
rgba(255,255,255,0.04)border-bottom on scroll - Links: Rubik 15 / 500 /
#ffffff, hover color#6a5fc1(mid-violet) - Category labels: uppercase, 0.014em letter-spacing,
#c8c5d8muted
Nav Link
- Background: transparent
- Text:
#ffffff, Rubik 15 / 500 - Padding:
8px 14px - Hover: color
#6a5fc1 - Use: top nav menu — Product / Pricing / Docs / Customers / Pricing.
Decorative
3D Character Illustrations
- Recurring 3D character art, colorful product screenshots, error-state mockups
- Use: punctuate dark canvas with bursts of pink (
#ff70bc), coral (#ffb287), lime (#c2ef4e) - Always decorative — never carry information that isn’t also in text.
Ambient Purple Glow
- Shadow:
rgba(22,15,36,0.90) 0 4px 4px 9px - Use: hero zone ambient glow — content seems to emit purple light against the canvas.
5. Layout Principles
Spacing System
Base 4px. Scale: 2 / 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128 / 160. Section gaps 96px (the standard rhythm); inside-card padding 28–32; nav padding 8px 14px; grid gap 24.
The density observation: Sentry’s whitespace is generous between sections but tight within cards. Hero zones often run 720px+ tall to give the deep aubergine room to breathe; cards are dense with content. The light/dark tonal shift (rather than spacing) is the primary section-rhythm device.
Grid & Container
- Page width: 1280px max container
- Prose width: 720px (intro paragraphs, long-form copy)
- Header height: 64px
- Hero height: 720px (often 720px+ on homepage)
- Grid gap: 24px between feature cards
- Grid: 12-column, honored quietly under feature comparison tables and pricing grids
The hero is left-aligned (rare for product analytics — most observability brands center their hero). Headlines run 88px Dammit Sans / 700 with the call to action stacked below, leaving the right column open for 3D illustration or product screenshot.
Below the hero, multi-column dense product surface — feature panels stack horizontally and vertically. Cards stack 3-col → 2-col → 1-col responsive collapse. The pricing surface is a 3-tier grid with a “Most Popular” middle tier slightly elevated.
Whitespace Philosophy
Sentry’s whitespace is dark breathing room. Generous vertical spacing between sections (96px standard, 128px for hero-to-feature transitions) lets the deep aubergine canvas serve as a visual rest. Inside cards and panels, density is moderate — the 32px card padding gives text room without feeling lavish.
The trick: the dark canvas itself functions as whitespace. Where a light-canvas brand would need 160px of section padding to feel airy, Sentry can run 96px because the aubergine is doing emotional whitespace work.
Section Cadence
Aubergine canvas (#1f1633) → deeper section (#150f23) → aubergine → near-black band (#0f0c1a, often code-heavy) → footer (#150f23). The tonal violet-ladder sections are the page’s rhythm device — there are almost no light-canvas inversions on Sentry’s marketing surface. The system stays dark.
A typical homepage flow:
- Hero (
#1f1633) with 88px Dammit Sans + near-white pill CTA — 720px+ - “How it works” feature spread (
#1f1633with elevated#2b1b3dcards) — 800px - Code-block emphasis section (
#0f0c1aband, JetBrains Mono samples) — 600px - Customer logos / social proof (
#150f23deeper band) — 300px - Pricing tier grid (
#1f1633) — 700px - “Sentry for [language]” SDK strip (
#150f23) — 400px - Footer (
#150f23)
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Edge-bound elements |
| Micro | 4 | Decorative pills, smallest chips |
| XS | 4 | Tag chips |
| SM | 6 | Form inputs, code chips, small interactive |
| MD | 8 | Buttons (deep-violet variant), cards (default minimum), dropdowns |
| LG | 12 | Glass panels, code blocks, larger containers |
| Card | 16 | Elevated cards — default feature card |
| XL | 18 | Image containers, badge variants |
| Tactile | 13 | Muted-purple tactile button — physical register |
| Pill | 9999 | Primary CTAs — full pill, the brand fingerprint |
The radii ladder is 4 / 6 / 8 / 12 / 16 / 18, with 9999px pill reserved for primary CTAs. The pill-button discipline is the most visually distinctive shape decision: it pulls Sentry away from the “8px square button” default of Linear/Vercel and signals consumer-friendly, illustration-rich product personality.
The tactile 13px radius on the muted-purple button is unusual — neither pill nor squared. The slightly-non-standard radius reads as physical, almost analog, against the systematic 4/8/12/16 grid. It’s a deliberate misalignment that gives the tactile button its hand-crafted feel.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| -1 (Sunken) | rgba(0,0,0,0.10) 0 1px 3px 0 inset | Tactile primary buttons — pressed-INTO-surface |
| 0 (Flat) | No shadow, hairline border only | Default surfaces, dark backgrounds, text bands |
| 1 (Surface) | rgba(0,0,0,0.08) 0 2px 8px | Glass buttons, subtle cards |
| 2 (Elevated) | rgba(0,0,0,0.10) 0 10px 15px -3px | Cards, floating panels |
| 3 (Prominent) | rgba(0,0,0,0.18) 0 0.5rem 1.5rem | Hover states, modals, popovers |
| 4 (Ambient) | rgba(22,15,36,0.90) 0 4px 4px 9px | Deep purple ambient glow — hero zones |
| 5 (Modal Backdrop) | rgba(0,0,0,0.24) 0 24px 48px -12px | Modal backdrop |
Shadow Philosophy
Sentry uses a unique three-layer depth system: tonal stacking, inset shadows, and ambient glow. Each handles a different elevation problem:
-
Tonal stacking on the violet axis (
#0f0c1a→#1f1633→#2b1b3d) is the dominant strategy. The 8% white hairline (rgba(255,255,255,0.08)) separates raised surfaces. There are almost no traditional shadows in chrome — the colour-temperature shift between layers does the work. Code blocks drop to the darkest tier; hero illustrations float on the elevated tier. -
Inset shadows on tactile buttons (
rgba(0,0,0,0.10) 0 1px 3px 0 inset) create a sunken, pressed-INTO-surface quality. This is Sentry’s most physical move — almost no other observability brand uses sunken depth. The inset shadow is what makes the muted-purple button feel like a physical key. -
Ambient purple glow (
rgba(22,15,36,0.90) 0 4px 4px 9px) is the signature. The deep aubergine ambient shadow creates a bioluminescent quality where content seems to emit its own purple-tinted light. Pure-black shadows would punch through; the violet-tinted glow merges into the canvas. Reserved for hero zones, large illustrations, and the rare pricing-tier “Most Popular” card.
Hover lifts use rgba(0,0,0,0.18) 0 0.5rem 1.5rem — neutral black, slight elevation. The transition from inset → elevated on tactile buttons is the brand’s most satisfying micro-state.
8. Interaction & Motion
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default ease-in-out for hover transitions, color shifts. - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal entrance, hero reveal. - Entrance:
cubic-bezier(0, 0, 0.2, 1)— content fade-in on scroll. - Out:
cubic-bezier(0.16, 1, 0.3, 1)— overshoots on illustration entrance.
Duration Buckets
- Fast (120ms): color transitions, button hover, link hover.
- Standard (200ms): card hover, dropdown open, transitions.
- Slow (320ms): hero fade-in, modal entrance.
- Hero (480ms): section parallax, hero illustration entrance.
Per-Component Micro-States
- Pill CTA (near-white): background
#efefef→#ffffffon hover withscale(1.02)transform. 120ms standard. - Pill CTA (violet): background
#7553ff→#6240e8on hover. 120ms. - Tactile button (muted-purple): the signature transition — inset shadow
rgba(0,0,0,0.10) 0 1px 3px 0 inset→ hover lifts torgba(0,0,0,0.18) 0 0.5rem 1.5rem. The button rises from sunken to elevated. 200ms standard ease-out. - Card (elevated): border opacity 0.08 → 0.16 on hover; subtle
translateY(-2px). 200ms. - Glass card: backdrop-filter blur intensifies subtly; opacity stays. 200ms.
- Code chip: background
#0f0c1a→#181225on hover. 120ms. - Link / nav-link: color
#ffffff→#6a5fc1(mid-violet). 120ms. - Brand link (in-text): color
#7553ff→#6240e8with underline grow from 0 → full. 120ms.
Page Transitions
- Hero: content fades + 12px translateY rise. 480ms ease-emphasized.
- Below-fold sections: fade + 8px translateY on scroll-into-viewport. 320ms ease-entrance.
- Modal entrance: scale
0.96 → 1+ fade. 200ms ease-emphasized. - Dropdown open: translateY
-4px → 0+ fade. 120ms. - Tab swap: cross-fade 200ms, no translation.
Scroll Behavior
- Sticky nav becomes opaque (
#1f1633solid +1px rgba(255,255,255,0.04)border-bottom) after 64px scroll. - Hero illustrations parallax slowly (~0.3 multiplier) for the first 480px.
- Section reveal:
opacity: 0 → 1+translateY(8px → 0)onIntersectionObserver0.1 threshold.
Reduced Motion
@media (prefers-reduced-motion: reduce):
- All translateY rises collapse to opacity-only.
- Scale transforms freeze.
- Illustration parallax disabled.
- Hover lift transitions persist as opacity-only (they aid usability).
- Color transitions persist (purely informational).
- Hero entrance becomes instant fade.
9. Accessibility & A11y
Contrast Pairs
- Primary text on canvas:
#ffffffon#1f1633→ 16.4:1. AAA at body sizes. - Muted text on canvas:
#c8c5d8on#1f1633→ 9.8:1. AAA at body. - Soft text on canvas:
#9b97adon#1f1633→ 5.7:1. AA at body, AAA at large. - White on signature violet:
#ffffffon#7553ff→ 5.1:1. AA at body, AAA at large. - Near-black on near-white pill:
#1a1a1aon#efefef→ 14.6:1. AAA. - White on tactile muted-purple:
#ffffffon#79628c→ 4.7:1. AA at body (passes by 0.2 — careful with small text). - White on deep violet:
#ffffffon#422082→ 9.2:1. AAA. - Code violet on darkest:
#7553ffon#0f0c1a→ 5.6:1. AA at body, AAA at large (used for inline code chip ink). - Faint text:
#6e6a82on#1f1633→ 3.0:1 — fails body sizes. Reserve for disabled states only.
Focus Indicators
- Primary focus ring:
2px solid #7553ff+0 0 0 3px rgba(117,83,255,0.30)purple halo (4px combined offset). The violet ring matches signature brand colour and is highly visible against the aubergine canvas. - Form fields (light context): shadow
rgba(0,0,0,0.15) 0 2px 10px inset— the inset focus is the pattern. - Form fields (dark context): border
#7553ff+ ring0 0 0 3px rgba(117,83,255,0.30). - Coral focus variant: rare —
rgba(106,95,193,1) solid 0.125remfor special-emphasis focusable elements.
ARIA Pattern Recommendations
- Top nav:
<nav aria-label="Primary">with skip-link to#main-content. - Mega-menu dropdowns:
role="menu"+aria-haspopupon trigger,aria-expandedon open. - Pricing toggle (monthly/yearly):
role="group"+aria-pressedon each option. - Modal / dialog:
role="dialog"+aria-modal="true"+ focus trap; Esc closes. - Code blocks:
<pre><code>witharia-label="Error stack trace example"for context. - Decorative illustrations:
aria-hidden="true"— purely decorative. - CTA buttons: semantic
<button>/<a>, descriptive labels (“Try Sentry Free” not “Try Free”, “Get a demo of Sentry” not “Get demo”).
Keyboard Navigation
- Tab order: skip-link → nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to
#main-contentfirst focus stop. - Mega-menu: arrow keys navigate within open menu; Esc closes; Tab continues to next nav item.
- Pricing toggle: arrow keys swap monthly/yearly.
- FAQ accordion: Tab to expand, Enter/Space to toggle, Esc to collapse.
- Modal: focus trap inside open modal; Esc closes; Tab cycles within.
Screen Reader Hints
- Decorative 3D character illustrations:
aria-hidden="true". - Code chips: rendered in
<code>so screen readers announce as code. - Install commands: announce literally —
"npx @sentry/wizard@latest -i nextjs". - Severity badges:
aria-label="Severity: warning"for color-only context. - Logo:
aria-label="Sentry".
Reduced Motion
prefers-reduced-motion: reduce honored globally. Translation transforms collapse to opacity. Parallax disabled. Hover state colour transitions persist for usability.
10. Responsive Behavior
Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–576px | Single column, hamburger nav, stacked CTAs |
| Small Tablet | 576–768px | 2-column features begin |
| Tablet | 768–992px | Full nav visible, side-by-side layouts |
| Desktop | 992–1152px | Standard layout |
| Wide | 1152–1440px | Max-width 1280px container caps |
| Ultra | 1440px+ | Container caps; generous side margins |
Touch Targets
- Pill CTAs: 44px height — meets WCAG 2.5.5 with surrounding hit area.
- Tactile buttons: 42px — pad to 44 with
py-1surrounding hit zone. - Nav links: 44px hit area on mobile (smaller visual chrome, larger tap target).
- Code chips: 28px tall — not tap targets, decorative only.
Collapsing Strategy
- Hero text: Dammit Sans 88 → 72 → 60 → 44. Line-height stays 1.10–1.20.
- Navigation: horizontal → hamburger with full-width slide-out menu at <768px.
- Feature grid: 3-col → 2-col → 1-col stacked. Card padding 32 → 28 → 24.
- Pricing grid: 3-col → vertical stack on mobile, “Most Popular” tier first.
- Hero illustration: 3D character art column collapses below content on mobile.
- CTA pair: inline pair → full-width stacked, primary on top.
- Container padding: 64 → 32 → 16 horizontal.
Image Behavior
- 3D character illustrations: SVG / WebP, scale fluidly.
- Product UI screenshots: aspect-ratio container, lazy-loaded below fold.
- Customer logos: SVG, low opacity hover restores to full.
- Hero ambient glow: fixed pixel offset, scales with viewport but not container.
Container Queries
The pricing grid and feature card surfaces are good candidates for @container queries — switching between 3-col and stacked layouts based on container width rather than viewport, especially in dashboard embed contexts.
11. Content & Voice
Tone
Confident, irreverent, technical. Sentry talks like a senior engineer who’s seen production incidents and refuses to dress them up. The voice is matter-of-fact about errors (“Code breaks. Fix it faster.”), allergic to corporate marketing-speak, and willing to be funny. The brand insists errors are not catastrophes — errors are the product. That posture is what licenses the pink-not-red danger color, the bulletin-board display type, and the playful 3D illustrations.
Microcopy Patterns
- Headlines: capability + bluntness. “Code breaks. Fix it faster.” “Application monitoring built for engineers.” “Stop guessing. Get to the root cause.”
- Decks: specifics over claims. “Sentry combines error tracking, session replay, performance monitoring, and profiling — all in one developer-friendly platform with first-class integrations for every framework.”
- CTA verbs: “Try Sentry Free”, “Get Started”, “Install with one command”, “Talk to sales”, “Read the docs”. Always concrete + actionable.
- Error messages (in-product convention): friendly + recovery-oriented. “We couldn’t connect to your project. Check your DSN and try again.” Never stack-trace-leaking.
- Empty states: instructional, often with a code suggestion or install command.
Empty States
In-product: “No errors yet — that’s a good thing! Install the Sentry SDK to start tracking.” The pattern is friendly + concrete next step — never just “No data.” Often pairs with an install command rendered in JetBrains Mono.
Success Confirmations
- After install: “Welcome! Your first event will appear here once your app sends data.”
- After signup: “Check your email — we sent you a magic link to sign in.”
- Toast pattern: icon (small 3D illustration) + short message + optional action button. 320ms ease-out entrance.
CTA Verb Conventions
The verbs Sentry uses, ranked:
- Try Sentry Free (primary conversion — always with brand name)
- Get Started
- Install with one command
- Read the docs
- Talk to sales (enterprise tier)
- Watch demo (rare — Sentry prefers self-serve)
- Sign In (returning users)
What Sentry doesn’t say: “Sign up now” (too aggressive), “Schedule a meeting” (Sentry avoids gated demos as primary CTA), “Click here” (never), “Contact us” (replaced by “Talk to sales” for enterprise). The voice avoids B2B marketing-speak entirely.
Voice in Code Examples
Code samples often include intentionally human comments — // this is the line that broke prod, // catch all the things — anchoring Sentry’s “we are engineers writing for engineers” register. The comments aren’t generic Lorem-Ipsum placeholder text.
12. Dark Mode & Theming
Sentry’s marketing site is dark-mode-first and dark-only. The brand was built for dark canvas — the deep aubergine #1f1633 is non-negotiable, and there is no light-canvas variant of the marketing surface. The entire colour, type, illustration, and shadow system assumes dark ground.
The in-product app does support both light and dark themes (the dashboard offers a light variant for users who prefer it), but the marketing site never inverts. The aesthetic case: Sentry is for developers, who already work in dark IDEs; pretending the brand is canvas-agnostic would dilute its register.
If a third party wanted to render Sentry-flavored chrome on a light canvas (e.g., embedded in a documentation site that’s light-mode), the canonical inversion would be:
# Hypothetical light-canvas variant — NOT used on sentry.io marketing
colors-light:
bg: '#ffffff' # pure white canvas
bg-deep: '#f7f6fa' # tinted-violet near-white
bg-soft: '#efeef4' # deepest near-white tier
surface: '#ffffff'
surface-elev: '#faf9fc'
text: '#1f1633' # aubergine ink stays — matches brand
text-muted: '#4a3f6b'
text-soft: '#7e7494'
brand: '#7553ff' # signature violet stays — high contrast on both
brand-hover: '#5230d4'
brand-deep: '#422082'
border: 'rgba(31,22,51,0.08)'
border-soft: 'rgba(31,22,51,0.04)'
shadow-card: 'rgba(31,22,51,0.06)'
on-brand: '#ffffff'Note: the signature violet #7553ff and aubergine ink #1f1633 remain unchanged — they’re high-contrast against both dark and light. The mode is a tonal inversion, not a chromatic swap. Sentry’s marketing site does not use this variant.
13. Lineage & Influences
Sentry’s design lineage is dark-mode developer warmth — a tradition that pulls from JetBrains’ IDE chromatic register (warm darks, syntax violets), Stripe’s single-hue brand discipline (one confident colour does all the heavy lifting), and Mailchimp’s quirky display-typography move (custom display + humanist body). The design rejects the cold corporate grays of Datadog, the terminal-blacks of Vercel, and the structural rigour of Linear — Sentry chooses warmth, illustration, and bulletin-board confidence over any of those.
The type stack is the brand’s most explicit signal: Dammit Sans (custom display) + Rubik (humanist Apache 2.0) + JetBrains Mono (Apache 2.0) is a fully open-license-or-custom type stack. The choice of JetBrains Mono is especially load-bearing — it’s the same monospace Sentry’s audience sees every day inside IntelliJ, PyCharm, and WebStorm. Using it on marketing is a credibility move: Sentry is part of the JetBrains visual lineage that its users already trust.
What Sentry rejects: the SOC-dashboard aesthetic of Datadog (corporate gray-and-purple); the terminal-black brutalism of Vercel; the structural rigour of Linear; the white-canvas-and-blue-CTA monoculture of every other observability brand. The brand chooses to look hand-crafted, illustrated, and willing to be funny — in exchange for trust from developers who are tired of glossy SaaS.
The pill-button discipline (9999px radius) is the most distinctive single decision. Square-cornered 8px buttons are the dev-tool default; Sentry’s pill softens the entire register and pulls the system toward consumer-app friendliness. Combined with the tactile inset-shadow muted-purple button, the system has two button registers — one consumer-warm pill, one engineer-physical tactile. That duality is Sentry’s clever middle-ground between Linear-style minimalism and Mailchimp-style playfulness.
Influences:
- Stripe — single-hue brand discipline, one confident colour does the work (https://stripe.com)
- JetBrains — JetBrains Mono and the IDE chromatic register; warm darks, syntax violets (https://www.jetbrains.com)
- Mailchimp — Rubik humanist sans + quirky custom display pairing for friendlier tech voice (https://mailchimp.com)
- Linear — adjacent dev-tool peer; Sentry softens against Linear’s structural rigour (https://linear.app)
- Datadog — closest observability competitor in violet spectrum; Sentry pushes brighter and warmer (https://www.datadoghq.com)
- Dammit Sans (custom) — bulletin-board energy; “Code breaks. Fix it faster.” voice
- Rubik (Hubert & Fischer / Google Fonts) — humanist Hebrew/Latin pairing; Apache 2.0
- JetBrains Mono (JetBrains) — open-license IDE monospace; ligature-rich; Apache 2.0
14. Do’s and Don’ts
Do’s
- Do use deep aubergine
#1f1633as the canvas — never pure black#000000. The warm purple undertone is the brand’s defining gesture. - Do stack three violet-tonal layers (
#0f0c1a→#1f1633→#2b1b3d) for depth instead of reaching for shadows. Tonal stacking is the primary elevation strategy. - Do keep the signature violet
#7553ffas the only structural brand colour. Secondary accents (pink, coral, lime) are illustration-only, never structural chrome. - Do use Dammit Sans only for hero/display tier (56px and above). Below that, hand off to Rubik. The custom display is reserved for moments where its character earns the load.
- Do use JetBrains Mono for every code sample, error trace, install command, and inline code chip. It’s the typographic stamp that ties Sentry to the JetBrains IDE lineage.
- Do use full pill (
9999px) for primary CTAs. The pill is the brand’s friendliness signal — consumer-warm against the developer-dark canvas. - Do apply inset shadows (
rgba(0,0,0,0.10) 0 1px 3px 0 inset) on tactile muted-purple buttons. The pressed-INTO-surface quality is signature. - Do apply uppercase + 0.014em tracking on buttons and labels. The systematic technical-label pattern is brand DNA.
- Do use Rubik’s 4-tier weight system: 400 (body), 500 (nav/emphasis), 600 (titles), 700 (CTAs). Each weight has a specific role.
- Do ship 3D character illustrations and colorful product screenshots as decorative bursts. The illustration-rich register is the anti-corporate signal.
- Do use frosted glass (
backdrop-filter: blur(18px) saturate(180%)) for layered surfaces over hero illustrations. - Do maintain warm purple-tinted shadow tones. The deep aubergine ambient (
rgba(22,15,36,0.90)) creates the bioluminescent quality.
Don’ts
- Don’t flatten the body bg to pure black
#000000. The warm aubergine is what gives Sentry its handmade character — terminal-black would tilt the brand toward Vercel’s brutalism. - Don’t use Dammit Sans below 56px or for body text. The custom display loses its character at small sizes; Rubik does that work.
- Don’t mix Rubik with Inter or Söhne in the same module. Rubik’s humanist warmth is intentional contrast against the systemic-sans observability competition.
- Don’t swap pill buttons for square 8px-radius buttons. The full pill is the brand’s friendliness signal — square corners pull the register toward Linear’s structural rigour.
- Don’t drop the inset shadow on tactile muted-purple buttons. The pressed-into-surface quality is signature; flat shadows would dilute it.
- Don’t drop the uppercase + letter-spacing treatment on buttons and labels. It’s a system-wide pattern; breaking it makes UI feel inconsistent.
- Don’t use saturated red for danger states. Sentry uses error-pink
#ff70bcbecause the brand register insists errors are the product, not catastrophes. - Don’t mix the lime-green accent with the coral/pink accents in the same component. The illustration palette uses one accent at a time per surface.
- Don’t use neutral gray shadows. Sentry’s shadows are warm-purple-tinted (
rgba(22,15,36,...)) — neutral grays would punch through the canvas. - Don’t use standard gray (
#666,#999) for borders. Use white-tinted alphas (rgba(255,255,255,0.08)) on dark or violet-tinted neutrals (#362d59,#584674). - Don’t center-align the hero. Sentry’s left-aligned hero leaves room for 3D illustration on the right column — centering the hero would orphan the illustration system.
- Don’t schedule-a-demo as the primary CTA. Sentry’s brand explicitly prefers self-serve “Try Sentry Free” over gated demos.
15. Agent Prompt Guide
Quick Color Reference
bg (aubergine): #1f1633
bg-deep: #150f23
bg-soft (darkest): #0f0c1a
bg-elevated (card): #2b1b3d
text: #ffffff
text-muted: #c8c5d8
text-soft: #9b97ad
brand (violet): #7553ff
brand-hover: #6240e8
brand-deep: #422082
brand-muted (tactile):#79628c
accent-pink: #ff70bc
accent-yellow: #fdb81b
cta-bg (near-white): #efefef
cta-fg (near-black): #1a1a1a
border: rgba(255,255,255,0.08)
on-brand: #ffffffExample Component Prompts
-
Hero: “Create a left-aligned hero on a
#1f1633deep-aubergine canvas with an 88px Dammit Sans / weight 700 / line-height 1.20 headline reading ‘Code breaks. Fix it faster.’, an 18px Rubik 400 / line-height 1.60 deck below in#c8c5d8muted-violet text. Place a near-white pill CTA —#efefefbackground,#1a1a1atext, full pill (9999px radius),12px 20pxpadding, height 44, Rubik 14/500 uppercase 0.014em label ‘Try Sentry Free’. Add a violet pill secondary#7553ffnext to it. Right column shows a 3D character illustration with subtle parallax (~0.3 multiplier on scroll). Apply a deep purple ambient glowrgba(22,15,36,0.90) 0 4px 4px 9pxaround the hero zone.” -
Feature card: “Design an elevated feature card on aubergine canvas with
#2b1b3dbackground,1px solid rgba(255,255,255,0.08)hairline border, 16px radius, 32px padding, shadowrgba(0,0,0,0.10) 0 10px 15px -3px. Title in Rubik 27/500 white, body in Rubik 16/400 line-height 1.60 in#c8c5d8. Optional uppercase eyebrow label at 10/600 letter-spacing 0.018em in#9b97ad.” -
Tactile muted-purple button: “Build a tactile secondary button: background
#79628c, border1px solid #584674, inset shadowrgba(0,0,0,0.10) 0 1px 3px 0 inset, white uppercase Rubik 14/500-700 letter-spacing 0.014em label, 13px radius,10px 18pxpadding, height 42. Hover transitions inset shadow OUT to elevatedrgba(0,0,0,0.18) 0 0.5rem 1.5remover 200ms — the button rises from sunken to lifted.” -
JetBrains Mono code block: “Create a code block with
#0f0c1a(darkest tier) background,1px solid rgba(255,255,255,0.04)border, 12px radius,16px 20pxpadding. Render in JetBrains Mono 13/400 line-height 1.60 withtnum, zero, caltOpenType features. Apply syntax highlighting in#7553ff(keywords),#dcdcaa(strings),#ff70bc(error tokens). Include intentional human comments like// this is the line that broke prod.” -
Glass card panel: “Design a frosted glass panel: background
rgba(255,255,255,0.18),1px solid rgba(255,255,255,0.16)border,backdrop-filter: blur(18px) saturate(180%), 12px radius, 24px padding. White text content. Use over hero illustrations or product screenshots — never over plain canvas.” -
Pricing tier card (Most Popular): “Design a 3-column pricing grid on
#1f1633canvas. Each tier card:#2b1b3dbackground,1px solid rgba(255,255,255,0.08)border, 16px radius, 40px padding. The middle ‘Most Popular’ tier elevated with the deep purple ambientrgba(22,15,36,0.90) 0 4px 4px 9px. Tier name in Rubik 24/500 white. Price in Dammit Sans 56/700. Feature list in Rubik 16/400#c8c5d8with violet check icons#7553ff. CTA: violet pill#7553fffor popular, near-white pill#efefeffor others.”
Iteration Guide
- Anchor the canvas at
#1f1633aubergine. Pure black tilts the brand toward Vercel’s terminal-brutalism. The warm purple undertone is the differentiation — every other infra brand is cold-gray or terminal-black. - Use the violet
#7553ffas the only structural brand colour. Pink, coral, yellow, and lime are illustration-only. If your CTAs and links aren’t violet, you’ve drifted from the brand axis. - Set Dammit Sans at 88/700 for the hero. Lighter weights or smaller sizes lose the bulletin-board energy. The custom display is the voice.
- Hand off to Rubik below 56px. Dammit Sans below display tier reads as decorative; Rubik takes over for h2 and below. The handoff is exact.
- Use JetBrains Mono for everything code. Inline chips, multi-line blocks, install commands, error traces, dashboard labels. The OpenType
caltligatures (==>,!=) are part of the lineage. - Pill all primary CTAs.
border-radius: 9999pxon the near-white pill is the brand’s most distinctive shape decision. Square corners signal Linear/Vercel; pills signal Sentry. - Add tactile inset shadows on muted-purple buttons. The pressed-INTO-surface quality is what makes secondary CTAs feel physical against the dark canvas.
- Stack three violet-tonal layers for depth, not shadows.
#0f0c1a→#1f1633→#2b1b3dladder does the work that drop shadows would do on a light-canvas brand. - Apply uppercase + 0.014em tracking on buttons and labels. It’s system-wide. Sentence case headlines + uppercase chrome is the typographic discipline.
- Use the warm aubergine ambient glow
rgba(22,15,36,0.90) 0 4px 4px 9pxaround hero zones. The bioluminescent quality is signature — neutral black shadows would punch through. - Never schedule-a-demo as primary. Sentry’s brand explicitly prefers self-serve “Try Sentry Free”. Gated demos belong in tertiary tier.
- Include 3D character illustrations and colorful product screenshots. The illustration-rich register is the anti-corporate signal — without illustrations, the page tilts toward generic dark-mode dev tool.
Drop sentry into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add sentry 2 · ship landing page
npx agentkit init --design sentry light minimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
Docs
Install
Vercel
webdesignhot
dark minimal
Linear
Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pi…
Docs
Install
Linear
webdesignhot
light warm
PostHog
Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not Sa…
Docs
Install
PostHog
webdesignhot