---
title: "Speakeasy design system"
variant: extended
source: https://www.speakeasy.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/speakeasy-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Speakeasy · Design System

> Quiet editorial design for enterprise AI control

**Theme:** light · **Industry:** ai · **Source:** https://www.speakeasy.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Speakeasy presents enterprise AI governance through a restrained editorial layout, combining oversized serif headlines with precise monospace labels and product-interface imagery. Pale canvas, fine rules, compact controls, and occasional dark or colored accents make a complex technical platform feel orderly and legible.

## North star

Pair editorial serif scale with quiet, precise interface structure, keeping the pale canvas and fine rules dominant.

## Overview

The page is built on a nearly white canvas, with dark warm ink providing strong, calm contrast. Most content stays within pale, lightly ruled surfaces; a single near-black metrics band adds a deliberate shift in pace. The restrained green, rust, and red accents are used sparingly for badges, product details, and small status cues rather than broad decorative fields. Tobias serif headlines create an editorial voice, while ABCDiatype carries readable body copy and ABCDiatypeMono marks navigation, labels, and actions in uppercase. The layout is spacious and modular: large left-aligned headings introduce sections, followed by bordered grids, customer logos, interface captures, and occasional testimonial or metric panels. Product visuals are treated as evidence of the platform, not as glossy hero photography. Hairline borders and subtle shadows define structure without making the page feel card-heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fafafa` | `--color-gallery-white` | surface | Dominant page canvas and light content surfaces across the hero, sections, and footer. |
| Warm Graphite | `#575251` | `--color-warm-graphite` | neutral | Muted body copy, secondary links, and low-emphasis footer text. |
| Moss Signal | `#44663c` | `--color-moss-signal` | accent | Verification and deployment badges, plus occasional small status accents. |
| Roasted Ink | `#0f0a07` | `--color-roasted-ink` | brand | Primary headings, body text, links, and the dark metrics-section surface. |
| Soft Divider | `#dddcdc` | `--color-soft-divider` | neutral | Fine borders and dividers around grids, cards, navigation, and section boundaries. |
| Burnt Copper | `#b25014` | `--color-burnt-copper` | accent | Small editorial and interface accents, including occasional status details. |
| Leaf Highlight | `#8fc27a` | `--color-leaf-highlight` | accent | Rare green detail in badges or product illustrations; not a primary page color. |
| Citrus Ember | `#fa873c` | `--color-citrus-ember` | accent | Occasional warm highlight within accent treatments and interface details. |
| Mist Surface | `#e9e9e8` | `--color-mist-surface` | surface | Secondary pale card and badge surfaces, particularly around product UI. |
| Signal Brick | `#b22c23` | `--color-signal-brick` | accent | Small red status and interface accents, not broad section fills. |
| Quiet Border | `#c6c4c4` | `--color-quiet-border` | neutral | Subtle outlines and low-contrast edges in cards and product mockups. |
| Neutral Gray | `#808080` | `--color-neutral-gray` | neutral | Secondary text and muted interface details. |
| Pale Rule | `#e2e1e1` | `--color-pale-rule` | neutral | Faint separators and borders within interface and grid treatments. |
| Soft Pewter | `#b3b2b1` | `--color-soft-pewter` | neutral | Low-emphasis text and fine details in interface-oriented content. |
| Charcoal Edge | `#1f1e1d` | `--color-charcoal-edge` | surface | Near-black interface and gradient detail, supporting dark product or CTA treatments. |
| Deep Charcoal | `#141413` | `--color-deep-charcoal` | surface | Very dark card and button detail, most noticeable in compact interface treatments. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery White) · `--color-surface` → `#0f0a07` (Roasted Ink) · `--color-surface-2` → `#dddcdc` (Soft Divider) · `--color-surface-3` → `#e9e9e8` (Mist Surface) · `--color-text` → `#0f0a07` (Roasted Ink) · `--color-text-muted` → `#575251` (Warm Graphite) · `--color-text-subtle` → `#44663c` (Moss Signal) · `--color-border` → `#dddcdc` (Soft Divider) · `--color-accent` → `#44663c` (Moss Signal) · `--color-accent-2` → `#b25014` (Burnt Copper) · `--color-accent-3` → `#b22c23` (Signal Brick)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f0a07` | `#fafafa` | 18.86:1 | AAA |
| `#0f0a07` | `#dddcdc` | 14.38:1 | AAA |
| `#0f0a07` | `#e9e9e8` | 16.2:1 | AAA |
| `#575251` | `#fafafa` | 7.37:1 | AAA |
| `#575251` | `#0f0a07` | 2.56:1 | fail |
| `#575251` | `#dddcdc` | 5.62:1 | AA |
| `#575251` | `#e9e9e8` | 6.33:1 | AA |
| `#44663c` | `#fafafa` | 6.26:1 | AA |
| `#44663c` | `#0f0a07` | 3.01:1 | AA-large |
| `#44663c` | `#dddcdc` | 4.78:1 | AA |

### Gradients

- `url("https://www.speakeasy.com/webgl/hand-ascii-poster.webp"), linear-gradient(rgb(250, 250, 250) 90%, rgba(0, 0, 0, 0) 92%)`
- `linear-gradient(rgb(42, 42, 46) 0%, rgb(31, 31, 34) 100%)`
- `linear-gradient(90deg, rgb(51, 15, 31) 0%, rgb(200, 50, 40) 12.56%, rgb(251, 136, 65) 25.06%, rgb(211, 221, 146) 37.56%, rgb(89, 130, 79) 50.06%, rgb(0, 36, 20) 62.06%, rgb(0, 20, 61) 74.06%, rgb(40, 116, 215) 86.06%, rg`
- `linear-gradient(rgb(50, 15, 30) 0%, rgb(200, 50, 40) 13%, rgb(251, 135, 63) 25%, rgb(210, 220, 145) 38%, rgb(90, 130, 80) 50%, rgb(0, 35, 20) 62%, rgb(0, 20, 60) 74%, rgb(40, 115, 215) 86%, rgb(155, 195, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCDiatype | `--font-body` | webfont | 300, 400, 500, 600 | Body copy, supporting text, and product-interface descriptions. | Inter |
| ABCDiatypeMono | `--font-mono` | webfont | 300, 400, 500 | Navigation, eyebrows, buttons, links, and compact technical labels. | IBM Plex Mono |
| Tobias | `--font-display` | webfont | 100 | Display and section headlines, including large editorial statements. | Newsreader |

- **ABCDiatype:** Light weights dominate; use restrained, natural tracking and sentence case for readable copy.
- **ABCDiatypeMono:** Light monospace, typically uppercase, with visibly expanded tracking for controls and labels.
- **Tobias:** Very light serif with tight negative tracking; use generous scale and concise line breaks.

### Type scale — Perfect Fifth (ratio ≈ 1.481, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86.5px | 100 | 1.02 | -0.035em | — | Tobias | Oversized editorial statement headlines in major page moments. |
| h1 | 65px | 100 | 1.04 | -0.035em | — | Tobias | Primary hero headline and other top-level section statements. |
| h2 | 34.5px | 100 | 1 | -0.035em | — | Tobias | Section headings introducing features, governance, and proof points. |
| h3 | 22px | 300 | 1.4 | 0 | — | ABCDiatype | Feature titles and supporting product-section headings. |
| body | 18px | 300 | 1.45 | 0 | — | ABCDiatype | Explanatory paragraphs and customer-story supporting copy. |
| caption | 16px | 300 | 1.5 | 0 | — | ABCDiatype | Compact descriptions, attribution details, and secondary content. |
| button | 14px | 300 | 1.2 | 0.08em | uppercase | ABCDiatypeMono | Uppercase CTA labels in monospace. |
| nav | 12px | 300 | 1.66 | 0.03em | uppercase | ABCDiatypeMono | Uppercase primary navigation labels. |
| link | 14px | 300 | 1.2 | 0.08em | uppercase | ABCDiatypeMono | Uppercase inline actions and feature exploration links. |
| eyebrow | 14px | 300 | 1.2 | 0.08em | uppercase | ABCDiatypeMono | Compact uppercase announcement and section labels. |
| code | 4.5px | 300 | 1.1 | 0 | — | ABCDiatypeMono | Tiny monospace details inside product-interface visuals. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 96 px.
- Section rhythm 96px · element gap 8px · card padding 32px · max content width 1344px.

Use a spacious, centered page framework with a measured maximum width of 1344px and strong left alignment for headlines and copy. The long homepage alternates broad editorial sections with structured grids, logo tables, product screenshots, testimonials, and metrics. The section rhythm is generous, with a measured section gap of 96px and compact 8px element gaps. Keep cards and content aligned to clear columns; use thin rules to separate modules rather than adding heavy containers. The visual density stays low outside interface mockups.

## Shape & elevation

- Radius: button `8px` · card `4px` · badge `3px` · nav `8px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `8px` · pill `9999px`
- Shadow `lg` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 10, 7, 0.04) 0px 1px 2px 0px, rgba(15, 10, 7, 0.18) 0px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 10, 7, 0.12) 4px 4px 0px 0px`
- Shadow `inset` (button): `rgb(65, 65, 65) 0px 2px 1px 0px inset`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 10, 7, 0.12) 0px 0px 0px 1px, rgba(15, 10, 7, 0.28) 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 10, 7, 0.1) 0px 20px 50px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 4px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is primarily flat, using fine gray borders to define tables, cards, and section divisions. Product panels may receive a restrained soft shadow, while buttons can use a crisp offset edge. Keep depth subordinate to typography and rules; avoid floating-card stacks or dramatic ambient shadows.

## Imagery

Use product-interface screenshots and technical illustrations as evidence of the AI governance platform. The hero pairs copy with a delicate ASCII-like hand illustration; other sections show dashboard panels, workflows, and compliance details. Keep imagery mostly pale, precise, and integrated into the grid. Customer logos and small status marks support credibility; avoid lifestyle photography or glossy 3D treatments.

## Components

### Announcement strip

An uppercase monospace release notice sits in a lightly outlined rectangular control with a right arrow and a subtle offset edge.

### Primary CTA

A dark rounded button with light uppercase monospace text; the hero pairs it with a pale secondary contact button.

### Trust logo grid

Customer marks sit in a ruled multi-column table beneath a small uppercase trust label.

### Feature cards

Three product capabilities are presented in adjacent lightly bordered columns with small illustrations, concise copy, and uppercase links.

### Verification badges

Compact green-tinted status chips use uppercase monospace text, pale green fill, and a thin green border.

### Testimonial panel

Large serif quotation is paired with a small colored quote mark, portrait, attribution, and customer logo.

### Product interface panel

Dashboard and workflow captures are framed by subtle rules and pale surfaces, with dark interface content used selectively.

### Measured component styles

- **Primary button** (“TALK TO US”): background #eeeeee · text #171717 · border 1px solid #d5d5d5 · radius 8px · padding 11px 23px · 300 14px ABCDiatypeMono · uppercase
- **Secondary button** (“DEPLOY FOR FREE”): background #242428 · text #fafafa · radius 8px · padding 12px 24px · 300 14px ABCDiatypeMono · uppercase · shadow rgb(65, 65, 65) 0px 2px 1px 0px inset
- **Link** (“EXPLORE AGENT IDENTITY”): transparent background · text #0f0a07 · radius 0px · padding 0px · 300 14px ABCDiatypeMono · uppercase
- **Card** (“IDENTITY PROVIDERS Entra ID + Any SAML /”): background #fafafa · text #0f0a07 · radius 0px · padding 32px · 300 16px ABCDiatype
- **Badge** (“VERIFIED”): background #eef2ed · text #44663c · border 1px solid #b4c2b1 · radius 3px · padding 1px 6px · 300 11px ABCDiatypeMono · uppercase
- **Navigation item** (“Speakeasy Logo”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ABCDiatype

## Do

- Use Gallery White as the dominant canvas.
- Set major headlines in a light editorial serif.
- Use uppercase monospace for labels and actions.
- Organize content with fine rules and aligned grids.
- Reserve accent colors for small status or interface cues.
- Give sections generous breathing room.

## Don't

- Do not fill large areas with accent colors.
- Do not use heavy shadows to separate every card.
- Do not replace the editorial headlines with generic bold sans-serif.
- Do not crowd the page with dense decorative elements.
- Do not present product interfaces as glossy device mockups.
- Do not use rounded pills where the page uses restrained rectangular controls.

## Agent prompt

Build a new enterprise AI product page in Speakeasy’s restrained editorial style. Use Gallery White (#fafafa) as the dominant canvas, Roasted Ink (#0f0a07) for headlines and primary text, Warm Graphite (#575251) for secondary copy, and Soft Divider (#dddcdc) for fine grid rules. Set large, light serif headlines in a Tobias-like face and use a clean sans for body copy; reserve a tracked uppercase monospace for navigation, labels, and buttons. Compose spacious, left-aligned sections with clear columns, generous separation, and product-interface imagery that feels precise rather than glossy. Use Moss Signal (#44663c), Burnt Copper (#b25014), and Signal Brick (#b22c23) only as restrained status or interface accents. Keep surfaces mostly flat, using subtle borders and occasional soft shadows. Make CTAs compact and clear.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, spacious landing page beginning with a left-aligned hero, followed by logos, feature grids, product panels, testimonials, and proof sections. | Announcement link, Primary and secondary CTAs, Customer trust marks, Feature exploration links | Serif display headline, Monospace uppercase labels, Fine ruled grids, Product interface captures, Occasional dark metrics band |
| 2 | footer | Multi-column footer with brand and social controls at left and grouped navigation links across the remaining columns. | Grouped site navigation, Social links, Display-theme control, Legal links | Light surface, Small monospace labels, Thin top divider, Compact link columns |

## Source CSS custom properties (selected)

```css
--color-base-white: #fff;
--color-base-black: #000;
--color-bsmnt-neutral-100: #fafafa;
--color-bsmnt-neutral-200: #ebebeb;
--color-bsmnt-neutral-300: #dbdbdb;
--color-bsmnt-neutral-400: #bababa;
--color-bsmnt-neutral-500: #969696;
--color-bsmnt-neutral-600: #757575;
--color-bsmnt-neutral-700: #545454;
--color-bsmnt-neutral-800: #333;
--color-bsmnt-neutral-850: #242424;
--color-bsmnt-neutral-900: #121212;
--color-bsmnt-brand-red-100: #fb8841;
--color-bsmnt-brand-red-200: #ee733a;
--color-bsmnt-brand-red-300: #e15b33;
--color-bsmnt-brand-red-400: #d6472e;
--color-bsmnt-brand-red-500: #c83228;
--color-bsmnt-brand-red-600: #a12826;
--color-bsmnt-brand-red-700: #7d2123;
--color-bsmnt-brand-red-800: #581821;
--color-bsmnt-brand-red-900: #330f1f;
--color-bsmnt-brand-green-100: #d3dd92;
--color-bsmnt-brand-green-200: #b4c581;
--color-bsmnt-brand-green-300: #95ae6f;
--color-bsmnt-brand-green-400: #789a60;
--color-bsmnt-brand-green-500: #59824f;
--color-bsmnt-brand-green-600: #456c42;
--color-bsmnt-brand-green-700: #2d5332;
--color-bsmnt-brand-green-800: #173b23;
--color-bsmnt-brand-green-900: #002414;
--color-bsmnt-brand-blue-100: #fff;
--color-bsmnt-brand-blue-200: #7fb0f5;
--color-bsmnt-brand-blue-300: #619aea;
--color-bsmnt-brand-blue-400: #4787e1;
--color-bsmnt-brand-blue-500: #2874d7;
--color-bsmnt-brand-blue-600: #1e5aae;
--color-bsmnt-brand-blue-700: #14458a;
--color-bsmnt-brand-blue-800: #0a2b61;
--color-bsmnt-brand-blue-900: #00143d;
--color-bsmnt-brand-typescript: #000;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/speakeasy-com