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

# Sprig · Design System

> Quiet editorial clarity with warm, atmospheric gradients

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

Sprig pairs a restrained, light canvas and editorial typography with warm gradient-framed product interfaces. Long-form sections make the survey workflow legible, while dark bands and compact pill CTAs provide contrast.

## North star

Keep the page calm and editorial, using warm gradients to frame product UI rather than overwhelm the neutral canvas.

## Overview

The visual system is built on a warm off-white canvas (#faf9f8), with dark ink text (#141312) and muted gray copy that keeps the page calm and readable. Large, regular-weight ABC Diatype headings establish an editorial rhythm; body copy remains compact and understated. Soft peach, sand, and muted violet gradients frame product screenshots, rather than acting as broad brand-color fills. The page uses a single main content axis with spacious vertical intervals and alternating product demonstrations, text, and capability summaries. A near-black section interrupts the pale flow to foreground enterprise use cases. Rounded dark CTA pills are visually distinct without feeling loud. Fine gray borders define cards and separations, while most sections remain flat and shadow-free. Product UI imagery is clean, white, and presented within generous gradient backdrops; testimonial and event imagery add occasional human color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#faf9f8` | `--color-warm-canvas` | surface | Dominant page background across the hero and most content sections. |
| Soft Graphite | `#575653` | `--color-soft-graphite` | neutral | Primary muted copy and navigation text on pale backgrounds. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product interface panels, headings on dark buttons, and crisp card areas. |
| Ink Black | `#141312` | `--color-ink-black` | brand | Main headings, strong body text, and prominent inline links. |
| Quiet Border | `#e8e7e6` | `--color-quiet-border` | semantic | Fine card outlines and subtle section or component separators. |
| Warm Gray | `#6e6d6a` | `--color-warm-gray` | neutral | Secondary supporting copy and less prominent explanatory text. |
| Sand Glow | `#efdcb6` | `--color-sand-glow` | accent | Pale gradient tone behind product demonstrations and decorative media. |
| Muted Violet | `#7d7a8f` | `--color-muted-violet` | accent | Cool gradient endpoint in product showcase backdrops. |
| Apricot Glow | `#eba37e` | `--color-apricot-glow` | accent | Warm gradient highlight around product screens and occasional accent links. |
| Pale Divider | `#cccbca` | `--color-pale-divider` | semantic | Subtle component outlines and low-emphasis interface separators. |
| Charcoal Button | `#272420` | `--color-charcoal-button` | brand | Dark pill CTA backgrounds and selected dark interface surfaces. |
| Mist Text | `#c4c4bc` | `--color-mist-text` | neutral | Soft light-colored copy used on darker surfaces. |
| Night Section | `#1c1a17` | `--color-night-section` | brand | Full-width dark band for the enterprise capabilities section. |
| Cloud Panel | `#f0efee` | `--color-cloud-panel` | surface | Light card fills and pale secondary button backgrounds. |
| Button Hover Gray | `#dddcd9` | `--color-button-hover-gray` | semantic | Light button hover or alternate pale control surface. |
| Charcoal Edge | `#42413f` | `--color-charcoal-edge` | semantic | Subtle outlines and interface details against dark backgrounds. |
| Soft Marigold | `#ffd9a0` | `--color-soft-marigold` | accent | Small warm highlight within gradients and decorative product media. |

### Semantic aliases

`--color-canvas` → `#faf9f8` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#272420` (Charcoal Button) · `--color-surface-3` → `#1c1a17` (Night Section) · `--color-surface-4` → `#f0efee` (Cloud Panel) · `--color-text` → `#141312` (Ink Black) · `--color-text-muted` → `#575653` (Soft Graphite) · `--color-text-subtle` → `#6e6d6a` (Warm Gray) · `--color-border` → `#e8e7e6` (Quiet Border) · `--color-accent` → `#eba37e` (Apricot Glow) · `--color-accent-2` → `#ffd9a0` (Soft Marigold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141312` | `#faf9f8` | 17.65:1 | AAA |
| `#141312` | `#ffffff` | 18.56:1 | AAA |
| `#141312` | `#272420` | 1.2:1 | fail |
| `#141312` | `#1c1a17` | 1.07:1 | fail |
| `#575653` | `#faf9f8` | 6.98:1 | AA |
| `#575653` | `#ffffff` | 7.34:1 | AAA |
| `#575653` | `#272420` | 2.1:1 | fail |
| `#575653` | `#1c1a17` | 2.37:1 | fail |
| `#6e6d6a` | `#faf9f8` | 4.92:1 | AA |
| `#6e6d6a` | `#ffffff` | 5.17:1 | AA |

### Gradients

- `linear-gradient(rgb(239, 220, 182), rgb(235, 163, 126) 0%, rgb(125, 122, 143))`
- `linear-gradient(142deg, rgb(239, 220, 182), rgb(235, 163, 126) 50%, rgb(125, 122, 143))`
- `linear-gradient(rgb(239, 220, 182), rgb(125, 122, 143))`
- `linear-gradient(rgb(255, 217, 160), rgb(91, 88, 60))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype | `--font-body` | webfont | 400, 500 | Page headings, navigation, body copy, captions, links, and CTA labels. | Inter |

- **ABC Diatype:** Regular weight dominates, with measured 400 and 500 weights; sentence case and neutral tracking keep the tone understated.

### Type scale — Perfect Fourth (ratio ≈ 1.357, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | 0 | — | ABC Diatype | Hero headline and primary page statement. |
| h2 | 32px | 400 | 1.2 | 0 | — | ABC Diatype | Major section headings and closing CTA headline. |
| h3 | 24px | 400 | 1.2 | 0 | — | ABC Diatype | Feature and capability subsection headings. |
| body | 16px | 400 | 1.3 | 0 | — | ABC Diatype | Explanatory paragraphs, product descriptions, and testimonials. |
| caption | 14px | 400 | 1.3 | 0 | — | ABC Diatype | Small labels and supporting details near product imagery. |
| button | 16px | 400 | 1.4 | 0 | — | ABC Diatype | CTA labels, especially the dark pill demo action. |
| nav | 14px | 400 | 1.3 | 0 | — | ABC Diatype | Header links and primary site navigation. |
| link | 14px | 400 | 1.3 | 0 | — | ABC Diatype | Inline product links and secondary calls to action. |

## Spacing & layout

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

The page follows a broad single-column content axis within a measured 1200px maximum width, with text aligned left in most sections and centered headings where a band or showcase calls for emphasis. Feature stories alternate concise copy with large interface demonstrations, leaving generous open canvas between them. A four-column capability band and two-column distribution section add local variety without changing the overall spacious rhythm. Keep density comfortable: short text blocks, clear hierarchy, and room around media.

## Shape & elevation

- Radius: button `9999px` · card `4px` · media `50%` · nav `9999px` · xs `4px` · sm `8px` · md `0px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat, with no measured shadows. Use hairline gray borders for cards and separators, and rely on contrast, spacing, and gradient backdrops for depth. Product panels layer cleanly over gradient fields; dark bands and pill CTAs create the strongest visual separation.

## Imagery

Product screenshots are the central visual asset: crisp white interface panels sit inside soft, atmospheric gradients in peach, sand, violet, or cool green-blue. The framing is rectangular and generous, with the UI kept legible rather than heavily decorated. Small customer logos and certification marks provide proof points; testimonial portraits and event thumbnails add human color later in the page.

## Components

### Primary demo CTA

Use a charcoal pill (#272420) with white label text, compact horizontal padding, and a dark, high-contrast silhouette.

### Top navigation

Place the wordmark at the left, muted navigation links across the center, and sign-in plus demo CTA at the right.

### Gradient product frame

Set a clean white product screenshot over a soft sand, apricot, or violet gradient backdrop.

### Feature story

Pair a small workflow label and heading with concise explanatory copy, a text link, and a large UI demonstration.

### Dark capability band

Use a full-width #1c1a17 section, centered light heading, then four compact capability cards.

### Testimonial panel

Combine a dark brand panel with a warm gradient quote panel, white copy, and a small speaker attribution.

### Measured component styles

- **Primary button** (“Book a demo”): background #272420 · text #ffffff · radius 32px · padding 8px 16px · 400 14px ABC Diatype
- **Secondary button** (“Panels”): background #f0efee · text #222222 · radius 8px · padding 8px 12px · 400 18px TT Commons Pro
- **Link** (“Experience Measurement Monitor health me”): background #211f1c · text #0b2330 · radius 0px · padding 24px · 400 18px TT Commons Pro
- **Card**: background #f0efee · text #0b2330 · radius 4px · padding 48px · 400 16px TT Commons Pro
- **Navigation item** (“Solutions Agents Deploy Customers Commun”): transparent background · text #0b2330 · radius 0px · padding 0px · 400 16px TT Commons Pro

## Do

- Use Warm Canvas (#faf9f8) as the default page background.
- Keep headings in regular-weight, sentence-case typography.
- Frame product UI with restrained warm or cool gradients.
- Use Charcoal Button (#272420) for the primary demo CTA.
- Separate stories with generous whitespace and concise copy.
- Reserve Night Section (#1c1a17) for a strong full-width contrast break.

## Don't

- Do not turn accent gradients into full-page background fills.
- Do not add heavy shadows or glossy effects.
- Do not crowd product screenshots with decorative elements.
- Do not use saturated colors for ordinary text or navigation.
- Do not make every section a card grid.
- Do not replace the calm editorial rhythm with dense dashboard-like layouts.

## Agent prompt

Build a new page in Sprig’s calm, editorial SaaS style. Use Warm Canvas (#faf9f8) as the main background, Ink Black (#141312) for headings, and Soft Graphite (#575653) or Warm Gray (#6e6d6a) for supporting copy. Use ABC Diatype or a close sans-serif substitute with regular-weight, sentence-case typography. Keep a broad centered content axis and generous vertical breathing room. Present product interfaces as clean white panels framed by restrained Sand Glow (#efdcb6), Apricot Glow (#eba37e), or Muted Violet (#7d7a8f) gradients. Use Charcoal Button (#272420) for compact pill CTAs. Add an occasional Night Section (#1c1a17) band for strong contrast, with light text and simple capability cards. Favor hairline borders and flat surfaces; avoid heavy shadows, dense grids, and decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and copy above a wide product showcase. | demo CTA, product preview | pill button, gradient media frame, logo row |
| 2 | how-it-works | Long single-column sequence of workflow stories with alternating text and product media. | workflow explanation, feature links | step labels, product screenshots, short benefit lists |
| 3 | feature-grid | Dark full-width band with centered introduction above four capability columns. | capability scan, category links | dark surface, icon-led cards, light text |
| 4 | feature-split | Centered section heading and copy above channel selector and wide product interface. | channel selection, distribution preview | tab-like links, product screenshot, two-column details |
| 5 | feature-split | Certification marks on one side, explanatory text on the other. | trust signaling, compliance reassurance | certification tiles, subtle outlined panel |
| 6 | other | Centered trust statement on the pale canvas. | social proof | centered heading, supporting sentence |
| 7 | testimonials | Two-panel testimonial card with brand field and quote field. | testimonial carousel, speaker attribution | dark panel, gradient quote panel, carousel controls |
| 8 | gallery | Introductory event copy above a horizontal strip of image tiles. | event discovery, browse events | editorial text, image carousel, dark pill CTA |
| 9 | gallery | Wide, compact horizontal image strip. | visual browsing | image tiles, horizontal gallery |
| 10 | cta | Closing copy and demo action above a large decorative visual. | conversion CTA, demo booking | text-and-button block, soft media panel |

## Source CSS custom properties (selected)

```css
--border: #e2e3e1;
--text--strong: #141312;
--border--strong: #141312;
--background--surface-2-dark-mode: #1f1e1c;
--background--white: #faf9f8;
--border--subtle: #e8e7e6;
--background--surface-4: #f0efee;
--background--mid-tone: #1c1a17;
--text--button-v2--black: #272420;
--border--faint: #f7f6f5;
--text--medium: #575653;
--text--button-v2--white-hover: #dddcd9;
--background--surface-5: #e8e7e6;
--background--surface-2: #faf9f8;
--text--medium-white: #c4c4bc;
--text--neutral-white: #9a9a91;
--text--faint: #9c9b98;
--text--button-v2--white: #f0efee;
--text--button-v2--yellow: #ffc566;
--text--button-v2--black-hover: #433e37;
--border--neutral: #2f2e2c;
--text--neutral: #6e6d6a;
--border--strong-dark-bg: #42413f;
--background--mid-tone-dark-mode: #272420;
--background--mid-tone-100: #433e37;
--gray-border: #1b12251a;
```

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