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

# Steep · Design System

> Quietly polished analytics with an editorial edge

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

Steep pairs an airy, editorial homepage with polished product-interface previews to make AI analytics feel approachable. A restrained neutral palette is warmed by a soft blush hero wash, pastel feature bands, and concise dark calls to action.

## North star

Use generous white space and restrained contrast to make editorial typography and real product-interface previews do the work.

## Overview

The page sets a calm, light canvas and lets a centered editorial headline lead the first impression. Signifier supplies the expressive serif display, with italic emphasis visible in the hero, while Sohne handles navigation, explanatory copy, and interface labels in a clean sans serif. Near-black text and pill-shaped dark CTAs create crisp contrast without introducing a loud brand colour. The hero’s warm blush haze is atmospheric rather than a flat section fill; surrounding analytics cards are product imagery, not a cue to expand the core palette. Lower sections alternate white space with soft gray, powder blue, peach, and near-black bands, using colour to distinguish stories and product capabilities. Spacious centered composition gives way to compact feature cards and split product showcases. Fine borders, rounded containers, and restrained shadows keep layered UI previews legible while the page remains visually quiet.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas, open section backgrounds, and reverse text on dark buttons. |
| Cloud Gray | `#f2f2f3` | `--color-cloud-gray` | surface | Soft neutral section and card surface, supporting the white canvas without hard banding. |
| Soft Ink | `#17191c` | `--color-soft-ink` | brand | Primary body and navigation text; also the dark fill for primary Get started buttons. |
| Quiet Line | `#dfe0e3` | `--color-quiet-line` | neutral | Subtle hairline borders and separators around interface elements. |
| Night Panel | `#121212` | `--color-night-panel` | surface | Near-black full-width product-story band, creating a strong pause in the light page. |
| Slate Text | `#777b86` | `--color-slate-text` | semantic | Muted navigation links and secondary supporting text. |
| Graphite Copy | `#6f7072` | `--color-graphite-copy` | neutral | Secondary interface and descriptive text; not a defining brand accent. |
| Soft Ash | `#a0a0a0` | `--color-soft-ash` | neutral | Low-emphasis text and fine interface details. |
| Powder Edge | `#c1d6f9` | `--color-powder-edge` | semantic | Light blue border detail within product visuals, not a core page-wide color. |
| Charcoal Glow | `#2a2a2a` | `--color-charcoal-glow` | neutral | Dark gradient and illustration detail, mainly inside the dark product showcase. |
| Pale Sky | `#d3e3fc` | `--color-pale-sky` | surface | Distinct pale-blue customer-story section band. |
| Cocoa Accent | `#5d2a1a` | `--color-cocoa-accent` | accent | Warm brown text and chart details inside peach feature-card and product artwork. |
| Peach Panel | `#fbe1d1` | `--color-peach-panel` | surface | Warm highlighted feature card, paired with cocoa text. |
| Slate Graphite | `#4c4c4c` | `--color-slate-graphite` | neutral | Secondary feature-card copy and muted interface labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f3` (Cloud Gray) · `--color-surface-2` → `#121212` (Night Panel) · `--color-surface-3` → `#d3e3fc` (Pale Sky) · `--color-surface-4` → `#fbe1d1` (Peach Panel) · `--color-text` → `#17191c` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#777b86` (Slate Text) · `--color-border` → `#dfe0e3` (Quiet Line) · `--color-accent` → `#5d2a1a` (Cocoa Accent)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#17191c` | `#ffffff` | 17.61:1 | AAA |
| `#17191c` | `#f2f2f3` | 15.74:1 | AAA |
| `#17191c` | `#121212` | 1.06:1 | fail |
| `#17191c` | `#d3e3fc` | 13.56:1 | AAA |
| `#ffffff` | `#f2f2f3` | 1.12:1 | fail |
| `#ffffff` | `#121212` | 18.73:1 | AAA |
| `#ffffff` | `#d3e3fc` | 1.3:1 | fail |
| `#777b86` | `#ffffff` | 4.23:1 | AA-large |
| `#777b86` | `#f2f2f3` | 3.78:1 | AA-large |
| `#777b86` | `#121212` | 4.43:1 | AA-large |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.1) 100%), none`
- `linear-gradient(in oklab, rgb(247, 247, 248) 0px, rgb(255, 255, 255) 100%)`
- `linear-gradient(to right in oklab, rgb(255, 255, 255) 0px, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(255, 255, 255) 0px, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sohne | `--font-body` | webfont | 400, 430, 500, 450, 480 | Navigation, body copy, labels, links, and button text | Inter |
| Signifier | `--font-display` | webfont | 400 | Oversized editorial display headline, especially the hero | Cormorant Garamond |

- **Sohne:** Clean sans-serif with mostly regular weights; use moderate weights for navigation and buttons, with no uppercase treatment.
- **Signifier:** Elegant high-contrast serif with close tracking; use restrained italic emphasis within headline phrases.

### Type scale — Perfect Fifth (ratio ≈ 1.54, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 400 | 1.3 | -0.025em | — | Signifier | Oversized editorial hero headline with selective italic emphasis. |
| h1 | 26px | 450 | 1.18 | -0.009em | — | Sohne | Compact section headings and supporting page-level headings. |
| h2 | 22px | 400 | 1.5 | 0 | — | Sohne | Feature and story section titles. |
| h3 | 20px | 500 | 1.35 | 0 | — | Sohne | Feature-card titles and smaller content headings. |
| body | 16px | 400 | 1.38 | 0 | — | Sohne | Hero description, feature explanations, and core page copy. |
| caption | 15px | 400 | 1.5 | 0 | — | Sohne | Small supporting labels, product annotations, and footnotes. |
| nav | 16px | 430 | 1.31 | 0 | — | Sohne | Header navigation and primary menu labels. |
| link | 16px | 400 | 1.5 | 0 | — | Sohne | Inline secondary links and muted navigation items. |

## Spacing & layout

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

The measured content max width is 1200px, organized on a 12-column grid with comfortable density. The hero centers its headline, supporting copy, and actions while product-interface previews extend around the composition. Later content alternates broad, full-width section bands with compact card rows and split showcases. Section rhythm is generous, using an 80px measured section gap; internal gaps are tighter. Keep the header light and restrained, and let the main headline and feature imagery establish hierarchy.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `24px` · nav `9999px` · xs `12px` · sm `16px` · md `20px` · lg `24px` · pill `9999px`
- Shadow `md` (other): `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, oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 24px 0px`
- Shadow `lg` (text): `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, oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px`
- Shadow `lg-2` (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(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0`
- Shadow `xl` (media): `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.25) 0px 25px 50px -12px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections feel flat, with separation coming from white space, background bands, and fine borders rather than heavy shadows. Product mockups and chat cards float above their surroundings with restrained soft shadows. Cards use measured 24px rounding; primary buttons and navigation pills are fully rounded. Keep layers crisp and understated.

## Imagery

Use product-interface visuals as the main imagery: analytics cards, charts, chat prompts, and metric panels appear as clean floating previews. The hero places them around centered copy over a faint warm blush atmosphere. Line-drawn illustrations support capability cards, while a monochrome customer image sits in the blue story band. Treat the lavender and peach hues in screenshots as artwork or atmosphere, not extra foundational palette colors.

## Components

### Header navigation

Minimal horizontal header with the Steep mark, centered navigation links, a Book a demo text action, and a dark pill-shaped Get started button.

### Announcement pill

Centered outlined capsule reading “New in Steep: Tables reimagined,” with a small alert icon and directional arrow.

### Hero

Centered Signifier display headline, concise Sohne description, dark rounded CTA, and secondary Book a demo link over an understated warm gradient atmosphere.

### Floating product previews

Rounded metric cards, charts, and an AI prompt panel placed around the hero; use subtle shadows and preserve their UI-like framing.

### Feature cards

Three rounded capability cards with simple line illustrations; one warm peach card uses cocoa text, while the others use pale neutral surfaces.

### Story band

Full-width pale-blue customer story section with compact text and actions, a monochrome customer image, and a row of customer marks.

### Dark product showcase

Near-black full-width band with subdued copy and a prominent semantic-platform interface visual layered against a subtle colored glow.

### Measured component styles

- **Primary button** (“Get started”): background #17191c · text #ffffff · radius 3.35544e+07px · padding 0px 20px · 430 18px Sohne
- **Secondary button** (“New in Steep: Tables reimagined”): transparent background · text #17191c · border 1px solid #f5f5f5 · radius 3.35544e+07px · padding 9px 16px · 430 15px Sohne
- **Link** (“Overview”): transparent background · text #777b86 · radius 0px · padding 0px · 400 16px Sohne
- **Card** (“Powered by AI With AI-powered workflows ”): background #f7f7f8 · text #4c4c4c · radius 24px · padding 32px · 400 16px Sohne
- **Navigation item** (“Product Resources Customers Pricing Book”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Sohne

## Do

- Keep the overall canvas predominantly white and quiet.
- Use Signifier for large editorial display moments and Sohne for functional text.
- Center hero copy and keep its CTA treatment simple and dark.
- Use soft section bands to distinguish stories and product areas.
- Show product UI in rounded, softly elevated panels.
- Reserve peach and blue for specific cards or section bands.

## Don't

- Do not turn the warm hero haze into a saturated flat background.
- Do not use colorful interface mockup hues as the global brand palette.
- Do not add heavy borders or dramatic shadows to ordinary sections.
- Do not crowd the hero with extra copy or competing calls to action.
- Do not replace the editorial serif display with generic sans-serif typography.
- Do not make every section a card grid; preserve broad whitespace and varied bands.

## Agent prompt

Build a new page in Steep’s calm editorial analytics style. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#17191c) for core text and primary pill CTAs, and Cloud Gray (#f2f2f3) for quiet supporting surfaces. Set large headline moments in an elegant Signifier-like serif, with Sohne-like sans typography for navigation, copy, and interface details. Keep the layout spacious and centered, using a measured 1200px content maximum and broad section bands. Add product-interface previews as rounded, softly elevated panels rather than decorative stock imagery. Use Peach Panel (#fbe1d1) and Pale Sky (#d3e3fc) selectively, and Night Panel (#121212) for a contrasting showcase. Preserve subtle borders, restrained shadows, and generous breathing room; avoid loud gradients, clutter, and heavy ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy and actions over a soft warm atmosphere, with floating product previews and generous surrounding whitespace. | announcement link, primary and secondary CTA, product previews | editorial serif headline, rounded dark CTA, soft gradient wash, floating interface cards |

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