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

# Default · Design System

> A restrained dark canvas for clear product storytelling

**Theme:** dark · **Industry:** saas · **Source:** https://www.default.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._

Default presents its go-to-market platform through a restrained dark interface, oversized headlines, and detailed workflow product visuals. Monochrome surfaces and fine borders keep the page cohesive, while green is reserved for small interface signals.

## North star

Keep the canvas nearly black and let clear typography, fine borders, and authentic workflow UI provide the contrast.

## Overview

The page is built on a near-black canvas that lets the product interface and typography carry the visual story. Surface changes are subtle: charcoal cards, slightly lighter panels, and fine gray borders separate content without creating bright section bands. White headlines provide the strongest contrast; softer gray copy supports them, while green appears sparingly in workflow statuses and small product indicators rather than as a large marketing fill. Inter is used throughout, with a large, light-weight hero headline and compact navigation and labels. The opening combines a left-aligned headline with concise supporting copy and a demo action, followed by a wide product workflow visual. Subsequent feature cards and testimonials retain a compact, bordered, low-glare treatment. Generous space around major transitions contrasts with dense information inside product mockups. Rounded corners soften cards and controls, but the overall impression stays precise, quiet, and technical.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Canvas | `#0b0c0e` | `--color-carbon-canvas` | brand | Dominant page canvas and background behind the hero, feature sections, and footer. |
| Graphite Panel | `#121315` | `--color-graphite-panel` | surface | Raised navigation, card, and case-study surfaces against the darker canvas. |
| Quiet Gray | `#8b8b8c` | `--color-quiet-gray` | neutral | Muted navigation and supporting text where emphasis should remain low. |
| Soft Silver | `#e7e7e7` | `--color-soft-silver` | neutral | Secondary copy and subdued heading or control text on dark surfaces. |
| Seam Gray | `#292a2b` | `--color-seam-gray` | neutral | Fine borders and separators defining cards, badges, and controls. |
| Night Panel | `#171717` | `--color-night-panel` | surface | Inset product mockups and dark card areas. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headings, navigation labels, and high-contrast interface text. |
| Pale Copy | `#d0d0d0` | `--color-pale-copy` | neutral | Light supporting text, visible in body copy and product-oriented details. |
| Slate Surface | `#212326` | `--color-slate-surface` | surface | Alternative charcoal surface for product cards and layered interface panels. |
| Border Charcoal | `#1f1f21` | `--color-border-charcoal` | neutral | Subtle outlines on cards, footer areas, and navigation elements. |
| Deep Layer | `#1a1b1d` | `--color-deep-layer` | surface | Dark secondary card and footer surface within the charcoal system. |
| Muted Pewter | `#727374` | `--color-muted-pewter` | neutral | Low-emphasis labels and badge text. |
| Mist Light | `#d9d9d9` | `--color-mist-light` | neutral | Gradient and glow detail; largely atmospheric rather than a defining page color. |
| Silver Haze | `#b8b8b8` | `--color-silver-haze` | neutral | Soft gradient and heading detail, used sparingly in visual effects. |
| Workflow Green | `#22c55e` | `--color-workflow-green` | accent | Small status and workflow indicators inside product UI, not a dominant page fill. |
| Control Gray | `#383839` | `--color-control-gray` | neutral | Outlined buttons and navigation controls within dark interface surfaces. |
| Live Green | `#4ade80` | `--color-live-green` | accent | Brighter workflow status detail within product mockups and interface indicators. |

### Semantic aliases

`--color-canvas` → `#0b0c0e` (Carbon Canvas) · `--color-surface` → `#121315` (Graphite Panel) · `--color-surface-2` → `#171717` (Night Panel) · `--color-surface-3` → `#212326` (Slate Surface) · `--color-surface-4` → `#1a1b1d` (Deep Layer) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#8b8b8c` (Quiet Gray) · `--color-text-subtle` → `#e7e7e7` (Soft Silver) · `--color-border` → `#292a2b` (Seam Gray) · `--color-accent` → `#22c55e` (Workflow Green) · `--color-accent-2` → `#4ade80` (Live Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0b0c0e` | 19.57:1 | AAA |
| `#ffffff` | `#121315` | 18.59:1 | AAA |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#ffffff` | `#212326` | 15.75:1 | AAA |
| `#8b8b8c` | `#0b0c0e` | 5.75:1 | AA |
| `#8b8b8c` | `#121315` | 5.46:1 | AA |
| `#8b8b8c` | `#171717` | 5.27:1 | AA |
| `#8b8b8c` | `#212326` | 4.63:1 | AA |
| `#e7e7e7` | `#0b0c0e` | 15.82:1 | AAA |
| `#e7e7e7` | `#121315` | 15.03:1 | AAA |

### Gradients

- `radial-gradient(50% 50%, rgb(217, 217, 217) 0%, rgb(217, 217, 217) 68%, rgba(217, 217, 217, 0.84) 76%, rgba(217, 217, 217, 0.5) 84%, rgba(217, 217, 217, 0.16) 92%, rgba(217, 217, 217, 0) 100%)`
- `linear-gradient(rgba(98, 103, 111, 0) 6.6371%, rgba(110, 107, 111, 0) 35.805%, rgba(112, 103, 103, 0.1) 59.869%, rgba(106, 91, 92, 0.1) 83.702%, rgba(82, 74, 82, 0.1) 97.123%, rgba(65, 68, 79, 0.1) 110.77%, rgba(46, 55, `
- `linear-gradient(rgba(98, 103, 111, 0) 6.6371%, rgba(110, 107, 111, 0) 35.805%, rgba(112, 103, 103, 0.08) 59.869%, rgba(106, 91, 92, 0.08) 83.702%, rgba(82, 74, 82, 0.08) 97.123%, rgba(65, 68, 79, 0.08) 110.77%, rgba(46, `
- `radial-gradient(circle, rgba(255, 255, 255, 0.06) 0.7px, rgba(0, 0, 0, 0) 0.9px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 420, 450, 300, 440, 480, 600, 580 | All page typography, including display headlines, navigation, body copy, and controls. | Inter |

- **Inter:** Use regular and medium weights; display headlines are large and lightly weighted, with slightly tight tracking. Keep case natural.

### Type scale — Custom (ratio ≈ 1.789, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 0.94 | -0.02em | — | Inter | Oversized hero and campaign headlines, broken into short lines. |
| h1 | 32px | 400 | 1.18 | 0 | — | Inter | Primary section headings beneath the hero and across major content blocks. |
| body | 20px | 400 | 1.5 | -0.01em | — | Inter | Hero description, feature explanations, and testimonial quotations. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Compact labels, workflow status, and supporting metadata. |
| button | 8px | 500 | 1.38 | -0.015em | — | Inter | Small, medium-weight control and CTA labels. |
| nav | 12px | 400 | 1.5 | 0 | — | Inter | Header navigation links and compact footer navigation. |

OpenType features in use: `"ss01", "ss03"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16, 24, 32 px.
- Section rhythm 32px · element gap 6px · card padding 24px · max content width 1240px.

Use a centered content frame capped at the measured 1240px page width. The hero begins with a two-column text-and-copy arrangement, followed by a broad product visual; later content moves through centered section headings, a compact feature-card grid, testimonials, a closing CTA, and footer. Keep alignment mostly left within cards and centered for section introductions. The measured spacing system is compact, but use larger breathing room at section transitions and preserve dense detail inside product mockups.

## Shape & elevation

- Radius: button `10px` · card `16px` · media `50%` · badge `10px` · nav `50%` · link `16px` · xs `3px` · sm `4px` · md `5px` · lg `6px` · xl `7px` · 2xl `8px` · pill `9999px`
- Shadow `inset` (nav): `rgb(31, 31, 33) 0px 0px 0px 0.5px, rgb(11, 12, 14) 0px 0px 0px 1.5px inset, rgb(39, 39, 42) 0px 0px 0px 2px inset`
- Shadow `inset-2` (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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.14) 0px 0px 0px 0.5px inset`
- Shadow `inset-3` (other): `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 0px 8px 0px`
- Shadow `hairline` (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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.16) 0px 0px 0px 0.5px`
- Shadow `lg` (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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(9, 10, 11) 0px 0px 0px 1px, rgba(0, 0, 0, 0.32) 0px 12px 32p`
- Shadow `sm` (media): `rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat charcoal surfaces separated by fine gray borders over pronounced shadows. Layer product panels and cards subtly against the canvas, using restrained inset highlights and soft shadow only where a mock interface needs depth. Rounded card and CTA edges soften the otherwise precise, technical presentation.

## Imagery

Product UI imagery is the main visual asset: dark workflow canvases, lead forms, routing steps, scheduling views, and enrichment panels. Frame these as large, carefully layered interface scenes rather than generic illustrations. Customer marks and testimonial portraits add limited human detail later in the page. Keep mockups low-contrast and dark, with small green status highlights; avoid bright stock photography or decorative imagery that competes with the interface.

## Components

### Header navigation

A compact top navigation on the dark canvas, with white links and a bordered, rounded demo action.

### Hero block

Large left-aligned headline paired with short supporting copy and a light demo CTA, above a horizontal customer-mark row.

### Workflow showcase

Wide dark product scene with connected workflow steps and a lead form; small green indicators supply the principal color accent.

### Feature cards

Dark bordered cards describe inbound, outbound, enrichment, scheduling, and lead-routing capabilities with embedded UI previews.

### Testimonial grid

Compact quote cards use soft charcoal surfaces, restrained borders, small customer portraits, and low-key metadata.

### Closing CTA

A framed dark panel centers a large headline, concise supporting copy, and a bright demo action.

### Footer

Dense multi-column link groups and company details sit on the dark canvas, with subdued text and a large branded visual near the bottom.

### Measured component styles

- **Primary button** (“9:00 am”): background #262729 · text #ffffff · radius 5.97px · padding 0px · 500 7.76px Inter
- **Secondary button** (“Tables Unified views of your go-to-marke”): transparent background · text #ffffff · border 1px solid #383839 · radius 10px · padding 8px 14px · 400 16px Inter
- **Link** (“Turn demo requests into pipeline →”): background #0e0f11 · text #ffffff · border 1px solid #1b1b1d · radius 16px · padding 16px · 400 16px Inter
- **Card** (“Case study “Default has been a really co”): background #121315 · text #ffffff · border 1px solid #1f1f21 · radius 12px · padding 24px · 400 16px Inter
- **Badge** (“Case study”): transparent background · text #71717a · border 1px solid #27282a · radius 10px · padding 4px 8px 4px 10px · 500 11.52px Inter
- **Navigation item** (“Use Cases Product Resources Changelog Pr”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #0b0c0e as the dominant canvas.
- Set large, clean Inter headlines with natural line breaks.
- Separate dark panels with fine, low-contrast borders.
- Reserve green accents for product status signals.
- Show realistic workflow and lead-management interface details.
- Use generous transitions around sections and compact card interiors.

## Don't

- Do not introduce bright section backgrounds.
- Do not use green as a large CTA or page fill.
- Do not add heavy shadows to every card.
- Do not make supporting copy compete with the hero headline.
- Do not substitute generic stock imagery for product UI.
- Do not crowd the main page frame with edge-to-edge content.

## Agent prompt

Build a SaaS marketing page in Default’s restrained dark visual style. Use Carbon Canvas (#0b0c0e) as the continuous background, with Graphite Panel (#121315), Night Panel (#171717), and Slate Surface (#212326) for subtle depth. Use Signal White (#ffffff) for primary headlines and Quiet Gray (#8b8b8c) or Soft Silver (#e7e7e7) for supporting copy. Keep borders in Seam Gray (#292a2b) or Control Gray (#383839), thin and understated. Apply Inter throughout; make the hero headline large and lightly weighted, with compact navigation and labels. Organize content in a centered frame, pairing concise copy with detailed dark workflow UI. Use Workflow Green (#22c55e) and Live Green (#4ade80) only for small interface states. Prefer bordered rounded cards over strong shadows, and preserve clear section breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column headline and supporting copy above customer marks and a broad workflow product visual. | request-a-demo CTA, customer proof, workflow preview | dark canvas, large white headline, green status dots, layered product mockup |
| 2 | feature-grid | Centered section introduction above a multi-card capability grid. | capability discovery, feature navigation | centered heading, charcoal cards, embedded interface previews |
| 3 | feature-grid | Dark product-led content area with compact interface-led feature panels. | feature exploration | workflow panels, fine borders, low-contrast surfaces |
| 4 | testimonials | Grid of varied testimonial cards with quotes, customer portraits, and role details. | social proof, customer attribution | charcoal quote cards, small portraits, subtle card outlines |
| 5 | cta | Centered headline and supporting copy inside a framed dark panel. | request-a-demo CTA | framed panel, centered typography, light button |
| 6 | footer | Multi-column link groups with company information and a large branded graphic below. | site navigation, legal links | compact muted links, dark canvas, large brand mark |

## Source CSS custom properties (selected)

```css
--theme-accent-hue: 212;
--font-sans: "Inter", "Inter Fallback";
--font-display: "Inter", "Inter Fallback";
--font-hero-display: "Inter", "Inter Fallback";
--font-mono: "Geist Mono", "Geist Mono Fallback";
--radius-xs: .375rem;
--radius-sm: .5rem;
--radius-md: .75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--section-space: clamp(5.75rem, 7vw, 6.85rem);
--section-space-tight: clamp(4.9rem, 6vw, 5.95rem);
--section-header-gap: clamp(3rem, 3.5vw, 3.5rem);
--radius-pill-md: .625rem;
--radius-pill-sm: .6875rem;
--surface-soft-shadow: inset 0 1px 0 #ffffff14, inset 0 -1px 0 #ffffff05;
--pill-solid-border: #fff3;
--pill-solid-shadow: 0 1px 4px #0000001a, 0 0 1px #0000001a;
--button-pill-primary-hover-filter: brightness(1.06);
--button-pill-primary-bg: #f2f2f2;
--button-pill-primary-text: #333;
--button-pill-primary-text-shadow: 0 0 8px #00000005, 0 2px 4px #00000005;
--button-pill-secondary-bg: #ffffff0d;
--button-pill-secondary-text: #fff;
--mkt-announcement-bg: #f5f5f5;
--mkt-announcement-fg: #0b0c0e;
--mkt-announcement-shadow: #00000073;
--mkt-nav-panel-border: #ffffff1a;
--background: #0b0c0e;
--background-elevated: hsl(223 12% 28% / .34);
--background-strong: hsl(calc(223 + 4) 20% 23%);
--background-deep: hsl(calc(223 + 6) 27% 6%);
--background-footer: #171717;
--foreground: #ffffffeb;
--foreground-muted: #ffffffc2;
--foreground-soft: #ffffff8f;
--foreground-faint: #ffffff61;
--border: #e5e7eb1a;
--border-strong: #e5e7eb29;
--accent: #fffffff5;
```

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