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

# Tana · Design System

> Quiet editorial clarity, energized by vivid product color

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

Tana presents an AI meeting platform through a calm, editorial layout with serif headlines and crisp sans-serif interface text. Pastel gradient fields and layered product imagery add color and motion without disrupting the predominantly near-white canvas.

## North star

Keep the page editorial and mostly near-white; let product imagery and interface details carry the vivid color.

## Overview

The page uses a near-white canvas (#fbfbfb) across nearly every section, giving the long homepage a continuous, quiet foundation. Near-black (#0c0805) anchors headlines, body copy, dark CTAs, and selected product panels; secondary text steps back in gray. Source Serif 4 supplies the expressive, tightly tracked headlines, while Inter keeps navigation, descriptions, labels, and interface mockups practical and legible. The hero places copy on the left and a dark download action on the right, then gives way to a wide call-interface scene framed by a soft pastel gradient. Later sections alternate concise editorial text with product UI, comparison-like visuals, and photography. Most content is left-aligned or split across columns, with centered statements used as pauses. Generous vertical gaps create a spacious rhythm. Fine gray rules and subtle shadows distinguish cards and floating UI, while the brighter reds and blues remain restrained accents or product-interface details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fbfbfb` | `--color-gallery-white` | surface | Dominant page canvas and the continuous background behind nearly all sections. |
| Quiet Gray | `#6a6a6a` | `--color-quiet-gray` | neutral | Muted supporting copy and footer text, secondary to near-black headings. |
| Warm Ink | `#0c0805` | `--color-warm-ink` | brand | Primary text, headings, dark download CTA, badges, and the inverse knowledge-graph panel. |
| Graphite Text | `#3a3a3a` | `--color-graphite-text` | neutral | Secondary navigation, inline links, and subdued labels. |
| Rule Gray | `#eeeeee` | `--color-rule-gray` | neutral | Subtle borders, card edges, and fine separators. |
| Brick Red | `#c0392b` | `--color-brick-red` | semantic | Rare badge detail in measured UI; not a defining page-wide brand color. |
| Cobalt Badge | `#3b5bdb` | `--color-cobalt-badge` | semantic | Rare badge or interface detail; appears within product UI rather than the page chrome. |
| Soft Divider | `#e5e5e5` | `--color-soft-divider` | neutral | Occasional section or card border detail, secondary to the near-white canvas. |
| Signal Coral | `#e5484d` | `--color-signal-coral` | accent | Small prominent accent button inside the interface; use sparingly. |
| Periwinkle Badge | `#5a6ac4` | `--color-periwinkle-badge` | semantic | Badge color found in product-interface details, not a core site color. |
| Clay Badge | `#b9835f` | `--color-clay-badge` | semantic | Small badge detail in mock UI; avoid using as a broad section color. |
| Sage Badge | `#6a9a7c` | `--color-sage-badge` | semantic | Small badge detail in mock UI; not a page-level color. |
| Muted Stone | `#9f9d9d` | `--color-muted-stone` | surface | Limited subdued surface or card detail, not the primary canvas. |
| Gradient Gray | `#a3a3a3` | `--color-gradient-gray` | neutral | Gradient or visual transition detail measured in section artwork. |
| Interface Blue | `#2b8fe6` | `--color-interface-blue` | accent | Blue interface accent and product UI detail; keep it contextual rather than global. |
| Shadow Gray | `#717171` | `--color-shadow-gray` | neutral | Muted gradient or visual treatment detail, not a core text color. |

### Semantic aliases

`--color-canvas` → `#fbfbfb` (Gallery White) · `--color-surface` → `#9f9d9d` (Muted Stone) · `--color-surface-2` → `#0c0805` (Warm Ink) · `--color-text` → `#0c0805` (Warm Ink) · `--color-text-muted` → `#fbfbfb` (Gallery White) · `--color-text-subtle` → `#6a6a6a` (Quiet Gray) · `--color-border` → `#eeeeee` (Rule Gray) · `--color-accent` → `#e5484d` (Signal Coral) · `--color-accent-2` → `#2b8fe6` (Interface Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c0805` | `#fbfbfb` | 19.28:1 | AAA |
| `#0c0805` | `#9f9d9d` | 7.4:1 | AAA |
| `#fbfbfb` | `#9f9d9d` | 2.61:1 | fail |
| `#fbfbfb` | `#0c0805` | 19.28:1 | AAA |
| `#6a6a6a` | `#fbfbfb` | 5.23:1 | AA |
| `#6a6a6a` | `#9f9d9d` | 2:1 | fail |
| `#6a6a6a` | `#0c0805` | 3.69:1 | AA-large |
| `#e5484d` | `#fbfbfb` | 3.78:1 | AA-large |
| `#e5484d` | `#9f9d9d` | 1.45:1 | fail |
| `#e5484d` | `#0c0805` | 5.1:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.7))`
- `linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55))`
- `linear-gradient(90deg, rgb(251, 251, 251), rgb(227, 234, 246) 22%, rgb(211, 222, 241) 50%, rgb(227, 234, 246) 78%, rgb(251, 251, 251))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, links, captions, labels, and product-interface text. | Roboto |
| Source Serif 4 | `--font-display` | webfont | 500, 400 | Editorial page headlines and section titles. | Lora |

- **Inter:** Use practical sans-serif text with regular body weight and stronger compact captions; eyebrow labels are uppercase with lightly expanded tracking.
- **Source Serif 4:** Medium, restrained serif headlines with tight negative tracking; sentence case rather than all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.1 | -0.045em | — | Source Serif 4 | Primary hero statement, large editorial serif headline. |
| h2 | 32px | 500 | 1.15 | -0.045em | — | Source Serif 4 | Major section headlines and centered narrative statements. |
| h3 | 26px | 500 | 1.2 | -0.045em | — | Source Serif 4 | Subsection titles and feature-card headlines. |
| h4 | 22px | 400 | 1.3 | -0.045em | — | Source Serif 4 | Smaller editorial headings within feature or supporting content. |
| body | 15px | 400 | 1.5 | 0 | — | Inter | Paragraphs explaining product behavior, benefits, and security. |
| caption | 13px | 600 | 1.3 | 0 | — | Inter | Compact interface labels and supporting card metadata. |
| link | 15px | 400 | 1.5 | 0 | — | Inter | Inline navigation and secondary browser-start actions. |
| eyebrow | 11px | 400 | 1.5 | 0.08em | uppercase | Inter | Small uppercase category labels above feature content. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 24 px.
- Section rhythm 96px · element gap 8px · card padding 13px · max content width —.

A long, spacious homepage sits on a consistent near-white canvas, with content arranged in one-, two-, and multi-column section patterns. The hero is left-copy/right-action, followed by a wide visual product demonstration. Feature sections alternate text and interface artwork; centered headings punctuate the flow. Some sections use horizontal card rows or comparison panels. The measured data provides no fixed page maximum width, so preserve broad margins and responsive columns rather than assuming a numeric container. Large vertical pauses separate major narratives; denser interface details stay within cards.

## Shape & elevation

- Radius: button `9999px` · card `14px` · badge `9999px` · nav `14px` · link `8px` · xs `6px` · sm `8px` · md `11px` · lg `14px` · xl `20px` · 2xl `23px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.12) 0px 0px 0px 0.5px inset`
- Shadow `lg` (other): `rgba(28, 32, 36, 0.14) 0px 10px 30px 0px, rgba(28, 32, 36, 0.06) 0px 1px 2px 0px`
- Shadow `inset-2` (nav): `color(srgb 0.0470588 0.0313726 0.0196078 / 0.35) 0px 0px 0px 1px inset`
- Shadow `xl` (card): `rgba(12, 8, 5, 0.08) 0px 4px 10px 0px, rgba(12, 8, 5, 0.17) 0px 44px 92px 0px`
- Shadow `xl-2` (card): `rgba(20, 22, 36, 0.12) 0px 2px 6px -2px, rgba(20, 22, 36, 0.3) 0px 24px 48px -20px`
- Shadow `inset-3` (other): `rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset`
- Motion: standard transition `0.12s ease` on interactive elements.

Most sections are flat against the canvas, with light hairlines defining occasional card boundaries. Product cards and floating interface panels gain separation through soft, broad shadows and layered overlap rather than heavy outlines. Rounded white UI surfaces sit above gradient fields; dark panels provide contrast without requiring elaborate elevation.

## Imagery

Use realistic video-call photography in the opening product scene and selected use-case cards, with interface mockups layered over or beside it. Product visuals include crisp white cards, tiny status labels, and dark text. Pastel gradients frame several mockups, while the meeting-hours section uses cinematic, darkened photography and a text overlay. Keep photography framed as product context, not decorative stock imagery.

## Components

### Top navigation

Minimal horizontal header with the Tana mark, centered text links, account actions, and a compact outlined Download pill.

### Hero download action

Near-black rounded download button with white platform icon and label; a smaller graphite browser-start link sits beneath.

### Product interface cards

White rounded UI cards with compact Inter labels, status badges, message content, and subtle shadow over colorful gradient artwork.

### Feature split

Editorial serif heading and short sans-serif copy paired with a product screenshot or interface visual in an opposing column.

### Use-case card row

Horizontal image-led cards with dark photographic treatment, small category eyebrow, and white serif copy over the image.

### Security feature cards

Light, restrained columns with small line icons, concise bold lead-ins, and muted explanatory text.

### FAQ accordion

Two-column FAQ area with a section title and short introduction at left; individual questions align with compact disclosure indicators.

### Measured component styles

- **Primary button** (“Download for Windows”): background #0c0805 · text #ffffff · radius 14px · padding 14px 28px · 500 17px Inter
- **Secondary button** (“Get Tana →”): transparent background · text #ffffff · border 1px solid #fcfcfc · radius 999px · padding 8px 14px · 400 15px Inter
- **Link** (“MCP”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Tana Researched AI monetization in 2026.”): background #ffffff · text #0c0805 · radius 11.2px · padding 11.2px 14px · 400 14px Inter
- **Badge** (“Bug”): background #f6f6f6 · text #3a3a3a · radius 999px · padding 2.3px 6.4px · 400 9.2px Inter
- **Navigation item** (“The cost of meetings Pricing Log in Down”): transparent background · text #0c0805 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use near-white as the page-wide foundation.
- Set major headlines in Source Serif 4.
- Keep interface and body text in Inter.
- Use Warm Ink for primary copy and download actions.
- Pair concise text with concrete product visuals.
- Reserve gradients for mockup framing and visual transitions.

## Don't

- Do not turn the page into a dark theme.
- Do not apply accent colors to large text areas.
- Do not make every section a card grid.
- Do not use oversized, heavy sans-serif headlines.
- Do not add strong borders around every panel.
- Do not treat mockup badge colors as the site palette.

## Agent prompt

Build a new Tana-style page on a continuous Gallery White (#fbfbfb) canvas. Use Warm Ink (#0c0805) for primary text and dark calls to action, Graphite Text (#3a3a3a) for secondary links, and Quiet Gray (#6a6a6a) for muted explanations. Set editorial headings in Source Serif 4 with tight tracking; use Inter for navigation, paragraphs, labels, and interface details. Structure the page as spacious editorial sections, alternating concise copy with realistic product UI or contextual photography. Use subtle Rule Gray (#eeeeee) dividers, rounded white interface cards, and soft shadows only where panels overlap. Pastel gradients may frame product mockups; Signal Coral (#e5484d) and Interface Blue (#2b8fe6) should remain small interface accents. Preserve responsive columns and generous breathing room without inventing fixed container measurements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and supporting copy, with a right-side download action. | Primary platform download, Secondary browser-start link | Editorial serif headline, Near-black CTA |
| 2 | product-showcase | Wide meeting-call visual with layered action and message cards. | Show outcomes in context, Surface generated actions | Video-call imagery, Floating white interface cards, Pastel gradient backdrop |
| 3 | integrations | Dense horizontal collection of partner and tool marks. | Show supported services, Scan familiar integrations | Repeated logo row, Compact labels |
| 4 | other | Single centered statement with substantial surrounding whitespace. | Audience positioning | Centered serif heading |
| 5 | feature-split | Text block paired with a product knowledge or meeting-memory visual. | Explain persistent context, Illustrate retrieval | Serif section title, Product interface visual |
| 6 | feature-split | Two-column copy and product output visual, alternating image and text placement. | Show completed deliverables, Connect meeting to action | Compact feature list, Layered interface screenshot |
| 7 | feature-split | Editorial text alongside a conversational assistant interface visual. | Answer live questions, Recall previous context | Serif title, Gradient-framed mockup |
| 8 | comparison | Centered heading above side-by-side schedule comparison panels. | Contrast before and after, Make time savings legible | Two-column schedule boards, Blue event blocks |
| 9 | feature-grid | Centered copy and platform marks with download and browser actions. | Reassure about compatibility, Offer download choice | Platform icons, Centered CTA stack |
| 10 | feature-split | Centered title above two contrasting explanatory panels. | Explain two product layers, Contrast assistant and graph | Light feature panel, Dark inverse panel |
| 11 | gallery | Multi-column, image-led use-case cards in a horizontal gallery. | Browse by work context, Show practical outputs | Photographic cards, Overlay copy, Category eyebrows |
| 12 | feature-grid | Three restrained feature columns followed by a row of compliance and capability labels. | Address security concerns, Summarize controls | Line icons, Compact proof points, Light cards |
| 13 | video | Full-width cinematic image with white text overlaid at the left. | Make the problem relatable, Link to meeting-cost information | Darkened photo treatment, Large serif overlay copy |
| 14 | faq | Two-column section with an introduction at left and stacked questions at right. | Answer purchase concerns, Expand questions on demand | Simple accordion rows, Disclosure indicators |
| 15 | cta | Large product mark or visual paired with a text-and-action column. | Offer self-serve product details, Prompt an agent-based follow-up | Serif headline, Compact description action |
| 16 | footer | Multi-column link groups with brand, company, legal, and social details. | Navigate product areas, Access company and legal links | Small muted link lists, Compact social row |

## Source CSS custom properties (selected)

```css
--gray-surface: #ffffffcc;
--mauve-surface: #ffffffcc;
--slate-surface: #ffffffcc;
--sage-surface: #ffffffcc;
--olive-surface: #ffffffcc;
--sand-surface: #ffffffcc;
--amber-surface: #fefae4cc;
--blue-surface: #f1f9ffcc;
--bronze-surface: #fdf5f3cc;
--brown-surface: #fbf8f4cc;
--crimson-surface: #fef5f8cc;
--cyan-surface: #eff9facc;
--gold-surface: #f9f8efcc;
--grass-surface: #f3faf3cc;
--green-surface: #f1faf4cc;
--indigo-surface: #f5f8ffcc;
--iris-surface: #f6f6ffcc;
--jade-surface: #f1faf5cc;
--lime-surface: #f6f9f0cc;
--mint-surface: #effaf8cc;
--orange-surface: #fff5e9cc;
--pink-surface: #fef5facc;
--plum-surface: #fdf5fdcc;
--purple-surface: #faf5fecc;
--red-surface: #fff5f5cc;
--ruby-surface: #fff5f6cc;
--sky-surface: #eef9fdcc;
--teal-surface: #f0faf8cc;
--tomato-surface: #fff6f5cc;
--violet-surface: #f9f6ffcc;
--yellow-surface: #fefbe4cc;
```

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