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

# Beau · Design System

> Quiet monochrome, vivid document-workflow gradients

**Theme:** light · **Industry:** saas · **Source:** https://beau.to/ · **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._

Beau presents document automation through a spacious monochrome layout, using vivid gradients as selective accents around product imagery and conversion actions. Clear typography, restrained card styling, and a black closing section keep the long page cohesive.

## North star

Keep the interface quiet and spacious in black and white, reserving vivid gradients for product framing and key actions.

## Overview

The visual strategy relies on a white canvas, near-black typography, and generous open space to make a document-automation product feel direct and legible. A warm off-white band breaks up the otherwise white sequence without changing the restrained palette. Orange, coral, and indigo appear as a vivid multicolor gradient around product demonstrations and selected calls to action; they are accents, not broad background fills. Geist’s clean sans-serif forms support centered, assertive headings and compact explanatory copy, with muted gray text lowering emphasis where needed. The page alternates centered statements with split product demonstrations and a three-step workflow, maintaining a spacious vertical rhythm. Product screenshots and document examples provide the visual detail, often framed by black panels or gradient edges. Cards use subtle outlines or restrained shadow rather than heavy elevation. A black footer and inverse pricing card provide strong contrast at the end.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and light sections; also used for inverse text and button labels. |
| Document Ink | `#000000` | `--color-document-ink` | brand | Primary text, black feature panels, inverse pricing card, and footer background. |
| Quiet Rule | `#e5e5e5` | `--color-quiet-rule` | semantic | Fine borders and hairlines on navigation and cards. |
| Warm Paper | `#f6f4f1` | `--color-warm-paper` | surface | Soft off-white band behind the form-automation feature. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Secondary explanatory copy and subdued text. |
| Soft Pewter | `#999999` | `--color-soft-pewter` | neutral | Low-emphasis text, including supporting details and pricing captions. |
| Warm Slate | `#626260` | `--color-warm-slate` | neutral | Secondary text tone; measured in page text rather than a defining surface. |
| Citrus Orange | `#ff8308` | `--color-citrus-orange` | accent | First stop in the vivid gradient framing product demonstrations and accenting actions. |
| Coral Signal | `#ff5043` | `--color-coral-signal` | accent | Middle gradient stop in product frames and selected CTA treatments. |
| Electric Indigo | `#392bd5` | `--color-electric-indigo` | accent | Final gradient stop in product frames and selected CTA treatments. |
| Border Charcoal | `#333333` | `--color-border-charcoal` | semantic | Occasional darker border detail; not a prominent page-wide color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Document Ink) · `--color-surface-2` → `#f6f4f1` (Warm Paper) · `--color-text` → `#000000` (Document Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#666666` (Muted Graphite) · `--color-border` → `#e5e5e5` (Quiet Rule) · `--color-accent` → `#ff8308` (Citrus Orange) · `--color-accent-2` → `#ff5043` (Coral Signal) · `--color-accent-3` → `#392bd5` (Electric Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f4f1` | 19.13:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f6f4f1` | 1.1:1 | fail |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#666666` | `#f6f4f1` | 5.23:1 | AA |
| `#ff8308` | `#ffffff` | 2.47:1 | fail |
| `#ff8308` | `#000000` | 8.5:1 | AAA |
| `#ff8308` | `#f6f4f1` | 2.25:1 | fail |

### Gradients

- `linear-gradient(135deg, rgb(255, 131, 8), rgb(255, 80, 67) 50%, rgb(57, 43, 213))`
- `linear-gradient(rgb(246, 244, 241), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 500, 400 | Site-wide font for headings, body copy, navigation, links, and buttons. | Inter |

- **Geist:** Use regular and medium weights; headings have slightly tight tracking, while labels and navigation remain sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.347, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.1 | -0.02em | — | Geist | Large statement headings for major page moments. |
| h1 | 40px | 500 | 1.15 | -0.02em | — | Geist | Primary hero headline and prominent section titles. |
| h2 | 33px | 500 | 1.15 | -0.01em | — | Geist | Feature and pricing section headings. |
| h3 | 28px | 400 | 1.2 | 0 | — | Geist | Workflow steps and smaller feature titles. |
| body | 17px | 400 | 1.4 | 0 | — | Geist | Main explanatory copy and card content. |
| caption | 14px | 400 | 1.4 | 0 | — | Geist | Supporting notes and compact secondary information. |
| nav | 14px | 400 | 1.4 | 0 | — | Geist | Header and footer navigation links. |
| link | 17px | 500 | 1.4 | 0 | — | Geist | Emphasized text links and CTA labels. |

OpenType features in use: `"ss01", "ss03", "ss04"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 6, 9, 12, 18, 24, 36, 48, 72, 96 px.
- Section rhythm 96px · element gap 18px · card padding 24px · max content width 896px.

The page uses a centered content column with a measured maximum width of 896px, while selected product compositions spread across the available width. The hero centers its headline above a two-column demonstration; later blocks alternate centered copy, single-column statements, split feature layouts, and a three-column workflow. Sections are vertically generous, with a measured 96px section gap and spacious density. The warm off-white feature band provides a clear pause. Alignment shifts intentionally between centered headings and left-aligned product explanations.

## Shape & elevation

- Radius: button `9999px` · card `6px` · media `6px` · link `9999px` · xs `6px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.06) 0px 2px 6px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections remain flat against the canvas, with separation created by whitespace, a single warm band, and occasional hairlines. Cards have restrained treatment: light cards may use a subtle measured shadow, while feature cards use black fills or thin borders. Keep layering focused on screenshot frames and avoid pronounced drop shadows.

## Imagery

Imagery is product-led: document uploads, online form verification, filled PDFs, and workflow interfaces show the service in context. Screenshots and document mockups are arranged in framed compositions, often beside black text panels or edged with the orange-coral-indigo gradient. The visual evidence is UI and document content rather than lifestyle photography or decorative illustration; keep examples legible and closely cropped.

## Components

### Header navigation

White, minimal navigation with the logo at left, compact links, and a black pill-shaped Request Demo action.

### Hero demonstration

Centered headline and supporting line above a paired product image and black benefit panel.

### Feature split

Product or document demonstration sits beside a concise heading and explanation, with generous surrounding whitespace.

### Workflow cards

Three horizontally aligned steps with rounded corners, subtle outlines, compact labels, and gradient edge details.

### Black benefit panel

Inverse black surface pairs a bright heading with muted supporting copy and a short outcome statement.

### Pricing cards

Light Basic plan card sits beside an inverse black Enterprise card; pill-shaped Get in touch actions use contrasting treatments.

### Footer CTA

Full-width black closing section centers a white workflow message and demo action above compact contact and navigation details.

### Measured component styles

- **Primary button** (“Request Demo Request Demo”): background #000000 · text #ffffff · radius 200px · padding 0px 18px · 500 17px Geist
- **Link** (“Get in touch Get in touch”): background #000000 · text #ffffff · radius 200px · padding 0px 24px · 500 17px Geist
- **Card** (“Reduce cycles by 75% No more back-and-fo”): background #000000 · text #ffffff · radius 6px · padding 24px · 400 17px Geist
- **Navigation item** (“Home Pricing Request Demo Request Demo”): transparent background · text #000000 · radius 0px · padding 0px · 400 17px Geist

## Do

- Use white as the default canvas.
- Set primary copy in near-black and secondary copy in measured grays.
- Reserve the orange-to-coral-to-indigo gradient for selective emphasis.
- Give product demonstrations ample breathing room.
- Alternate centered messaging with practical split layouts.
- Use black inverse panels to spotlight benefits or close the page.

## Don't

- Do not turn accent colors into broad section backgrounds.
- Do not crowd the page with dense, edge-to-edge content.
- Do not add decorative photography that competes with the product UI.
- Do not use heavy shadows or elaborate card elevation.
- Do not introduce unrelated colors beyond the measured palette.
- Do not make every heading, label, and action visually loud.

## Agent prompt

Build a new Beau-style SaaS page with a calm white canvas (#ffffff), Document Ink (#000000) headings, and restrained supporting text in Muted Graphite (#666666) or Soft Pewter (#999999). Use Geist, or Inter as a close free substitute, with clean medium-weight headings and regular body copy. Keep content centered within the measured 896px maximum width where appropriate, with generous vertical section rhythm. Alternate centered statements, split product demonstrations, and concise workflow cards. Show real product UI or document examples as the primary imagery. Use Warm Paper (#f6f4f1) sparingly for a section band. Apply the Citrus Orange (#ff8308), Coral Signal (#ff5043), and Electric Indigo (#392bd5) gradient selectively to product frames and key actions. Keep borders subtle, shadows restrained, buttons pill-shaped, and finish with a black inverse CTA or footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above a two-column product demonstration. | Request demo navigation action, Benefit-led hero | Black benefit panel, Gradient-framed product image |
| 2 | other | Single-column statement with selected copy emphasized. | Problem-to-benefit messaging | Mixed-weight text emphasis, White canvas |
| 3 | product-showcase | Centered heading and explanatory copy above a verification interface. | Explain then demonstrate | Product UI illustration, Muted supporting text |
| 4 | feature-split | Warm off-white band with a product composition beside feature copy. | Manual-work reduction messaging | Inverse product panel, Gradient image edge |
| 5 | how-it-works | Centered section heading above three evenly arranged step cards. | Numbered sequential steps | Three-column cards, Subtle gradient framing |
| 6 | product-showcase | Centered headline above a wide, multi-part verification product demonstration. | Real-time feedback claim, Benefit-led explanation | Black copy panel, Gradient feature strip |
| 7 | pricing | Centered pricing introduction followed by a two-column plan comparison. | Compare plans, Contact sales action | Light Basic card, Inverse Enterprise card, Pill-shaped links |
| 8 | footer | Full-width black footer with centered CTA and compact contact details in columns. | Request demo CTA, Contact and navigation links | Inverse white text, Thin divider |

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