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

# Slite · Design System

> Warm, spacious storytelling for trusted team knowledge

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

Slite’s homepage pairs a warm, nearly monochrome canvas with confident typography and orange accents to make an AI knowledge product feel approachable. Product interface mockups, soft-tinted panels, and restrained cards explain the workflow while generous whitespace keeps the long page calm.

## North star

Keep the page warm and spacious, and let clear product-interface evidence—not decorative effects—carry the story.

## Overview

The visual strategy starts with a warm ivory canvas (#fdf9f4) carried almost continuously from hero through footer, so the page reads as one calm editorial surface rather than stacked contrasting bands. Garnett headlines are centered, dark, and substantial; UniversalSans handles navigation, supporting copy, and interface labels with compact, practical clarity. A coral-orange accent identifies the main CTA and selected product details, while muted blue appears sparingly in links and testimonial panels. The layout alternates centered claims with broad product demonstrations and soft peach feature panels, using a spacious vertical rhythm and a measured content width. UI mockups, status badges, integrations, and annotated document states provide the visual evidence; they are framed as layered white cards rather than decorative photography. Hairline borders and subtle shadows separate these cards from the canvas without making the experience feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ivory | `#fdf9f4` | `--color-warm-ivory` | brand | Dominant page canvas, continuing across nearly every section and into the footer. |
| Charcoal Ink | `#2d2f34` | `--color-charcoal-ink` | neutral | Primary headlines, high-emphasis copy, and the dark header CTA. |
| Coral Signal | `#f67748` | `--color-coral-signal` | accent | Primary hero CTA, highlighted controls, small badges, and testimonial emphasis. |
| Slate Text | `#3f434a` | `--color-slate-text` | neutral | Navigation, secondary headings, card copy, and supporting interface text. |
| Muted Slate | `#5e646e` | `--color-muted-slate` | neutral | Lower-emphasis supporting text and small labels. |
| Alert Red | `#d0453a` | `--color-alert-red` | semantic | Negative change indicators and warning-style badges inside product mockups. |
| Verified Green | `#4c9a41` | `--color-verified-green` | semantic | Positive verification and change indicators inside product mockups. |
| Mist Hairline | `#ecedef` | `--color-mist-hairline` | neutral | Subtle card, control, and interface borders. |
| Grid Gray | `#9da3af` | `--color-grid-gray` | semantic | Fine grid lines and gradient details in product illustrations, not a defining page color. |
| Pure Surface | `#ffffff` | `--color-pure-surface` | surface | Product mockup windows, cards, and small interface surfaces. |
| Indigo Badge | `#5a5ab8` | `--color-indigo-badge` | semantic | Occasional status or product-interface badge; not a dominant brand color. |
| Clay Border | `#d3775d` | `--color-clay-border` | semantic | Selected pricing-card outline in measured component data. |
| Warm Divider | `#d7d4d0` | `--color-warm-divider` | neutral | Occasional fine divider within interface or supporting visual details. |
| Graphite Detail | `#4a4a4a` | `--color-graphite-detail` | neutral | Minor supporting text inside measured content. |
| Cool Gray Detail | `#6a707c` | `--color-cool-gray-detail` | neutral | Minor secondary text, chiefly within product-interface details. |
| Stone Detail | `#989592` | `--color-stone-detail` | neutral | Subtle low-emphasis text in interface or illustration details. |
| Soft Link Blue | `#74a6f1` | `--color-soft-link-blue` | accent | Sparingly used link and testimonial-panel accent. |

### Semantic aliases

`--color-canvas` → `#fdf9f4` (Warm Ivory) · `--color-surface` → `#ffffff` (Pure Surface) · `--color-text` → `#2d2f34` (Charcoal Ink) · `--color-text-muted` → `#3f434a` (Slate Text) · `--color-text-subtle` → `#5e646e` (Muted Slate) · `--color-border` → `#ecedef` (Mist Hairline) · `--color-accent` → `#f67748` (Coral Signal) · `--color-accent-2` → `#74a6f1` (Soft Link Blue) · `--color-on-accent` → `#ffffff` (Pure Surface)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d2f34` | `#fdf9f4` | 12.78:1 | AAA |
| `#2d2f34` | `#ffffff` | 13.39:1 | AAA |
| `#3f434a` | `#fdf9f4` | 9.48:1 | AAA |
| `#3f434a` | `#ffffff` | 9.94:1 | AAA |
| `#5e646e` | `#fdf9f4` | 5.68:1 | AA |
| `#5e646e` | `#ffffff` | 5.96:1 | AA |
| `#f67748` | `#fdf9f4` | 2.62:1 | fail |
| `#f67748` | `#ffffff` | 2.74:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(157, 163, 175) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(157, 163, 175) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(to right, rgb(246, 119, 72) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(246, 119, 72) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(in oklab, rgb(253, 253, 253) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UniversalSans | `--font-body` | webfont | 400, 600, 500, 700 | Navigation, body copy, labels, buttons, and most interface text. | Inter |
| Garnett | `--font-display` | webfont | 500, 400, 700 | Display headlines and primary section headings. | DM Sans |

- **UniversalSans:** Use measured regular through bold weights; keep UI text practical and mostly sentence case.
- **Garnett:** Medium-weight, centered display copy; preserve the measured comfortable line height and neutral tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.2 | 0 | — | Garnett | Oversized centered hero statement. |
| h1 | 36px | 500 | 1.2 | 0 | — | Garnett | Primary hero and major page headings. |
| h2 | 28px | 500 | 1.25 | 0 | — | Garnett | Centered section headings. |
| h3 | 24px | 400 | 1.4 | 0 | — | Garnett | Feature and supporting content headings. |
| h4 | 22px | 700 | 1.3 | 0 | — | UniversalSans | Card titles and compact subheadings. |
| body | 14px | 600 | 1.14 | 0 | — | UniversalSans | Buttons, prominent copy, and product labels. |
| caption | 13.5px | 400 | 1.88 | 0 | — | UniversalSans | Supporting descriptions and secondary details. |
| nav | 15px | 600 | 1 | 0 | — | UniversalSans | Header navigation links. |

OpenType features in use: `"ss14", "ss15", "ss19"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 8, 12, 14, 16, 20, 24, 32, 40, 48, 120 px.
- Section rhythm 120px · element gap 8px · card padding 14px · max content width 1200px.

Use a centered content frame with a measured maximum width of 1200px. Keep navigation compact at the top, then give the hero a clear centered heading, short supporting copy, CTA, and product image. The page flows through broad showcase areas, feature cards, testimonials, pricing, and footer without changing its continuous canvas color. Alternate centered and left-aligned content where the story benefits, with measured spacious section rhythm and generous gaps. Product and pricing content uses multi-column layouts that simplify naturally on narrower screens.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `6px` · nav `9999px` · link `10px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `md` (other, card, media): `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.01) 0px 4px 12px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.08) 0px 10px 24px 0px`
- Shadow `sm` (badge): `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 1px 0px 0px`
- Shadow `sm-2` (other): `rgb(246, 119, 72) 0px 0px 8px 1px`
- Motion: standard transition `0.25s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

Most content sits flat on the warm canvas. Separate product mockups and selected cards with fine gray borders, rounded corners, and soft measured shadows; reserve stronger layering for floating interface panels. Avoid heavy drop shadows or high-contrast section bands.

## Imagery

The page relies on product-interface imagery, not lifestyle photography. Show realistic document windows, search results, review states, status chips, and integration marks within clean white panels. Keep illustrations light, with occasional hand-drawn accents and pale peach backdrops. Interface mockups may layer over the canvas, but avoid adding decorative imagery that competes with the product evidence.

## Components

### Header navigation

Compact brand and navigation row with muted text, a fine bottom hairline, an outlined Book demo pill, and a dark primary header action.

### Hero CTA

Centered coral pill button with white semibold UniversalSans text, paired with concise supporting copy and trust marks.

### Product mockup

White, rounded document or search interface with restrained border/shadow, legible UI labels, and small status badges.

### Feature panels

Soft peach-tinted panels with a short heading, concise copy, and a product visual below or alongside.

### Testimonial cards

A three-column set of quote panels; use coral and blue as selective colored surfaces alongside a pale neutral card.

### Pricing cards

Three clear plan cards on the ivory canvas, with the recommended middle option marked by a coral accent and outline.

### Pills and badges

Rounded navigation and CTA controls, compact status labels, and light backgrounds that distinguish actions without clutter.

### Measured component styles

- **Primary button** (“Keep your docs up to date”): background #f67748 · text #ffffff · radius 999px · padding 0px 32px · 600 17px UniversalSans
- **Secondary button** (“Book demo”): transparent background · text #2d2f34 · border 2px solid · radius 999px · padding 0px 16px · 600 16px UniversalSans
- **Link** (““Now my team and its knowledge are walki”): background #74a6f1 · text #ffffff · radius 10px · padding 32px · 400 16px UniversalSans
- **Input**: transparent background · text #3f434a · radius 0px · padding 0px · 400 15px UniversalSans
- **Card** (“🌴 Handbook / ⚡ Architectur… +8 -10 Upda”): background #ffffff · text #3f434a · radius 14px · padding 12px 16px · 400 16px UniversalSans · shadow rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.08) 0px 10px 24px 0px
- **Badge** (“+8”): background #e7f3e2 · text #4c9a41 · radius 6px · padding 2px 6px · 600 12px ui-monospace
- **Navigation item** (“Product Solutions Resources Slite Agent ”): transparent background · text #3f434a · radius 0px · padding 0px · 400 16px UniversalSans

## Do

- Keep the warm ivory canvas continuous across sections.
- Use Garnett for display headings and UniversalSans for UI text.
- Center the hero headline and keep its supporting copy concise.
- Use coral for primary actions and limited emphasis.
- Show product behavior through clear interface mockups.
- Use subtle borders and shadows to separate white cards.
- Preserve generous vertical whitespace between major sections.

## Don't

- Do not introduce dark full-width section bands.
- Do not use gradients as a dominant page treatment.
- Do not turn every card into a bright accent surface.
- Do not replace product UI with generic stock photography.
- Do not use heavy shadows or thick decorative borders.
- Do not crowd the headline, CTA, and product image together.

## Agent prompt

Build a new SaaS page in Slite’s warm, editorial product style. Use Warm Ivory (#fdf9f4) as the continuous canvas, Charcoal Ink (#2d2f34) for key headings, Slate Text (#3f434a) for navigation and supporting copy, and Coral Signal (#f67748) for the primary CTA. Use Garnett-like display typography and UniversalSans-like UI typography, with centered, confident headlines and compact labels. Arrange content in a spacious centered frame, alternating concise narrative sections with clean white product-interface panels and soft peach feature cards. Use measured subtle borders, rounded cards, and restrained shadows to make mockups readable without making the page feel heavy. Add blue or semantic status colors only as small supporting details. Prioritize product evidence, calm whitespace, and clear section hierarchy over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero statement and CTA above a large product-interface mockup. | Primary CTA, trust marks, product proof | Centered Garnett heading, coral pill button, layered white mockup |
| 2 | feature-grid | Centered section heading, trust logos, then three product-led feature columns. | Logo proof, three-part value story, in-context actions | Soft-tint cards, small pill labels, interface previews |
| 3 | product-showcase | Centered integration story followed by workflow panels and a broad review interface. | Integration context, change review, human approval | Integration marks, soft peach panels, layered document UI |
| 4 | product-showcase | Centered search introduction, large interface panel, then three supporting feature cards. | Question entry, cited answers, permission-aware search | White search window, source logos, feature cards |
| 5 | integrations | Left-aligned introduction, four connected product windows, and supporting copy. | MCP explanation, connected workflows, testimonial proof | Diagram-like connections, white interface cards, outlined controls |
| 6 | feature-grid | Centered heading and action above four evenly aligned security points. | Security overview, compliance reassurance | Small line icons, compact text blocks, trust marks |
| 7 | testimonials | Three quote cards in a row with a brief customer-count note beneath. | Customer quotes, attribution, customer stories link | Blue and coral cards, neutral card, small customer marks |
| 8 | pricing | Centered title and pricing link above three adjacent plan cards. | Plan comparison, recommended option, pricing details | White cards, coral recommended marker, clear price hierarchy |
| 9 | cta | Centered closing message with two concise actions. | Book demo, secondary pricing action | Coral primary pill, simple text link |
| 10 | footer | Brand and ratings alongside grouped link columns, followed by legal and locale links. | Grouped navigation, social links, locale selection | Compact text links, fine divider, brand and trust ratings |

## Source CSS custom properties (selected)

```css
--font-size-0: 3.5rem;
--font-size-1: 2.8rem;
--font-size-2: 2.25rem;
--font-size-3: 1.5rem;
--font-size-4: 1.2rem;
--font-size-5: 1.1rem;
--font-size-6: 1rem;
--font-size-7: .85rem;
--font-size-8: .75rem;
--font-size-smallest: 10px;
--font-size-smaller: 11px;
--font-size-small: 12px;
--font-size-normal: 13px;
--font-size-large: 14px;
--font-size-semilarger: 16px;
--font-size-larger: 20px;
--font-size-largest: 26px;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-family-title: "Garnett", FixEmoji, sans-serif;
--font-family-slite-title: "Garnett", FixEmoji, sans-serif;
--font-family-monospace: "Geist Mono", "Source Code Pro", Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace;
--font-feature-settings-monospace: "ss15", "ss19", "ss14", "liga" 0, "clig";
--border-width-small: 1px;
--border-width-medium: 2px;
--border-width-large: 4px;
--radius-smaller: 1px;
--radius-small: 2px;
--radius-normal: 4px;
--radius-large: 8px;
--radius-larger: 10px;
--radius-xlarger: 12px;
--radius-semilarger: 16px;
--radius-largest: 50px;
--box-shadow-smaller: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 4px rgba(0, 0, 0, .04);
--box-shadow-small: 0px 4px 12px rgba(0, 0, 0, .01), 0px 2px 6px rgba(0, 0, 0, .05), 0px 1px 3px rgba(0, 0, 0, .1);
```

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