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

# Altitude · Design System

> Quiet neutrals frame practical AI workflows

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

Altitude pairs a restrained warm-neutral canvas with oversized editorial headlines and detailed product interface previews. A single deep, dark enterprise section breaks the long, spacious product story before the FAQ and demo close.

## North star

Keep the page calm and spacious, letting real product interfaces and precise neutral typography carry the story.

## Overview

The visual strategy is quiet and product-led: a warm off-white canvas carries most of the page, with charcoal typography, pale neutral surfaces, and fine gray hairlines doing the structural work. Black CTA buttons provide the clearest high-contrast action, while a nearly black enterprise band creates a deliberate tonal pause late in the page. Typography uses Geist Variable for clear, contemporary sans-serif headlines, navigation, and compact body copy; an uppercase Geist Mono eyebrow adds a restrained technical cue. The layout is centered within a measured 1104px maximum width, with left-aligned copy and broad gaps between sections. Repeated product screenshots sit in softly rounded frames, often against muted landscape backdrops, making interface details the primary imagery. Cards and workflow examples remain understated: white or pale fills, thin borders, and selective subtle shadow rather than decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f5f5f2` | `--color-warm-canvas` | brand | Dominant page canvas and pale foreground used on dark primary buttons. |
| Soft Graphite | `#4d4d4a` | `--color-soft-graphite` | neutral | Primary muted text tone across navigation, body copy, and badges. |
| Stone Surface | `#edede9` | `--color-stone-surface` | surface | Pale secondary fills for interface elements, badges, and light surfaces. |
| Charcoal Ink | `#1f1f1d` | `--color-charcoal-ink` | brand | Main headings and copy, plus dark CTA backgrounds and button text contrast. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Clean cards and content surfaces, including file and workflow preview panels. |
| Quiet Hairline | `#dededa` | `--color-quiet-hairline` | neutral | Frequent thin borders separating cards, controls, and interface preview elements. |
| Ash Text | `#636360` | `--color-ash-text` | neutral | Secondary muted text and compact labels where softer emphasis is needed. |
| Rust Note | `#a8421c` | `--color-rust-note` | semantic | Sparse text or badge detail; not a defining page-wide brand color. |
| Bronze Accent | `#8a5a11` | `--color-bronze-accent` | accent | Rare warm accent in text and button-related UI; use sparingly. |
| Night Umber | `#19160f` | `--color-night-umber` | brand | Full-width dark enterprise section background, providing a strong late-page contrast. |
| Status Green | `#107c41` | `--color-status-green` | semantic | Tiny status badge detail, not a broader background or brand color. |
| Slate Status | `#485b68` | `--color-slate-status` | semantic | Muted blue-gray status badge and the measured Sherpa text-link color. |
| Muted Taupe | `#c1bdb5` | `--color-muted-taupe` | neutral | Occasional subdued text detail; visually secondary to the core neutral palette. |

### Semantic aliases

`--color-canvas` → `#f5f5f2` (Warm Canvas) · `--color-surface` → `#edede9` (Stone Surface) · `--color-surface-2` → `#ffffff` (Paper White) · `--color-surface-3` → `#19160f` (Night Umber) · `--color-text` → `#1f1f1d` (Charcoal Ink) · `--color-text-muted` → `#4d4d4a` (Soft Graphite) · `--color-text-subtle` → `#636360` (Ash Text) · `--color-border` → `#dededa` (Quiet Hairline) · `--color-accent` → `#8a5a11` (Bronze Accent)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1f1d` | `#f5f5f2` | 15.11:1 | AAA |
| `#1f1f1d` | `#edede9` | 14.07:1 | AAA |
| `#1f1f1d` | `#ffffff` | 16.51:1 | AAA |
| `#1f1f1d` | `#19160f` | 1.09:1 | fail |
| `#4d4d4a` | `#f5f5f2` | 7.76:1 | AAA |
| `#4d4d4a` | `#edede9` | 7.23:1 | AAA |
| `#4d4d4a` | `#ffffff` | 8.48:1 | AAA |
| `#4d4d4a` | `#19160f` | 2.13:1 | fail |
| `#636360` | `#f5f5f2` | 5.52:1 | AA |
| `#636360` | `#edede9` | 5.13:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist Variable | `--font-body` | webfont | 400, 500, 600 | Headings, body copy, navigation, links, buttons, and product interface text. | Inter |
| Geist Mono Variable | `--font-mono` | webfont | 400, 500 | Uppercase eyebrow labels and compact code-like details. | IBM Plex Mono |

- **Geist Variable:** Regular weights dominate; headlines are large and lightly tracked, while interface copy stays compact and clear.
- **Geist Mono Variable:** Used sparingly at small sizes; eyebrow labels use medium weight, uppercase, and expanded tracking.

### Type scale — Custom (ratio ≈ 1.84, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 400 | 1.1 | -0.02em | — | Geist Variable | Large, regular-weight hero headline with tight tracking. |
| h2 | 18px | 400 | 1.56 | 0 | — | Geist Variable | Section headings and supporting display copy. |
| body | 13px | 400 | 1.38 | 0 | — | Geist Variable | Compact descriptive copy, feature explanations, and interface text. |
| caption | 12px | 400 | 1.33 | 0 | — | Geist Variable | Small labels and supporting details within product examples. |
| button | 12px | 400 | 1.83 | 0 | — | Geist Variable | CTA and compact control labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Geist Variable | Top navigation labels and footer navigation. |
| link | 14px | 500 | 1.43 | 0 | — | Geist Variable | Inline actions and text links, slightly emphasized over body. |
| eyebrow | 12px | 500 | 1.33 | 0.12em | uppercase | Geist Mono Variable | Uppercase monospace section labels and category markers. |
| code | 11px | 400 | 1.33 | 0 | — | Geist Mono Variable | Small monospace technical or code-style interface details. |

## Spacing & layout

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

A centered page shell uses the measured 1104px maximum width, with left-aligned editorial copy and two-column arrangements where product previews accompany text. The hero has generous open space before a broad interface image. Below, feature narratives alternate between concise copy, small cards, and wide product frames. Sections are separated by spacious vertical gaps, keeping the long page airy rather than dense. A full-width dark enterprise band provides the principal rhythm change; FAQ, CTA, and footer return to the light canvas.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `12px` · media `3px` · badge `6px` · nav `4px` · link `12px` · xs `1px` · sm `2px` · md `3px` · lg `4px` · xl `6px` · 2xl `8px` · pill `9999px`
- Shadow `lg` (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, oklch(0.24 0.005 106 / 0.04) 0px 1px 0px 0px, oklch(0.24 0.005 1`
- Shadow `hairline` (button, other, 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(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md` (other, card, 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, oklch(0.24 0.005 106 / 0.18) 0px 8px 24px -8px`
- Shadow `sm` (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(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline-2` (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(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page favors flat surfaces and thin borders over pronounced depth. Pale and white cards are separated with #dededa hairlines; selected product windows use subtle, soft shadows for separation. Rounded image and card frames organize layers without glossy effects. Keep shadows understated and reserve stronger visual contrast for the dark section and CTA buttons.

## Imagery

Product UI screenshots are the dominant imagery: wide application windows, document previews, tables, workflow cards, and mobile or chat examples. Many are framed by rounded panels over muted landscape imagery, while some card grids show interface snippets directly. The hero includes fine, low-contrast chart-like linework. Treat screenshots as product evidence, not decoration; preserve their crisp details and keep surrounding colors restrained.

## Components

### Primary CTA

Compact dark button using #1f1f1d against #f5f5f2, with an 8px measured radius and medium Geist text.

### Text action

Unfilled inline action beside the main CTA; muted slate-blue link color and a small directional arrow.

### Product preview frame

Large application screenshots sit in rounded frames with restrained borders and occasional soft window shadow.

### Workflow card

White or pale card with a thin neutral border, compact copy, and functional interface details rather than ornament.

### Eyebrow label

Small uppercase Geist Mono label with expanded tracking, introducing sections such as enterprise or workflow features.

### Status badge

Compact rounded status pill, using pale blue-gray background and slate text for interface state.

### Measured component styles

- **Primary button** (“Request a demo”): background #1f1f1d · text #f5f5f2 · border 1px solid · radius 8px · padding 0px 10px · 500 14px Geist Variable
- **Secondary button** (“New chat”): background #dededa · text #1f1f1d · radius 8px · padding 6px 8px · 400 13px Geist Variable
- **Link** (“Expenses Submit expense reports Receipts”): background #ffffff · text #1f1f1d · border 1px solid #dededa · radius 12px · padding 16px · 400 16px Geist Variable
- **Input** (“Summarize the renewal risk across our to”): transparent background · text #1f1f1d · radius 0px · padding 0px · 400 14px Geist Variable
- **Card** (“Altitude New chat Workflows Automations ”): background #f5f5f2 · text #1f1f1d · border 1px solid #dededa · radius 16px · padding 0px · 400 13px Geist Variable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“A”): background #edede9 · text #636360 · radius 0px · padding 0px 4px · 400 11px Geist Variable
- **Navigation item** (“Sherpa”): transparent background · text #4d4d4a · radius 4px · padding 0px · 400 14px Geist Variable

## Do

- Use #f5f5f2 as the dominant page canvas.
- Set headings in large, regular-weight Geist-style sans-serif.
- Keep copy and navigation aligned to a centered page shell.
- Use #dededa for quiet card and control borders.
- Show product interfaces in broad, softly rounded frames.
- Reserve #19160f for the enterprise contrast section.
- Keep warm accent colors rare and subordinate.

## Don't

- Do not introduce saturated gradients or vivid decorative color.
- Do not crowd sections with dense, edge-to-edge copy.
- Do not add heavy shadows to every card.
- Do not make the interface screenshots look like generic illustrations.
- Do not use the dark section treatment across the whole page.
- Do not replace the restrained text hierarchy with bold display styling.

## Agent prompt

Build a new AI product page in Altitude’s quiet, product-led style. Use Warm Canvas (#f5f5f2) for the main page, Charcoal Ink (#1f1f1d) for headings and dark CTA buttons, and Quiet Hairline (#dededa) for restrained borders. Use Paper White (#ffffff) and Stone Surface (#edede9) for interface cards. Set a spacious centered content shell, left-aligned editorial copy, compact navigation, and large product screenshots in softly rounded frames. Use regular-weight Geist-like sans-serif typography, with small uppercase monospace eyebrow labels. Make one full-width Night Umber (#19160f) section a deliberate contrast point. Keep the overall treatment flat, with subtle shadows only where a product frame needs separation; avoid decorative gradients and excessive accent color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Light, spacious hero followed by a wide product preview and a long sequence of feature stories. | Primary demo CTA, Secondary product link, Product UI as proof | Centered content shell, Large left-aligned headline, Rounded screenshot frames, Pale neutral canvas |
| 2 | integrations | Full-width dark band with introductory copy, a wide admin interface preview, and compact system cards. | Enterprise trust cues, System capability overview, Admin controls preview | Night Umber background, Light text, Product screenshot, Grid of dark cards |
| 3 | footer | Light FAQ and demo panel lead into a multi-column footer navigation. | Expandable FAQ rows, Demo conversion panel, Grouped footer links | Neutral canvas, Thin row dividers, White CTA card, Multi-column link grid |

## Source CSS custom properties (selected)

```css
--surface-chroma: 0;
--l-surface: 1;
--brand: oklch(46% .032 240);
--brand-muted: oklch(93.5% .0096 240);
--radius: .5rem;
--shadow-window: 0 1px 0 oklch(24% .005 106/.04), 0 16px 40px -16px oklch(24% .005 106/.22);
--shadow-pop: 0 8px 24px -8px oklch(24% .005 106/.18);
--background: oklch(.97 .005 106);
--foreground: oklch(.24 .005 106);
--card-foreground: oklch(.24 .005 106);
--popover-foreground: oklch(.24 .005 106);
--primary: oklch(.24 .005 106);
--primary-foreground: oklch(.97 .005 106);
--secondary: oklch(.945 .005 106);
--secondary-foreground: oklch(.24 .005 106);
--muted-foreground: oklch(.5 .005 106);
--accent: oklch(.945 .005 106);
--accent-foreground: oklch(.24 .005 106);
--destructive-foreground: oklch(.97 .005 106);
--brand-foreground: oklch(.97 .005 106);
--border: oklch(.9 .005 106);
--sidebar-foreground: oklch(.24 .005 106);
--sidebar-primary: oklch(46% .032 240);
--sidebar-primary-foreground: oklch(.97 .005 106);
--sidebar-accent: oklch(93.5% .0096 240);
--sidebar-accent-foreground: oklch(.24 .005 106);
--sidebar-border: oklch(.9 .005 106);
--file-text: oklch(54.6% .215 262.9);
--file-tile-foreground: oklch(100% 0 0);
```

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