.webp)
Speakeasy
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)
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.