Outseta 以宽松、富有编辑感的首页展示会员管理平台，用醒目的标题字体搭配产品界面和客户网站预览。明亮的粉色按钮与手写标注为克制的白底深色界面增添活力，深色展示区则清晰划分内容节奏。
North star · Keep the product interface crisp and legible on white, using oversized Kaio headings, pink accents, and selective dark bands to create rhythm.
The page builds its identity around a clean white canvas, near-black typography, and a vivid pink CTA, then adds warm yellow-to-pink atmospheric colour around the hero and customer examples. Treat those bright washes as visual framing, not as a replacement for the white content surfaces. Large, tightly tracked Kaio headings give the hero and section titles a distinctive display voice; Inter Var handles navigation, body copy, cards, and interface text. Small uppercase JetBrains Mono labels add a technical, product-led counterpoint. The layout stays centered and spacious, with a compact navigation bar, generous vertical pauses, and modular product cards. Real interface screenshots and customer-site previews carry most of the visual storytelling. A dark customization showcase and dark navy closing CTA provide contrast. Pink handwritten notes, arrows, and occasional bright illustrative details make the otherwise polished SaaS presentation feel approachable.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Midnight Ink
#020617
Primary headings, body text, navigation, footer elements, and the closing CTA background.
强调色
Outseta Pink
#df37a7
Primary signup buttons, emphasized links, and handwritten hero annotations.
Electric Lemon
#f9f906
Bright hero glow and small illustrative/product-preview details, not a core text colour.
表层色
Gallery White
#ffffff
Main canvas for the hero, testimonials, integration steps, and most content sections.
Showcase Charcoal
#222222
Full-width dark customization showcase band.
Gradient Graphite
#353845
Dark gradient detail within the showcase/footer treatment; not a primary text or canvas colour.
Soft Interface Gray
#f2f2f3
Subtle UI and card backing, distinct from the dominant white page canvas.
中性色
Slate Copy
#535662
Muted supporting text and secondary navigation or footer copy.
Quiet Border
#e3e4e6
Fine dividers, outlined badges, and restrained component boundaries.
Cool Midgray
#aeafb4
Minor muted footer and interface details.
Button Outline
#cccdd1
Subtle outline on secondary controls such as the share button.
功能色
Mint Status
#bbf7d0
Pale green status or confirmation details within product interface imagery.
Success Green
#15803d
Positive status text and success indicators in interface-style content.
文字 背景 对比度 WCAG #020617 Midnight Ink#ffffff Gallery White20.17:1 AAA #020617 Midnight Ink#222222 Showcase Charcoal1.27:1 不达标 #020617 Midnight Ink#f2f2f3 Soft Interface Gray18.03:1 AAA #535662 Slate Copy#ffffff Gallery White7.3:1 AAA #535662 Slate Copy#222222 Showcase Charcoal2.18:1 不达标 #535662 Slate Copy#020617 Midnight Ink2.76:1 不达标
字体 字号阶梯：Augmented Fourth（比例约 1.388，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Inter Var 网络字体 · 字重 400 / 500 / 600 / 700 · 占比 76%
免费替代：Inter
Body copy, navigation, buttons, interface labels, and supporting headings.
Aa 设计
Jetbrains Mono 网络字体 · 字重 500 / 400 · 占比 11%
免费替代：JetBrains Mono
Eyebrows, uppercase technical labels, and compact status markers.
Aa 设计
Family 网络字体 · 字重 400 / 500 · 占比 6%
免费替代：DM Sans
Editorial testimonial and feature-link text as measured on the page.
Aa 设计
Kaio 网络字体 · 字重 600 / 700 · 占比 5%
免费替代：Plus Jakarta Sans
Display headlines and major section headings.
Aa 设计
Permanent Marker 网络字体 · 字重 400 · 占比 2%
免费替代：Permanent Marker
Handwritten annotations and playful callouts around showcase imagery.
角色 示例 字号 字重 行高 字距 特大标题 Oversized, high-impact hero and display headings.
Outseta
72px 600 1 -0.02em 一级标题 Main hero headline, centered above the supporting description.
Outseta
48px 600 1.1 -0.02em 二级标题 Major section titles such as testimonials and feature introductions.
Outseta
36px 600 1.2 -0.02em 三级标题 Editorial or supporting section headings.
The quick brown fox 敏捷的狐狸
26px 400 1.5 -0.001em 四级标题 Compact card and product subsection headings.
The quick brown fox 敏捷的狐狸
24px 500 1.4 -0.007em 正文 Descriptions, testimonials, and explanatory product copy.
The quick brown fox 敏捷的狐狸
14px 400 1.5 -0.01em 辅助文字 Small interface notes, card details, and supporting labels.
The quick brown fox 敏捷的狐狸
12px 500 1.5 -0.01em 导航 Primary navigation items and compact menu labels.
The quick brown fox 敏捷的狐狸
14px 500 1.5 -0.011em 链接 Prominent feature names and editorial linked copy.
The quick brown fox 敏捷的狐狸
26px 500 1.5 -0.001em 眉题 Uppercase technical overlines such as partner and section labels.
The quick brown fox 敏捷的狐狸
12px 500 1.5 0.04em 代码 Compact uppercase status and technical interface labels.
const style = 1;
12px 500 1.5 0.04em
间距与布局 基准单位 4px · 密度：宽松
128px 版块间距
8px 元素间距
— 卡片内边距
1267px 内容最大宽度
2px
4px
6px
8px
12px
16px
24px
32px
48px
Use a centered, spacious content frame capped at the measured 1267px maximum width. The hero is centered and media-led, with three customer previews below its headline and CTAs; later sections alternate full-width dark bands with white content. Product features use modular cards in a three-column grid, while the before/after comparison is split into two columns. Keep generous vertical section pauses and align most headlines centrally, shifting to left-aligned copy inside feature cards.
圆角与层次 sm · other
hairline · card, link, other
hairline · other, card
inset · other, input, button
Keep most sections visually flat and let thin pale borders define controls, badges, and card edges. Product previews receive restrained layered shadows that separate them from white surfaces without feeling heavy. Rounded frames distinguish media and cards; reserve stronger tonal depth for the dark showcase and CTA rather than adding shadows everywhere.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary signup button Bright #df37a7 fill with white Inter Var text, a compact rounded rectangle, and a subtle shadow.
Secondary CTA White or transparent control with dark text and a fine neutral outline, set beside the primary signup action.
Hero customer previews Three side-by-side customer website previews in softly rounded, elevated frames, annotated with pink handwritten notes.
Product feature cards Modular white cards with concise Inter copy and embedded interface screenshots; arrange as a three-column feature grid.
Dark customization showcase Charcoal full-width panel with a central signup mockup, surrounding UI controls, and pink hand-drawn line accents.
Status badge Small uppercase JetBrains Mono label with dark text and a thin #e3e4e6 outline.
Closing trial CTA Dark navy call-to-action band with left-aligned headline, pink trial button, and angled dashboard screenshot.
Imagery · Use crisp product UI screenshots and customer-site previews as the main proof points, presented in rounded, lightly elevated frames. The hero places three examples side by side, with restrained handwritten pink notes and arrows as annotations. Product panels show interface details rather than decorative photography. A dark customization showcase combines a central signup-form mockup with surrounding controls and playful line doodles; the closing CTA pairs concise copy with a tilted dashboard preview.
页面版块 共 16 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Use #ffffff as the primary content canvas. Set display headlines in Kaio or a close bold geometric substitute. Reserve #df37a7 for primary actions and selective emphasis. Use genuine-looking product and customer-site previews. Alternate white content areas with occasional dark showcase bands. Keep explanatory copy short and interface text legible. Use handwritten callouts sparingly to add personality. ✕ 不该做 Do not turn the full page into a dark interface. Do not use pink as a large body-text colour. Do not crowd the generous gaps between major sections. Do not replace product previews with unrelated stock photography. Do not give every card a heavy shadow. Do not use decorative display type for navigation or long copy. Do not treat illustration-only yellow and green as core brand surfaces. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new SaaS page in Outseta's visual style: a spacious white canvas (#ffffff), Midnight Ink text (#020617), and a vivid Outseta Pink action colour (#df37a7). Use large, tightly tracked Kaio-like display headings, with Inter-style body and UI text and occasional JetBrains Mono uppercase labels. Center the main content in a broad, measured-width frame; create generous vertical pauses and modular feature cards with crisp product-interface previews. Use fine borders and restrained shadows rather than heavy elevation. Add a selective dark section in Showcase Charcoal (#222222) or Midnight Ink, and use warm yellow-to-pink atmospheric colour only as framing or illustrative detail. Keep product imagery legible, CTA hierarchy clear, and any handwritten annotations brief and playful.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Outseta design system"
variant: extended
source: https://www.outseta.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/outseta-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Outseta · Design System
> A polished SaaS toolkit with a playful edge
**Theme:** light · **Industry:** saas · **Source:** https://www.outseta.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._
Outseta presents its membership platform through a spacious, editorial homepage, pairing bold display type with real product and customer-site previews. Bright pink calls to action and handwritten accents enliven a restrained white-and-ink interface, while dark showcase bands mark clear shifts in the page.
## North star
Keep the product interface crisp and legible on white, using oversized Kaio headings, pink accents, and selective dark bands to create rhythm.
## Overview
The page builds its identity around a clean white canvas, near-black typography, and a vivid pink CTA, then adds warm yellow-to-pink atmospheric colour around the hero and customer examples. Treat those bright washes as visual framing, not as a replacement for the white content surfaces. Large, tightly tracked Kaio headings give the hero and section titles a distinctive display voice; Inter Var handles navigation, body copy, cards, and interface text. Small uppercase JetBrains Mono labels add a technical, product-led counterpoint. The layout stays centered and spacious, with a compact navigation bar, generous vertical pauses, and modular product cards. Real interface screenshots and customer-site previews carry most of the visual storytelling. A dark customization showcase and dark navy closing CTA provide contrast. Pink handwritten notes, arrows, and occasional bright illustrative details make the otherwise polished SaaS presentation feel approachable.
## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | surface | Main canvas for the hero, testimonials, integration steps, and most content sections. |
| Midnight Ink | ` | `--color-midnight-ink` | brand | Primary headings, body text, navigation, footer elements, and the closing CTA background. |
| Slate Copy | ` | `--color-slate-copy` | neutral | Muted supporting text and secondary navigation or footer copy. |
| Quiet Border | ` | `--color-quiet-border` | neutral | Fine dividers, outlined badges, and restrained component boundaries. |
| Showcase Charcoal | ` | `--color-showcase-charcoal` | surface | Full-width dark customization showcase band. |
| Outseta Pink | ` | `--color-outseta-pink` | accent | Primary signup buttons, emphasized links, and handwritten hero annotations. |
| Gradient Graphite | ` | `--color-gradient-graphite` | surface | Dark gradient detail within the showcase/footer treatment; not a primary text or canvas colour. |
| Soft Interface Gray | ` | `--color-soft-interface-gray` | surface | Subtle UI and card backing, distinct from the dominant white page canvas. |
| Electric Lemon | ` | `--color-electric-lemon` | accent | Bright hero glow and small illustrative/product-preview details, not a core text colour. |
| Mint Status | ` | `--color-mint-status` | semantic | Pale green status or confirmation details within product interface imagery. |
| Success Green | ` | `--color-success-green` | semantic | Positive status text and success indicators in interface-style content. |
| Cool Midgray | ` | `--color-cool-midgray` | neutral | Minor muted footer and interface details. |
| Button Outline | ` | `--color-button-outline` | neutral | Subtle outline on secondary controls such as the share button. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Showcase Charcoal) · `--color-surface-2` → ` (Midnight Ink) · `--color-surface-3` → ` (Soft Interface Gray) · `--color-text` → ` (Midnight Ink) · `--color-text-muted` → ` (Slate Copy) · `--color-text-subtle` → ` (Gallery White) · `--color-border` → ` (Quiet Border) · `--color-accent` → ` (Outseta Pink) · `--color-accent-2` → ` (Success Green) · `--color-on-accent` → ` (Gallery White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 20.17:1 | AAA |
| ` | ` | 1.27:1 | fail |
| ` | ` | 18.03:1 | AAA |
| ` | ` | 7.3:1 | AAA |
| ` | ` | 2.18:1 | fail |
| ` | ` | 2.76:1 | fail |
| ` | ` | 6.53:1 | AA |
| ` | ` | 15.91:1 | AAA |
| ` | ` | 20.17:1 | AAA |
| ` | ` | 1.12:1 | fail |
### Gradients
- `radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 0px)`
- `linear-gradient(rgba(0, 0, 0, 0) 30%, oklch(0.128799 0.0405998 264.702 / 0.2))`
- `linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))`
- `linear-gradient(0deg, rgba(255, 255, 255, 0), rgb(255, 255, 255) 75%)`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Var | `--font-body` | webfont | 400, 500, 600, 700 | Body copy, navigation, buttons, interface labels, and supporting headings. | Inter |
| Jetbrains Mono | `--font-mono` | webfont | 500, 400 | Eyebrows, uppercase technical labels, and compact status markers. | JetBrains Mono |
| Family | `--font-family` | webfont | 400, 500 | Editorial testimonial and feature-link text as measured on the page. | DM Sans |
| Kaio | `--font-display` | webfont | 600, 700 | Display headlines and major section headings. | Plus Jakarta Sans |
| Permanent Marker | `--font-permanent-marker` | webfont | 400 | Handwritten annotations and playful callouts around showcase imagery. | Permanent Marker |
- **Inter Var:** Use mostly regular and medium weights; compact, slightly negative tracking keeps UI copy tidy.
- **Jetbrains Mono:** Use medium weight, generous tracking, and uppercase styling for small technical annotations.
- **Family:** Use medium weight for prominent link-like feature labels; the measured family name is generic.
- **Kaio:** Bold, distinctive display shapes; use semibold styling and tight negative tracking.
- **Permanent Marker:** Use sparingly for short, informal notes rather than headings or body copy.
### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 600 | 1 | -0.02em | — | Kaio | Oversized, high-impact hero and display headings. |
| h1 | 48px | 600 | 1.1 | -0.02em | — | Kaio | Main hero headline, centered above the supporting description. |
| h2 | 36px | 600 | 1.2 | -0.02em | — | Kaio | Major section titles such as testimonials and feature introductions. |
| h3 | 26px | 400 | 1.5 | -0.001em | — | Family | Editorial or supporting section headings. |
| h4 | 24px | 500 | 1.4 | -0.007em | — | Inter Var | Compact card and product subsection headings. |
| body | 14px | 400 | 1.5 | -0.01em | — | Inter Var | Descriptions, testimonials, and explanatory product copy. |
| caption | 12px | 500 | 1.5 | -0.01em | — | Inter Var | Small interface notes, card details, and supporting labels. |
| nav | 14px | 500 | 1.5 | -0.011em | — | Inter Var | Primary navigation items and compact menu labels. |
| link | 26px | 500 | 1.5 | -0.001em | — | Family | Prominent feature names and editorial linked copy. |
| eyebrow | 12px | 500 | 1.5 | 0.04em | uppercase | Jetbrains Mono | Uppercase technical overlines such as partner and section labels. |
| code | 12px | 500 | 1.5 | 0.04em | uppercase | Jetbrains Mono | Compact uppercase status and technical interface labels. |
OpenType features in use: `"calt", "cv11", "ss02"` , `"ss02", "ss03"` , `"liga"` .
## Spacing & layout
- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 24, 32, 48 px.
- Section rhythm 128px · element gap 8px · card padding — · max content width 1267px.
Use a centered, spacious content frame capped at the measured 1267px maximum width. The hero is centered and media-led, with three customer previews below its headline and CTAs; later sections alternate full-width dark bands with white content. Product features use modular cards in a three-column grid, while the before/after comparison is split into two columns. Keep generous vertical section pauses and align most headlines centrally, shifting to left-aligned copy inside feature cards.
## Shape & elevation
- Radius: button `6px` · input `4px` · card `20px` · media `50%` · badge `6px` · nav `8px` · link `20px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · 2xl `14px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 1px 1px 3px 0px`
- Shadow `hairline` (card, link, other): `oklch(0.128799 0.0405998 264.702 / 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.05) 0px 2px 2px 0px`
- Shadow `hairline-2` (other, card): `rgba(255, 255, 255, 0.11) 0px 0px 0px 1px`
- Shadow `inset` (other, input, button): `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `inset-2` (nav, other): `oklch(0.128799 0.0405998 264.702 / 0.2) 0px 0px 0px 1px inset`
- Shadow `lg` (media, other): `rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, rgba(32, 0, 36, 0.02) 0px 2px 3px 0px, rgba(32, 0, 36, 0.03) 0px 4px 6px 0px, rgba(32, 0, 36, 0.04) 0px 8px 12px 0px, rg`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.
Keep most sections visually flat and let thin pale borders define controls, badges, and card edges. Product previews receive restrained layered shadows that separate them from white surfaces without feeling heavy. Rounded frames distinguish media and cards; reserve stronger tonal depth for the dark showcase and CTA rather than adding shadows everywhere.
## Imagery
Use crisp product UI screenshots and customer-site previews as the main proof points, presented in rounded, lightly elevated frames. The hero places three examples side by side, with restrained handwritten pink notes and arrows as annotations. Product panels show interface details rather than decorative photography. A dark customization showcase combines a central signup-form mockup with surrounding controls and playful line doodles; the closing CTA pairs concise copy with a tilted dashboard preview.
## Components
### Primary signup button
Bright ### Secondary CTA
White or transparent control with dark text and a fine neutral outline, set beside the primary signup action.
### Hero customer previews
Three side-by-side customer website previews in softly rounded, elevated frames, annotated with pink handwritten notes.
### Product feature cards
Modular white cards with concise Inter copy and embedded interface screenshots; arrange as a three-column feature grid.
### Dark customization showcase
Charcoal full-width panel with a central signup mockup, surrounding UI controls, and pink hand-drawn line accents.
### Status badge
Small uppercase JetBrains Mono label with dark text and a thin ### Closing trial CTA
Dark navy call-to-action band with left-aligned headline, pink trial button, and angled dashboard screenshot.
### Measured component styles
- **Primary button** (“Sign up”): background ## Do
- Use ## Don't
- Do not turn the full page into a dark interface.
- Do not use pink as a large body-text colour.
- Do not crowd the generous gaps between major sections.
- Do not replace product previews with unrelated stock photography.
- Do not give every card a heavy shadow.
- Do not use decorative display type for navigation or long copy.
- Do not treat illustration-only yellow and green as core brand surfaces.
## Agent prompt
Build a new SaaS page in Outseta's visual style: a spacious white canvas (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and CTAs above three customer-site previews; warm gradient framing. | primary and secondary CTA, customer proof, audience category selector | compact navigation, mono partner eyebrow, pink annotations, framed previews |
| 2 | testimonials | Centered testimonial heading followed by three parallel quote cards. | social proof, customer attribution | editorial heading, light card borders, small avatar portraits |
| 3 | integrations | Compact integration logo row above a three-step horizontal setup sequence. | integration discovery, numbered setup steps | brand icon row, numbered pink markers, inline links |
| 4 | product-showcase | Single full-width charcoal panel with central signup preview and surrounding controls. | customization preview, theme controls | dark surface, pink hand-drawn accents, form mockup, control tiles |
| 5 | feature-grid | Centered mono eyebrow and bold heading on a pale neutral band. | feature overview | uppercase eyebrow, centered display title, quiet background |
| 6 | feature-grid | Three-column product cards followed by broader cards spanning multiple columns. | feature discovery, capability scanning | interface screenshots, white cards, compact lists, subtle elevation |
| 7 | comparison | Centered heading above two side-by-side before-and-after comparison columns. | problem and solution comparison, benefit checklist | paired panels, red pain-point marks, green success marks |
| 8 | cta | Dark navy horizontal CTA with copy and action on the left, tilted product dashboard on the right. | free trial conversion, risk-reduction copy | dark rounded panel, pink CTA, angled dashboard preview |
| 9 | footer | White multi-column link directory above social links and a slim trust-status row. | category navigation, trust signals | brand mark, dense link columns, social icons, small badges |
## Source CSS custom properties (selected)
```css
--_typography---paragraph-body--font: "Inter Var",Arial,sans-serif;
--_theme---general--text: 
