---
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 | `#ffffff` | `--color-gallery-white` | surface | Main canvas for the hero, testimonials, integration steps, and most content sections. |
| Midnight Ink | `#020617` | `--color-midnight-ink` | brand | Primary headings, body text, navigation, footer elements, and the closing CTA background. |
| Slate Copy | `#535662` | `--color-slate-copy` | neutral | Muted supporting text and secondary navigation or footer copy. |
| Quiet Border | `#e3e4e6` | `--color-quiet-border` | neutral | Fine dividers, outlined badges, and restrained component boundaries. |
| Showcase Charcoal | `#222222` | `--color-showcase-charcoal` | surface | Full-width dark customization showcase band. |
| Outseta Pink | `#df37a7` | `--color-outseta-pink` | accent | Primary signup buttons, emphasized links, and handwritten hero annotations. |
| Gradient Graphite | `#353845` | `--color-gradient-graphite` | surface | Dark gradient detail within the showcase/footer treatment; not a primary text or canvas colour. |
| Soft Interface Gray | `#f2f2f3` | `--color-soft-interface-gray` | surface | Subtle UI and card backing, distinct from the dominant white page canvas. |
| Electric Lemon | `#f9f906` | `--color-electric-lemon` | accent | Bright hero glow and small illustrative/product-preview details, not a core text colour. |
| Mint Status | `#bbf7d0` | `--color-mint-status` | semantic | Pale green status or confirmation details within product interface imagery. |
| Success Green | `#15803d` | `--color-success-green` | semantic | Positive status text and success indicators in interface-style content. |
| Cool Midgray | `#aeafb4` | `--color-cool-midgray` | neutral | Minor muted footer and interface details. |
| Button Outline | `#cccdd1` | `--color-button-outline` | neutral | Subtle outline on secondary controls such as the share button. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#222222` (Showcase Charcoal) · `--color-surface-2` → `#020617` (Midnight Ink) · `--color-surface-3` → `#f2f2f3` (Soft Interface Gray) · `--color-text` → `#020617` (Midnight Ink) · `--color-text-muted` → `#535662` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e3e4e6` (Quiet Border) · `--color-accent` → `#df37a7` (Outseta Pink) · `--color-accent-2` → `#15803d` (Success Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#020617` | `#ffffff` | 20.17:1 | AAA |
| `#020617` | `#222222` | 1.27:1 | fail |
| `#020617` | `#f2f2f3` | 18.03:1 | AAA |
| `#535662` | `#ffffff` | 7.3:1 | AAA |
| `#535662` | `#222222` | 2.18:1 | fail |
| `#535662` | `#020617` | 2.76:1 | fail |
| `#535662` | `#f2f2f3` | 6.53:1 | AA |
| `#ffffff` | `#222222` | 15.91:1 | AAA |
| `#ffffff` | `#020617` | 20.17:1 | AAA |
| `#ffffff` | `#f2f2f3` | 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 #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.

### Measured component styles

- **Primary button** (“Sign up”): background #df37a7 · text #ffffff · radius 4px · padding 8px 24px · 400 14px Inter Var · shadow rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
- **Secondary button** (“Share ​”): transparent background · text #020617 · border 1px solid #cccdd1 · radius 6px · padding 4px 12px · 500 12px Inter Var · shadow rgba(32, 0, 36, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.4) 0px 10px 24px -1
- **Link** (“Payments Connect to Stripe and start acc”): background #ffffff · text #020617 · radius 20px · padding 0px · 400 16px Inter Var · shadow oklch(0.128799 0.0405998 264.702 / 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.05) 
- **Input**: transparent background · text #ffffff · radius 4px · padding 8px 12px · 400 14px Inter Var · shadow rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 
- **Card** (“​ @robhope @mattevans COURSE · BUILT ON ”): transparent background · text #020617 · radius 20px · padding 0px · 400 16px Inter Var · shadow rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, 
- **Badge** (“Apple Pay”): transparent background · text #020617 · border 1px solid #e3e4e6 · radius 6px · padding 1.6px 12px · 500 12px Inter Var
- **Navigation item** (“Learn ​ Product ​ Pricing Support ​ Comp”): transparent background · text #020617 · radius 0px · padding 0px · 400 16px Inter Var

## Do

- 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.

## 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 (#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.

## 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: #020617;
--_typography---paragraph-body--font-size: 1rem;
--_typography---paragraph-body--font-weight: 400;
--_typography---paragraph-body--letter-spacing: -.01em;
--_typography---h1--font: Kaio,Arial,sans-serif;
--_typography---h1--font-size: clamp(2.25*1rem,((2.25 - ((4.5 - 2.25)/(84 - 20)*20))*1rem + ((4.5 - 2.25)/(84 - 20))*100vw),4.5*1rem);
--_typography---h1--font-weight: 600;
--_typography---h1--letter-spacing: -.02em;
--_typography---h2--font: Kaio,Arial,sans-serif;
--_typography---h2--font-size: clamp(1.875*1rem,((1.875 - ((3 - 1.875)/(84 - 20)*20))*1rem + ((3 - 1.875)/(84 - 20))*100vw),3*1rem);
--_typography---h2--font-weight: 600;
--_typography---h2--letter-spacing: -.02em;
--_typography---h3--font: Kaio,Arial,sans-serif;
--_typography---h3--font-size: clamp(1.5*1rem,((1.5 - ((2.25 - 1.5)/(84 - 20)*20))*1rem + ((2.25 - 1.5)/(84 - 20))*100vw),2.25*1rem);
--_typography---h3--font-weight: 600;
--_typography---h3--letter-spacing: -.02em;
--_typography---h4--font: "Inter Var",Arial,sans-serif;
--_typography---h4--font-size: clamp(1.25*1rem,((1.25 - ((1.75 - 1.25)/(84 - 20)*20))*1rem + ((1.75 - 1.25)/(84 - 20))*100vw),1.75*1rem);
--_typography---h4--font-weight: 500;
--_typography---h4--letter-spacing: -.02em;
--colors-black--300: color-mix(in oklch,#020617/**/20%,transparent);
--colors-general--primary: #fc1;
--_responsive---type-h4--font-size-md<deleted|variable-b4e59fda-681b-104b-ba40-b0828057e2db>: 1.25rem;
--_responsive---type-h4--font-size-sm<deleted|variable-fe3ea43f-08aa-cca4-c410-f0a2f44d6cab>: 1.25rem;
--_responsive---type-h4--font-size-xs<deleted|variable-0f1f8e18-6290-2dbc-b31f-4f0fedaea625>: 1.25rem;
--_theme---general--background: white;
--radius--x-large: 2rem;
--_layout---grid--gap: 32px;
--_components---component-button--flex-gap: .75rem;
--_theme---button--secondary-border: color-mix(in oklch,#020617/**/20%,transparent);
--_components---component-button--border-radius: .5rem;
--colors-general--secondary: #df37a7;
--_components---component-button--font: "Inter Var",Arial,sans-serif;
--colors-white--1000: white;
--_components---component-button--font-size: clamp(1.1*1rem,((1.1 - ((1.25 - 1.1)/(84 - 20)*20))*1rem + ((1.25 - 1.1)/(84 - 20))*100vw),1.25*1rem);
--_components---component-button--font-weight: 500;
--_components---component-button--letter-spacing: -.01em;
--colors-general--secondary-dark: color-mix(in oklch,#df37a7/**/95%,black);
--colors-black--1000: #020617;
```

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