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

# Resume.io · Design System

> Clear career tools in a calm, confident blue

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

Resume.io pairs a bright, spacious canvas with clear typography and a focused blue CTA to make resume creation feel approachable. Template previews, career guidance, reviews, and FAQs extend the page into a practical, content-rich journey without losing its calm visual hierarchy.

## North star

Keep the experience bright and readable, using blue for decisive actions and pale section bands to organize the long page.

## Overview

The page uses white and very pale blue-gray as its main canvas, with light section bands separating template browsing, reviews, and supporting content. Signal Blue (#1a91f0) marks the primary resume-creation actions and selected links; deep indigo (#282b8f) provides a strong, isolated backdrop for resume examples. TT Commons carries the interface from oversized, light-weight headlines to compact navigation and labels, keeping the tone approachable rather than corporate. A centered, constrained content area organizes split hero content, template galleries, feature cards, testimonials, and FAQs into readable blocks. Resume and career imagery is presented as product evidence: document previews, portraits, and small illustrations sit inside pale, softly rounded cards. Fine gray rules and restrained shadows distinguish components without adding heavy framing. The dark footer closes the long page with a clear tonal shift.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, template cards, and text on blue CTA buttons. |
| Signal Blue | `#1a91f0` | `--color-signal-blue` | brand | Primary resume-creation CTA, key links, and highlighted hero wording. |
| Career Ink | `#1e2532` | `--color-career-ink` | neutral | Main headings, body copy, navigation labels, and text on light cards. |
| Midnight Indigo | `#1a1c6a` | `--color-midnight-indigo` | accent | Small dark-blue button treatment appearing in measured component data. |
| Cloud Slate | `#eff2f9` | `--color-cloud-slate` | surface | Pale card and link surfaces, including supporting content panels. |
| Quiet Rule | `#d9deeb` | `--color-quiet-rule` | neutral | Hairline borders and separators, especially across navigation and content. |
| Frost Canvas | `#f7f9fc` | `--color-frost-canvas` | surface | Soft section bands, template gallery background, and review section surface. |
| Slate Copy | `#656e83` | `--color-slate-copy` | neutral | Muted supporting text, captions, and footer copy. |
| Blue Gray | `#828ba2` | `--color-blue-gray` | neutral | Secondary low-emphasis text, especially supporting and footer details. |
| Night Footer | `#0f141e` | `--color-night-footer` | surface | Dark footer background and occasional high-contrast heading treatment. |
| Link Blue | `#1170cd` | `--color-link-blue` | accent | Secondary blue button accent in measured component data. |
| Coral Badge | `#f68559` | `--color-coral-badge` | semantic | HR APPROVED label on a career article card; a content badge, not a core surface. |
| Periwinkle Badge | `#9ba1fb` | `--color-periwinkle-badge` | semantic | FIELD TESTED label on a career article card; a content badge, not a core surface. |
| Example Indigo | `#282b8f` | `--color-example-indigo` | brand | Full-width resume examples section backdrop, creating the page's strongest color block. |
| Recruiter Mint | `#e7f4ed` | `--color-recruiter-mint` | semantic | Pale green feature-card surface behind recruiter-match content. |
| Button Mist | `#e7eaf4` | `--color-button-mist` | surface | Light button text or control surface paired with dark indigo in measured data. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eff2f9` (Cloud Slate) · `--color-surface-2` → `#f7f9fc` (Frost Canvas) · `--color-surface-3` → `#0f141e` (Night Footer) · `--color-text` → `#1e2532` (Career Ink) · `--color-text-muted` → `#656e83` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d9deeb` (Quiet Rule) · `--color-accent` → `#1a91f0` (Signal Blue) · `--color-accent-2` → `#282b8f` (Example Indigo) · `--color-accent-3` → `#1170cd` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e2532` | `#ffffff` | 15.37:1 | AAA |
| `#1e2532` | `#eff2f9` | 13.72:1 | AAA |
| `#1e2532` | `#f7f9fc` | 14.58:1 | AAA |
| `#1e2532` | `#0f141e` | 1.2:1 | fail |
| `#656e83` | `#ffffff` | 5.11:1 | AA |
| `#656e83` | `#eff2f9` | 4.56:1 | AA |
| `#656e83` | `#f7f9fc` | 4.84:1 | AA |
| `#656e83` | `#0f141e` | 3.61:1 | AA-large |
| `#ffffff` | `#eff2f9` | 1.12:1 | fail |
| `#ffffff` | `#f7f9fc` | 1.05:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TT Commons | `--font-body` | webfont | 400, 600, 500, 700 | All interface typography, including display headings, navigation, body copy, buttons, and labels. | Inter |

- **TT Commons:** Measured weights 400, 500, 600, and 700; mostly sentence case, with uppercase tracked eyebrow labels and airy regular-weight headings.

### Type scale — Major Third (ratio ≈ 1.287, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 67px | 400 | 0.96 | 0 | — | TT Commons | Large hero and prominent promotional headlines. |
| h1 | 52px | 400 | 1 | 0 | — | TT Commons | Primary page heading in the opening hero. |
| h2 | 40px | 400 | 1 | 0 | — | TT Commons | Section titles for templates, reviews, and FAQs. |
| h3 | 31px | 400 | 1.16 | 0 | — | TT Commons | Feature-panel headings and supporting content titles. |
| h4 | 24px | 400 | 1.17 | 0 | — | TT Commons | Card titles and smaller subsections. |
| body | 19px | 400 | 1.26 | 0 | — | TT Commons | Hero descriptions, feature explanations, and review text. |
| caption | 16px | 400 | 1.25 | 0 | — | TT Commons | Review details, template notes, and supporting metadata. |
| button | 15px | 400 | 1.2 | 0 | — | TT Commons | Primary and secondary action labels. |
| nav | 19px | 400 | 1.26 | 0 | — | TT Commons | Header navigation and menu labels. |
| link | 19px | 400 | 1.26 | 0 | — | TT Commons | Text links throughout resources and content cards. |
| eyebrow | 14px | 600 | 1.43 | 0.129em | uppercase | TT Commons | Uppercase, tracked badges and compact section labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 14, 16, 20, 24, 32, 36, 48, 60, 64 px.
- Section rhythm 64px · element gap 12px · card padding — · max content width 1120px.

A centered content system uses a measured maximum width of 1120px, with comfortable density and a 64px section rhythm. The opening hero is a two-column split, pairing left-aligned copy and actions with a resume-builder visual. Lower sections alternate between centered headings, card grids, galleries, and broad color bands. Pale backgrounds distinguish selected sections from the white canvas. Content is spacious, while the footer becomes a denser multi-column link layout.

## Shape & elevation

- Radius: button `9999px` · card `4px` · media `4px` · badge `4px` · link `24px` · xs `4px` · sm `12px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `lg` (media): `rgba(15, 56, 113, 0.12) 0px 8px 20px -4px, rgba(15, 56, 113, 0.08) 0px 2px 4px -1px, rgba(15, 56, 113, 0.32) 0px 0px 1px 0px`
- Shadow `sm` (card): `rgba(15, 56, 113, 0.08) 0px 2px 4px 0px, rgba(15, 56, 113, 0.12) 0px 1px 2px 0px, rgba(15, 56, 113, 0.32) 0px 0px 1px 0px`
- Motion: standard transition `0.1s ease` on interactive elements.

The design favors flat section bands, thin borders, and clean card edges over heavy shadows. Cards and media use subtle measured blue-tinted shadows to lift previews from pale surfaces. Small card radii keep the look crisp, while CTA buttons and pill controls use more rounded silhouettes.

## Imagery

The visual language combines resume-document mockups, job-seeker portraits, recruiter illustrations, and small feature graphics. Hero media is layered beside the headline, while template previews are shown as a browsable document gallery. Images usually sit on pale backgrounds with restrained shadows and simple framing. Supporting illustrations may introduce additional colors, but the persistent brand identity remains the blue-and-white interface.

## Components

### Primary CTA

Signal Blue (#1a91f0) button with white text; measured label uses semibold TT Commons and a compact rectangular shape.

### Hero split

Large left-aligned headline, short supporting line, paired creation/upload actions, trust proof, and resume-preview imagery on the right.

### Template gallery

Pale Frost Canvas section with centered heading and horizontally browsable document-preview cards.

### Feature panels

Softly rounded pale cards combine concise copy with product interface previews or career illustrations.

### Resume examples band

Full-width Example Indigo (#282b8f) section pairing category links and light text with resume document previews.

### Review carousel

Frost Canvas review section with a centered heading, star-rating content, and understated carousel controls.

### Footer

Night Footer (#0f141e) closes the page with a prominent resume-creation link and grouped resource columns.

### Measured component styles

- **Primary button** (“Doctor”): background #1a1c6a · text #e7eaf4 · radius 36px · padding 6px 12px · 400 15px TT Commons
- **Secondary button** (“Create my resume”): background #1a91f0 · text #ffffff · radius 4px · padding 14px 24px · 600 18px TT Commons
- **Link** (“Video Career Best way to ask for that pr”): background #eff2f9 · text #1e2532 · radius 24px · padding 24px · 400 19px TT Commons
- **Card** (“Try this template”): background #ffffff · text #1e2532 · radius 4px · padding 0px · 400 19px TT Commons
- **Badge** (“FIELD TESTED”): background #9ba1fb · text #ffffff · radius 4px · padding 0px 8px · 600 14px TT Commons · uppercase
- **Navigation item** (“Resume Templates Resume Examples Cover L”): transparent background · text #1e2532 · radius 0px · padding 0px · 400 19px TT Commons

## Do

- Use TT Commons or a close, clean sans-serif substitute.
- Keep the main canvas white and use Frost Canvas for selected section bands.
- Reserve Signal Blue for primary actions and meaningful link emphasis.
- Make the hero a clear copy-and-preview split.
- Use resume previews and career imagery as supporting evidence.
- Separate long-page content with generous whitespace and clear bands.

## Don't

- Do not add gradients or saturated background colors across the whole page.
- Do not use heavy borders or deep shadows on every card.
- Do not turn the content into a dense dashboard grid.
- Do not use the badge colors as primary brand colors.
- Do not make every section center-aligned; preserve varied content layouts.
- Do not let decorative imagery compete with the main CTA.

## Agent prompt

Build a new page in the Resume.io visual style: calm, spacious, and focused on practical career tools. Use Gallery White (#ffffff) as the primary canvas, Frost Canvas (#f7f9fc) for occasional section bands, and Career Ink (#1e2532) for headings and body text. Apply Signal Blue (#1a91f0) to the primary CTA and selected links, with white button text. Use TT Commons when available, or Inter as a free substitute; keep headings light and readable, with tracked uppercase labels only for small eyebrows. Organize content inside a centered 1120px maximum-width area with comfortable spacing. Combine split hero content, product previews, rounded feature cards, review or template sections, and a Night Footer (#0f141e). Keep borders subtle, shadows restrained, and imagery supportive rather than decorative.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White navigation above a pale two-column hero; copy and CTA on the left, resume product preview on the right. | primary create action, upload alternative, trust and review proof | large multiline headline, blue CTA, product mockup, pale hero surface |
| 2 | gallery | Pale full-width band with centered heading and a horizontal row of document template previews. | browse templates, scan template labels | document preview cards, centered section title, soft background band |
| 3 | gallery | Full-width indigo band with category navigation and resume document previews. | filter by profession, browse examples | dark indigo backdrop, category links, document previews |
| 4 | testimonials | Pale two-column review area with a centered heading and horizontally arranged rating and testimonial content. | review trust signals, carousel browsing | star ratings, subtle divider, pale section band |
| 5 | footer | Dark full-width footer with a prominent creation link and several compact columns of grouped navigation. | navigate resource categories, return to resume creation | near-black background, multi-column link groups, brand mark |

## Source CSS custom properties (selected)

```css
--facebook-color: #3b5998;
--twitter-color: #1da1f2;
--linkedin-color: #0077b5;
--youtube-color: #ff3d00;
--pinterest-color: #cd1f28;
--spotify-color: #1ed760;
--tiktok-color: #1e2532;
```

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