# Beau To · Design system migration spec

> Source: https://beau.to  ·  Curated by OpenDesign  ·  en

> The site is worth including for its sophisticated use of UI mockups to demonstrate complex data validation processes within a clean, modern SaaS aesthetic.

## 1. Identity DNA

Beau operates like a finely tuned processing engine, where every design decision serves the systematic extraction and validation of information. The system’s identity is built on a foundation of automation, documents, and data verification, all choreographed to produce efficiency without visual noise.

**One-liner:** Beau redefines client-facing processes by bringing smart automation to every document interaction.
**Keywords:** automation · documents · data · verification · efficiency
**Analogy:** An intelligent document processing engine that automates data extraction and validation.

## 2. Color

The palette is a study in extreme contrast, pairing pure black and white with a single vibrant orange-red gradient that marks points of dynamic energy and user focus. This gradient is the system’s sole chromatic accent, applied with surgical precision to avoid visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F6F4F1` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--muted-soft` | `rgba(0,0,0,0.6)` | weak hint |
| `--accent` | `#FF8308` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast black and white for clarity, with vibrant gradient accents for dynamic energy.

The principle is one of disciplined restraint, where a single, potent accent color is enough to define interaction and draw the eye across an otherwise monochrome field.

## 3. Typography

The typographic voice is modern and humanist, set in Geist with tight tracking at large sizes to convey confident efficiency. The scale is structured to create a clear hierarchy from bold, benefit-driven headlines down to functional supporting labels.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 500 | -1.12px | Main headlines and hero text |
| display-sm | 40px | 1.15 | 500 | -0.8px | Section headlines |
| heading | 28px | 1.2 | 500 | -0.33px | Subheadlines and card titles |
| body | 17px | 1.4 | 400 | 0px | Main body text and descriptions |
| caption | 14px | 1.4 | 400 | 0px | Small labels and supporting text |

## 4. Spacing

The layout breathes on a strict 4px grid, using generous whitespace as a structural element to enforce clarity and prevent information density from becoming clutter.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 18 / 24 / 48 / 72 / 96 px
- **Rhythm:** Based on a 4px grid with generous whitespace to emphasize clarity.

## 5. Surfaces

Surface treatments are minimal, relying on subtle 1px borders and near-imperceptible shadows to suggest depth and separate content blocks. The goal is a clean, flat interface where hierarchy is established through space and typography, not decorative elements.

- **Radius:** sm 6px · md 12px · lg 24px · pill 200px
- **Shadows:**
  - 0px 2px 6px 0px rgba(0, 0, 0, 0.06)
- **Borders:** Subtle 1px solid lines for separation.

## 6. Layout

The skeletal framework is centered and spacious, beginning with a dominant hero section. The core content then alternates between split layouts and a three-column feature grid, maintaining a rhythmic, predictable flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero section followed by alternating split layouts and a 3-column feature grid.

## 7. Motion & Interaction

Motion is used as a quiet guide rather than a spectacle, with transitions focused on reinforcing state changes and providing feedback. The philosophy is one of immediate response, using smooth opacity and color shifts over a consistent 0.2-second duration.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions on hover and state changes.

- **Hover:** Cursor pointer with subtle color or opacity transitions.
- **Click:** Immediate visual feedback.
- **Transition:** All elements transition smoothly with a 0.2s duration.
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice is direct, efficient, and confident, mirroring the product’s function. Language is benefit-driven and free of jargon, with headlines that state value plainly and calls to action that are clear and imperative.

- **Tone:** Professional, efficient, and confident.
- **Headline style:** Direct and benefit-driven, often using large, bold typography.
- **CTA style:** Clear and action-oriented, like 'Request Demo'.
- **Avoid:** Fluff / Jargon / Passive voice

### Don'ts
- ❌ don't use multiple primary accent colors — screenshot shows a single gradient used for emphasis across steps
- ❌ don't use complex decorative backgrounds — screenshot shows a mostly clean white background with minimal noise
- ❌ don't use center-aligned body text — screenshot shows left-aligned text for readability in descriptions
- ❌ don't use rounded corners on all elements — screenshot shows sharp corners on some UI mockups but rounded on buttons
- ❌ don't use heavy drop shadows — screenshot shows very subtle, almost flat shadowing
- ❌ don't use sans-serif fonts for code — screenshot uses a monospace font for document data extraction

The system deliberately excludes decorative complexity, multiple accent colors, and passive language to maintain its focus on clarity and professional efficiency.

## System Prompt (paste into AI tool)

```
Beau is a SaaS platform for document automation, characterized by a clean, high-contrast aesthetic. Key hex colors are #FFFFFF, #000000, and a vibrant orange-red gradient (#FF8308). The typography is a modern humanist-sans-serif (Geist) with tight letter spacing for large headlines. Critical design constraints: maintain extreme clarity and whitespace, avoid visual clutter in favor of data-focused UI mockups, and use a consistent vibrant gradient as the only major accent color. The layout should remain spacious and centered to emphasize professional efficiency and trust.
```