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

# Sana · Design System

> Quiet editorial clarity for AI at work

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

Sana’s homepage pairs restrained editorial typography with generous white space and large product imagery. A centered statement leads into two rounded product panels, balancing the learning platform and AI agents as equally prominent offerings.

## North star

Keep the interface restrained and spacious so that one strong headline and large, authentic product imagery do the work.

## Overview

The page uses a white canvas and a compact ink-colored interface, letting content and product imagery carry the visual interest. The main heading is oversized, centered, and tightly tracked; supporting copy and navigation remain much smaller and subdued. The product area is arranged as two broad, side-by-side panels with soft pale backgrounds and generous image space. Photography and device imagery bring in color—the red clothing, warm skin tones, and vivid yellow learning content—but these colors belong to the showcased products, not the core brand palette. Rounded black pill buttons provide the strongest interface contrast and clearly mark exploration actions. The overall composition is deliberately sparse: a thin, quiet navigation row, a focused hero, then a substantial visual product showcase. Below, the footer returns to small, understated text and grouped links rather than introducing a new decorative system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the light text used on dark pill buttons. |
| Deep Ink | `#0a1217` | `--color-deep-ink` | brand | Primary headings, navigation, body text, and filled sign-in and Explore buttons. |
| Quiet Slate | `#6c7174` | `--color-quiet-slate` | neutral | Muted supporting heading and descriptive text, including product subtitles. |
| Footer Ash | `#84888b` | `--color-footer-ash` | neutral | Low-emphasis footer text and secondary legal details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#0a1217` (Deep Ink) · `--color-text-muted` → `#6c7174` (Quiet Slate) · `--color-text-subtle` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a1217` | `#ffffff` | 18.89:1 | AAA |
| `#6c7174` | `#ffffff` | 4.94:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sana Sans | `--font-body` | webfont | 450, 400, 500 | Used throughout for display headline, navigation, product labels, body copy, buttons, and footer. | Inter |

- **Sana Sans:** Measured display text is regular weight with tight negative tracking; supporting text is compact and restrained. Preserve sentence case.

### Type scale — Custom (ratio ≈ 2.278, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 83px | 400 | 0.95 | -0.03em | — | Sana Sans | Oversized centered homepage headline. |
| h1 | 20px | 450 | 1.2 | 0 | — | Sana Sans | Compact heading role for secondary section or product titles. |
| body | 16px | 400 | 1.4 | -0.01em | — | Sana Sans | Hero subtitle and standard descriptive copy. |
| caption | 14px | 450 | 1.5 | 0 | — | Sana Sans | Small supporting labels and footer details. |
| button | 14px | 450 | 1.5 | 0 | — | Sana Sans | Explore and Sign in pill-button labels. |
| nav | 14px | 450 | 1.5 | 0 | — | Sana Sans | Primary navigation links and compact header items. |

OpenType features in use: `"lnum", "tnum"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 8, 10, 12, 16, 18, 20, 24, 30, 32, 46, 52, 56, 109 px.
- Section rhythm 32px · element gap 10px · card padding — · max content width 1376px.

A compact horizontal header sits above a centered hero, followed by a two-column product showcase. The measured page max width is 1376px; at the 1440px reference viewport, the paired panels nearly span the available content area with a narrow central gutter. Keep the main headline centered and the product-card content aligned to each panel’s upper edge. The rhythm moves from open hero space to dense, image-led panels, then to a small multi-column footer. Overall density is compact in controls but airy around major content.

## Shape & elevation

- Radius: button `9999px` · nav `6px` · xs `6px` · sm `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The page is largely flat, with no measured shadow system. Large pale product panels separate themselves from the white canvas through subtle tonal contrast and rounded corners, not visible borders. Black pill buttons sit directly within the layout without added depth effects. Keep layering simple and let image crops create the primary sense of depth.

## Imagery

The main showcase uses large photographic and product imagery: a laptop displaying a bright learning page on stacked books, alongside a person using a tablet. Images fill broad pale panels and remain prominent beneath small product labels. Their red, yellow, and warm neutral tones are image content, not additional interface colors. The visual treatment is natural and editorial rather than illustrative or heavily stylized.

## Components

### Header navigation

A sparse top row with the Sana wordmark, Products dropdown, Mission, Careers, and a dark pill-shaped Sign in action.

### Hero

Centered oversized display headline with a smaller muted sentence beneath it.

### Product showcase panels

Two broad side-by-side pale panels introduce Sana Learn and Sana AI agents with imagery, short subtitles, and Explore buttons.

### Explore button

Dark filled pill with white Sana Sans text; measured button typography is 14px, weight 450.

### Footer

Sana wordmark at left, compact grouped product and company links, and quiet legal text.

### Measured component styles

- **Primary button** (“Explore”): background #0a1217 · text #ffffff · border 1px solid · radius 24px · padding 8px 16px · 450 14px Sana Sans
- **Link**: transparent background · text #0a1217 · radius 0px · padding 0px · 400 16px Sana Sans
- **Navigation item** (“Overview”): transparent background · text #0a1217 · radius 0px · padding 0px · 450 14px Sana Sans

## Do

- Use a white canvas and reserve Deep Ink for primary interface text.
- Center the hero headline and keep its supporting sentence understated.
- Give product imagery most of the visual area in showcase panels.
- Use dark pill buttons with white labels for key actions.
- Keep navigation and footer typography compact and low-key.
- Let photographed product colors remain inside their image frames.

## Don't

- Do not add bright colors to the core interface palette.
- Do not crowd the hero with extra badges or decorative copy.
- Do not replace the paired showcase panels with a dense card grid.
- Do not add strong shadows or ornamental borders.
- Do not let footer links compete with the hero or product imagery.
- Do not treat yellow or red image content as brand UI colors.

## Agent prompt

Build a new page in Sana’s restrained editorial style. Use Gallery White (#ffffff) as the canvas and Deep Ink (#0a1217) for headings, navigation, body text, and filled pill actions; use Quiet Slate (#6c7174) and Footer Ash (#84888b) only for secondary text. Set the page in Sana Sans or a close sans-serif substitute such as Inter. Create a sparse header, a centered oversized headline with a short muted subheading, and a broad, image-led product area with pale rounded panels. Keep buttons compact, dark, and pill-shaped. Use generous space around the main heading, but keep navigation and footer details discreet. Product photography may carry richer colors, but do not echo those colors in interface controls. Avoid decorative shadows, gradients, and unnecessary card chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation, centered headline and subtitle, then two side-by-side product panels with a multi-column footer. | Primary navigation, Clear sign-in action, Product exploration links | Oversized centered heading, Dark pill buttons, Rounded pale image panels, Compact footer link groups |

## Source CSS custom properties (selected)

```css
--color-foreground-primary: #0a1217;
--color-foreground-secondary: #0a121799;
--color-foreground-secondary-solid: #686d70;
--color-foreground-muted: #0a121766;
--color-foreground-muted-solid: #5d5d5d;
--color-foreground-0: #0a121700;
--color-foreground-1: #0a121703;
--color-foreground-2: #0a121705;
--color-foreground-3: #0a121708;
--color-foreground-4: #0a12170a;
--color-foreground-5: #0a12170d;
--color-foreground-6: #0a12170f;
--color-foreground-7: #0a121712;
--color-foreground-8: #0a121714;
--color-foreground-9: #0a121717;
--color-foreground-10: #0a12171a;
--color-foreground-15: #0a121726;
--color-foreground-20: #0a121733;
--color-foreground-25: #0a121740;
--color-foreground-30: #0a12174d;
--color-foreground-35: #0a121759;
--color-foreground-40: #0a121766;
--color-foreground-45: #0a121773;
--color-foreground-50: #0a121780;
--color-foreground-55: #0a12178c;
--color-foreground-60: #0a121799;
--color-foreground-65: #0a1217a6;
--color-foreground-70: #0a1217b3;
--color-foreground-75: #0a1217bf;
--color-foreground-80: #0a1217cc;
--color-foreground-85: #0a1217d9;
--color-foreground-90: #0a1217e6;
--color-foreground-95: #0a1217f2;
--color-background-primary: #fff;
--color-background-secondary: #131314f5;
--color-background-secondary-hover: #131314ec;
--color-background-tertiary: #131314d9;
--color-background-tertiary-hover: #131314c2;
--color-background-muted: #1313141a;
--color-paper: #fafafa;
```

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