light · identity · open-source · sans · technical · navy · b2b · polyglot
Ory
White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams.
By webdesignhot · ory.sh
$ npx design-md add ory
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. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#ffffff - bg-soft
#f8fafc - bg-section
#f1f5f9 - bg-section-strong
#e2e8f0 - bg-dark
#0f172a - bg-dark-deeper
#020617 - surface
#ffffff - surface-soft
#f8fafc - surface-strong
#f1f5f9 - surface-dark
#1d283a - surface-darker
#0f172a - text AAA · 17.9
#0f1729 - text-strong
#020617 - text-body
#1e293b - text-muted
#475569 - text-soft
#64748b - text-faint — · 2.6
#94a3b8 - text-on-dark
#ffffff - brand AAA · 17.9
#0f172a - brand-deep
#020617 - brand-light
#1d283a - brand-soft
#1e293b - link
#0066ff - link-hover
#0052cc - link-visited
#5e2a8c - accent-violet
#6366f1 - accent-cyan
#06b6d4 - accent-emerald
#10b981 - on-brand
#ffffff - on-dark
#ffffff - on-light
#0f1729 - border — · 1.2
#e2e8f0 - border-soft
#f1f5f9 - border-strong — · 1.5
#cbd5e1 - border-input
#cbd5e1 - border-dark
rgba(255,255,255,0.10) - scrim
rgba(15,23,42,0.48) - shadow-card
rgba(15,23,42,0.04) - shadow-elev
rgba(15,23,42,0.08) - shadow-modal
rgba(15,23,42,0.16) - success
#059669 - success-bg
#ecfdf5 - warning
#d97706 - warning-bg
#fffbeb - danger
#dc2626 - danger-bg
#fef2f2 - info
#0066ff
Ship faster than ever.
hero-display Inter 64px w400 -0.025em
Ship faster than ever.
h1 Inter 48px w400 -0.025em
Built for teams that ship.
h2 Inter 30px w400 -0.02em
A complete kit
h3 Inter 24px w500 -0.015em
The quick brown fox jumps over the lazy dog.
quote Inter 22px w400 -0.005em
The quick brown fox jumps over the lazy dog.
h4 Inter 20px w500 -0.01em
The quick brown fox jumps over the lazy dog.
h5 Inter 18px w600 -0.005em
The quick brown fox jumps over the lazy dog.
body-lg Inter 18px w400 -0.005em
The quick brown fox jumps over the lazy dog.
body-md Inter 16px w400 0
The quick brown fox jumps over the lazy dog.
body-sm Inter 14px w400 0
OUR DESIGN SYSTEM
button-label Inter 14px w400 0
The quick brown fox jumps over the lazy dog.
nav-link Inter 14px w500 0
npx design-md add linear
code-inline "JetBrains Mono" 14px w400 0
OUR DESIGN SYSTEM
label Inter 13px w500 0
OUR DESIGN SYSTEM
caption Inter 13px w400 0
npx design-md add linear
code-block "JetBrains Mono" 13px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow Inter 12px w500 0.08em
The quick brown fox jumps over the lazy dog.
micro Inter 12px w400 0
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 20px
- 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
- micro
2px - sm
4px - md
6px - lg
8px - xl
12px - card
16px - pill
999px
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
Ory's marketing site is the open-source-first identity-platform canvas — a white ground anchored on deep-slate ink (`#0f1729`) with hero display in Inter 48/400 (Regular weight, the typographic discipline) and a signature deep-navy `#0f172a` (Tailwind slate-900) fully-pill CTA. The visual lineage runs through three traditions: open-source-Tailwind ecosystem aesthetic (slate scale, Inter typography, hairline cards, JetBrains Mono code blocks); enterprise-identity-product gravitas (near-black brand colour, fully-pill CTAs, polyglot SDK positioning); and German engineering precision (Ory was founded in Munich). The fully-pill CTA on a near-black brand colour is the move that distinguishes Ory — most peers use 4–8px button radii, Ory commits to 999px. The polyglot SDK pill grid (40+ language/framework pills) is the signature illustration that visually communicates the open-source breadth.
- Slate colour ramp (slate-50 through slate-950) and Inter typography foundation.
- Single-brand confidence, hairline cards, generous editorial breath.
- Open-source-first marketing voice and polyglot SDK pill grid pattern.
- Frosted-glass navbar, restraint discipline, modern dev-tool foundation.
- Enterprise-identity-platform gravitas — Ory differentiates as the open-source alternative.
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: Ory
tagline: White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams.
author: webdesignhot
source_url: https://ory.sh
spec: design.md/v1.5
quality: curated
featured: false
categories: [dev-tools, saas]
tags: [light, identity, open-source, sans, technical, navy, b2b, polyglot]
preview_swatch: ['#ffffff', '#0f172a', '#1d283a']
related: [supabase, vercel, linear]
description: 'Ory''s marketing site is the open-source-first identity-platform canvas — a white ground (`#ffffff`) anchored on deep-slate ink (`#0f1729`) with hero display in Inter 48/400 (Regular weight, not Medium) and a signature **deep-navy `#0f172a` CTA** rendered as a fully-pill (`999px`). Where Auth0 commits to twilight blue, Clerk to violet on dark, and WorkOS to indigo h2 on white, Ory plants its flag on a near-black navy CTA combined with **fully-pill button radius** — an unusual move in the B2B-identity space that signals technical-but-approachable. The page architecture is unmistakably open-source: code-forward, polyglot SDK lists across 40+ languages, generous editorial breath, and the "Buy Production / Buy Growth / Contact Us" pricing voice that respects technical buyers. Ory''s open-source DNA — the entire identity stack (Hydra, Kratos, Keto, Oathkeeper) ships under Apache 2.0 — shapes the visual language: confident ink, restrained chromatic palette, fully-pill CTAs that reference enterprise-grade identity products. The result is the only B2B-identity site that successfully positions open-source rigor without sacrificing premium polish.'
colors:
bg: '#ffffff' # white canvas
bg-soft: '#f8fafc' # softest off-white for alt sections
bg-section: '#f1f5f9' # section ground tier (slate-100)
bg-section-strong: '#e2e8f0' # stronger section grey (slate-200)
bg-dark: '#0f172a' # deep-navy mood-zone (slate-900)
bg-dark-deeper: '#020617' # deepest near-black (slate-950)
surface: '#ffffff'
surface-soft: '#f8fafc'
surface-strong: '#f1f5f9' # hovered card surface
surface-dark: '#1d283a' # dark-section card (slate-800)
surface-darker: '#0f172a' # deepest dark surface
text: '#0f1729' # primary heading — deep-slate near-black (rgb(15,23,41))
text-strong: '#020617' # absolute deepest near-black
text-body: '#1e293b' # body — slate-800
text-muted: '#475569' # secondary — slate-600
text-soft: '#64748b' # caption — slate-500
text-faint: '#94a3b8' # disabled — slate-400
text-on-dark: '#ffffff' # white on dark sections
brand: '#0f172a' # Ory deep-navy — primary CTA fill (slate-900)
brand-deep: '#020617' # darker pressed (slate-950)
brand-light: '#1d283a' # hover brightening (slate-800)
brand-soft: '#1e293b' # softer slate-800 surface tier
link: '#0066ff' # bright link blue
link-hover: '#0052cc' # darker pressed
link-visited: '#5e2a8c' # purple visited
accent-violet: '#6366f1' # secondary accent (indigo-500)
accent-cyan: '#06b6d4' # tertiary cyan accent (cyan-500)
accent-emerald: '#10b981' # success accent
on-brand: '#ffffff' # white on deep-navy CTA
on-dark: '#ffffff'
on-light: '#0f1729'
border: '#e2e8f0' # default 1px hairline (slate-200)
border-soft: '#f1f5f9' # editorial divider (slate-100)
border-strong: '#cbd5e1' # stronger hairline (slate-300)
border-input: '#cbd5e1' # form input default (slate-300)
border-dark: 'rgba(255,255,255,0.10)' # dark-section hairline
scrim: 'rgba(15,23,42,0.48)' # modal backdrop (slate-900)
shadow-card: 'rgba(15,23,42,0.04)'
shadow-elev: 'rgba(15,23,42,0.08)'
shadow-modal: 'rgba(15,23,42,0.16)'
success: '#059669' # success-green (emerald-600)
success-bg: '#ecfdf5' # emerald-50
warning: '#d97706' # amber-600
warning-bg: '#fffbeb' # amber-50
danger: '#dc2626' # red-600
danger-bg: '#fef2f2' # red-50
info: '#0066ff' # link blue
typography:
display:
family: 'Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif'
weights: [400, 500, 600, 700]
opentype-features: ['ss01']
body:
family: 'Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif'
weights: [400, 500, 600]
mono:
family: '"JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace'
weights: [400, 500]
scale:
hero-display: { size: 64, weight: 400, lineHeight: 1.05, tracking: '-0.025em', family: display, opentype: ['ss01'] }
h1: { size: 48, weight: 400, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: ['ss01'] }
h2: { size: 30, weight: 400, lineHeight: 1.0, tracking: '-0.02em', family: display }
h3: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.015em', family: display }
h4: { size: 20, weight: 500, lineHeight: 1.30, tracking: '-0.01em', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.40, tracking: '-0.005em', family: display }
eyebrow: { size: 12, weight: 500, lineHeight: 1.50, tracking: '0.08em', family: body, transform: uppercase }
body-lg: { size: 18, weight: 400, lineHeight: 1.60, tracking: '-0.005em', family: body }
body-md: { size: 16, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0', family: body }
button-label: { size: 14, weight: 400, lineHeight: 1.0, tracking: '0', family: body }
nav-link: { size: 14, weight: 500, lineHeight: 1.20, tracking: '0', family: body }
caption: { size: 13, weight: 400, lineHeight: 1.40, tracking: '0', family: body }
micro: { size: 12, weight: 400, lineHeight: 1.40, tracking: '0', family: body }
code-inline: { size: 14, weight: 400, lineHeight: 1.50, tracking: '0', family: mono }
code-block: { size: 13, weight: 400, lineHeight: 1.55, tracking: '0', family: mono }
quote: { size: 22, weight: 400, lineHeight: 1.40, tracking: '-0.005em', family: display, italic: true }
radius:
micro: 2
sm: 4
md: 6
lg: 8
xl: 12
card: 16
pill: 999 # default CTA — fully-pill is the signature
spacing:
base: 4
scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 1280
prose-width: 720
header-height: 64
hero-padding-y: 128
components:
button-pill-primary:
bg: '#0f172a'
color: '#ffffff'
radius: 999
padding: '12px 20px'
height: 44
font: button-label
use: 'Primary CTA — deep-navy pill (slate-900). "Start for free", "Buy Production", "Contact Us".'
button-pill-light:
bg: '#1d283a'
color: '#ffffff'
radius: 999
padding: '12px 20px'
height: 44
use: 'Slightly lighter pill variant — slate-800. Used on dark-section bands where slate-900 would blend in.'
button-pill-secondary:
bg: '#ffffff'
color: '#0f172a'
border: '1px solid #cbd5e1'
radius: 999
padding: '12px 20px'
height: 44
use: 'Outlined pill — secondary CTA on light section.'
button-pill-ghost-dark:
bg: 'transparent'
color: '#ffffff'
border: '1px solid rgba(255,255,255,0.20)'
radius: 999
padding: '12px 20px'
height: 44
use: 'Outlined pill on dark — secondary action on dark-section bands.'
button-text-link:
bg: 'transparent'
color: '#0066ff'
use: 'Inline link — bright blue text. Hover underlines or darkens to #0052cc.'
card-feature:
bg: '#ffffff'
color: '#1e293b'
radius: 16
padding: '32px'
border: '1px solid #e2e8f0'
use: 'Feature card — slate-200 hairline border, generous internal padding.'
card-section:
bg: '#f1f5f9'
color: '#1e293b'
radius: 16
padding: '32px'
use: 'Section-grey card — slate-100 ground, no border.'
card-pricing:
bg: '#ffffff'
color: '#1e293b'
radius: 16
padding: '32px'
border: '1px solid #e2e8f0'
use: 'Pricing tier — Production tier highlights with 2px deep-navy border.'
card-dark:
bg: '#1d283a'
color: '#ffffff'
radius: 16
padding: '32px'
use: 'Dark-mood card — slate-800 ground, white text. Used in webinar callouts and footer-strip CTA.'
input:
bg: '#ffffff'
color: '#0f1729'
border: '1px solid #cbd5e1'
focus: '0 0 0 2px #0f172a'
radius: 8
height: 44
padding: '12px 14px'
placeholder: '#64748b'
use: 'Form input — 8px radius (more rounded than buttons because pill is reserved for CTA).'
navbar-top:
bg: 'rgba(255,255,255,0.92) backdrop-blur(8px)'
color: '#0f1729'
height: 64
border-bottom: '1px solid #e2e8f0'
use: 'Frosted-white navbar with hairline bottom.'
code-block:
bg: '#0f172a'
color: '#ffffff'
radius: 12
padding: '20px 24px'
use: 'JetBrains Mono code block on deep-navy ground — cyan keywords, emerald strings.'
pill-eyebrow:
bg: '#f1f5f9'
color: '#0f1729'
radius: 999
padding: '4px 10px'
use: 'Eyebrow pill — soft slate ground, deep-slate text in 12/500 uppercase. "WEBINAR", "OPEN SOURCE".'
pill-status:
bg: '#ecfdf5'
color: '#059669'
radius: 999
padding: '4px 10px'
use: 'Status pill — soft emerald ground, success green text.'
modal:
bg: '#ffffff'
color: '#1e293b'
radius: 16
padding: '32px'
border: '1px solid #e2e8f0'
shadow: 'rgba(15,23,42,0.16) 0 24px 48px'
use: 'Centred dialog over slate-900 scrim.'
sdk-pill:
bg: '#f1f5f9'
color: '#0f1729'
radius: 8
padding: '8px 12px'
use: 'Polyglot SDK pill — TypeScript, Go, Python, Rust, Java, .NET. Soft slate ground.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 320
cta-hover: 'deep-navy brightens 0f172a → 1d283a over 120ms'
card-hover: 'border deepens slightly + 1px translateY(-1) over 200ms; subtle 4% shadow appears'
hero-reveal: 'sections fade-up from translateY(16px)/opacity 0 → 0/1 over 320ms emphasized'
reduced-motion: 'respects prefers-reduced-motion: reduce — translateY suppressed; transitions remain opacity-only.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1440
shadows:
ambient: 'none — most cards are hairline-bordered only'
card: 'rgba(15,23,42,0.04) 0 4px 12px'
elevated: 'rgba(15,23,42,0.08) 0 16px 32px'
modal: 'rgba(15,23,42,0.16) 0 24px 48px'
ring-navy: '0 0 0 2px #0f172a'
accessibility:
contrast-text-on-bg: 17.4 # #0f1729 on #ffffff — AAA
contrast-body-on-bg: 13.2 # #1e293b on #ffffff — AAA
contrast-on-navy-cta: 17.4 # #ffffff on #0f172a — AAA
contrast-link-on-bg: 5.4 # #0066ff on #ffffff — AA at body sizes
contrast-muted-on-bg: 7.4 # #475569 on #ffffff — AAA
focus-ring: '2px solid #0f172a + 2px outline-offset (deep-navy ring)'
reduced-motion-honored: true
touch-target-min: 44
keyboard-nav: 'Tab moves logo → product → developers → pricing → docs → log in → CTA; arrow keys in mega-menu.'
dark-mode: optional # Marketing canvas is light-only by default; dark mood-zone footer with `bg-dark` token; full dark theme available for documentation
lineage:
summary: |
Ory's marketing site is the open-source-first identity-platform
canvas — a white ground anchored on deep-slate ink (`#0f1729`) with
hero display in Inter 48/400 (Regular weight, the typographic discipline)
and a signature deep-navy `#0f172a` (Tailwind slate-900) fully-pill
CTA. The visual lineage runs through three traditions: open-source-Tailwind
ecosystem aesthetic (slate scale, Inter typography, hairline cards,
JetBrains Mono code blocks); enterprise-identity-product gravitas
(near-black brand colour, fully-pill CTAs, polyglot SDK positioning);
and German engineering precision (Ory was founded in Munich). The
fully-pill CTA on a near-black brand colour is the move that distinguishes
Ory — most peers use 4–8px button radii, Ory commits to 999px. The
polyglot SDK pill grid (40+ language/framework pills) is the signature
illustration that visually communicates the open-source breadth.
influences:
- name: Tailwind CSS
role: Slate colour ramp (slate-50 through slate-950) and Inter typography foundation.
url: https://tailwindcss.com
- name: Stripe
role: Single-brand confidence, hairline cards, generous editorial breath.
url: https://stripe.com
- name: Supabase
role: Open-source-first marketing voice and polyglot SDK pill grid pattern.
url: https://supabase.com
- name: Vercel
role: Frosted-glass navbar, restraint discipline, modern dev-tool foundation.
url: https://vercel.com
- name: Okta
role: Enterprise-identity-platform gravitas — Ory differentiates as the open-source alternative.
url: https://okta.com
---
## 1. Visual Theme & Atmosphere
Ory's marketing site is the **open-source-first identity-platform canvas** — a white ground (`#ffffff`) anchored on deep-slate near-black (`#0f1729`) with hero display in **Inter 48/400** (Regular weight, not Medium) and a signature **deep-navy `#0f172a` fully-pill CTA**. The page reads as a senior-engineering tool that respects technical buyers: confident, restrained, polyglot, and unmistakably positioned as the open-source identity stack that scales from solo developer to enterprise. Where Auth0 commits to twilight blue and Clerk plants violet on dark, Ory chose the inverse strategy — a confident white canvas with a near-black pill CTA that signals "we ship the identity stack you'd build yourself if you had the time".
The chromatic system is **white + deep-slate + bright link-blue**. The canvas is pure `#ffffff`. Heading text runs in `#0f1729` (deep-slate), body in `#1e293b` (slightly lighter slate-800). The brand colour is the deep-navy `#0f172a` (Tailwind's `slate-900`) used as the primary CTA fill — a deliberately near-black-but-not-black colour that reads as enterprise-grade without enterprise-blue cliché. Inline links are **bright blue `#0066ff`** — a high-saturation hyperlink hue that contrasts with the muted brand and signals "click here, please".
Type runs **Inter** across the entire scale. Hero display is Inter at **48/400** — Regular weight is the typographic discipline. Most B2B-identity sites run display at 500 or 600; Ory commits to 400 because the page architecture (alphabet-list of SDK pills, code blocks, dense pricing tiers) creates enough chromatic and density rhythm without needing display weight. Headlines lean on negative tracking `-0.025em` to compress at large sizes. Body is Inter 16/400 with normal letter-spacing. Mono is **JetBrains Mono** for code blocks.
Shape language is the most distinctive move: **fully-pill (999px) buttons** combined with **8–16px input/card radii**. Every CTA on the page is a 999px pill. Every input rounds at 8px (more conventional). Every card rounds at 16px. This split — pill CTAs + rounded utilities — is unusual in B2B-identity (most use 4–8px buttons) and immediately marks the page as confidently distinct. The pill CTA suggests "membership, identity, gate" — exactly the metaphor Ory wants to evoke for an identity platform.
Depth is achieved through **hairline borders + soft slate-100 alt sections**. Most cards are hairline-bordered only — `1px solid #e2e8f0` (slate-200). On hover, a subtle 4% shadow appears. The dark mood-zone is `#1d283a` (slate-800), used in the footer-strip and the rare webinar callout band. There is no atmospheric multi-layer shadow.
The signature visual element is the **polyglot SDK pill grid** — a list of 40+ supported languages and frameworks (TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, Apollo GraphQL, Express, Next.js, Expo, Android, iOS, Flutter…) rendered as soft-slate pills in 8px radius. This grid is Ory's most distinctive marketing asset — it visually communicates "we ship SDKs for every language you might use" without requiring a screenshot.
**Key Characteristics:**
- White canvas (`#ffffff`) with slate-100 (`#f1f5f9`) alt sections
- Hero display in Inter **48/400** (Regular weight) — the typographic discipline
- Deep-slate heading ink (`#0f1729`) — never pure black
- Body ink in slate-800 (`#1e293b`) — slightly lighter than heading
- Single brand CTA: deep-navy `#0f172a` (slate-900) fully-pill (999px)
- Every CTA is a 999px pill — the unique shape signature
- Bright link blue (`#0066ff`) for inline hyperlinks — high-saturation
- Inputs at 8px radius, cards at 16px — pill is reserved for CTAs
- Polyglot SDK pill grid — 40+ language/framework pills as the signature illustration
- Code blocks on deep-navy `#0f172a` ground with JetBrains Mono
- Apache 2.0 open-source positioning baked into voice and design
## 2. Color Palette & Roles
### Primary
- **Canvas** (`#ffffff`) — pure-white default page ground
- **Soft White** (`#f8fafc`) — softest off-white for alt sections
- **Section Grey** (`#f1f5f9`) — slate-100, primary alt section ground
- **Section Strong** (`#e2e8f0`) — slate-200, stronger section
- **Heading Ink** (`#0f1729`) — deep-slate near-black for headings (rgb(15,23,41))
- **Body Ink** (`#1e293b`) — slate-800 for body text
- **Strong Ink** (`#020617`) — slate-950, deepest near-black for emphasis
- **Muted** (`#475569`) — slate-600, secondary metadata
- **Soft** (`#64748b`) — slate-500, caption
- **Faint** (`#94a3b8`) — slate-400, disabled
### Brand & Dark
- **Ory Navy** (`#0f172a`) — slate-900, the signature primary CTA fill. Deep-navy near-black.
- **Brand Light** (`#1d283a`) — slate-800, hover brightening / lighter pill variant
- **Brand Deep** (`#020617`) — slate-950, pressed/active state
- **Brand Soft** (`#1e293b`) — softer slate-800
- **Dark Mood** (`#0f172a`) — same as Brand, used as the dark-section ground
- **Dark Mood Deeper** (`#020617`) — slate-950 deepest near-black
### Accent
- **Link Blue** (`#0066ff`) — bright link blue for inline hyperlinks. High-saturation, contrasts with muted brand.
- **Link Hover** (`#0052cc`) — darker pressed
- **Visited** (`#5e2a8c`) — purple visited state
- **Indigo** (`#6366f1`) — indigo-500, secondary accent (rare)
- **Cyan** (`#06b6d4`) — cyan-500, tertiary accent (used in code-block syntax)
- **Emerald** (`#10b981`) — success accent
### Interactive
- **Link** (`#0066ff`) — bright blue, often without underline (icon `→` indicates link)
- **Link Hover** (`#0052cc`) — darker
- **Visited** (`#5e2a8c`) — purple
- **Selected** (`#0f172a`) — 2px deep-navy border on selected pricing tier, focused inputs
- **Disabled** (`#94a3b8`) — slate-400 text on `#f1f5f9` surface
### Neutral Scale
Ory's neutral scale uses Tailwind's slate ramp directly — a deliberate choice that acknowledges the open-source-Tailwind ecosystem.
- **slate-950** (`#020617`) — strong ink
- **slate-900** (`#0f172a`) — heading / brand
- **slate-800** (`#1e293b`) — body / dark surface
- **slate-700** (`#334155`)
- **slate-600** (`#475569`) — muted
- **slate-500** (`#64748b`) — soft
- **slate-400** (`#94a3b8`) — faint
- **slate-300** (`#cbd5e1`) — border-strong / input border
- **slate-200** (`#e2e8f0`) — border default
- **slate-100** (`#f1f5f9`) — section
- **slate-50** (`#f8fafc`) — soft white
### Surface & Borders
- **White** (`#ffffff`) — default
- **Soft White** (`#f8fafc`) — alt
- **Section Grey** (`#f1f5f9`) — section ground
- **Section Strong** (`#e2e8f0`) — strong section
- **Dark Card** (`#1d283a`) — dark-mood card
- **Dark Mood** (`#0f172a`) — section ground
- **Border** (`#e2e8f0`) — slate-200 default
- **Border Soft** (`#f1f5f9`) — slate-100 editorial divider
- **Border Strong** (`#cbd5e1`) — slate-300
- **Border Input** (`#cbd5e1`) — slate-300
- **Border Dark** (`rgba(255,255,255,0.10)`) — dark-section hairline
### Shadow Colors
Ory's shadow palette uses **slate-900 tinted shadows** (the brand colour as the shadow source). Most cards have no shadow at rest. On hover, a subtle 4% slate-tinted shadow appears.
- `rgba(15,23,42,0.04) 0 4px 12px` — card hover (slate-900 tinted at 4%)
- `rgba(15,23,42,0.08) 0 16px 32px` — elevated panel
- `rgba(15,23,42,0.16) 0 24px 48px` — modal
- `0 0 0 2px #0f172a` — focus ring
### Semantic
- **Success Green** (`#059669`) — emerald-600, on `#ecfdf5` surface
- **Warning Amber** (`#d97706`) — amber-600, on `#fffbeb` surface
- **Danger Red** (`#dc2626`) — red-600, on `#fef2f2` surface
- **Info Blue** (`#0066ff`) — link blue, used sparingly
## 3. Typography Rules
### Font Family
**Display & Body**: `Inter` with `Inter Fallback` and system stack. Ory commits to Inter at the entire scale — no display companion typeface. Display runs at weight **400** (Regular), body at 400, headings at 400–500 selectively.
**Mono**: `JetBrains Mono`, fallback `Fira Code`, `SF Mono`, `Menlo`. Used for code blocks and inline code.
**OpenType features**: `ss01` enabled on display Inter for the alternate-`a` and alternate-`g` forms.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| hero-display | Inter | 64 | 400 | 1.05 | -0.025em | ss01 | Hero — note 400 weight |
| h1 | Inter | 48 | 400 | 1.0 | -0.025em | ss01 | Page title — observed 48/48 |
| h2 | Inter | 30 | 400 | 1.0 | -0.02em | — | Section opener — also 400 weight |
| h3 | Inter | 24 | 500 | 1.25 | -0.015em | — | Sub-section — Medium weight starts here |
| h4 | Inter | 20 | 500 | 1.30 | -0.01em | — | Feature card title |
| h5 | Inter | 18 | 600 | 1.40 | -0.005em | — | Sub-feature — Semibold |
| eyebrow | Inter | 12 | 500 | 1.50 | 0.08em uppercase | — | "WEBINAR", "OPEN SOURCE" |
| body-lg | Inter | 18 | 400 | 1.60 | -0.005em | — | Hero sub-copy |
| body-md | Inter | 16 | 400 | 1.50 | 0 | — | Default body |
| body-sm | Inter | 14 | 400 | 1.50 | 0 | — | Secondary body |
| label | Inter | 13 | 500 | 1.40 | 0 | — | Form labels |
| button-label | Inter | 14 | 400 | 1.0 | 0 | — | CTA text — note 400 weight |
| nav-link | Inter | 14 | 500 | 1.20 | 0 | — | Top nav |
| caption | Inter | 13 | 400 | 1.40 | 0 | — | Captions |
| micro | Inter | 12 | 400 | 1.40 | 0 | — | Footer legal |
| code-inline | JetBrains Mono | 14 | 400 | 1.50 | 0 | — | Inline `<code>` |
| code-block | JetBrains Mono | 13 | 400 | 1.55 | 0 | — | Code panel |
| quote | Inter | 22 | 400 | 1.40 | -0.005em | italic | Pull quote |
### Principles
- **Inter at 400 (Regular) for display.** This is the typographic signature — Ory's most distinctive type move. Most peers run display at 500 or 600; Ory's 400 reads as restrained-and-considered rather than bold-and-marketing.
- **Headings step from 400 → 500 → 600.** h1/h2 at 400, h3/h4 at 500, h5 at 600 — weight increases as size decreases, an inversion of the conventional "bigger = bolder" rule.
- **Negative tracking on display only.** `-0.025em` on hero, `-0.02em` on h2. Body runs at default tracking.
- **Eyebrows at 12/500 uppercase, 0.08em tracking.** The only uppercase moment.
- **JetBrains Mono for code only.** Pairs cleanly with Inter for the open-source dev-tool aesthetic.
- **Tailwind slate scale informs neutrals.** Ory uses Tailwind's slate ramp because the open-source ecosystem is Tailwind-aligned.
- **Single typeface discipline.** No display companion; Inter handles every role.
## 4. Component Stylings
### Buttons
**`button-pill-primary`** — primary CTA. Deep-navy `#0f172a` (slate-900) fill, white text, 14/400 Inter, **999px fully-pill radius**, 12×20px padding, 44px height. The signature shape. Hover brightens to `#1d283a` (slate-800). Used for "Start for free", "Buy Production", "Buy Growth", "Contact Us".
**`button-pill-light`** — slightly lighter pill. `#1d283a` (slate-800) fill, white text, same dimensions. Used on dark-section bands where slate-900 would blend in.
**`button-pill-secondary`** — outlined pill. White fill, deep-navy text, 1px `#cbd5e1` border, 999px radius. Same dimensions as primary.
**`button-pill-ghost-dark`** — outlined pill on dark. Transparent fill, white text, 1px `rgba(255,255,255,0.20)` border. 999px.
**`button-text-link`** — plain inline link. Bright blue `#0066ff` text, often with `→` arrow. Hover darkens to `#0052cc` or underlines.
### Cards
**`card-feature`** — feature card. White surface, **16px radius** (more rounded than buttons because pill is reserved for CTA), 1px `#e2e8f0` (slate-200) hairline border, 32px internal padding. Stack: optional icon, h4 title, body description, optional inline link. On hover: subtle slate-tinted 4% shadow + 1px translateY(-1) lift.
**`card-section`** — section-grey card. `#f1f5f9` (slate-100) ground, 16px radius, no border, 32px padding.
**`card-pricing`** — pricing tier. White surface, 16px radius, 1px hairline border, 32px padding. The "Production" tier (recommended) highlights with 2px `#0f172a` deep-navy border.
**`card-dark`** — dark-mood card. `#1d283a` (slate-800) ground, 16px radius, 32px padding, white text. Used in webinar callouts and footer-strip closing CTA.
**`card-stat`** — metric card. White surface, 16px radius, 32px padding. Massive Inter 48/400 metric, eyebrow label below.
### Badges, Tags, Pills
**`pill-eyebrow`** — eyebrow pill. Soft slate `#f1f5f9` ground, deep-slate `#0f1729` text, 999px radius, 4×10px padding, 12/500 Inter uppercase. "WEBINAR", "OPEN SOURCE", "BETA".
**`pill-status`** — semantic status pill. Success: `#ecfdf5` ground + `#059669` text. Error: `#fef2f2` ground + `#dc2626` text.
**`sdk-pill`** — polyglot SDK pill. Soft slate `#f1f5f9` ground, deep-slate text, **8px radius** (rounded-rectangle, not pill), 8×12px padding, 14/400 Inter. Used in the signature 40+ language/framework grid: `TypeScript`, `Go`, `Python`, `Rust`, `Java`, `.NET`, `PHP`, `Ruby`, `Elixir`, `Apollo GraphQL`, `Express`, `Express GraphQL`, `Expo`, `Android`, `Apollo`, `Angular`, etc.
### Inputs / Forms
**`input`** — text input. White surface, 1px `#cbd5e1` (slate-300) border, **8px radius** (not pill — reserved for CTA), 44px height, 12×14px padding. Placeholder in `#64748b` (slate-500). On focus: 2px `#0f172a` deep-navy ring with 2px outline-offset.
**`textarea`** — same as input with auto-grow.
**`select-dropdown`** — same as input with chevron-down icon.
**`checkbox`** — 16×16px, 4px radius, 1px hairline border. On checked: deep-navy fill, white check.
**`radio`** — 16×16px circle, 1px hairline border. On selected: deep-navy fill, white dot.
### Navigation
**`navbar-top`** — top nav. `rgba(255,255,255,0.92)` ground with `backdrop-blur(8px)`, 1px `#e2e8f0` bottom border, 64px height. Ory wordmark flush left in deep-slate. Nav links "Product", "Developers", "Pricing", "Docs" in Inter 14/500 deep-slate centre. "Log in" text link + primary deep-navy pill CTA flush right.
**`mega-menu`** — opens from product nav. White surface, 12px radius, 1px hairline border, 24px padding, slate-tinted shadow. Multi-column nav with eyebrow group titles ("Identity", "Authorization", "Authentication") and 14/500 link rows.
**`footer`** — `#0f172a` deep-navy ground, 5-column link list at desktop. Eyebrow group titles in 12/500 uppercase white, link rows in 14/400 muted-slate-300, social row at the bottom. Apache 2.0 open-source acknowledgment in the bottom legal strip.
**`breadcrumb`** — muted slate text with `›` separators, 13/400 Inter.
### Tooltips, Toasts, Modals
**`tooltip`** — `#0f172a` deep-navy ground, 6px radius, 8×10px padding, 12/400 white text, 6px arrow.
**`toast`** — bottom-right corner. White surface, 12px radius, 1px hairline, 16×20px padding, 14/400 ink text.
**`modal`** — centred dialog over `rgba(15,23,42,0.48)` slate-900 scrim. White surface, 16px radius, 1px hairline border, 32px padding, slate-tinted modal shadow.
### Code Block
**`code-block`** — `#0f172a` deep-navy ground (matches the brand CTA — a deliberate move that ties code presentation to the brand colour), 12px radius, 20×24px padding. JetBrains Mono 13/400. Cyan keywords (`#06b6d4`), emerald strings (`#10b981`), white default text. Optional copy button top-right with hairline border.
### Decorative
**`polyglot-sdk-grid`** — the signature illustration. A grid of 40+ SDK pills (TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, etc.) arranged in 4–6 columns at desktop. Each pill is `sdk-pill` styled — soft slate ground, deep-slate text, 8px radius. Hovering a pill reveals a tooltip with documentation link.
## 5. Layout Principles
### Spacing System
- Base unit: **4px**
- Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128 · 160`
- Hero padding (vertical): **128px** at desktop
- Section padding: **96–128px** between major sections
- Card internal padding: **32px** for feature cards
- Gutter: **24px** between feature cards in 2-column; 32px in 3-column
### Grid & Container
- Max content width: **1280px** centred
- Hero: full-width with copy capped at 720px prose width
- Feature grid: 2-column at desktop with 24px gutter
- Pricing: 3-column tier comparison cards (Free / Production / Growth) with Production highlighted
- Polyglot SDK grid: 4–6 column pill grid, full-width, 8–12px gutters
### Whitespace Philosophy
Ory gives sections **modern dev-tool breath** — 96–128px between major bands. The hero band is 128px tall. The polyglot SDK grid takes a full section to itself, generously padded (64px above, 64px below). The result feels considered and editorial — closer to a Vercel or Supabase landing than to an enterprise-identity site.
### Section Cadence
The page alternates **white canvas (`#ffffff`) → slate-50 (`#f8fafc`) → white → slate-100 (`#f1f5f9`) → white → polyglot-grid section (slate-100) → dark mood-zone (`#0f172a`)**. The dark mood-zone appears 1–2 times per page — once for a webinar callout and once as the closing footer-strip.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Dense tag corners |
| Small | 4px | Checkboxes |
| Default | 6px | Tooltips, dropdowns |
| Standard | 8px | Inputs, SDK pills |
| Comfortable | 12px | Code blocks, mega-menu |
| Card | 16px | Feature cards, modals, pricing |
| Pill | 999px | All CTAs — the signature shape |
The **999px pill on all CTAs** is the unique shape signature. Inputs at 8px (rounded-rectangle, not pill) maintain utility. The split between pill-CTAs and rounded utilities is deliberate — it reserves the pill for "actions" and rounds everything else for "content".
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow | Body sections (~95%) |
| 1 — Hairline | `1px #e2e8f0` border | Cards at rest |
| 2 — Hover | `rgba(15,23,42,0.04) 0 4px 12px` | Hovered cards, mega-menu |
| 3 — Elevated | `rgba(15,23,42,0.08) 0 16px 32px` | Mega-menu, sticky bars |
| 4 — Modal | `rgba(15,23,42,0.16) 0 24px 48px` | Centred dialog |
| 5 — Focus | `0 0 0 2px #0f172a` ring | Focused inputs and buttons |
### Shadow Philosophy
Ory's depth is **slate-tinted, not neutral**. Shadows use the slate-900 hue at low opacity (4–16%), which keeps them tonally connected to the brand. Most cards have no shadow at rest — depth is the hairline border. The slate-tinted shadows on hover and modal give the page a subtle chromatic depth that ties to the brand without being atmospheric.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, mega-menu
### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 120ms | Hover colour swap, focus ring fade-in |
| Standard | 200ms | Card hover, mega-menu open |
| Slow | 320ms | Modal enter, hero reveal |
### Per-Component Recipes
- **CTA hover**: deep-navy brightens `#0f172a` → `#1d283a` over 120ms. No transform.
- **Card hover**: 1px translateY(-1) + slate-tinted 4% shadow over 200ms; border deepens slightly.
- **Hero reveal**: sections fade-up from `translateY(16px)/opacity 0` → `0/1` over 320ms emphasized.
- **SDK pill hover**: pill ground brightens slightly + tooltip appears over 200ms.
- **Mega-menu open**: 200ms fade + 4px slide-down.
- **Modal enter**: scrim fades in 200ms; dialog enters from `translateY(8px)/opacity(0)` → `0/1` over 320ms emphasized.
- **Link hover**: bright-blue darkens by ~10% luminance over 120ms.
### Page Transitions
Page-to-page navigation uses no transition — hard navigation. Ory prioritises perceived speed.
### Reduced Motion
Respects `prefers-reduced-motion: reduce`. Hero reveal and card hover translateY suppress (opacity-only). SDK pill hover degrades to instant.
## 9. Accessibility & A11y
### Contrast Pairs
| Pair | Ratio | Level |
|------|-------|-------|
| #0f1729 heading on #ffffff | 17.4 | AAA |
| #1e293b body on #ffffff | 13.2 | AAA |
| #ffffff on #0f172a deep-navy CTA | 17.4 | AAA |
| #0066ff link on #ffffff | 5.4 | AA at body sizes |
| #475569 muted on #ffffff | 7.4 | AAA |
| #059669 success on #ecfdf5 | 5.5 | AA |
| #dc2626 danger on #fef2f2 | 6.4 | AA |
| #ffffff on #1d283a slate-800 | 13.5 | AAA |
The deep-navy CTA pair sits at **17.4 — AAA** — the highest contrast ratio of any auth-platform we've audited. This is the benefit of choosing slate-900 (`#0f172a`) as the brand: it operates as both a brand colour and a maximal-contrast indicator.
### Focus Indicators
Focus ring is **2px solid `#0f172a` (deep-navy) with 2px outline-offset**. The deep-navy doubles as brand affordance and accessibility indicator.
### ARIA Patterns
- **Top nav**: `role="navigation"`, `aria-label="Primary"`. Mega-menu uses `role="menu"`.
- **Pricing tier cards**: `<h3>` heading, Production tier `aria-current="recommended"`.
- **Polyglot SDK grid**: `role="list"` with `role="listitem"` for each SDK; tooltips use `role="tooltip"`.
- **Modal**: `role="dialog"`, `aria-modal="true"`, focus trap, Esc closes.
- **Code blocks**: `role="region"`, `aria-label="Code example"`. Copy button `aria-live="polite"`.
### Keyboard Navigation
- Tab: logo → product → developers → pricing → docs → log in → primary CTA
- Mega-menu: arrow keys navigate, Esc closes
- SDK grid: Tab through pills in row order
- Modal: focus trap, Tab cycles
- Skip-to-main visible on first Tab
### Screen Reader Hints
- SDK pills announce "TypeScript SDK, version X.Y" on focus
- Code copy button announces "Copied" with `aria-live`
- Pricing tier names announced before price + features
### Reduced Motion
Hero reveal and card hover translateY suppress. SDK pill hover degrades to instant. Mega-menu fade only.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Nav collapses to hamburger; hero copy 32px; feature grid 1-up; SDK grid 2-column |
| Tablet | 640–1024px | Nav reveals product + log in; feature grid 2-up; SDK grid 3-column |
| Desktop | 1024–1280px | Full mega-menu; container caps at 1280px; SDK grid 5–6 column |
| Wide | 1280–1440px | Container stays 1280px |
### Touch Targets
- Primary CTAs: 44px height — meets AA
- Nav links: 36×16px tap target at desktop, 44×20 on mobile
- Form inputs: 44px height
- SDK pills: 32px tall — clickable to docs
### Collapsing Strategy
- Nav: product / developers collapse to hamburger at <1024px
- Hero: 64px → 48px → 36px → 32px down breakpoints; tracking compresses
- Feature grid: 3-up → 2-up → 1-up
- Pricing: 3-column → 1-column; Production tier surfaces first
- SDK grid: 6-column → 4-column → 3-column → 2-column
### Image Behavior
Polyglot SDK grid uses inline SVG icons + text labels. Customer logos use SVG. Hero illustration is a line-art SVG of the identity flow.
### Container Queries
Used in feature cards: when card width drops below ~280px, icon shifts above title.
## 11. Content & Voice
### Tone
Confident, technical, restrained, slightly opinionated. Ory's voice positions identity as **infrastructure you should own, not rent** — assumes the reader is a senior engineer or platform architect who values open-source rigor and self-hosting capability. Headlines lead with capability and outcome ("Identity & Access Management Solutions", "The IAM platform for the cloud era"). The voice acknowledges the open-source DNA — "Apache 2.0 licensed", "Self-host or use Ory Cloud" — without reaching for friendly-startup language.
### Microcopy Patterns
- **Button verbs**: "Start for free", "Buy Production", "Buy Growth", "Contact Us", "Explore open source", "Read the docs"
- **Eyebrow labels**: 12/500 uppercase Inter — "WEBINAR", "OPEN SOURCE", "PRODUCTION READY"
- **Error message recipe**: precise + technical — "Configuration error: Unable to validate JWKS endpoint. Check `keys.json` URL or contact support."
- **Success confirmations**: technical + minimal — "Configuration saved. Your changes will propagate within 60 seconds."
- **Field labels**: short and exact — "Issuer URL", "Client ID", "Redirect URI"
- **Doc links**: lead with verb — "Read the Hydra guide", "View Kratos API reference", "See the Keto policy docs"
### Empty States
- Empty identities: "No identities yet. Use the API or admin UI to create your first identity."
- Empty policies: "No policies configured. Define a policy to start protecting resources."
- Empty audit logs: "No events in the last 24 hours. Adjust the time range or check the integration."
### CTA Verb Conventions
- Primary: "Start for free", "Buy Production", "Buy Growth", "Contact Us"
- Secondary: "Read the docs", "Explore open source", "View pricing"
- Tertiary: "Learn more →", "View changelog", "See the GitHub repo"
- Avoided: "Click here", "Submit", "Buy now"
## 12. Dark Mode & Theming
**Light-only on the marketing canvas with a deep-navy mood-zone footer.** Ory's marketing canvas is light. The dark mood-zone (`#0f172a` slate-900) appears in the footer-strip closing CTA and the rare webinar callout band.
### Dark Mood-Zone Treatment
```yaml
bg-dark: '#0f172a' # slate-900
bg-dark-deeper: '#020617' # slate-950
surface-dark: '#1d283a' # slate-800
text-on-dark: '#ffffff'
text-muted-on-dark: '#cbd5e1' # slate-300
border-on-dark: 'rgba(255,255,255,0.10)'
brand-on-dark: '#ffffff' # primary CTA inverts to white on dark
brand-text-on-dark: '#0f172a'
```
The dark mood-zone preserves the slate scale — `#0f172a` ground, `#1d283a` cards, slate-300 muted text. The primary CTA inverts: white fill with deep-navy text.
### Documentation Theme
Ory's documentation pages support a full dark theme with the same slate ramp inverted. Marketing pages are light-only.
## 13. Lineage & Influences
Ory's visual lineage runs through three traditions: **open-source-Tailwind ecosystem aesthetic** (the slate scale, Inter typography, hairline cards, JetBrains Mono code blocks — all canonical Tailwind/Vercel/Supabase moves of the early 2020s); **enterprise-identity-product gravitas** (the near-black brand colour, the fully-pill CTAs, the polyglot SDK positioning — all moves borrowed from Okta, ForgeRock, and the enterprise IAM canon); and **German engineering precision** (Ory was founded in Munich and the visual language reflects a Bauhaus-trained sense of restraint — confident type, restrained colour, no decorative ornament).
The **fully-pill CTA on a near-black brand colour** is the move that distinguishes Ory. Where most B2B-identity sites reach for blue (trust) or violet (modern), Ory chose slate-900 (`#0f172a`) — a deliberately near-black-but-not-black colour that reads as enterprise-grade without enterprise-blue cliché. The pill shape suggests "membership, identity, gate" — exactly the metaphor for an identity platform. Combined with the polyglot SDK grid as the signature illustration, the brand position is unmistakable: open-source identity infrastructure for technical buyers.
What Ory rejects: **dark canvases as primary** (light-first commitment with deep-navy mood-zone), **decorative motion** (no breathing halos, no spring overshoots), **photographic product screenshots** (line-art SVG and SDK pill grid instead), **friendly-startup voice** (technical-and-precise instead), and **multi-coloured feature accents** (single deep-navy + bright link blue).
**Influences:**
- Tailwind CSS — slate colour ramp, Inter typography, [tailwindcss.com](https://tailwindcss.com)
- Stripe — single-brand confidence, hairline cards, [stripe.com](https://stripe.com)
- Supabase — open-source-first marketing voice, [supabase.com](https://supabase.com)
- Vercel — frosted-glass navbar, restraint discipline, [vercel.com](https://vercel.com)
- Okta — enterprise-identity-platform gravitas (predecessor positioning Ory differentiates against), [okta.com](https://okta.com)
- JetBrains Mono — code-block typeface, [jetbrains.com/mono](https://www.jetbrains.com/lp/mono/)
## 14. Do's and Don'ts
**Do**
- Anchor the canvas on white (`#ffffff`) with slate-100 (`#f1f5f9`) for alt sections
- Run hero display in Inter **48/400** (Regular weight) — the typographic discipline
- Use deep-slate (`#0f1729`) for headings, slate-800 (`#1e293b`) for body
- Make every primary CTA a fully-pill (999px) deep-navy `#0f172a` button — the signature shape
- Use bright blue (`#0066ff`) for inline links — high-saturation contrasts with muted brand
- Keep inputs at 8px radius (rounded-rectangle, not pill) to reserve pill for CTAs
- Render the polyglot SDK grid with 40+ language pills as the signature illustration
- Use Tailwind's slate scale for neutrals — `slate-50` through `slate-950`
- Render code blocks on deep-navy `#0f172a` ground (matches brand CTA) with JetBrains Mono
- Use 999ms pill on every CTA — pricing, hero, footer-strip, mega-menu CTAs
**Don't**
- Don't use button radius below 8px — pill CTAs are the signature
- Don't run display Inter at weight 500 or higher — Regular (400) is the discipline
- Don't introduce a second brand colour beyond deep-navy + bright link blue
- Don't substitute warm greys for the slate scale — slate-grey (cool) is the brand neutral
- Don't use rounded-rectangle CTAs anywhere — every CTA is fully-pill
- Don't tighten section padding below 96px — the editorial breath is the brand
- Don't add atmospheric multi-layer shadows — slate-tinted hairline + 4% hover is the depth strategy
- Don't soften the open-source voice — "Apache 2.0", "self-host", "polyglot SDK" are the brand vocabulary
- Don't use serif type — Inter does the entire job
- Don't tighten body letter-spacing — body Inter runs at default tracking
## 15. Agent Prompt Guide
### Quick Color Reference
```
Canvas: #ffffff
Soft White: #f8fafc
Section Slate: #f1f5f9
Heading Ink: #0f1729
Body Ink: #1e293b
Brand Navy: #0f172a
Brand Light: #1d283a
Link Blue: #0066ff
Border: #e2e8f0
Border Input: #cbd5e1
Muted: #475569
Success: #059669
```
### Example Component Prompts
- "Create an Ory-style hero section: white canvas, 128px vertical padding. Hero copy in Inter **48/400** (Regular weight) with `-0.025em` tracking, deep-slate ink (`#0f1729`). Eyebrow above in 12/500 uppercase Inter with 0.08em tracking, slate-100 (`#f1f5f9`) pill ground, deep-slate text. Sub-copy in Inter 18/400 body-ink (`#1e293b`). Primary CTA: deep-navy (`#0f172a`) fully-pill (999px), white text, 14/400, 12×20px padding, 44px height. Secondary outlined pill: white fill, 1px `#cbd5e1` border, deep-navy text."
- "Build an Ory polyglot SDK pill grid: 6-column grid at desktop, 4 at tablet, 2 on mobile. Each pill: soft slate (`#f1f5f9`) ground, deep-slate text, **8px radius** (rounded-rectangle, not pill), 8×12px padding, 14/400 Inter. Include 40+ entries: TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, Apollo GraphQL, Express, Express GraphQL, Expo, Android, Apollo, Angular Community, Next.js, Vue, etc. Hover reveals tooltip with documentation link."
- "Design an Ory pricing tier card: white surface, 16px radius, 32px padding. Default cards have 1px `#e2e8f0` slate-200 border; the 'Production' tier (recommended) highlights with 2px `#0f172a` deep-navy border. Stack: tier name in 12/500 uppercase, price in Inter 48/400 with `tnum`, '/month' caption in 14/400 muted, feature checklist with deep-navy checks, fully-pill 'Buy Production' deep-navy CTA at the bottom."
- "Create an Ory navbar: 64px tall, `rgba(255,255,255,0.92)` ground with `backdrop-blur(8px)`, 1px `#e2e8f0` bottom border. Ory wordmark flush left in deep-slate. Nav links 'Product', 'Developers', 'Pricing', 'Docs' in Inter 14/500 deep-slate centre. 'Log in' text link + primary deep-navy fully-pill CTA flush right."
- "Build an Ory code block: deep-navy (`#0f172a`) ground (matches brand CTA), 12px radius, 20×24px padding. JetBrains Mono 13/400. Cyan (`#06b6d4`) keywords, emerald (`#10b981`) strings, white default text. Top-right copy button — small icon-only, transparent fill, hairline border."
- "Design an Ory dark-mood callout: deep-navy (`#0f172a`) ground, 16px radius, 32px padding, white text. Eyebrow 'WEBINAR' in 12/500 uppercase white. Headline in Inter 30/400 white with `-0.02em` tracking. Body in 16/400 slate-300 muted. CTA: lighter pill `#1d283a` slate-800 fill, white text, 999px radius."
### Iteration Guide
1. **Inter at 400 (Regular) for display.** This is the most distinctive Ory move. Most peers run 500 or 600; Ory's 400 reads as restrained and considered.
2. **Every CTA is fully-pill (999px).** No exceptions. Inputs at 8px (rounded-rectangle) maintain utility.
3. **Deep-navy `#0f172a` is the brand.** Slate-900. Don't substitute pure black or another navy hue.
4. **Bright blue `#0066ff` for inline links.** Contrasts with muted brand — gives the page two distinct chromatic registers.
5. **Slate scale for neutrals.** Tailwind's slate ramp from `slate-50` to `slate-950`. Don't substitute zinc, neutral, or stone.
6. **Polyglot SDK pill grid is the signature illustration.** 40+ language pills in soft-slate 8px-radius pills.
7. **Code blocks on deep-navy ground.** Matches brand CTA — ties code presentation to the brand colour.
8. **Open-source voice in copy.** "Apache 2.0", "self-host", "polyglot SDKs" are the brand vocabulary.
1. Visual Theme & Atmosphere
Ory’s marketing site is the open-source-first identity-platform canvas — a white ground (#ffffff) anchored on deep-slate near-black (#0f1729) with hero display in Inter 48/400 (Regular weight, not Medium) and a signature deep-navy #0f172a fully-pill CTA. The page reads as a senior-engineering tool that respects technical buyers: confident, restrained, polyglot, and unmistakably positioned as the open-source identity stack that scales from solo developer to enterprise. Where Auth0 commits to twilight blue and Clerk plants violet on dark, Ory chose the inverse strategy — a confident white canvas with a near-black pill CTA that signals “we ship the identity stack you’d build yourself if you had the time”.
The chromatic system is white + deep-slate + bright link-blue. The canvas is pure #ffffff. Heading text runs in #0f1729 (deep-slate), body in #1e293b (slightly lighter slate-800). The brand colour is the deep-navy #0f172a (Tailwind’s slate-900) used as the primary CTA fill — a deliberately near-black-but-not-black colour that reads as enterprise-grade without enterprise-blue cliché. Inline links are bright blue #0066ff — a high-saturation hyperlink hue that contrasts with the muted brand and signals “click here, please”.
Type runs Inter across the entire scale. Hero display is Inter at 48/400 — Regular weight is the typographic discipline. Most B2B-identity sites run display at 500 or 600; Ory commits to 400 because the page architecture (alphabet-list of SDK pills, code blocks, dense pricing tiers) creates enough chromatic and density rhythm without needing display weight. Headlines lean on negative tracking -0.025em to compress at large sizes. Body is Inter 16/400 with normal letter-spacing. Mono is JetBrains Mono for code blocks.
Shape language is the most distinctive move: fully-pill (999px) buttons combined with 8–16px input/card radii. Every CTA on the page is a 999px pill. Every input rounds at 8px (more conventional). Every card rounds at 16px. This split — pill CTAs + rounded utilities — is unusual in B2B-identity (most use 4–8px buttons) and immediately marks the page as confidently distinct. The pill CTA suggests “membership, identity, gate” — exactly the metaphor Ory wants to evoke for an identity platform.
Depth is achieved through hairline borders + soft slate-100 alt sections. Most cards are hairline-bordered only — 1px solid #e2e8f0 (slate-200). On hover, a subtle 4% shadow appears. The dark mood-zone is #1d283a (slate-800), used in the footer-strip and the rare webinar callout band. There is no atmospheric multi-layer shadow.
The signature visual element is the polyglot SDK pill grid — a list of 40+ supported languages and frameworks (TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, Apollo GraphQL, Express, Next.js, Expo, Android, iOS, Flutter…) rendered as soft-slate pills in 8px radius. This grid is Ory’s most distinctive marketing asset — it visually communicates “we ship SDKs for every language you might use” without requiring a screenshot.
Key Characteristics:
- White canvas (
#ffffff) with slate-100 (#f1f5f9) alt sections - Hero display in Inter 48/400 (Regular weight) — the typographic discipline
- Deep-slate heading ink (
#0f1729) — never pure black - Body ink in slate-800 (
#1e293b) — slightly lighter than heading - Single brand CTA: deep-navy
#0f172a(slate-900) fully-pill (999px) - Every CTA is a 999px pill — the unique shape signature
- Bright link blue (
#0066ff) for inline hyperlinks — high-saturation - Inputs at 8px radius, cards at 16px — pill is reserved for CTAs
- Polyglot SDK pill grid — 40+ language/framework pills as the signature illustration
- Code blocks on deep-navy
#0f172aground with JetBrains Mono - Apache 2.0 open-source positioning baked into voice and design
2. Color Palette & Roles
Primary
- Canvas (
#ffffff) — pure-white default page ground - Soft White (
#f8fafc) — softest off-white for alt sections - Section Grey (
#f1f5f9) — slate-100, primary alt section ground - Section Strong (
#e2e8f0) — slate-200, stronger section - Heading Ink (
#0f1729) — deep-slate near-black for headings (rgb(15,23,41)) - Body Ink (
#1e293b) — slate-800 for body text - Strong Ink (
#020617) — slate-950, deepest near-black for emphasis - Muted (
#475569) — slate-600, secondary metadata - Soft (
#64748b) — slate-500, caption - Faint (
#94a3b8) — slate-400, disabled
Brand & Dark
- Ory Navy (
#0f172a) — slate-900, the signature primary CTA fill. Deep-navy near-black. - Brand Light (
#1d283a) — slate-800, hover brightening / lighter pill variant - Brand Deep (
#020617) — slate-950, pressed/active state - Brand Soft (
#1e293b) — softer slate-800 - Dark Mood (
#0f172a) — same as Brand, used as the dark-section ground - Dark Mood Deeper (
#020617) — slate-950 deepest near-black
Accent
- Link Blue (
#0066ff) — bright link blue for inline hyperlinks. High-saturation, contrasts with muted brand. - Link Hover (
#0052cc) — darker pressed - Visited (
#5e2a8c) — purple visited state - Indigo (
#6366f1) — indigo-500, secondary accent (rare) - Cyan (
#06b6d4) — cyan-500, tertiary accent (used in code-block syntax) - Emerald (
#10b981) — success accent
Interactive
- Link (
#0066ff) — bright blue, often without underline (icon→indicates link) - Link Hover (
#0052cc) — darker - Visited (
#5e2a8c) — purple - Selected (
#0f172a) — 2px deep-navy border on selected pricing tier, focused inputs - Disabled (
#94a3b8) — slate-400 text on#f1f5f9surface
Neutral Scale
Ory’s neutral scale uses Tailwind’s slate ramp directly — a deliberate choice that acknowledges the open-source-Tailwind ecosystem.
- slate-950 (
#020617) — strong ink - slate-900 (
#0f172a) — heading / brand - slate-800 (
#1e293b) — body / dark surface - slate-700 (
#334155) - slate-600 (
#475569) — muted - slate-500 (
#64748b) — soft - slate-400 (
#94a3b8) — faint - slate-300 (
#cbd5e1) — border-strong / input border - slate-200 (
#e2e8f0) — border default - slate-100 (
#f1f5f9) — section - slate-50 (
#f8fafc) — soft white
Surface & Borders
- White (
#ffffff) — default - Soft White (
#f8fafc) — alt - Section Grey (
#f1f5f9) — section ground - Section Strong (
#e2e8f0) — strong section - Dark Card (
#1d283a) — dark-mood card - Dark Mood (
#0f172a) — section ground - Border (
#e2e8f0) — slate-200 default - Border Soft (
#f1f5f9) — slate-100 editorial divider - Border Strong (
#cbd5e1) — slate-300 - Border Input (
#cbd5e1) — slate-300 - Border Dark (
rgba(255,255,255,0.10)) — dark-section hairline
Shadow Colors
Ory’s shadow palette uses slate-900 tinted shadows (the brand colour as the shadow source). Most cards have no shadow at rest. On hover, a subtle 4% slate-tinted shadow appears.
rgba(15,23,42,0.04) 0 4px 12px— card hover (slate-900 tinted at 4%)rgba(15,23,42,0.08) 0 16px 32px— elevated panelrgba(15,23,42,0.16) 0 24px 48px— modal0 0 0 2px #0f172a— focus ring
Semantic
- Success Green (
#059669) — emerald-600, on#ecfdf5surface - Warning Amber (
#d97706) — amber-600, on#fffbebsurface - Danger Red (
#dc2626) — red-600, on#fef2f2surface - Info Blue (
#0066ff) — link blue, used sparingly
3. Typography Rules
Font Family
Display & Body: Inter with Inter Fallback and system stack. Ory commits to Inter at the entire scale — no display companion typeface. Display runs at weight 400 (Regular), body at 400, headings at 400–500 selectively.
Mono: JetBrains Mono, fallback Fira Code, SF Mono, Menlo. Used for code blocks and inline code.
OpenType features: ss01 enabled on display Inter for the alternate-a and alternate-g forms.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| hero-display | Inter | 64 | 400 | 1.05 | -0.025em | ss01 | Hero — note 400 weight |
| h1 | Inter | 48 | 400 | 1.0 | -0.025em | ss01 | Page title — observed 48/48 |
| h2 | Inter | 30 | 400 | 1.0 | -0.02em | — | Section opener — also 400 weight |
| h3 | Inter | 24 | 500 | 1.25 | -0.015em | — | Sub-section — Medium weight starts here |
| h4 | Inter | 20 | 500 | 1.30 | -0.01em | — | Feature card title |
| h5 | Inter | 18 | 600 | 1.40 | -0.005em | — | Sub-feature — Semibold |
| eyebrow | Inter | 12 | 500 | 1.50 | 0.08em uppercase | — | “WEBINAR”, “OPEN SOURCE” |
| body-lg | Inter | 18 | 400 | 1.60 | -0.005em | — | Hero sub-copy |
| body-md | Inter | 16 | 400 | 1.50 | 0 | — | Default body |
| body-sm | Inter | 14 | 400 | 1.50 | 0 | — | Secondary body |
| label | Inter | 13 | 500 | 1.40 | 0 | — | Form labels |
| button-label | Inter | 14 | 400 | 1.0 | 0 | — | CTA text — note 400 weight |
| nav-link | Inter | 14 | 500 | 1.20 | 0 | — | Top nav |
| caption | Inter | 13 | 400 | 1.40 | 0 | — | Captions |
| micro | Inter | 12 | 400 | 1.40 | 0 | — | Footer legal |
| code-inline | JetBrains Mono | 14 | 400 | 1.50 | 0 | — | Inline <code> |
| code-block | JetBrains Mono | 13 | 400 | 1.55 | 0 | — | Code panel |
| quote | Inter | 22 | 400 | 1.40 | -0.005em | italic | Pull quote |
Principles
- Inter at 400 (Regular) for display. This is the typographic signature — Ory’s most distinctive type move. Most peers run display at 500 or 600; Ory’s 400 reads as restrained-and-considered rather than bold-and-marketing.
- Headings step from 400 → 500 → 600. h1/h2 at 400, h3/h4 at 500, h5 at 600 — weight increases as size decreases, an inversion of the conventional “bigger = bolder” rule.
- Negative tracking on display only.
-0.025emon hero,-0.02emon h2. Body runs at default tracking. - Eyebrows at 12/500 uppercase, 0.08em tracking. The only uppercase moment.
- JetBrains Mono for code only. Pairs cleanly with Inter for the open-source dev-tool aesthetic.
- Tailwind slate scale informs neutrals. Ory uses Tailwind’s slate ramp because the open-source ecosystem is Tailwind-aligned.
- Single typeface discipline. No display companion; Inter handles every role.
4. Component Stylings
Buttons
button-pill-primary — primary CTA. Deep-navy #0f172a (slate-900) fill, white text, 14/400 Inter, 999px fully-pill radius, 12×20px padding, 44px height. The signature shape. Hover brightens to #1d283a (slate-800). Used for “Start for free”, “Buy Production”, “Buy Growth”, “Contact Us”.
button-pill-light — slightly lighter pill. #1d283a (slate-800) fill, white text, same dimensions. Used on dark-section bands where slate-900 would blend in.
button-pill-secondary — outlined pill. White fill, deep-navy text, 1px #cbd5e1 border, 999px radius. Same dimensions as primary.
button-pill-ghost-dark — outlined pill on dark. Transparent fill, white text, 1px rgba(255,255,255,0.20) border. 999px.
button-text-link — plain inline link. Bright blue #0066ff text, often with → arrow. Hover darkens to #0052cc or underlines.
Cards
card-feature — feature card. White surface, 16px radius (more rounded than buttons because pill is reserved for CTA), 1px #e2e8f0 (slate-200) hairline border, 32px internal padding. Stack: optional icon, h4 title, body description, optional inline link. On hover: subtle slate-tinted 4% shadow + 1px translateY(-1) lift.
card-section — section-grey card. #f1f5f9 (slate-100) ground, 16px radius, no border, 32px padding.
card-pricing — pricing tier. White surface, 16px radius, 1px hairline border, 32px padding. The “Production” tier (recommended) highlights with 2px #0f172a deep-navy border.
card-dark — dark-mood card. #1d283a (slate-800) ground, 16px radius, 32px padding, white text. Used in webinar callouts and footer-strip closing CTA.
card-stat — metric card. White surface, 16px radius, 32px padding. Massive Inter 48/400 metric, eyebrow label below.
Badges, Tags, Pills
pill-eyebrow — eyebrow pill. Soft slate #f1f5f9 ground, deep-slate #0f1729 text, 999px radius, 4×10px padding, 12/500 Inter uppercase. “WEBINAR”, “OPEN SOURCE”, “BETA”.
pill-status — semantic status pill. Success: #ecfdf5 ground + #059669 text. Error: #fef2f2 ground + #dc2626 text.
sdk-pill — polyglot SDK pill. Soft slate #f1f5f9 ground, deep-slate text, 8px radius (rounded-rectangle, not pill), 8×12px padding, 14/400 Inter. Used in the signature 40+ language/framework grid: TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, Apollo GraphQL, Express, Express GraphQL, Expo, Android, Apollo, Angular, etc.
Inputs / Forms
input — text input. White surface, 1px #cbd5e1 (slate-300) border, 8px radius (not pill — reserved for CTA), 44px height, 12×14px padding. Placeholder in #64748b (slate-500). On focus: 2px #0f172a deep-navy ring with 2px outline-offset.
textarea — same as input with auto-grow.
select-dropdown — same as input with chevron-down icon.
checkbox — 16×16px, 4px radius, 1px hairline border. On checked: deep-navy fill, white check.
radio — 16×16px circle, 1px hairline border. On selected: deep-navy fill, white dot.
Navigation
navbar-top — top nav. rgba(255,255,255,0.92) ground with backdrop-blur(8px), 1px #e2e8f0 bottom border, 64px height. Ory wordmark flush left in deep-slate. Nav links “Product”, “Developers”, “Pricing”, “Docs” in Inter 14/500 deep-slate centre. “Log in” text link + primary deep-navy pill CTA flush right.
mega-menu — opens from product nav. White surface, 12px radius, 1px hairline border, 24px padding, slate-tinted shadow. Multi-column nav with eyebrow group titles (“Identity”, “Authorization”, “Authentication”) and 14/500 link rows.
footer — #0f172a deep-navy ground, 5-column link list at desktop. Eyebrow group titles in 12/500 uppercase white, link rows in 14/400 muted-slate-300, social row at the bottom. Apache 2.0 open-source acknowledgment in the bottom legal strip.
breadcrumb — muted slate text with › separators, 13/400 Inter.
Tooltips, Toasts, Modals
tooltip — #0f172a deep-navy ground, 6px radius, 8×10px padding, 12/400 white text, 6px arrow.
toast — bottom-right corner. White surface, 12px radius, 1px hairline, 16×20px padding, 14/400 ink text.
modal — centred dialog over rgba(15,23,42,0.48) slate-900 scrim. White surface, 16px radius, 1px hairline border, 32px padding, slate-tinted modal shadow.
Code Block
code-block — #0f172a deep-navy ground (matches the brand CTA — a deliberate move that ties code presentation to the brand colour), 12px radius, 20×24px padding. JetBrains Mono 13/400. Cyan keywords (#06b6d4), emerald strings (#10b981), white default text. Optional copy button top-right with hairline border.
Decorative
polyglot-sdk-grid — the signature illustration. A grid of 40+ SDK pills (TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, etc.) arranged in 4–6 columns at desktop. Each pill is sdk-pill styled — soft slate ground, deep-slate text, 8px radius. Hovering a pill reveals a tooltip with documentation link.
5. Layout Principles
Spacing System
- Base unit: 4px
- Scale:
4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128 · 160 - Hero padding (vertical): 128px at desktop
- Section padding: 96–128px between major sections
- Card internal padding: 32px for feature cards
- Gutter: 24px between feature cards in 2-column; 32px in 3-column
Grid & Container
- Max content width: 1280px centred
- Hero: full-width with copy capped at 720px prose width
- Feature grid: 2-column at desktop with 24px gutter
- Pricing: 3-column tier comparison cards (Free / Production / Growth) with Production highlighted
- Polyglot SDK grid: 4–6 column pill grid, full-width, 8–12px gutters
Whitespace Philosophy
Ory gives sections modern dev-tool breath — 96–128px between major bands. The hero band is 128px tall. The polyglot SDK grid takes a full section to itself, generously padded (64px above, 64px below). The result feels considered and editorial — closer to a Vercel or Supabase landing than to an enterprise-identity site.
Section Cadence
The page alternates white canvas (#ffffff) → slate-50 (#f8fafc) → white → slate-100 (#f1f5f9) → white → polyglot-grid section (slate-100) → dark mood-zone (#0f172a). The dark mood-zone appears 1–2 times per page — once for a webinar callout and once as the closing footer-strip.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Dense tag corners |
| Small | 4px | Checkboxes |
| Default | 6px | Tooltips, dropdowns |
| Standard | 8px | Inputs, SDK pills |
| Comfortable | 12px | Code blocks, mega-menu |
| Card | 16px | Feature cards, modals, pricing |
| Pill | 999px | All CTAs — the signature shape |
The 999px pill on all CTAs is the unique shape signature. Inputs at 8px (rounded-rectangle, not pill) maintain utility. The split between pill-CTAs and rounded utilities is deliberate — it reserves the pill for “actions” and rounds everything else for “content”.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | no shadow | Body sections (~95%) |
| 1 — Hairline | 1px #e2e8f0 border | Cards at rest |
| 2 — Hover | rgba(15,23,42,0.04) 0 4px 12px | Hovered cards, mega-menu |
| 3 — Elevated | rgba(15,23,42,0.08) 0 16px 32px | Mega-menu, sticky bars |
| 4 — Modal | rgba(15,23,42,0.16) 0 24px 48px | Centred dialog |
| 5 — Focus | 0 0 0 2px #0f172a ring | Focused inputs and buttons |
Shadow Philosophy
Ory’s depth is slate-tinted, not neutral. Shadows use the slate-900 hue at low opacity (4–16%), which keeps them tonally connected to the brand. Most cards have no shadow at rest — depth is the hairline border. The slate-tinted shadows on hover and modal give the page a subtle chromatic depth that ties to the brand without being atmospheric.
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal entry, mega-menu
Durations
| Bucket | Value | Use |
|---|---|---|
| Fast | 120ms | Hover colour swap, focus ring fade-in |
| Standard | 200ms | Card hover, mega-menu open |
| Slow | 320ms | Modal enter, hero reveal |
Per-Component Recipes
- CTA hover: deep-navy brightens
#0f172a→#1d283aover 120ms. No transform. - Card hover: 1px translateY(-1) + slate-tinted 4% shadow over 200ms; border deepens slightly.
- Hero reveal: sections fade-up from
translateY(16px)/opacity 0→0/1over 320ms emphasized. - SDK pill hover: pill ground brightens slightly + tooltip appears over 200ms.
- Mega-menu open: 200ms fade + 4px slide-down.
- Modal enter: scrim fades in 200ms; dialog enters from
translateY(8px)/opacity(0)→0/1over 320ms emphasized. - Link hover: bright-blue darkens by ~10% luminance over 120ms.
Page Transitions
Page-to-page navigation uses no transition — hard navigation. Ory prioritises perceived speed.
Reduced Motion
Respects prefers-reduced-motion: reduce. Hero reveal and card hover translateY suppress (opacity-only). SDK pill hover degrades to instant.
9. Accessibility & A11y
Contrast Pairs
| Pair | Ratio | Level |
|---|---|---|
| #0f1729 heading on #ffffff | 17.4 | AAA |
| #1e293b body on #ffffff | 13.2 | AAA |
| #ffffff on #0f172a deep-navy CTA | 17.4 | AAA |
| #0066ff link on #ffffff | 5.4 | AA at body sizes |
| #475569 muted on #ffffff | 7.4 | AAA |
| #059669 success on #ecfdf5 | 5.5 | AA |
| #dc2626 danger on #fef2f2 | 6.4 | AA |
| #ffffff on #1d283a slate-800 | 13.5 | AAA |
The deep-navy CTA pair sits at 17.4 — AAA — the highest contrast ratio of any auth-platform we’ve audited. This is the benefit of choosing slate-900 (#0f172a) as the brand: it operates as both a brand colour and a maximal-contrast indicator.
Focus Indicators
Focus ring is 2px solid #0f172a (deep-navy) with 2px outline-offset. The deep-navy doubles as brand affordance and accessibility indicator.
ARIA Patterns
- Top nav:
role="navigation",aria-label="Primary". Mega-menu usesrole="menu". - Pricing tier cards:
<h3>heading, Production tieraria-current="recommended". - Polyglot SDK grid:
role="list"withrole="listitem"for each SDK; tooltips userole="tooltip". - Modal:
role="dialog",aria-modal="true", focus trap, Esc closes. - Code blocks:
role="region",aria-label="Code example". Copy buttonaria-live="polite".
Keyboard Navigation
- Tab: logo → product → developers → pricing → docs → log in → primary CTA
- Mega-menu: arrow keys navigate, Esc closes
- SDK grid: Tab through pills in row order
- Modal: focus trap, Tab cycles
- Skip-to-main visible on first Tab
Screen Reader Hints
- SDK pills announce “TypeScript SDK, version X.Y” on focus
- Code copy button announces “Copied” with
aria-live - Pricing tier names announced before price + features
Reduced Motion
Hero reveal and card hover translateY suppress. SDK pill hover degrades to instant. Mega-menu fade only.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Nav collapses to hamburger; hero copy 32px; feature grid 1-up; SDK grid 2-column |
| Tablet | 640–1024px | Nav reveals product + log in; feature grid 2-up; SDK grid 3-column |
| Desktop | 1024–1280px | Full mega-menu; container caps at 1280px; SDK grid 5–6 column |
| Wide | 1280–1440px | Container stays 1280px |
Touch Targets
- Primary CTAs: 44px height — meets AA
- Nav links: 36×16px tap target at desktop, 44×20 on mobile
- Form inputs: 44px height
- SDK pills: 32px tall — clickable to docs
Collapsing Strategy
- Nav: product / developers collapse to hamburger at <1024px
- Hero: 64px → 48px → 36px → 32px down breakpoints; tracking compresses
- Feature grid: 3-up → 2-up → 1-up
- Pricing: 3-column → 1-column; Production tier surfaces first
- SDK grid: 6-column → 4-column → 3-column → 2-column
Image Behavior
Polyglot SDK grid uses inline SVG icons + text labels. Customer logos use SVG. Hero illustration is a line-art SVG of the identity flow.
Container Queries
Used in feature cards: when card width drops below ~280px, icon shifts above title.
11. Content & Voice
Tone
Confident, technical, restrained, slightly opinionated. Ory’s voice positions identity as infrastructure you should own, not rent — assumes the reader is a senior engineer or platform architect who values open-source rigor and self-hosting capability. Headlines lead with capability and outcome (“Identity & Access Management Solutions”, “The IAM platform for the cloud era”). The voice acknowledges the open-source DNA — “Apache 2.0 licensed”, “Self-host or use Ory Cloud” — without reaching for friendly-startup language.
Microcopy Patterns
- Button verbs: “Start for free”, “Buy Production”, “Buy Growth”, “Contact Us”, “Explore open source”, “Read the docs”
- Eyebrow labels: 12/500 uppercase Inter — “WEBINAR”, “OPEN SOURCE”, “PRODUCTION READY”
- Error message recipe: precise + technical — “Configuration error: Unable to validate JWKS endpoint. Check
keys.jsonURL or contact support.” - Success confirmations: technical + minimal — “Configuration saved. Your changes will propagate within 60 seconds.”
- Field labels: short and exact — “Issuer URL”, “Client ID”, “Redirect URI”
- Doc links: lead with verb — “Read the Hydra guide”, “View Kratos API reference”, “See the Keto policy docs”
Empty States
- Empty identities: “No identities yet. Use the API or admin UI to create your first identity.”
- Empty policies: “No policies configured. Define a policy to start protecting resources.”
- Empty audit logs: “No events in the last 24 hours. Adjust the time range or check the integration.”
CTA Verb Conventions
- Primary: “Start for free”, “Buy Production”, “Buy Growth”, “Contact Us”
- Secondary: “Read the docs”, “Explore open source”, “View pricing”
- Tertiary: “Learn more →”, “View changelog”, “See the GitHub repo”
- Avoided: “Click here”, “Submit”, “Buy now”
12. Dark Mode & Theming
Light-only on the marketing canvas with a deep-navy mood-zone footer. Ory’s marketing canvas is light. The dark mood-zone (#0f172a slate-900) appears in the footer-strip closing CTA and the rare webinar callout band.
Dark Mood-Zone Treatment
bg-dark: '#0f172a' # slate-900
bg-dark-deeper: '#020617' # slate-950
surface-dark: '#1d283a' # slate-800
text-on-dark: '#ffffff'
text-muted-on-dark: '#cbd5e1' # slate-300
border-on-dark: 'rgba(255,255,255,0.10)'
brand-on-dark: '#ffffff' # primary CTA inverts to white on dark
brand-text-on-dark: '#0f172a'The dark mood-zone preserves the slate scale — #0f172a ground, #1d283a cards, slate-300 muted text. The primary CTA inverts: white fill with deep-navy text.
Documentation Theme
Ory’s documentation pages support a full dark theme with the same slate ramp inverted. Marketing pages are light-only.
13. Lineage & Influences
Ory’s visual lineage runs through three traditions: open-source-Tailwind ecosystem aesthetic (the slate scale, Inter typography, hairline cards, JetBrains Mono code blocks — all canonical Tailwind/Vercel/Supabase moves of the early 2020s); enterprise-identity-product gravitas (the near-black brand colour, the fully-pill CTAs, the polyglot SDK positioning — all moves borrowed from Okta, ForgeRock, and the enterprise IAM canon); and German engineering precision (Ory was founded in Munich and the visual language reflects a Bauhaus-trained sense of restraint — confident type, restrained colour, no decorative ornament).
The fully-pill CTA on a near-black brand colour is the move that distinguishes Ory. Where most B2B-identity sites reach for blue (trust) or violet (modern), Ory chose slate-900 (#0f172a) — a deliberately near-black-but-not-black colour that reads as enterprise-grade without enterprise-blue cliché. The pill shape suggests “membership, identity, gate” — exactly the metaphor for an identity platform. Combined with the polyglot SDK grid as the signature illustration, the brand position is unmistakable: open-source identity infrastructure for technical buyers.
What Ory rejects: dark canvases as primary (light-first commitment with deep-navy mood-zone), decorative motion (no breathing halos, no spring overshoots), photographic product screenshots (line-art SVG and SDK pill grid instead), friendly-startup voice (technical-and-precise instead), and multi-coloured feature accents (single deep-navy + bright link blue).
Influences:
- Tailwind CSS — slate colour ramp, Inter typography, tailwindcss.com
- Stripe — single-brand confidence, hairline cards, stripe.com
- Supabase — open-source-first marketing voice, supabase.com
- Vercel — frosted-glass navbar, restraint discipline, vercel.com
- Okta — enterprise-identity-platform gravitas (predecessor positioning Ory differentiates against), okta.com
- JetBrains Mono — code-block typeface, jetbrains.com/mono
14. Do’s and Don’ts
Do
- Anchor the canvas on white (
#ffffff) with slate-100 (#f1f5f9) for alt sections - Run hero display in Inter 48/400 (Regular weight) — the typographic discipline
- Use deep-slate (
#0f1729) for headings, slate-800 (#1e293b) for body - Make every primary CTA a fully-pill (999px) deep-navy
#0f172abutton — the signature shape - Use bright blue (
#0066ff) for inline links — high-saturation contrasts with muted brand - Keep inputs at 8px radius (rounded-rectangle, not pill) to reserve pill for CTAs
- Render the polyglot SDK grid with 40+ language pills as the signature illustration
- Use Tailwind’s slate scale for neutrals —
slate-50throughslate-950 - Render code blocks on deep-navy
#0f172aground (matches brand CTA) with JetBrains Mono - Use 999ms pill on every CTA — pricing, hero, footer-strip, mega-menu CTAs
Don’t
- Don’t use button radius below 8px — pill CTAs are the signature
- Don’t run display Inter at weight 500 or higher — Regular (400) is the discipline
- Don’t introduce a second brand colour beyond deep-navy + bright link blue
- Don’t substitute warm greys for the slate scale — slate-grey (cool) is the brand neutral
- Don’t use rounded-rectangle CTAs anywhere — every CTA is fully-pill
- Don’t tighten section padding below 96px — the editorial breath is the brand
- Don’t add atmospheric multi-layer shadows — slate-tinted hairline + 4% hover is the depth strategy
- Don’t soften the open-source voice — “Apache 2.0”, “self-host”, “polyglot SDK” are the brand vocabulary
- Don’t use serif type — Inter does the entire job
- Don’t tighten body letter-spacing — body Inter runs at default tracking
15. Agent Prompt Guide
Quick Color Reference
Canvas: #ffffff
Soft White: #f8fafc
Section Slate: #f1f5f9
Heading Ink: #0f1729
Body Ink: #1e293b
Brand Navy: #0f172a
Brand Light: #1d283a
Link Blue: #0066ff
Border: #e2e8f0
Border Input: #cbd5e1
Muted: #475569
Success: #059669Example Component Prompts
- “Create an Ory-style hero section: white canvas, 128px vertical padding. Hero copy in Inter 48/400 (Regular weight) with
-0.025emtracking, deep-slate ink (#0f1729). Eyebrow above in 12/500 uppercase Inter with 0.08em tracking, slate-100 (#f1f5f9) pill ground, deep-slate text. Sub-copy in Inter 18/400 body-ink (#1e293b). Primary CTA: deep-navy (#0f172a) fully-pill (999px), white text, 14/400, 12×20px padding, 44px height. Secondary outlined pill: white fill, 1px#cbd5e1border, deep-navy text.” - “Build an Ory polyglot SDK pill grid: 6-column grid at desktop, 4 at tablet, 2 on mobile. Each pill: soft slate (
#f1f5f9) ground, deep-slate text, 8px radius (rounded-rectangle, not pill), 8×12px padding, 14/400 Inter. Include 40+ entries: TypeScript, Go, Python, Rust, Java, .NET, PHP, Ruby, Elixir, Apollo GraphQL, Express, Express GraphQL, Expo, Android, Apollo, Angular Community, Next.js, Vue, etc. Hover reveals tooltip with documentation link.” - “Design an Ory pricing tier card: white surface, 16px radius, 32px padding. Default cards have 1px
#e2e8f0slate-200 border; the ‘Production’ tier (recommended) highlights with 2px#0f172adeep-navy border. Stack: tier name in 12/500 uppercase, price in Inter 48/400 withtnum, ‘/month’ caption in 14/400 muted, feature checklist with deep-navy checks, fully-pill ‘Buy Production’ deep-navy CTA at the bottom.” - “Create an Ory navbar: 64px tall,
rgba(255,255,255,0.92)ground withbackdrop-blur(8px), 1px#e2e8f0bottom border. Ory wordmark flush left in deep-slate. Nav links ‘Product’, ‘Developers’, ‘Pricing’, ‘Docs’ in Inter 14/500 deep-slate centre. ‘Log in’ text link + primary deep-navy fully-pill CTA flush right.” - “Build an Ory code block: deep-navy (
#0f172a) ground (matches brand CTA), 12px radius, 20×24px padding. JetBrains Mono 13/400. Cyan (#06b6d4) keywords, emerald (#10b981) strings, white default text. Top-right copy button — small icon-only, transparent fill, hairline border.” - “Design an Ory dark-mood callout: deep-navy (
#0f172a) ground, 16px radius, 32px padding, white text. Eyebrow ‘WEBINAR’ in 12/500 uppercase white. Headline in Inter 30/400 white with-0.02emtracking. Body in 16/400 slate-300 muted. CTA: lighter pill#1d283aslate-800 fill, white text, 999px radius.”
Iteration Guide
- Inter at 400 (Regular) for display. This is the most distinctive Ory move. Most peers run 500 or 600; Ory’s 400 reads as restrained and considered.
- Every CTA is fully-pill (999px). No exceptions. Inputs at 8px (rounded-rectangle) maintain utility.
- Deep-navy
#0f172ais the brand. Slate-900. Don’t substitute pure black or another navy hue. - Bright blue
#0066fffor inline links. Contrasts with muted brand — gives the page two distinct chromatic registers. - Slate scale for neutrals. Tailwind’s slate ramp from
slate-50toslate-950. Don’t substitute zinc, neutral, or stone. - Polyglot SDK pill grid is the signature illustration. 40+ language pills in soft-slate 8px-radius pills.
- Code blocks on deep-navy ground. Matches brand CTA — ties code presentation to the brand colour.
- Open-source voice in copy. “Apache 2.0”, “self-host”, “polyglot SDKs” are the brand vocabulary.
Drop ory into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add ory 2 · ship landing page
npx agentkit init --design ory dark mono
Supabase
Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type…
Docs
Install
Supabase
webdesignhot
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