---
version: alpha
name: "Ory"
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"
  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: "#0f1729"
  text-strong: "#020617"
  text-body: "#1e293b"
  text-muted: "#475569"
  text-soft: "#64748b"
  text-faint: "#94a3b8"
  text-on-dark: "#ffffff"
  brand: "#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: "#e2e8f0"
  border-soft: "#f1f5f9"
  border-strong: "#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"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "72px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "6px"
  card: "16px"
  pill: "999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "48px"
---

## Overview

## Overview

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

## Colors

### 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

## Typography

### 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.

## Layout

### 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.

### 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.

## Elevation & Depth

| 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.

## Shapes

| 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".

## Components

### 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.

### 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.

### 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.

### 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"

**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.

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/)

## 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

### 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.