North star · Keep the experience bright and readable, using blue for decisive actions and pale section bands to organize the long page.
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.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Cloud Slate表层 2 · Frost Canvas表层 3 · Night Footer主文字 · Career Ink次要文字 · Slate Copy弱文字 · Gallery White描边 · Quiet Rule强调 · Signal Blue强调 2 · Example Indigo强调 3 · Link Blue
All interface typography, including display headings, navigation, body copy, buttons, and labels.
角色
示例
字号
字重
行高
字距
特大标题
Large hero and prominent promotional headlines.
Resume.io
67px
400
0.96
0
一级标题
Primary page heading in the opening hero.
Resume.io
52px
400
1
0
二级标题
Section titles for templates, reviews, and FAQs.
Resume.io
40px
400
1
0
三级标题
Feature-panel headings and supporting content titles.
Resume.io
31px
400
1.16
0
四级标题
Card titles and smaller subsections.
The quick brown fox 敏捷的狐狸
24px
400
1.17
0
正文
Hero descriptions, feature explanations, and review text.
The quick brown fox 敏捷的狐狸
19px
400
1.26
0
辅助文字
Review details, template notes, and supporting metadata.
The quick brown fox 敏捷的狐狸
16px
400
1.25
0
按钮
Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
15px
400
1.2
0
导航
Header navigation and menu labels.
The quick brown fox 敏捷的狐狸
19px
400
1.26
0
链接
Text links throughout resources and content cards.
The quick brown fox 敏捷的狐狸
19px
400
1.26
0
眉题
Uppercase, tracked badges and compact section labels.
The quick brown fox 敏捷的狐狸
14px
600
1.43
0.129em
间距与布局
基准单位 8px · 密度：适中
64px版块间距
12px元素间距
—卡片内边距
1120px内容最大宽度
2px
4px
6px
8px
12px
14px
16px
20px
24px
32px
36px
48px
60px
64px
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.
圆角与层次
按钮 · 9999px
卡片 · 4px
图片 · 4px
徽标 · 4px
链接 · 24px
lg · media
sm · card
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.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
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.
✕ 不该做
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.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
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.
