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

# Sana · Design System

> Quiet monochrome, vivid product storytelling

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

Sana’s homepage pairs restrained typography and spacious monochrome sections with large, tactile product imagery. Bright blue and orange CTAs provide rare, deliberate points of emphasis.

## North star

Keep the interface quiet and spacious so that oversized product imagery and a few precise CTA accents do the talking.

## Overview

The page builds its identity from a mostly white and soft-gray canvas, with near-black text carrying the navigation, headings, and most copy. Pale gray and faint green-gray section bands distinguish product stories without relying on heavy outlines. Blue and orange appear as sparing CTA accents; warm or saturated colors inside photographs and product mockups belong to the imagery, not the core brand palette. Sana Sans is used throughout, from a very large, centered hero headline to compact navigation and body copy. Tight tracking and restrained weights keep the type clean and composed. The composition alternates open text-led introductions with broad product showcases, customer proof, and an event collage. Large photographic scenes give the page its emotional and material texture, while generous gaps keep each section distinct. Rounded pill buttons and mostly flat surfaces preserve a friendly, contemporary finish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Near Ink | `#090909` | `--color-near-ink` | brand | Primary headings, navigation, body copy, and footer text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, open sections, and white text on dark buttons. |
| Soft Stone | `#efefed` | `--color-soft-stone` | surface | Broad learning-product section band and its showcase background. |
| Quiet Sage | `#f3f6f2` | `--color-quiet-sage` | surface | Pale green-gray background for the enterprise AI product section. |
| Fine Silver | `#e5e5e5` | `--color-fine-silver` | semantic | Subtle section dividers and outlined location badge. |
| Footer Gray | `#d9d9d9` | `--color-footer-gray` | neutral | Sparse footer border detail; secondary structural color rather than a prominent brand surface. |
| Signal Blue | `#0055ff` | `--color-signal-blue` | accent | Bright blue Explore CTA in the learning-product section. |
| Signal Orange | `#ff6400` | `--color-signal-orange` | accent | Orange Explore CTA in the enterprise AI section. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Book an intro button and dark link or text treatments; distinguish from the primary near-black text token. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efefed` (Soft Stone) · `--color-surface-2` → `#f3f6f2` (Quiet Sage) · `--color-text` → `#090909` (Near Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (Pure Black) · `--color-border` → `#e5e5e5` (Fine Silver) · `--color-accent` → `#0055ff` (Signal Blue) · `--color-accent-2` → `#ff6400` (Signal Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#090909` | `#ffffff` | 19.91:1 | AAA |
| `#090909` | `#efefed` | 17.29:1 | AAA |
| `#090909` | `#f3f6f2` | 18.28:1 | AAA |
| `#ffffff` | `#efefed` | 1.15:1 | fail |
| `#ffffff` | `#f3f6f2` | 1.09:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#efefed` | 18.24:1 | AAA |
| `#000000` | `#f3f6f2` | 19.28:1 | AAA |
| `#0055ff` | `#ffffff` | 5.61:1 | AA |
| `#0055ff` | `#efefed` | 4.87:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sana Sans | `--font-body` | webfont | 450, 400, 500 | Used across display headlines, headings, navigation, body copy, links, and buttons. | Inter |

- **Sana Sans:** Use clean sans-serif forms, compact negative tracking for display and body text, and restrained regular-to-medium weights; no uppercase transformation.

### Type scale — Custom (ratio ≈ 1.81, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 83px | 400 | 0.95 | -0.01em | — | Sana Sans | Oversized hero headline introducing the company. |
| h1 | 48px | 500 | 1 | -0.02em | — | Sana Sans | Primary section headlines, including product and event titles. |
| h2 | 32px | 500 | 1.1 | -0.01em | — | Sana Sans | Secondary feature and testimonial headings. |
| body | 14px | 450 | 1.4 | -0.011em | — | Sana Sans | Supporting product descriptions and explanatory copy. |
| button | 16px | 400 | 1.4 | -0.01em | — | Sana Sans | CTA labels such as Explore and video actions. |
| nav | 14px | 400 | 1.4 | 0 | — | Sana Sans | Top navigation labels and footer navigation. |
| link | 14px | 450 | 1.4 | -0.011em | — | Sana Sans | Inline actions and supporting navigation links. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 7, 8, 10, 12, 16, 20, 24, 32, 40, 43, 48, 64, 75, 96 px.
- Section rhythm 32px · element gap 20px · card padding — · max content width —.

The page uses broad, mostly single-column section compositions, with centered alignment for the hero and product introductions. A seven-logo client strip creates a compact bridge from the opening message into the product showcase. Product sections alternate expansive media with concise copy and feature groupings; the later event collage and footer introduce more varied alignment and columns. The measured data does not specify a maximum page width, so preserve the screenshot’s broad canvas and generous side breathing room without assuming a fixed container dimension. The overall density is comfortable, with clear vertical separation between major bands.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · nav `6px` · link `9999px` · xs `6px` · sm `16px` · pill `9999px`
- Shadow `md` (link): `rgba(10, 10, 10, 0.05) 0px 0px 0px 1px, rgba(10, 10, 10, 0.08) 0px 8px 16px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

Most sections are flat, defined by background bands and open spacing rather than card shadows. Hairline borders use #e5e5e5, with #d9d9d9 appearing as a quiet footer detail. Rounded buttons and badges provide the main shape language. A single measured link uses a subtle shadow, so keep elevation rare and low-contrast rather than applying it across cards.

## Imagery

Large, realistic product scenes carry much of the visual storytelling: a laptop atop books in the learning section, a customer portrait in the testimonial, and a person using a tablet in the enterprise section. The event area mixes portraits with vivid graphic tiles. Keep imagery broad and editorially composed, with UI visible as part of photographed or rendered scenes. Strong colors within those scenes are illustrative content, not replacements for the restrained interface palette.

## Components

### Top navigation

Minimal text-led navigation on white, with Sana branding at left and a black pill-shaped Book an intro action at right.

### Hero

Centered, oversized near-black headline with a short muted supporting sentence and ample white space.

### Customer logo strip

A horizontal row of customer marks placed between the hero and the first pale-gray product band.

### Explore CTA

Pill button with white text; the learning section uses #0055ff and the enterprise AI section uses #ff6400.

### Product showcase

Large product-led visual paired with concise feature descriptions and a small action link or pill.

### Testimonial feature

Wide photographic customer quote with attribution and a compact Watch video action.

### Footer

Three-column link directory with newsletter entry, company mark, and restrained lower utility links.

### Measured component styles

- **Primary button** (“Explore”): background #0055ff · text #ffffff · radius 32px · padding 10px 16px 7px 16px · 400 16px Sana Sans
- **Secondary button** (“Explore”): background #ff6400 · text #ffffff · radius 32px · padding 10px 16px 7px 16px · 400 16px Sana Sans
- **Link** (“Watch video”): transparent background · text #000000 · radius 32px · padding 10px 16px 7px 16px · 400 16px Sana Sans
- **Input**: transparent background · text #090909 · radius 0px · padding 0px · 400 14px Sana Sans
- **Badge** (“New York”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 15px · padding 5px 10px 0px 10px · 400 15px Sana Sans
- **Navigation item** (“Products Mission Careers Book an intro”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 16px Sana Sans

## Do

- Use Sana Sans or a close clean sans-serif throughout.
- Keep the canvas white and use pale bands to separate product stories.
- Give the hero headline strong scale and centered alignment.
- Use near-black for the primary text hierarchy.
- Reserve blue and orange for isolated CTA emphasis.
- Let large product imagery carry visual weight.
- Keep borders subtle and elevation uncommon.

## Don't

- Do not turn every section into a bordered card.
- Do not use bright accents as large page backgrounds.
- Do not crowd the hero with extra labels or controls.
- Do not treat colors inside product imagery as core UI palette.
- Do not use heavy shadows to separate ordinary content.
- Do not force a fixed maximum width absent measured evidence.

## Agent prompt

Build a new page in Sana’s restrained AI-company style. Use #ffffff as the main canvas, #090909 for headings and copy, and broad section bands in #efefed or #f3f6f2. Set all text in Sana Sans, or Inter as a free substitute, with clean sans-serif forms, tight tracking, and regular-to-medium weights. Start with a spacious, centered display headline and short supporting copy; then alternate concise product introductions with expansive, realistic product imagery and compact feature groupings. Use #0055ff or #ff6400 only for selective pill-shaped CTA buttons with white text. Keep navigation minimal, borders in #e5e5e5 restrained, and shadows rare. Favor flat surfaces, generous separation, and editorial image compositions; keep photographic colors inside the imagery rather than extending them into the interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting sentence on a white canvas. | Clear value proposition | Oversized sans-serif headline, Centered composition, Open white space |
| 2 | logo-cloud | Seven customer marks in one horizontal row. | Customer proof | Logo strip, Monochrome marks, White background |
| 3 | feature-grid | Centered product intro above four feature columns on a pale gray band. | Explore CTA, Feature scan | #efefed section band, Blue pill CTA, Icon-led feature columns |
| 4 | product-showcase | Broad single-column product scene filling an extended pale gray section. | Product demonstration | Large product imagery, Embedded UI mockup, Soft neutral backdrop |
| 5 | testimonials | Wide photographic testimonial with quote, attribution, and action. | Customer quote, Watch video action | Full-width portrait imagery, White quote text, Compact pill link |
| 6 | feature-grid | Centered intro and four feature columns on a pale green-gray background. | Explore CTA, Feature overview | #f3f6f2 section band, Orange pill CTA, Compact icon labels |
| 7 | product-showcase | Tall, single-column scene within the pale green-gray product section. | Product in use | Large lifestyle photograph, Tablet UI, Soft light background |
| 8 | gallery | Left-aligned event title with an asymmetric collage of images and graphic tiles. | Event discovery, Event recap link | Mixed-size collage, Bright graphic tile, White canvas |
| 9 | footer | Three navigation columns with a brand area and lower utility row. | Newsletter signup, Grouped site navigation | Small text links, Multiple columns, Subtle footer divider |

## Source CSS custom properties (selected)

```css
--easeOut: cubic-bezier(0.16, 1, 0.3, 1);
--easeInOut: cubic-bezier(0.83, 0, 0.17, 1);
```

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