Notion
Design — NotionDesign
https://www.notion.com/

NotionInter / Inter stack / Lyon Text serif stack

Within the sampled marketing scope, Notion uses white and warm off-white surfaces, near-black text, a large NotionInter display/body ramp, occasional Lyon Text editorial accents, and action-blue filled buttons with 8px radii. Pricing contributes denser plan tables and repeated conversion controls; Templates contributes search and category/card navigation.

Notion

https://www.notion.com/

Lightweight document-workspace aesthetic with strong typographic scale and restrained blue action accents

Color Palette

基础

Typography

Type Scale

43 个层级

NotionInter 14px / 20px · 50014px · 500

设计语言 Aa Bb 012

NotionInter 14px / 20px · 40014px · 400

设计语言 Aa Bb 012

NotionInter 14px / 20px · 50014px · 500

设计语言 Aa Bb 012

NotionInter 15px / 20px · 40015px · 400

设计语言 Aa Bb 012

NotionInter 16px / 24px · 40016px · 400

设计语言 Aa Bb 012

NotionInter 15px / 20px · 60015px · 600

设计语言 Aa Bb 012

NotionInter 18px / 28px · 70018px · 700

设计语言 Aa Bb 012

NotionInter 14px / 20px · 40014px · 400

设计语言 Aa Bb 012

NotionInter 16px / 24px · 50016px · 500

设计语言 Aa Bb 012

NotionInter 12px / 16px · 40012px · 400

设计语言 Aa Bb 012

NotionInter 16px / 24px · 70016px · 700

设计语言 Aa Bb 012

NotionInter 12px / 16px · 50012px · 500

设计语言 Aa Bb 012

NotionInter 16px / 24px · 60016px · 600

设计语言 Aa Bb 012

NotionInter 12px / 16px · 50012px · 500

设计语言 Aa Bb 012

NotionInter 22px / 28px · 70022px · 700

设计语言 Aa Bb 012

NotionInter 14px / 20px · 70014px · 700

设计语言 Aa Bb 012

NotionInter 14px / 24px · 50014px · 500

设计语言 Aa Bb 012

NotionInter 16px / 24px · 50016px · 500

设计语言 Aa Bb 012

NotionInter 15px / 20px · 70015px · 700

设计语言 Aa Bb 012

NotionInter 20px / 28px · 60020px · 600

设计语言 Aa Bb 012

Lyon Text 18px / 28px · 40018px · 400

设计语言 Aa Bb 012

NotionInter 12px / 16px · 60012px · 600

设计语言 Aa Bb 012

NotionInter 42px / 48px · 70042px · 700

设计语言 Aa Bb 012

NotionInter 32px / 40px · 70032px · 700

设计语言 Aa Bb 012

NotionInter 16px / 24px · 40016px · 400

设计语言 Aa Bb 012

NotionInter 54px / 56px · 70054px · 700

设计语言 Aa Bb 012

NotionInter 22px / 28px · 70022px · 700

设计语言 Aa Bb 012

NotionInter 32px / 40px · 70032px · 700

设计语言 Aa Bb 012

NotionInter 26px / 32px · 70026px · 700

设计语言 Aa Bb 012

NotionInter 14px / 20px · 70014px · 700

设计语言 Aa Bb 012

NotionInter 26px / 32px · 70026px · 700

设计语言 Aa Bb 012

NotionInter 42px / 48px · 70042px · 700

设计语言 Aa Bb 012

Lyon Text 16px / 24px · 40016px · 400

设计语言 Aa Bb 012

NotionInter 12px / 16px · 40012px · 400

设计语言 Aa Bb 012

NotionInter 20px / 28px · 40020px · 400

设计语言 Aa Bb 012

NotionInter 72px / 87.12px · 50072px · 500

设计语言 Aa Bb 012

NotionInter 96px / 100px · 60096px · 600

设计语言 Aa Bb 012

NotionInter 16px / 24px · 70016px · 700

设计语言 Aa Bb 012

NotionInter 64px / 64px · 70064px · 700

设计语言 Aa Bb 012

Lyon Text 32px / 40px · 40032px · 400

设计语言 Aa Bb 012

NotionInter 31.5px / 38.115px · 50031.5px · 500

设计语言 Aa Bb 012

NotionInter 42px / 48px · 60042px · 600

设计语言 Aa Bb 012

Lyon Text 22px / 28px · 40022px · 400

设计语言 Aa Bb 012

Fonts

Primary

Weight400, 500, 600, 700

Sizes14px, 15px, 16px, 18px, 12px, 22px, 20px, 42px, 32px, 54px, 26px, 72px, 96px, 64px, 31.5px

Secondary

Weight400

Sizes18px, 16px, 32px, 22px

Spacing & Shape

Spacing

序号	Value	Preview
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

Border Radius

Element	Value	Preview
radius-8px
radius-12px
radius-6px
radius-4px
radius-100-percent
radius-5px
radius-9999p01px
radius-16px
radius-50-percent
radius-20px
radius-14px
radius-24px
radius-11p7px

Elevation

Name	Value
shadow-raised-soft
shadow-raised-soft-alt
shadow-raised-highlight
shadow-compact
shadow-hairline
shadow-hairline-transparent
shadow-deep-large

Guidelines

Do

Use white or warm off-white base surfaces with near-black primary text and muted secondary text.
Reserve saturated action blue for primary actions and bright link-style accents, pairing it with white text on filled buttons.
Preserve the observed compact-to-display type ramp and negative tracking at large sizes.
Use the 8px button radius family and 36–38px desktop action height as the recurring action form.
Darken primary blue on hover and retain a visible offset focus ring for keyboard focus.

Don't

Do not treat every sampled px spacing as a global grid token; the observations include layout-specific and fractional computed values.
Do not claim an official private design-system name for sampled values; names in this deliverable are interpretive.
Do not apply hover/focus results to expanded menus or login states; those states were not interactively opened.
Do not assume iframe, shadow DOM, unread stylesheet declarations, or resource-error areas were fully represented.

# Notion — Style Reference
> Lightweight document-workspace aesthetic with strong typographic scale and restrained blue action accents

**Theme:** normal

测量值已归一化；名称、用途和建议属于解释。字体摘要独立列示，不按位置配对；字体文件未随产物分发。

Within the sampled marketing scope, Notion uses white and warm off-white surfaces, near-black text, a large NotionInter display/body ramp, occasional Lyon Text editorial accents, and action-blue filled buttons with 8px radii. Pricing contributes denser plan tables and repeated conversion controls; Templates contributes search and category/card navigation.

Source: https://www.notion.com/

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Primary text | #000000e5 | --color-text-primary | Default high-contrast body and control text observed across navigation and content. |
| Transparent white | #ffffff00 | --color-transparent-white | Transparent utility background and border used to preserve layout boxes. |
| Warm light neutral | #f6f5f4 | --color-neutral-warm-light | Warm off-white section and card surfaces repeated across pages and viewports. |
| Neutral border | #0000001a | --color-border-neutral | Low-contrast neutral border and divider color. |
| White | #ffffff | --color-surface-white | White page background and text on saturated action-blue surfaces. |
| Pure black ink | #000000 | --color-ink-black | Maximum-contrast ink and SVG fill samples. |
| Strong primary text | #000000f2 | --color-text-strong | Near-black text used by prominent hero and heading samples. |
| Observed color #00000012 | #00000012 | --color-neutral-00000012 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Secondary text | #000000bf | --color-text-secondary | Darker secondary text and media-overlay-related samples. |
| Warm placeholder text | #a39e98 | --color-text-placeholder-warm | Template search placeholder/icon text color. |
| Muted text | #0000008a | --color-text-muted | Muted labels, tertiary buttons, and supporting text. |
| Warm tertiary text | #615d59 | --color-text-tertiary-warm | Warm gray supporting text observed in sampled content. |
| Observed color #00000014 | #00000014 | --color-neutral-00000014 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #00000096 | #00000096 | --color-neutral-00000096 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Primary action blue | #0075de | --color-action-primary | Primary CTA background and saturated link/accent color. |
| Warm muted text | #78736f | --color-text-muted-warm | Muted warm gray text sampled in content areas. |
| Bright action blue | #097fe8 | --color-action-blue-bright | Bright blue used for link-style button text and hero highlight. |
| Soft info blue | #f0f6fd | --color-info-soft-blue | Very light blue surface sampled across pages. |
| Soft neutral surface | #f8f8f7 | --color-neutral-soft | Soft neutral surface sampled on pricing and template areas. |
| Primary action hover blue | #005bab | --color-action-primary-hover | Darker blue observed on hero CTA hover and used for secondary CTA text. |
| Subtle neutral surface | #f9f9f8 | --color-neutral-subtle | Light neutral surface sampled on repeated components. |
| Observed color #00000008 | #00000008 | --color-neutral-00000008 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FF6D00 | #ff6d00 | --color-orange-ff6d00 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Soft action blue | #e6f3fe | --color-action-soft-blue | Light blue secondary/tinted button surface. |
| Observed color #27918D | #27918d | --color-cyan-27918d | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #2383E20A | #2383e20a | --color-blue-2383e20a | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FFB110 | #ffb110 | --color-orange-ffb110 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #F64932 | #f64932 | --color-red-f64932 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Transparent black | #00000000 | --color-transparent-black | Transparent utility background and border used to preserve layout boxes. |
| Blue wash surface | #f2f9ff | --color-info-blue-wash | Light blue wash sampled on pricing/template components. |
| Observed color #0000000D | #0000000d | --color-neutral-0000000d | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #2684FF | #2684ff | --color-blue-2684ff | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #E32D14 | #e32d14 | --color-red-e32d14 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #1313BA | #1313ba | --color-blue-1313ba | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #1AAE39 | #1aae39 | --color-green-1aae39 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #E89D01 | #e89d01 | --color-orange-e89d01 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #24292F | #24292f | --color-blue-24292f | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #5059C9 | #5059c9 | --color-blue-5059c9 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #7B83EB | #7b83eb | --color-blue-7b83eb | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #F06A6A | #f06a6a | --color-red-f06a6a | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #E01E5A | #e01e5a | --color-pink-e01e5a | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #ECB22E | #ecb22e | --color-orange-ecb22e | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FC413D | #fc413d | --color-red-fc413d | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #36C5F0 | #36c5f0 | --color-cyan-36c5f0 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Placeholder text | #00000080 | --color-text-placeholder | Observed on pricing input text; named for that visible role within the sampled scope. |
| Observed color #0078D4 | #0078d4 | --color-blue-0078d4 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #2EB67D | #2eb67d | --color-green-2eb67d | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #28A8EA | #28a8ea | --color-blue-28a8ea | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #31302E | #31302e | --color-neutral-31302e | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #1490DF | #1490df | --color-blue-1490df | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #0364B8 | #0364b8 | --color-blue-0364b8 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FC6D26 | #fc6d26 | --color-orange-fc6d26 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #036C70 | #036c70 | --color-cyan-036c70 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #37C6D0 | #37c6d0 | --color-cyan-37c6d0 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #03787C | #03787c | --color-cyan-03787c | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #1A9BA1 | #1a9ba1 | --color-cyan-1a9ba1 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #222326 | #222326 | --color-neutral-222326 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FCA326 | #fca326 | --color-orange-fca326 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #E24329 | #e24329 | --color-red-e24329 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #EADBFA | #eadbfa | --color-purple-eadbfa | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #9849E8 | #9849e8 | --color-purple-9849e8 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FFE4AF | #ffe4af | --color-orange-ffe4af | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Media scrim gradient | Gradient | --gradient-gradient-media-scrim | Transparent-to-dark scrim for media overlays. |
| White fade gradient | Gradient | --gradient-gradient-white-fade | White-to-transparent fade used as a soft mask. |

## Tokens — Typography

### NotionInter / Inter stack — Primary UI and marketing type stack; declared font family with loaded NotionInter faces in successful snapshots. · --font-font-notion-inter-stack

- **Substitute:** Inter,  -apple-system,  "system-ui",  "Segoe UI",  Helvetica,  "Apple Color Emoji",  Arial,  sans-serif,  "Segoe UI Emoji",  "Segoe UI Symbol"
- **Rendered fonts observed:** Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 15px, 16px, 18px, 20px, 22px, 26px, 31.5px, 32px, 42px, 54px, 64px, 72px, 96px
- **Line height:** 1, 1.037, 1.042, 1.143, 1.21, 1.231, 1.25, 1.273, 1.333, 1.4, 1.429, 1.5, 1.556, 1.714
- **Letter spacing:** -4.6px, -2.12501px, -2px, -1.87501px, -1.5px, -0.875001px, -0.75px, -0.625px, -0.25px, -0.125px, 0.125px, normal
- **OpenType features:** "lnum", "locl" 0
- **Role:** Primary UI and marketing type stack; declared font family with loaded NotionInter faces in successful snapshots.

### Lyon Text serif stack — Secondary serif stack used for quotations/editorial samples; Lyon Text 400 was loaded in successful snapshots. · --font-font-lyon-text-stack

- **Substitute:** Georgia,  YuMincho,  "Yu Mincho",  "Hiragino Mincho ProN",  "Hiragino Mincho Pro",  "Songti TC",  "Songti SC",  SimSun,  "Nanum Myeongjo",  NanumMyeongjo,  Batang,  serif
- **Rendered fonts observed:** Lyon Text Web
- **Weights:** 400
- **Sizes:** 16px, 18px, 22px, 32px
- **Line height:** 1.25, 1.273, 1.5, 1.556
- **Letter spacing:** normal
- **OpenType features:** "liga", "lnum", "locl" 0
- **Role:** Secondary serif stack used for quotations/editorial samples; Lyon Text 400 was loaded in successful snapshots.

### Type Scale

| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|---|---|---|---|---|---|---|
| NotionInter 14px / 20px · 500 | NotionInter | 500 | 14px | 1.429 | normal | --text-type-14px-500-20px-font-size |
| NotionInter 14px / 20px · 400 | NotionInter | 400 | 14px | 1.429 | normal | --text-type-14px-400-20px-font-size |
| NotionInter 14px / 20px · 500 | NotionInter | 500 | 14px | 1.429 | normal | --text-type-14px-500-20px-d395-font-size |
| NotionInter 15px / 20px · 400 | NotionInter | 400 | 15px | 1.333 | normal | --text-type-15px-400-20px-font-size |
| NotionInter 16px / 24px · 400 | NotionInter | 400 | 16px | 1.5 | normal | --text-type-16px-400-24px-font-size |
| NotionInter 15px / 20px · 600 | NotionInter | 600 | 15px | 1.333 | normal | --text-type-15px-600-20px-font-size |
| NotionInter 18px / 28px · 700 | NotionInter | 700 | 18px | 1.556 | -0.125px | --text-type-18px-700-28px-font-size |
| NotionInter 14px / 20px · 400 | NotionInter | 400 | 14px | 1.429 | normal | --text-type-14px-400-20px-6f89-font-size |
| NotionInter 16px / 24px · 500 | NotionInter | 500 | 16px | 1.5 | normal | --text-type-16px-500-24px-font-size |
| NotionInter 12px / 16px · 400 | NotionInter | 400 | 12px | 1.333 | 0.125px | --text-type-12px-400-16px-font-size |
| NotionInter 16px / 24px · 700 | NotionInter | 700 | 16px | 1.5 | normal | --text-type-16px-700-24px-font-size |
| NotionInter 12px / 16px · 500 | NotionInter | 500 | 12px | 1.333 | 0.125px | --text-type-12px-500-16px-font-size |
| NotionInter 16px / 24px · 600 | NotionInter | 600 | 16px | 1.5 | normal | --text-type-16px-600-24px-font-size |
| NotionInter 12px / 16px · 500 | NotionInter | 500 | 12px | 1.333 | 0.125px | --text-type-12px-500-16px-cddd-font-size |
| NotionInter 22px / 28px · 700 | NotionInter | 700 | 22px | 1.273 | -0.25px | --text-type-22px-700-28px-font-size |
| NotionInter 14px / 20px · 700 | NotionInter | 700 | 14px | 1.429 | normal | --text-type-14px-700-20px-font-size |
| NotionInter 14px / 24px · 500 | NotionInter | 500 | 14px | 1.714 | normal | --text-type-14px-500-24px-font-size |
| NotionInter 16px / 24px · 500 | NotionInter | 500 | 16px | 1.5 | normal | --text-type-16px-500-24px-a2a8-font-size |
| NotionInter 15px / 20px · 700 | NotionInter | 700 | 15px | 1.333 | normal | --text-type-15px-700-20px-font-size |
| NotionInter 20px / 28px · 600 | NotionInter | 600 | 20px | 1.4 | -0.125px | --text-type-20px-600-28px-font-size |
| Lyon Text 18px / 28px · 400 | Lyon Text | 400 | 18px | 1.556 | normal | --text-type-18px-400-28px-font-size |
| NotionInter 12px / 16px · 600 | NotionInter | 600 | 12px | 1.333 | 0.125px | --text-type-12px-600-16px-font-size |
| NotionInter 42px / 48px · 700 | NotionInter | 700 | 42px | 1.143 | -1.5px | --text-type-42px-700-48px-font-size |
| NotionInter 32px / 40px · 700 | NotionInter | 700 | 32px | 1.25 | -0.75px | --text-type-32px-700-40px-font-size |
| NotionInter 16px / 24px · 400 | NotionInter | 400 | 16px | 1.5 | normal | --text-type-16px-400-24px-1211-font-size |
| NotionInter 54px / 56px · 700 | NotionInter | 700 | 54px | 1.037 | -1.87501px | --text-type-54px-700-56px-font-size |
| NotionInter 22px / 28px · 700 | NotionInter | 700 | 22px | 1.273 | -0.25px | --text-type-22px-700-28px-d950-font-size |
| NotionInter 32px / 40px · 700 | NotionInter | 700 | 32px | 1.25 | -0.75px | --text-type-32px-700-40px-f1f4-font-size |
| NotionInter 26px / 32px · 700 | NotionInter | 700 | 26px | 1.231 | -0.625px | --text-type-26px-700-32px-font-size |
| NotionInter 14px / 20px · 700 | NotionInter | 700 | 14px | 1.429 | normal | --text-type-14px-700-20px-96b7-font-size |
| NotionInter 26px / 32px · 700 | NotionInter | 700 | 26px | 1.231 | -0.625px | --text-type-26px-700-32px-b761-font-size |
| NotionInter 42px / 48px · 700 | NotionInter | 700 | 42px | 1.143 | -1.5px | --text-type-42px-700-48px-13c9-font-size |
| Lyon Text 16px / 24px · 400 | Lyon Text | 400 | 16px | 1.5 | normal | --text-type-16px-400-24px-a484-font-size |
| NotionInter 12px / 16px · 400 | NotionInter | 400 | 12px | 1.333 | 0.125px | --text-type-12px-400-16px-0d23-font-size |
| NotionInter 20px / 28px · 400 | NotionInter | 400 | 20px | 1.4 | -0.125px | --text-type-20px-400-28px-font-size |
| NotionInter 72px / 87.12px · 500 | NotionInter | 500 | 72px | 1.21 | -2px | --text-type-72px-500-87p12px-font-size |
| NotionInter 96px / 100px · 600 | NotionInter | 600 | 96px | 1.042 | -4.6px | --text-type-96px-600-100px-font-size |
| NotionInter 16px / 24px · 700 | NotionInter | 700 | 16px | 1.5 | normal | --text-type-16px-700-24px-4557-font-size |
| NotionInter 64px / 64px · 700 | NotionInter | 700 | 64px | 1 | -2.12501px | --text-type-64px-700-64px-font-size |
| Lyon Text 32px / 40px · 400 | Lyon Text | 400 | 32px | 1.25 | normal | --text-type-32px-400-40px-font-size |
| NotionInter 31.5px / 38.115px · 500 | NotionInter | 500 | 31.5px | 1.21 | -0.875001px | --text-type-31p5px-500-38p115px-font-size |
| NotionInter 42px / 48px · 600 | NotionInter | 600 | 42px | 1.143 | -1.5px | --text-type-42px-600-48px-font-size |
| Lyon Text 22px / 28px · 400 | Lyon Text | 400 | 22px | 1.273 | normal | --text-type-22px-400-28px-font-size |

## Tokens — Spacing & Shapes

**Density:** 未确认

### Spacing Scale

| Name | Value | Token |
|---|---|---|
| Observed spacing 8px | 8px | --spacing-space-8px |
| Observed spacing 16px | 16px | --spacing-space-16px |
| Observed spacing 4px | 4px | --spacing-space-4px |
| Observed spacing 24px | 24px | --spacing-space-24px |
| Observed spacing 3px | 3px | --spacing-space-3px |
| Observed spacing -8px | -8px | --spacing-space-8px-b05a |
| Observed spacing 12px | 12px | --spacing-space-12px |
| Observed spacing 10px | 10px | --spacing-space-10px |
| Observed spacing 6px | 6px | --spacing-space-6px |
| Observed spacing 5px | 5px | --spacing-space-5px |
| Observed spacing 14px | 14px | --spacing-space-14px |
| Observed spacing 32px | 32px | --spacing-space-32px |
| Observed spacing 15px | 15px | --spacing-space-15px |
| Observed spacing 20px | 20px | --spacing-space-20px |
| Observed spacing 30px | 30px | --spacing-space-30px |
| Observed spacing 1.4px | 1.4px | --spacing-space-1p4px |
| Observed spacing 10.4px | 10.4px | --spacing-space-10p4px |
| Observed spacing 28px | 28px | --spacing-space-28px |
| Observed spacing 2px | 2px | --spacing-space-2px |
| Observed spacing -1px | -1px | --spacing-space-1px |
| Observed spacing 36px | 36px | --spacing-space-36px |
| Observed spacing 14.94px | 14.94px | --spacing-space-14p94px |
| Observed spacing 1px | 1px | --spacing-space-1px-ebe2 |
| Observed spacing 11px | 11px | --spacing-space-11px |
| Observed spacing 80px | 80px | --spacing-space-80px |
| Observed spacing 40px | 40px | --spacing-space-40px |
| Observed spacing -4px | -4px | --spacing-space-4px-44ad |
| Observed spacing -11px | -11px | --spacing-space-11px-a4bd |
| Observed spacing 2.8px | 2.8px | --spacing-space-2p8px |
| Observed spacing 72px | 72px | --spacing-space-72px |
| Observed spacing -24px | -24px | --spacing-space-24px-5ee2 |
| Observed spacing 64px | 64px | --spacing-space-64px |
| Observed spacing -32px | -32px | --spacing-space-32px-9cd3 |
| Observed spacing 60px | 60px | --spacing-space-60px |
| Observed spacing 105.6px | 105.6px | --spacing-space-105p6px |
| Observed spacing 96px | 96px | --spacing-space-96px |
| Observed spacing 128px | 128px | --spacing-space-128px |
| Observed spacing 4.52166px | 4.52166px | --spacing-space-4p52166px |
| Observed spacing 9px | 9px | --spacing-space-9px |
| Observed spacing -16px | -16px | --spacing-space-16px-62ad |
| Observed spacing 48px | 48px | --spacing-space-48px |
| Observed spacing 120px | 120px | --spacing-space-120px |
| Observed spacing 462.312px | 462.312px | --spacing-space-462p312px |
| Observed spacing 26px | 26px | --spacing-space-26px |
| Observed spacing 71px | 71px | --spacing-space-71px |
| Observed spacing 248.594px | 248.594px | --spacing-space-248p594px |
| Observed spacing 46px | 46px | --spacing-space-46px |
| Observed spacing 110px | 110px | --spacing-space-110px |
| Observed spacing 7px | 7px | --spacing-space-7px |
| Observed spacing 56px | 56px | --spacing-space-56px |
| Observed spacing 125px | 125px | --spacing-space-125px |
| Observed spacing 3.2px | 3.2px | --spacing-space-3p2px |
| Observed spacing 107.797px | 107.797px | --spacing-space-107p797px |
| Observed spacing 60.4844px | 60.4844px | --spacing-space-60p4844px |
| Observed spacing 86.4062px | 86.4062px | --spacing-space-86p4062px |
| Observed spacing 2.4px | 2.4px | --spacing-space-2p4px |
| Observed spacing 670.219px | 670.219px | --spacing-space-670p219px |
| Observed spacing 81.1406px | 81.1406px | --spacing-space-81p1406px |

### Border Radius

| Element | Value |
|---|---|
| Observed radius 8px | 8px |
| Observed radius 12px | 12px |
| Observed radius 6px | 6px |
| Observed radius 4px | 4px |
| Observed radius 100% | 100% |
| Observed radius 5px | 5px |
| Observed radius 9999.01px | 9999.01px |
| Observed radius 16px | 16px |
| Observed radius 50% | 50% |
| Observed radius 20px | 20px |
| Observed radius 14px | 14px |
| Observed radius 24px | 24px |
| Observed radius 11.7px | 11.7px |


### Shadows

| Name | Value | Token |
|---|---|---|
| Soft raised shadow | #0000000a 0px 4px 18px 0px, #00000007 0px 2.025px 7.84688px 0px, #00000005 0px 0.8px 2.925px 0px, #00000003 0px 0.175px 1.04062px 0px | --shadow-shadow-raised-soft |
| Soft raised shadow alternate | #00000003 0px 0.175px 1.041px 0px, #00000005 0px 0.8px 2.925px 0px, #00000007 0px 2.025px 7.847px 0px, #0000000a 0px 4px 18px 0px | --shadow-shadow-raised-soft-alt |
| Raised highlight shadow | #0000000a 0px 4px 18px 0px, #00000007 0px 2.025px 7.84688px 0px, #00000005 0px 0.8px 2.925px 0px, #00000003 0px 0.175px 1.04062px 0px, #ffffff99 0px 0px 1px 0px | --shadow-shadow-raised-highlight |
| Compact shadow | #00000004 0px 0.7px 1.462px 0px, #00000008 0px 3px 9px 0px | --shadow-shadow-compact |
| Hairline shadow | #0000001a 0px 1px 0px 0px | --shadow-shadow-hairline |
| Transparent hairline shadow | #00000000 0px 1px 0px 0px | --shadow-shadow-hairline-transparent |
| Deep large shadow | #00000002 0px 0.667px 3.502px 0px, #00000004 0px 2.933px 7.252px 0px, #00000005 0px 7.2px 14.462px 0px, #00000006 0px 13.867px 28.348px 0px, #00000008 0px 23.333px 52.123px 0px, #0000000a 0px 36px 89px 0px | --shadow-shadow-deep-large |

### Layout

- **Page max-width:** 未确认
- **Section gap:** 未确认
- **Card padding:** 未确认
- **Element gap:** 未确认

## Components

### Navigation menu trigger

**Role:** Transparent navigation trigger with 4px radius, 30px height, and near-black text; observed across desktop pages and state snapshots.

Background #00000000; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 5px 10px 5px 10px; Radius 4px.

### Global desktop navigation bar

**Role:** Full-width white navigation bar, 64px tall, containing logo, links, and account actions.

Background #ffffff; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px; Shadow #00000000 0px 1px 0px 0px.

### Desktop navigation link group

**Role:** Flexible group of transparent navigation links and menu triggers using near-black 16px text.

Background #00000000; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px.

### Global primary action button

**Role:** Saturated action-blue filled button with white 16px/500 text, 8px radius, and 36px height; repeated across pages and viewports.

Background #0075de; Text #ffffff; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 4px 14px 4px 14px; Radius 8px; Border 1px solid #ffffff00.

### Mobile navigation bar

**Role:** 390px-wide white top navigation shell with 64px height and near-black text.

Background #ffffff; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px; Shadow #00000000 0px 1px 0px 0px.

### Mobile menu content panel

**Role:** Transparent mobile navigation content area extending below the 64px top bar.

Background #00000000; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px.

### Pricing utility input

**Role:** One-pixel square input measured on pricing; likely a layout/accessibility utility rather than a visible search field, so visual semantics remain limited.

Background #00000000; Text #00000080; Font NotionInter 16px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 0px.

### Template marketplace search field

**Role:** White search field with 44px height, 265px desktop width, 6px radius, and near-black input text.

Background #ffffff; Text #000000f2; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 11px 46px 11px 12px; Radius 6px; Border 1px solid #00000014; Shadow #00000004 0px 0.7px 1.462px 0px, #00000008 0px 3px 9px 0px.

### Mobile marketplace search control

**Role:** 44px-tall mobile search control with white background and 6px radius; width compresses to 60px in the sampled viewport.

Background #ffffff; Text #000000f2; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 11px 46px 11px 12px; Radius 6px; Border 1px solid #00000014; Shadow #00000004 0px 0.7px 1.462px 0px, #00000008 0px 3px 9px 0px.

### Sticky desktop header

**Role:** White full-width 64px header observed after scrolling; keeps global navigation and actions accessible.

Background #ffffff; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px; Shadow #0000001a 0px 1px 0px 0px.

### Hero primary CTA

**Role:** Primary blue 38px button with white 16px/500 text, 8px radius, horizontal padding, and hover/focus contexts on the homepage.

Background #0075de; Text #ffffff; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 15px 6px 15px; Radius 8px; Border 1px solid #ffffff00.

### Mobile sticky header

**Role:** White 390px mobile header observed after scroll, preserving the 64px navigation height.

Background #ffffff; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px; Shadow #0000001a 0px 1px 0px 0px.

### Pill action button

**Role:** Near-full-radius white pill with near-black 14px/500 text; used for compact marketing actions.

Background #ffffff; Text #000000f2; Font NotionInter 14px / 500; Line height 20px; Letter spacing normal; Padding 8px 16px 8px 16px; Radius 9999.01px; Border 1px solid #0000001a.

### Hero secondary CTA

**Role:** Soft-blue tinted button with dark-blue text, matching the 38px height and 8px radius of the adjacent primary CTA.

Background #e6f3fe; Text #005bab; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 15px 6px 15px; Radius 8px; Border 1px solid #ffffff00.

### Tertiary text control

**Role:** Transparent 20px-height control with muted 14px text and no radius, suited to dense tertiary actions.

Background #00000000; Text #0000008a; Font NotionInter 14px / 400; Line height 20px; Letter spacing normal; Padding 0px; Radius 0px.

### Template category navigation

**Role:** Horizontal template category link group using near-black 16px text and 68px height.

Background #00000000; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 12px 0px 12px 0px; Radius 0px.

### Light-filled blue CTA

**Role:** White-filled button with bright blue text, 8px radius, and 38px height; an alternate link-style action treatment.

Background #ffffff; Text #097fe8; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 15px 6px 15px; Radius 8px; Border 1px solid #ffffff00.

### Mobile menu trigger

**Role:** Transparent 44px square mobile trigger with near-black text/icon and no radius.

Background #00000000; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 11px; Radius 0px.

### Circular media carousel control

**Role:** Low-opacity dark circular 32px control carrying a white icon and 50% radius.

Background #0000000d; Text #ffffff; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 50%.

### Pricing secondary plan CTA

**Role:** Soft-blue pricing action with dark-blue text, 241px desktop width, 36px height, and 8px radius.

Background #e6f3fe; Text #005bab; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 4px 14px 4px 14px; Radius 8px; Border 1px solid #ffffff00.

### Icon-only clear button

**Role:** Transparent 28px icon control using warm gray icon color and no radius.

Background #00000000; Text #a39e98; Font NotionInter 20px / 400; Line height 20px; Letter spacing normal; Padding 12px 4px 12px 4px; Radius 0px.

### Transparent chip control

**Role:** Transparent 36px chip with near-black 16px/500 text and 8px radius; sampled in homepage media/filter areas.

Background #ffffff00; Text #000000e5; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 8px 6px 8px; Radius 8px; Border 1px solid #ffffff00.

### Pricing primary plan CTA

**Role:** Action-blue pricing button with white text and a wider 243px desktop treatment.

Background #0075de; Text #ffffff; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 4px 14px 4px 14px; Radius 8px; Border 1px solid #ffffff00.

### Template browse CTA

**Role:** White template action button with near-black text, 8px radius, and 36px height.

Background #ffffff; Text #000000f2; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 4px 14px 4px 14px; Radius 8px; Border 1px solid #0000001a.

### Pricing link-style CTA

**Role:** White pricing button using bright blue text while preserving the standard 36px height and 8px radius.

Background #ffffff; Text #097fe8; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 4px 14px 4px 14px; Radius 8px; Border 1px solid #ffffff00.

### Template soft-blue CTA

**Role:** Soft-blue template action with dark-blue text and the standard 36px/8px action form.

Background #e6f3fe; Text #005bab; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 4px 12px 4px 14px; Radius 8px; Border 1px solid #ffffff00.

### Mobile transparent chip

**Role:** Mobile transparent 36px chip with near-black 16px/500 text and 8px radius.

Background #ffffff00; Text #000000e5; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 8px 6px 8px; Radius 8px; Border 1px solid #ffffff00.

### Pricing compact CTA

**Role:** Smaller 30px action-blue pricing button using 14px/500 text and 8px radius.

Background #0075de; Text #ffffff; Font NotionInter 14px / 500; Line height 20px; Letter spacing normal; Padding 4px 11px 4px 11px; Radius 8px; Border 1px solid #ffffff00.

### Mobile template text action

**Role:** Transparent mobile action with near-black text, 8px radius, and 38px height.

Background #00000000; Text #000000e5; Font NotionInter 16px / 400; Line height 24px; Letter spacing normal; Padding 6px; Radius 8px; Border 1px solid #00000000.

### Focused hero primary CTA

**Role:** Focus-state observation of the primary CTA: background darkens to #005bab and a 2px blue focus ring appears with 2px offset.

Background #005bab; Text #ffffff; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 15px 6px 15px; Radius 8px; Border 1px solid #ffffff00; Outline 2px solid #0075de; Outline offset 2px.

### Hovered hero primary CTA

**Role:** Hover-state observation of the primary CTA: background darkens from #0075de to #005bab while typography and geometry remain stable.

Background #005bab; Text #ffffff; Font NotionInter 16px / 500; Line height 24px; Letter spacing normal; Padding 6px 15px 6px 15px; Radius 8px; Border 1px solid #ffffff00.

## Do's and Don'ts

### Do

- Use white or warm off-white base surfaces with near-black primary text and muted secondary text.
- Reserve saturated action blue for primary actions and bright link-style accents, pairing it with white text on filled buttons.
- Preserve the observed compact-to-display type ramp and negative tracking at large sizes.
- Use the 8px button radius family and 36–38px desktop action height as the recurring action form.
- Darken primary blue on hover and retain a visible offset focus ring for keyboard focus.

### Don't

- Do not treat every sampled px spacing as a global grid token; the observations include layout-specific and fractional computed values.
- Do not claim an official private design-system name for sampled values; names in this deliverable are interpretive.
- Do not apply hover/focus results to expanded menus or login states; those states were not interactively opened.
- Do not assume iframe, shadow DOM, unread stylesheet declarations, or resource-error areas were fully represented.

## Surfaces

| Level | Name | Value | Purpose |
|---|---|---|---|
| 1 | White base surface | #ffffff | Primary page, navigation, and card surface. |
| 1 | Warm off-white surface | #f6f5f4 | Alternate section and content surface. |
| 0 | Transparent surface | #ffffff00 | Transparent layer used for controls and layout boxes. |
| 4 | Media overlay surface | #000000bf | Dark overlay behind media/text treatments. |
| 2 | Primary action surface | #0075de | Filled primary action surface. |
| 1 | Subtle neutral surface | #f9f9f8 | Light neutral component surface. |
| 1 | Action tint surface | #e6f3fe | Soft blue action/tint surface. |
| 5 | Maximum contrast surface | #000000 | Pure black surface sampled in decorative areas. |
| 1 | Blue highlight surface | #2383e20a | Very low-opacity blue highlight layer. |
| 3 | Action hover surface | #005bab | Darker action surface observed on hover. |
| — | Observed surface #FFB110 | #ffb110 | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| — | Observed surface #F64932 | #f64932 | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| 2 | Bright action surface | #097fe8 | Bright blue surface/link treatment. |
| 1 | Soft neutral surface | #f8f8f7 | Soft neutral component surface. |
| 1 | Blue wash surface | #f2f9ff | Light blue wash surface. |
| — | Observed surface #E32D14 | #e32d14 | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| — | Observed surface #1313BA | #1313ba | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| — | Observed surface #1AAE39 | #1aae39 | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| — | Observed surface #E89D01 | #e89d01 | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| 1 | Hover wash surface | #0000000d | Low-opacity neutral wash for circular controls. |
| — | Observed surface #EADBFA | #eadbfa | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| — | Observed surface #FFE4AF | #ffe4af | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |

## Elevation

- **Soft raised shadow:** #0000000a 0px 4px 18px 0px, #00000007 0px 2.025px 7.84688px 0px, #00000005 0px 0.8px 2.925px 0px, #00000003 0px 0.175px 1.04062px 0px
- **Soft raised shadow alternate:** #00000003 0px 0.175px 1.041px 0px, #00000005 0px 0.8px 2.925px 0px, #00000007 0px 2.025px 7.847px 0px, #0000000a 0px 4px 18px 0px
- **Raised highlight shadow:** #0000000a 0px 4px 18px 0px, #00000007 0px 2.025px 7.84688px 0px, #00000005 0px 0.8px 2.925px 0px, #00000003 0px 0.175px 1.04062px 0px, #ffffff99 0px 0px 1px 0px
- **Compact shadow:** #00000004 0px 0.7px 1.462px 0px, #00000008 0px 3px 9px 0px
- **Hairline shadow:** #0000001a 0px 1px 0px 0px
- **Transparent hairline shadow:** #00000000 0px 1px 0px 0px
- **Deep large shadow:** #00000002 0px 0.667px 3.502px 0px, #00000004 0px 2.933px 7.252px 0px, #00000005 0px 7.2px 14.462px 0px, #00000006 0px 13.867px 28.348px 0px, #00000008 0px 23.333px 52.123px 0px, #0000000a 0px 36px 89px 0px

DESIGN.md原始文件 · 499 行

FigmaDesign

https://www.figma.com/

查看下一个品牌

序号	Value	Preview
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

序号	Value	Preview
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

序号	Value	Preview
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58