Figma file available
.webp)
Speakeasy
Craft exceptional API experiences
No items found.
No items found.
Visual identity
Speakeasy Design System
Source & Stack
\- URL:
Typography \- Primary font: Geist (Vercel's typeface) or Inter — monospace-adjacent sans-serif used for headings \- Monospace accent: Geist Mono / system monospace for code blocks, terminal UI elements, and ASCII art decorations \- Heading scale: Display (64–80px) → H1 (48px) → H2 (36px) → H3 (24px) → Body (16px) → Caption (12–14px) \- Weight range: 400 (body) / 500 (UI labels) / 600–700 (headings) \- Letter-spacing: Tight on large headings; wide uppercase tracking on section labels (e.g. "PRICING", "ABOUT US")
Color Philosophy \- Deep black backgrounds with subtle gray gradients; developer/terminal aesthetic \- Accent: Yellow-green (#CCFF00 / lime) used sparingly for CTAs and active status badges \- Secondary accent: Muted teal/cyan for code and tag elements \- Text hierarchy: Pure white → gray-300 → gray-500 on dark surfaces \- Status colors: Green (Active), Yellow/Amber (Pending), Red/muted (Disabled)
Spacing \- Base unit: 4px (Tailwind default scale) \- Section vertical padding: 80–120px \- Component gap: 16–32px \- Card inner padding: 24–32px
Component Defaults \- Buttons: Rounded-full pill shape; primary = lime fill + black text; secondary = outlined white \- Cards: Dark surface (#0a0a0a / #111), subtle border 1px solid rgba(255,255,255,0.08), no heavy shadow \- Badges/Tags: Small pill with monospace font, color-coded by status \- Nav: Fixed top bar, transparent → blurred glass on scroll; full-width mega-dropdown \- Tables: Dark striped rows, monospace data cells, left-aligned headers \- Dividers: border-white/10 hairlines
Layout \- Max content width: ~1200px centered \- Grid: 12-column; feature sections alternate text-left / visual-right \- Mobile: Single column stack; nav collapses to hamburger \- Hero: Full-viewport with animated diagram elements \- ASCII art used as decorative section element (enterprise section)
:root { / === COLORS === / --color-background: #000000; --color-surface-1: #0a0a0a; --color-surface-2: #111111; --color-surface-3: #1a1a1a; --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.15);
/ Text / --color-text-primary: #ffffff; --color-text-secondary: #a1a1aa; / zinc-400 / --color-text-muted: #71717a; / zinc-500 / --color-text-disabled: #3f3f46; / zinc-700 /
/ Brand accents / --color-accent-lime: #ccff00; --color-accent-lime-dim: #a3cc00; --color-accent-cyan: #22d3ee; / cyan-400 / --color-accent-purple: #a855f7; / purple-500 /
/ Semantic / Status / --color-success: #22c55e; / green-500 / --color-warning: #eab308; / yellow-500 / --color-danger: #ef4444; / red-500 / --color-info: #3b82f6; / blue-500 /
/ Status badge variants / --color-status-active-bg: rgba(34, 197, 94, 0.12); --color-status-active-text: #22c55e; --color-status-pending-bg: rgba(234, 179, 8, 0.12); --color-status-pending-text: #eab308; --color-status-disabled-bg: rgba(113, 113, 122, 0.12); --color-status-disabled-text:#71717a;
/ === TYPOGRAPHY === / --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', 'Fira Code', ui-monospace, monospace;
--text-xs: 0.75rem; / 12px / --text-sm: 0.875rem; / 14px / --text-base: 1rem; / 16px / --text-lg: 1.125rem; / 18px / --text-xl: 1.25rem; / 20px / --text-2xl: 1.5rem; / 24px / --text-3xl: 1.875rem; / 30px / --text-4xl: 2.25rem; / 36px / --text-5xl: 3rem; / 48px / --text-6xl: 3.75rem; / 60px / --text-7xl: 4.5rem; / 72px /
--font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
--leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625;
--tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-widest: 0.1em;
/ === SPACING === / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px / --space-32: 8rem; / 128px /
/ === BORDER RADIUS === / --radius-sm: 0.25rem; / 4px — tags, code badges / --radius-md: 0.5rem; / 8px — cards, inputs / --radius-lg: 0.75rem; / 12px — panels / --radius-xl: 1rem; / 16px — modals / --radius-full: 9999px; / pills — buttons, status badges /
/ === SHADOWS === / --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7); --shadow-glow-lime: 0 0 24px rgba(204, 255, 0, 0.15); --shadow-glow-cyan: 0 0 24px rgba(34, 211, 238, 0.12);
/ === LAYOUT === / --container-max: 1200px; --nav-height: 64px; --section-py: 5rem; / 80px default section padding /
/ === TRANSITIONS === / --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-background | #000000 | Page background |
| --color-surface-1 | #0a0a0a | Card / panel base |
| --color-surface-2 | #111111 | Elevated card |
| --color-surface-3 | #1a1a1a | Hover / selected state |
| --color-border | rgba(255,255,255,0.08) | Default dividers & card borders |
| --color-text-primary | #ffffff | Headings, primary body |
| --color-text-secondary | #a1a1aa | Supporting text |
| --color-text-muted | #71717a | Timestamps, captions |
| --color-accent-lime | #ccff00 | Primary CTA, active highlights |
| --color-accent-cyan | #22d3ee | Code, tags, links |
| --color-success | #22c55e | "Active" status |
| --color-warning | #eab308 | "Pending" status |
| --color-danger | #ef4444 | Risk / error alerts |
Spacing Tokens
| Token | rem | px | Usage |
|---|---|---|---|
| --space-1 | 0.25rem | 4px | Icon gap, micro padding |
| --space-2 | 0.5rem | 8px | Badge padding |
| --space-4 | 1rem | 16px | Base component gap |
| --space-6 | 1.5rem | 24px | Card inner padding |
| --space-8 | 2rem | 32px | Section sub-block gap |
| --space-16 | 4rem | 64px | Large section gap |
| --space-20 | 5rem | 80px | Default section padding-y |
| --space-24 | 6rem | 96px | Hero vertical padding |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| --font-sans | Geist / Inter | All body & UI text |
| --font-mono | Geist Mono | Code, terminal, ASCII art |
| --text-xs | 12px | Labels, badges |
| --text-sm | 14px | Secondary body, nav items |
| --text-base | 16px | Primary body copy |
| --text-2xl | 24px | H3 / card headings |
| --text-4xl | 36px | H2 section headings |
| --text-5xl | 48px | H1 page headings |
| --text-7xl | 72px | Hero display type |
| --tracking-wide | 0.05em | Uppercase section labels |
| --tracking-tight | -0.025em | Large headings |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 4px | Code tags, small badges |
| --radius-md | 8px | Cards, inputs, dropdowns |
| --radius-lg | 12px | Feature panels |
| --radius-xl | 16px | Modal / dialog |
| --radius-full | 9999px | Pill buttons, status badges |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 2px rgba(0,0,0,0.5) | Subtle lift |
| --shadow-md | 0 4px 16px rgba(0,0,0,0.6) | Card elevation |
| --shadow-lg | 0 8px 32px rgba(0,0,0,0.7) | Modals, dropdowns |
| --shadow-glow-lime | 0 0 24px rgba(204,255,0,0.15) | CTA button glow |
| --shadow-glow-cyan | 0 0 24px rgba(34,211,238,0.12) | Code/terminal glow |
Framework: Next.js 14+ (App Router), deployed on Vercel. Assets served via /\_next/static/ and /\_vercel/image CDN. Image optimization via Next.js
Theme Support: Dark-only. meta theme-color: #000000. No light mode toggle detected in any page. Entire palette is built for dark surfaces.
Component Patterns: \- Pill-shaped primary buttons with lime (#ccff00) fill — bold developer-tool CTA aesthetic \- Animated hero with floating agent icons (SVG logos: Claude, Codex, Cursor, Gemini, etc.) \- ASCII art used as section decoration (enterprise section diamond motif) — reinforces developer/terminal brand identity \- Mega-dropdown navigation with icon + label + subtitle per item \- Product UI screenshots rendered inline as real HTML/CSS mockups (not images) — shows live data tables, status badges, and RBAC panels \- Testimonial carousel with customer headshots and customer logo lockups \- Section labels in small caps + wide tracking (e.g., "ABOUT US", "PRICING", "OUR MISSION")
Data Source Confidence: Medium-high. Full HTML content extracted from homepage, pricing, blog, and company pages. CSS variables inferred from visual patterns, Tailwind conventions, and HTML structure — no raw stylesheet was directly parsed (Next.js bundles are chunk-hashed). Colors and scale derived from visible UI elements and meta-theme-color.
Notable Patterns: \- Developer-first aesthetic: monospace font for data UI, terminal-inspired product mockups \- Lime green (#ccff00) is the sole warm accent against an all-dark palette — high contrast, memorable \- Generous whitespace between sections; content sections max ~1200px \- Vercel-stack signals: /\_vercel/image CDN endpoint, Next.js chunked JS, \_next/static paths \- SOC 2 / ISO 27001 trust badges integrated into layout, not an afterthought \- Customer logo strip in grayscale (white SVGs on dark bg)