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

# Boords · Design System

> Warm editorial calm meets practical production software

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

Boords pairs a warm, restrained palette with spacious editorial sections and clear product-interface demonstrations. Rounded calls to action, fine borders, and storyboard imagery make a collaborative production workflow feel approachable and concrete.

## North star

Let warm paper-like surfaces, clear editorial hierarchy, and real product UI explain the workflow before decoration does.

## Overview

The page is built around a warm off-white canvas (#fafaf5) and alternating pale cream bands (#f3f3e9), giving long-form content a quiet, editorial rhythm. Near-black (#121212) carries headings and primary interface contrast, while muted grays keep supporting copy understated. Golden amber (#e8aa42) is reserved for the prominent hero action and small emphasis details rather than used as a broad background. Matter is the dominant typeface: large, confident headings sit above readable body copy, with restrained uppercase eyebrow labels and occasional monospace captions. The composition moves between centered hero content, logo and testimonial rows, and left-aligned two-column feature stories. Product screenshots are framed as large, dark-edged canvases and provide the main visual weight; supporting cards and tables stay clean and lightly structured. Generous section breathing room balances the dense product evidence. Fine borders, limited shadow, and rounded controls keep the experience tactile without adding visual noise.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper Canvas | `#fafaf5` | `--color-paper-canvas` | surface | Main page canvas behind navigation, feature stories, stats, and founder content. |
| Storyboard Amber | `#e8aa42` | `--color-storyboard-amber` | accent | Measured amber emphasis for the hero CTA border and small highlighted details. |
| Soft Marigold | `#f4bd64` | `--color-soft-marigold` | accent | Lighter amber used on button and badge accents, including subtle highlight treatments. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product panels, testimonial cards, and high-contrast interface surfaces. |
| Oat Section | `#f3f3e9` | `--color-oat-section` | surface | Alternating cream section bands, including hero and comparison content. |
| Soft Graphite | `#4b4b4a` | `--color-soft-graphite` | neutral | Muted supporting text on light backgrounds. |
| Carbon Ink | `#121212` | `--color-carbon-ink` | brand | Headings, body text, dark footer, and high-contrast buttons. |
| Frame Charcoal | `#413e3c` | `--color-frame-charcoal` | neutral | Fine borders and dark outlines; also appears around product-display frames. |
| Espresso Night | `#120e0b` | `--color-espresso-night` | surface | Deep dark band behind integrations content and dark gradient treatments. |
| Muted Slate | `#585856` | `--color-muted-slate` | neutral | Secondary copy and footer text on light or dark surfaces. |
| Pale Ash | `#d2d1d0` | `--color-pale-ash` | neutral | Low-emphasis text and detail inside cards, badges, and interface mockups. |
| Approval Green | `#2b6d3e` | `--color-approval-green` | semantic | Small success-state badge detail; not a defining page-wide brand color. |
| Honey Glint | `#f4c87f` | `--color-honey-glint` | accent | Subtle warm button highlight and badge-outline treatment. |
| Text Charcoal | `#444444` | `--color-text-charcoal` | neutral | Secondary text tone sampled in supporting content. |
| Disabled Ash | `#b8b7b6` | `--color-disabled-ash` | neutral | Disabled or low-priority interface text, not a major page color. |
| Deep Ochre | `#b77a1e` | `--color-deep-ochre` | accent | Occasional darker amber text and badge detail. |

### Semantic aliases

`--color-canvas` → `#fafaf5` (Paper Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#f3f3e9` (Oat Section) · `--color-surface-3` → `#120e0b` (Espresso Night) · `--color-surface-4` → `#121212` (Carbon Ink) · `--color-text` → `#121212` (Carbon Ink) · `--color-text-muted` → `#4b4b4a` (Soft Graphite) · `--color-text-subtle` → `#585856` (Muted Slate) · `--color-border` → `#413e3c` (Frame Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#fafaf5` | 17.89:1 | AAA |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#f3f3e9` | 16.78:1 | AAA |
| `#121212` | `#120e0b` | 1.03:1 | fail |
| `#4b4b4a` | `#fafaf5` | 8.34:1 | AAA |
| `#4b4b4a` | `#ffffff` | 8.73:1 | AAA |
| `#4b4b4a` | `#f3f3e9` | 7.82:1 | AAA |
| `#4b4b4a` | `#120e0b` | 2.2:1 | fail |
| `#585856` | `#fafaf5` | 6.81:1 | AA |
| `#585856` | `#ffffff` | 7.13:1 | AAA |

### Gradients

- `linear-gradient(to right bottom, rgb(69, 61, 55), rgb(42, 36, 32), rgb(18, 14, 11))`
- `linear-gradient(to right bottom, rgb(45, 40, 36), rgb(33, 28, 25), rgb(18, 14, 11))`
- `linear-gradient(rgb(243, 243, 233), rgb(234, 234, 223))`
- `linear-gradient(rgba(108, 188, 244, 0.3), rgba(108, 188, 244, 0.7))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| matter | `--font-body` | webfont | 400, 600, 500, 700 | Display and headings, navigation, body copy, links, and buttons throughout the page. | Inter |
| ui-monospace | `--font-mono` | system | 500, 600 | Compact captions and code-like labels. | Roboto Mono |

- **matter:** Rounded modern sans feel; headings use semibold, body stays regular, and eyebrow labels use uppercase with expanded tracking.
- **ui-monospace:** Used sparingly for small technical or metadata labels, generally medium weight.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.1 | 0 | — | matter | Large centered hero headline and prominent section statements. |
| h1 | 40px | 600 | 1.15 | 0 | — | matter | Primary feature and founder-story headings. |
| h2 | 32px | 600 | 1.15 | 0 | — | matter | Section titles across workflow, integrations, and CTA content. |
| h3 | 24px | 400 | 1.2 | 0 | — | matter | Supporting subheads and card-level headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | matter | Smaller subsection labels and compact content headings. |
| body | 16px | 400 | 1.5 | 0 | — | matter | Feature explanations, testimonials, and standard descriptive copy. |
| caption | 11px | 500 | 1.5 | 0 | — | ui-monospace | Small metadata, product labels, and compact technical annotations. |
| button | 16px | 600 | 1.5 | 0 | — | matter | Primary and secondary action labels. |
| nav | 14.5px | 400 | 1.25 | 0 | — | matter | Header navigation and compact menu items. |
| link | 16px | 400 | 1.5 | 0 | — | matter | Inline links and text-based calls to action. |
| eyebrow | 14.5px | 600 | 1.25 | 0.1em | uppercase | matter | Uppercase section prefaces and compact category labels. |
| code | 11px | 500 | 1.5 | 0 | — | ui-monospace | Small monospace technical or integration labels. |

## Spacing & layout

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

Use a centered content frame with a measured maximum width of 1344px. The homepage alternates full-width cream and paper-toned section bands, with a compact navigation and centered hero followed by broad product demonstrations. Later sections use two-column feature layouts, three-column testimonial or stats rows, and a multi-column footer. Headings are often left-aligned beside copy in feature sections; hero and logo-cloud content are centered. Spacing is compact in controls and cards but generous between major stories.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `50%` · badge `4px` · nav `9999px` · link `12px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.03) 0px 0px 24px 0px`
- Shadow `hairline` (card, button, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `hairline-2` (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`
- Shadow `inset` (card): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-3` (media): `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-4` (badge): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(244, 189, 100, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, using fine borders and section color changes to separate content rather than heavy shadows. Product screens gain depth from dark frames and occasional overlapping testimonial cards. Cards remain light and clean; use only a restrained hairline shadow where separation is needed.

## Imagery

Prioritize product screenshots of storyboard boards, version review, comments, and project activity. Place the UI inside large dark-framed display areas, often with floating testimonial or interface details. Supporting brand marks and small portraits add evidence, while illustrations remain secondary. Keep screenshots crisp and neutral; avoid adding decorative imagery that competes with the product.

## Components

### Announcement bar

Slim warm-toned strip above the header with a small integration message, inline link, and close control.

### Primary CTA

Rounded amber hero action with dark text; other measured CTA instances use dark fill or amber outline.

### Product showcase frame

Large storyboard or activity interface set inside a dark charcoal frame, with interface details kept legible.

### Comparison table

Two-column 'today' versus 'with Boords' checklist, separated into compact rows with light dividers.

### Logo and studio cards

Centered customer logos above a row of studio cards, including both pale and dark card treatments.

### Testimonial panels

Compact proof cards with short quotes, star ratings, and small contributor details.

### Integration tiles

Dark multi-column feature area with fine dividers, integration illustrations, and concise link-led descriptions.

### Measured component styles

- **Primary button** (“Ask ChatGPT”): background #ffffff · text #121212 · border 1px solid #dcdcd3 · radius 9999px · padding 10px 20px · 600 15px matter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Try Boords Free”): transparent background · text #121212 · border 1px solid #e8aa42 · radius 12px · padding 12px 40px · 600 20px matter
- **Link** (“Lean team + network SaaS demos”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px matter
- **Card** (“Scripts, storyboards and animatics in on”): background #ffffff · text #000000 · radius 0px · padding 36px 40px · 400 16px matter
- **Badge** (“13 words 0:06”): transparent background · text #7b7b7b · border 1px solid #e9e9e7 · radius 0px · padding 6px 0px 0px 0px · 400 10.4px matter
- **Navigation item** (“Scripts”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14.4px matter

## Do

- Use Paper Canvas and Oat Section as the dominant alternating surfaces.
- Reserve amber for primary actions and small emphasis details.
- Give product screenshots a strong, dark frame.
- Pair concise headings with explanatory copy in feature sections.
- Use thin dividers to structure tables, cards, and dark integration panels.
- Keep body text calm and readable against warm light surfaces.

## Don't

- Do not flood large areas with amber.
- Do not replace product evidence with decorative stock photography.
- Do not use heavy shadows as the main way to separate sections.
- Do not center every feature heading; preserve left-aligned editorial sections.
- Do not introduce saturated colors beyond small interface or semantic details.
- Do not crowd the page with dense, unbroken text.

## Agent prompt

Build a new Boords-style SaaS page with a warm editorial feel and practical product focus. Use Paper Canvas (#fafaf5) as the main background, alternating Oat Section (#f3f3e9) bands, and Carbon Ink (#121212) for headings and high-contrast controls. Apply Storyboard Amber (#e8aa42) sparingly to key actions and small emphasis states. Use Matter-like sans typography, large confident headings, readable regular body text, and restrained uppercase eyebrow labels. Keep the content within a centered wide frame; alternate centered intro sections with left-aligned two-column feature stories. Show realistic storyboard or review UI in large dark-framed product panels. Separate content with fine borders, not heavy shadows, and use rounded controls and cards. Include concise proof points, testimonials, and integration details without adding decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered heading, rating eyebrow, supporting copy, CTA, then product visual. | Trust rating, Primary action | Cream band, Centered typography, Amber CTA |
| 2 | product-showcase | Wide three-column storyboard interface with floating quote cards. | Product proof, Social proof | Dark display frame, Storyboard cards, Overlay quote cards |
| 3 | logo-cloud | Centered heading, customer logo strip, then a row of studio cards. | Customer proof, Browse success stories | Logo row, Mixed-tone cards, Centered title |
| 4 | comparison | Left-aligned title and intro above a two-column checklist table. | Problem-solution comparison, Workflow clarity | Cream band, Row dividers, Paired checklist columns |
| 5 | feature-split | Two-column title and copy followed by a wide interface showcase. | Client approval, Version tracking | Editorial text pair, Dark product frame, Large media panel |
| 6 | feature-split | Text-led introduction above a wide comparison-style product frame. | Explain workflow savings, Preview output | Two-column heading and copy, Framed visual, Amber interface detail |
| 7 | testimonials | Three equal testimonial columns with compact attribution. | Customer validation, Credibility | Column dividers, Star ratings, Small author labels |
| 8 | feature-split | Left-aligned title and copy followed by a wide product frame. | Workflow explanation, Product demonstration | Two-column intro, Large framed UI, Light canvas |
| 9 | testimonials | Three-column testimonial row with compact attribution and rating details. | Social proof, Customer voice | Light cards, Fine separators, Star ratings |
| 10 | other | Centered title and short description with assistant links and a prompt card. | Choose an AI service, Copyable evaluation prompt | Cream band, Pill links, Prompt panel |
| 11 | integrations | Full-width dark section with intro followed by a multi-column grid. | Explore integrations, Jump to feature details | Espresso background, Fine grid dividers, Integration illustrations |
| 12 | stats | Three-column metrics strip on a light background. | Scale proof, Operational credibility | Large numeric metrics, Vertical separators, Warm canvas |
| 13 | team | Founder portrait or image beside a long-form text column. | Founder introduction, Company origin story | Two-column layout, Image block, Editorial copy |
| 14 | cta | Text and CTA on one side, activity interface image on the other. | Start free trial, Reinforce sign-off benefit | Split layout, Amber CTA, Product activity visual |
| 15 | footer | Dark multi-column navigation with legal and social links along the bottom. | Browse product links, Find company and legal info | Near-black surface, Column link groups, Bottom divider |

## Source CSS custom properties (selected)

```css
--color-type-primary: 18 18 18;
--color-type-secondary: 68 68 68;
--color-type-subdued: 123 123 123;
--color-type-disabled: 184 184 184;
--color-border: 233 233 231;
--color-border-mid: 206 205 202;
--color-border-dark: 18 18 18;
--color-surface: 250 250 245;
--color-surface-dark: 243 243 233;
--color-surface-darker: 234 234 223;
--color-surface-light: 249 249 245;
--color-surface-success: 186 232 207;
--color-surface-warning: 250 230 200;
--color-surface-critical: 247 199 198;
--color-surface-frame: 238 238 232;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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