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

# 15Five · Design System

> Warm editorial clarity for people-first performance software

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

15Five pairs refined serif headlines with a warm, pale canvas and deep purple controls. Product-interface mockups, customer proof, and focused feature blocks make the homepage feel human and credible without sacrificing software clarity.

## North star

Use editorial serif headlines and restrained purple controls on a bright, spacious canvas, saving vivid gradients for deliberate proof and product moments.

## Overview

The homepage uses a predominantly white canvas, with pale peach bands and vivid coral-to-purple gradient artwork reserved for hero and proof moments. Deep aubergine anchors display headlines, navigation details, and primary actions; muted purple-gray carries body copy, while thin neutral borders keep controls and cards legible without adding visual weight. DM Serif Display gives large headlines a confident editorial voice, balanced by Manrope for navigation, paragraphs, labels, and buttons. The opening composition centers a short eyebrow, a stacked headline, concise support copy, paired pill actions, and layered product-dashboard cards. Further down, broad white intervals separate customer logos, testimonials, product tabs, split feature panels, solution cards, integrations, reviews, FAQs, and a dark footer. Imagery mixes software screenshots with people photography and softly colored graphic backdrops. Keep the hierarchy calm and spacious; use gradients as occasional emphasis, not as the page’s default surface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation and card surfaces, white text on filled purple buttons, and footer copy. |
| Mulberry Ink | `#2f115b` | `--color-mulberry-ink` | brand | Deep purple used in product panels, outlined secondary actions, and supporting interface details. |
| Velvet Purple | `#3b1572` | `--color-velvet-purple` | accent | Primary Book a Demo button and the purple endpoint of the brand gradient. |
| Midnight Plum | `#1a0d3f` | `--color-midnight-plum` | brand | Primary headline and body ink, plus the dark endpoint of the gradient and deep footer surfaces. |
| Signal Tangerine | `#ff4b11` | `--color-signal-tangerine` | accent | Small, high-energy button or brand-detail accent; use sparingly rather than as a broad page surface. |
| Muted Iris | `#5e5777` | `--color-muted-iris` | semantic | Secondary paragraphs, navigation text, and quieter copy within product and feature panels. |
| Soft Divider | `#e1e1e1` | `--color-soft-divider` | neutral | Fine borders and separators on outlined controls and low-contrast interface details. |
| Apricot Veil | `#fff2e8` | `--color-apricot-veil` | surface | Warm tinted section surface, most visible behind the hero and selected promotional blocks. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fff2e8` (Apricot Veil) · `--color-text` → `#1a0d3f` (Midnight Plum) · `--color-text-muted` → `#5e5777` (Muted Iris) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e1e1e1` (Soft Divider) · `--color-accent` → `#3b1572` (Velvet Purple) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a0d3f` | `#ffffff` | 17.9:1 | AAA |
| `#1a0d3f` | `#fff2e8` | 16.29:1 | AAA |
| `#5e5777` | `#ffffff` | 6.76:1 | AA |
| `#5e5777` | `#fff2e8` | 6.16:1 | AA |
| `#ffffff` | `#fff2e8` | 1.1:1 | fail |
| `#3b1572` | `#ffffff` | 13.67:1 | AAA |
| `#3b1572` | `#fff2e8` | 12.44:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(59, 21, 114) 0%, rgb(26, 13, 63) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope | `--font-body` | webfont | 400, 500, 300, 700, 600 | Navigation, body copy, labels, captions, buttons, and most interface text. | Inter |
| DM Serif Display | `--font-display` | webfont | 400 | Display headlines and section headings. | Bodoni Moda |

- **Manrope:** Use mostly regular weights for copy, medium for small navigation and labels, and bold for CTAs; keep tracking restrained.
- **DM Serif Display:** Regular-weight serif creates the editorial headline contrast; use sentence case and natural line wrapping.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.07 | 0 | — | DM Serif Display | Large editorial hero headline. |
| h1 | 44px | 400 | 1.14 | 0 | — | DM Serif Display | Primary hero title and prominent page heading. |
| h2 | 30px | 400 | 1.27 | 0 | — | DM Serif Display | Major section headlines. |
| h3 | 20px | 400 | 1.5 | 0 | — | DM Serif Display | Feature-card and product-panel headings. |
| body | 16px | 400 | 1.63 | 0 | — | Manrope | Paragraphs, descriptions, testimonial copy, and FAQ text. |
| caption | 12px | 500 | 1.5 | 0.002em | — | Manrope | Eyebrows, small labels, and compact metadata. |
| button | 14px | 700 | 1.5 | 0 | — | Manrope | Bold CTA text on pill-shaped actions. |
| nav | 12px | 500 | 1.5 | 0.002em | — | Manrope | Compact navigation labels and menu items. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 5, 10, 12, 14, 15, 16, 20, 24, 30, 32, 34, 40, 50, 100 px.
- Section rhythm 70px · element gap 20px · card padding 45px · max content width 1323px.

Use a centered, comfortable-width content frame with broad vertical pauses between major homepage sections. The measured maximum content width is 1323px; maintain the screenshot’s centered hero and largely two-column feature layouts within it. Align section headings centrally for proof and product showcases, then switch to start-aligned copy in feature splits. The page mixes wide bands, card grids, and image-text pairs rather than a rigid repeated grid. Spacing follows a measured 4px base scale and comfortable density, with clear separation between sections and tighter grouping inside components.

## Shape & elevation

- Radius: button `9999px` · card `16px` · nav `9999px` · link `10px` · xs `10px` · sm `12px` · md `16px` · lg `17px` · pill `9999px`
- Shadow `lg` (link): `rgba(0, 0, 0, 0.1) 0px 12px 30px 0px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0.08) 0px 2px 7px 0px`
- Motion: standard transition `0.4s ease` on interactive elements.

Most sections are flat white or softly tinted, with thin neutral outlines defining buttons, FAQ rows, and product cards. Use restrained shadows for floating navigation or selected link/card elements. Create depth mainly through overlapping dashboard mockups and layered image panels, not heavy drop shadows or dense borders.

## Imagery

Combine interface screenshots and dashboard mockups with customer logos, review panels, and authentic workplace photography. Hero product cards overlap softly colored abstract gradient forms; keep screenshots in clean white containers with readable UI detail. People imagery appears in modular solution cards, often against vivid coral, peach, or purple backdrops. Use gradients as decorative framing rather than a substitute for the actual product visuals.

## Components

### Primary CTA

Filled #3b1572 pill button with white bold Manrope text; used for Book a Demo in the header and hero.

### Secondary CTA

White or transparent pill with a thin #2f115b outline and bold purple text, as in See Pricing.

### Hero product mockups

Overlapping white dashboard cards over a peach-to-coral backdrop, pairing small UI labels, copy, and chart-like product visuals.

### Product showcase

Tabbed product navigation above a two-part panel: product interface imagery alongside a deep purple feature card.

### Solution cards

Compact image-and-copy cards combine workplace photography, short serif headings, concise text, and outlined Learn how actions.

### Review and testimonial panels

Customer proof sits in warm gradient bands with white cards, star ratings, attribution, and concise testimonial text.

### FAQ rows

Simple question rows on white with fine horizontal separators and a trailing plus indicator.

### Footer

Full-width deep purple footer with proof badges, grouped small navigation links, social icons, and a fine divider.

### Measured component styles

- **Primary button** (“Book a Demo”): background #3b1572 · text #ffffff · border 1px solid #3b1572 · radius 68px · padding 16px 40px · 700 14px Manrope
- **Secondary button** (“See Pricing”): transparent background · text #2f115b · border 1px solid #2f115b · radius 68px · padding 16px 40px · 700 14px Manrope
- **Link** (“Improve Manager Effectiveness Empower ev”): transparent background · text #0000ee · radius 10px · padding 0px · 500 18px Manrope · shadow rgba(0, 0, 0, 0.1) 0px 12px 30px 0px
- **Card** (“Performance Reviews. Reimagined with AI ”): background #2f115b · text #5e5777 · radius 16px · padding 50px 40px · 400 18px Manrope
- **Navigation item** (“Products Solutions Resources Pricing Log”): transparent background · text #5e5777 · radius 0px · padding 0px · 400 18px Manrope

## Do

- Lead with a centered serif headline and brief supporting copy.
- Use #1a0d3f for primary text and #5e5777 for secondary copy.
- Keep primary actions filled in #3b1572 with white text.
- Reserve #fff2e8 and gradients for selected emphasis bands.
- Show product UI in clean, layered white cards.
- Leave broad white intervals between major content groups.

## Don't

- Do not make every section a colored panel.
- Do not use sans-serif for the main display headlines.
- Do not replace measured colors with approximate palette variants.
- Do not crowd the hero with extra controls or copy.
- Do not apply heavy shadows to every card.
- Do not treat illustration-only colors as core interface colors.

## Agent prompt

Build a new 15Five-style SaaS page with a bright white canvas and a calm, editorial hierarchy. Use DM Serif Display for prominent headings and Manrope for navigation, body, labels, and actions. Set primary text in Midnight Plum (#1a0d3f), secondary copy in Muted Iris (#5e5777), and main CTAs in Velvet Purple (#3b1572) with white text. Use Apricot Veil (#fff2e8) for selected warm section surfaces; keep vivid gradients occasional and decorative. Create a centered, spacious opening with a short eyebrow, confident headline, concise copy, paired pill actions, and layered product UI. Build lower sections from clean feature splits, customer proof, image-and-copy cards, and simple FAQ rows. Favor fine borders and restrained elevation over heavy shadows; preserve generous whitespace and readable content grouping.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | logo-cloud | Centered heading and supporting line above a horizontal customer-logo row on white. | Customer credibility, Logo recognition | Centered serif heading, Horizontal logo cloud, White background |
| 2 | testimonials | Wide testimonial panels arranged as a multi-column carousel-like sequence. | Customer story, Carousel navigation | Warm gradient panel, Quote and attribution, Outlined story action |
| 3 | product-showcase | Centered section intro, compact product tabs, then a two-column interface-and-feature panel. | Product tab selection, Explore products | Centered headline, Tabbed navigation, Split product panel |
| 4 | feature-split | Two vertically sequenced feature splits with copy and product imagery alternating sides. | Feature exploration, Product detail links | Alternating image-copy layout, Small eyebrow labels, Outlined actions |
| 5 | feature-grid | Centered section heading above a two-column grid of image-and-copy solution cards. | Browse by team need, Learn more | Photo cards, Short serif titles, Outlined links |
| 6 | integrations | Start-aligned copy and action beside a large integration-logo illustration. | Explore integrations, HRIS connectivity | Split composition, Logo orbit graphic, Small eyebrow |
| 7 | footer | Full-width dark footer with an awards band, several compact link columns, and a bottom utility row. | Browse site sections, Social links, App downloads | Deep purple background, Grouped navigation, Thin horizontal rules |

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