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

# Balsa · Design System

> Quiet workspace, bold product storytelling

**Theme:** light · **Industry:** productivity · **Source:** https://www.balsa.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._

Balsa pairs a restrained, near-white canvas with bold condensed headings and vivid yellow feature callouts. Oversized product mockups make the software itself the central visual story, while compact pricing cards and a simple closing CTA keep the page practical.

## North star

Let oversized product interfaces tell the story against a quiet canvas, using condensed uppercase headings and yellow only for focused feature annotations.

## Overview

The page uses a soft light-gray canvas (#f7f7f7) as a calm surround for white product surfaces, with black and charcoal text carrying most of the information. Saturated yellow (#ffb700) is reserved for explanatory callouts inside the product showcase, so it reads as annotation rather than a site-wide background or primary CTA color. Typography supplies the strongest brand signature: uppercase, tightly tracked condensed display headings contrast with small, neutral Inter body copy. The layout is centered and deliberately spacious, letting large screenshots of the software dominate the long scroll. Mockups are layered with floating feature notes to connect interface details to benefits. Pricing sits in three compact cards; a restrained closing CTA and footer finish the page without introducing a new visual theme. Keep decorative color and graphic effects subordinate to the product, and preserve the contrast between the quiet canvas and assertive headline typography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f7f7f7` | `--color-soft-canvas` | neutral | Main page background, continuing behind the pricing and closing CTA sections. |
| Paper Surface | `#ffffff` | `--color-paper-surface` | surface | Product mockup interiors and clean card surfaces against the gray page canvas. |
| Hard Ink | `#000000` | `--color-hard-ink` | neutral | Primary copy and dark announcement or action elements. |
| Quiet Gray | `#6b6b6b` | `--color-quiet-gray` | semantic | Muted supporting text, including low-emphasis navigation and descriptive copy. |
| Note Violet | `#914db2` | `--color-note-violet` | accent | Purple text within the embedded product mockup; not a dominant site-wide accent. |
| Deep Umber | `#332500` | `--color-deep-umber` | semantic | Dark, warm-toned text appearing in captured interface content and annotations. |
| Charcoal Type | `#313131` | `--color-charcoal-type` | neutral | Dark headings and footer text, softer than pure black while remaining high contrast. |
| Mockup Gray | `#bbbbbb` | `--color-mockup-gray` | surface | Gray surface captured in product-card content, rather than a defining page band. |
| Signal Yellow | `#ffb700` | `--color-signal-yellow` | accent | High-visibility feature callouts overlaid on software mockups. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Low-frequency secondary interface and text detail. |
| Link Navy | `#003399` | `--color-link-navy` | accent | Sparse link or footer text; keep it limited rather than treating it as a main brand color. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Soft Canvas) · `--color-surface` → `#ffffff` (Paper Surface) · `--color-surface-2` → `#bbbbbb` (Mockup Gray) · `--color-text` → `#000000` (Hard Ink) · `--color-text-muted` → `#6b6b6b` (Quiet Gray) · `--color-text-subtle` → `#332500` (Deep Umber) · `--color-accent` → `#914db2` (Note Violet) · `--color-accent-2` → `#ffb700` (Signal Yellow) · `--color-accent-3` → `#003399` (Link Navy)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#bbbbbb` | 10.94:1 | AAA |
| `#6b6b6b` | `#f7f7f7` | 4.97:1 | AA |
| `#6b6b6b` | `#ffffff` | 5.33:1 | AA |
| `#6b6b6b` | `#bbbbbb` | 2.78:1 | fail |
| `#332500` | `#f7f7f7` | 13.95:1 | AAA |
| `#332500` | `#ffffff` | 14.94:1 | AAA |
| `#332500` | `#bbbbbb` | 7.78:1 | AAA |
| `#914db2` | `#f7f7f7` | 5.02:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700 | Body copy, descriptions, and compact interface text | Inter |
| Inter-Bold | `--font-inter-bold` | system | 700 | Bold supporting headings and emphasis | Inter |
| Van Condensed Pro Bold | `--font-display` | webfont | 400 | Display headings and uppercase section labels | Oswald |

- **Inter:** Regular weight; keep paragraph copy small, neutral, and easy to scan.
- **Inter-Bold:** Use bold sparingly for hierarchy within otherwise regular-weight text.
- **Van Condensed Pro Bold:** Use uppercase display treatment with tight negative tracking for prominent headings.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.5 | -0.031em | uppercase | Van Condensed Pro Bold | Large uppercase condensed headline introducing the product. |
| h2 | 24px | 400 | 1.2 | 0 | uppercase | Van Condensed Pro Bold | Uppercase condensed labels for secondary section headings. |
| h3 | 18px | 700 | 1.2 | 0 | — | Inter-Bold | Bold Inter headings for product and pricing-card content. |
| body | 14px | 400 | 1.43 | 0 | — | Inter | Compact Inter paragraphs and descriptions throughout the page. |
| caption | 11px | 400 | 1.18 | 0 | — | Inter | Small supporting labels and fine-print details. |
| code | 11px | 400 | 1.2 | 0 | — | Noto Sans Mono | Monospaced treatment for technical or code-like interface text. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 30, 40, 100 px.
- Section rhythm 40px · element gap 10px · card padding 23px · max content width 1088px.

Use a centered single-column page on a #f7f7f7 canvas, with a measured maximum content width of 1088px. Keep the header quiet, then center the hero headline and supporting copy above a large, vertically stacked product showcase. Allow screenshots and floating feature annotations to form the main composition. Follow with three aligned pricing cards and a centered closing CTA. The measured spacing scale runs from 4px to 100px, with a 40px section gap and compact 10px element gap; preserve generous section breathing room.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `50%` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · pill `9999px`
- Shadow `hairline` (other): `rgb(255, 255, 255) 0px 0px 0px 2px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0.15) 0px 0.706592px 0.706592px -0.625px, rgba(0, 0, 0, 0.145) 0px 1.80656px 1.80656px -1.25px, rgba(0, 0, 0, 0.137) 0px 3.62176px 3.62176px -1.875px, rgba(0, 0, 0, 0.125) 0px 6.8656px 6`
- Shadow `lg-2` (card): `rgba(112, 94, 0, 0.05) 0px 2.14989px 1.71992px -0.3125px, rgba(112, 94, 0, 0.05) 0px 5.09563px 4.0765px -0.625px, rgba(112, 94, 0, 0.05) 0px 9.29495px 7.43596px -0.9375px, rgba(112, 94, 0, 0.05) 0px 1`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.09) 0px 2.14989px 3.00985px -0.5625px, rgba(0, 0, 0, 0.086) 0px 5.09563px 7.13388px -1.125px, rgba(0, 0, 0, 0.082) 0px 9.29495px 13.0129px -1.6875px, rgba(0, 0, 0, 0.08) 0px 15.4528px `
- Shadow `sm` (link): `rgba(0, 0, 0, 0.07) 0px 0.482901px 0.482901px -1.875px, rgba(0, 0, 0, 0.024) 0px 4px 4px -3.75px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0.05) 0px 1px 0px 0px`

Keep the page itself flat and light, using subtle shadows to lift large white interface mockups and pricing cards from the canvas. Feature annotations float above screenshots and use rounded corners. Avoid strong decorative borders; depth comes mainly from restrained shadow and overlapping surfaces.

## Imagery

The visual centerpiece is product-interface imagery rather than photography, illustration, or 3D. Show large, white document and roadmap mockups with legible interface details, then layer small, bright yellow annotation cards near relevant areas. Screenshots sit on the neutral canvas with subtle shadows and ample surrounding whitespace. Use realistic product content as visual texture, but keep its small details secondary to the overall interface silhouette.

## Components

### Announcement pill

A compact black announcement element near the hero, with white copy, rounded corners, and a soft shadow.

### Hero heading

Centered uppercase condensed display type, followed by a short, centered Inter description.

### Product showcase

Large white software-interface mockups stacked down the page, with interface content and lightly elevated edges.

### Feature callout

Rounded yellow annotation cards positioned over mockups, using dark uppercase headings and compact explanatory copy.

### Pricing cards

Three side-by-side tiers on the light canvas; emphasize plan name, price, concise feature list, and a dark action.

### Closing CTA

Centered uppercase prompt, a short supporting sentence, and a compact dark signup action above the footer.

### Measured component styles

- **Primary button** (“Balsa has been acquired by Airtable”): background #000000 · text #0000ee · radius 8px · padding 12px 8px 12px 12px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.15) 0px 0.706592px 0.706592px -0.625px, rgba(0, 0, 0, 0.145) 0px
- **Link** (“Tasks 16”): transparent background · text #0000ee · radius 8px · padding 8px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.07) 0px 0.482901px 0.482901px -1.875px, rgba(0, 0, 0, 0.024) 0px
- **Card** (“HIGHLIGHTS THE IMPORTANT STUFF Balsa kee”): background #ffb700 · text #000000 · radius 12px · padding 20px 20px 32px 20px · 400 12px sans-serif · shadow rgba(112, 94, 0, 0.05) 0px 2.14989px 1.71992px -0.3125px, rgba(112, 94, 0, 0.05)

## Do

- Use the light-gray canvas as the continuous page background.
- Make the software interface the main visual subject.
- Set display headlines in uppercase condensed type.
- Keep body copy compact and neutral.
- Reserve yellow for focused feature annotations.
- Use subtle shadows to separate white mockups from the canvas.

## Don't

- Do not turn the page into a brightly colored gradient composition.
- Do not use yellow as a full-page background.
- Do not let decorative visuals overpower the product screenshots.
- Do not use oversized body copy or dense text blocks.
- Do not add heavy borders around every card or section.
- Do not treat colors found only in mockup content as dominant brand colors.

## Agent prompt

Build a new Balsa-style SaaS page with a quiet #f7f7f7 Soft Canvas and clean #ffffff Paper Surface panels. Use #000000 Hard Ink and #313131 Charcoal Type for strong text, with Inter for compact copy and an Oswald-like condensed alternative for uppercase display headlines. Keep the composition centered and spacious: a restrained header, a clear hero, and large stacked product-interface mockups. Float rounded #ffb700 Signal Yellow annotations over relevant interface areas; keep this accent local rather than spreading it across the page. Use subtle shadows for mockups and cards, not heavy borders. Finish with a compact three-tier pricing area and a simple centered CTA. Prioritize legibility, product detail, and a calm contrast between the page canvas and bold typography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | pricing | Three aligned pricing columns on the continuing light-gray canvas. | Compare plan tiers, Review feature lists, Choose a plan | Three pricing cards, Bold prices, Compact feature lists, Dark action buttons |
| 2 | cta | Centered closing prompt and signup action, followed by a minimal footer. | Invite teammates, Sign up | Uppercase heading, Short supporting copy, Dark signup button, Simple footer links |

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