Apple 设计系统

apple.com
PRO引擎 v4

通过 CSSOM 频率分析提取的设计令牌,未经 LLM 解读。

视觉系统
100% 置信度
98% 置信度
hero-displayDesign is intelligence made visibleSF Pro Display80px / 600 / 1.05
display-xlDesign is intelligence made visibleSF Pro Display64px / 600 / 1.05
display-lgDesign is intelligence made visibleSF Pro Display56px / 600 / 1.05
display-mdDesign is intelligence made visibleSF Pro Display48px / 600 / 1.1
title-lgDesign is intelligence made visibleSF Pro Text34px / 600 / 1.45
title-mdDesign is intelligence made visibleSF Pro Display28px / 600 / 1.15
subtitleDesign is intelligence made visibleSF Pro Display21px / 400 / 1.2
leadDesign is intelligence made visibleSF Pro Display21px / 400 / 1.4
bodyDesign is intelligence made visibleSF Pro Text17px / 400 / 1.45
body-strongDesign is intelligence made visibleSF Pro Text17px / 600 / 1.45
body-boldDesign is intelligence made visibleSF Pro Text17px / 700 / 1.45
buttonDesign is intelligence made visibleSF Pro Text17px / 400 / 1.2
link-strongDesign is intelligence made visibleSF Pro Text17px / 600 / 1.25
body-smDesign is intelligence made visibleSF Pro Text14px / 400 / 1.3
captionDesign is intelligence made visibleSF Pro Text12px / 400 / 1.35
caption-strongDesign is intelligence made visibleSF Pro Text12px / 600 / 1.35
nav-linkDesign is intelligence made visibleSF Pro Text12px / 400 / 1
100% 置信度
button-secondary-2-padding-y
8px
button-primary-padding-y
11px
button-secondary-padding-y
11px
button-ghost-padding-y
11px
button-secondary-2-padding-x
15px
button-primary-padding-x
21px
button-secondary-padding-x
21px
button-ghost-padding-x
21px
100% 置信度
xs · 8px
sm · 10px
md · 11px
lg · 14px
xl · 18px
2xl · 20px
3xl · 48px
4xl · 56px
pill · 980px
full · 9999px

组件

Buttons12

100% 匹配度

ghost · desktop

默认匹配度 100%26 项测量全部一致

原始
网站上的原始 Button, ghost,默认
渲染
Button, ghost 的独立渲染,默认

悬停匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, ghost,悬停
渲染
Button, ghost 的独立渲染,悬停

聚焦匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, ghost,聚焦
渲染
Button, ghost 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

ghost · desktop

默认匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, ghost (2),默认
渲染
Button, ghost (2) 的独立渲染,默认

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Button, ghost (2),聚焦
渲染
Button, ghost (2) 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

ghost · desktop

Label 的 y 为 59px,网站上为 0px。

默认匹配度 100%57 项测量中有 1 项不同

原始
网站上的原始 Button, ghost (3),默认
渲染
Button, ghost (3) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Button, ghost (3),悬停
渲染
Button, ghost (3) 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Button, ghost (3),聚焦
渲染
Button, ghost (3) 的独立渲染,聚焦
DESIGN.md 中的配方

无法验证

ghost · desktop

无法验证:页面放入其中的照片、媒体或广告覆盖了它的大部分区域,且其他地方没有差异,因此这次对比无法说明配方的质量。

默认匹配度 100%35 项测量全部一致

原始
网站上的原始 Button, ghost (4),默认
渲染
Button, ghost (4) 的独立渲染,默认

聚焦匹配度 61%18 项测量全部一致

原始
网站上的原始 Button, ghost (4),聚焦
渲染
Button, ghost (4) 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

primary · desktop

默认匹配度 100%26 项测量全部一致

原始
网站上的原始 Button, primary,默认
渲染
Button, primary 的独立渲染,默认

悬停匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, primary,悬停
渲染
Button, primary 的独立渲染,悬停

聚焦匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, primary,聚焦
渲染
Button, primary 的独立渲染,聚焦
DESIGN.md 中的配方

76% 匹配度

primary · desktop

Label 2 的 y 为 27px,网站上为 9px。

默认匹配度 100%29 项测量中有 1 项不同

原始
网站上的原始 Button, primary (2),默认
渲染
Button, primary (2) 的独立渲染,默认

悬停匹配度 91%22 项测量全部一致

原始
网站上的原始 Button, primary (2),悬停
渲染
Button, primary (2) 的独立渲染,悬停

聚焦匹配度 76%22 项测量全部一致

原始
网站上的原始 Button, primary (2),聚焦
渲染
Button, primary (2) 的独立渲染,聚焦
DESIGN.md 中的配方

76% 匹配度

primary · desktop

Group 的 y 为 27px,网站上为 9px; Label 2 的 y 为 28px,网站上为 10px,另有 2 项。

默认匹配度 100%55 项测量中有 4 项不同

原始
网站上的原始 Button, primary (3),默认
渲染
Button, primary (3) 的独立渲染,默认

悬停匹配度 91%22 项测量全部一致

原始
网站上的原始 Button, primary (3),悬停
渲染
Button, primary (3) 的独立渲染,悬停

聚焦匹配度 76%22 项测量全部一致

原始
网站上的原始 Button, primary (3),聚焦
渲染
Button, primary (3) 的独立渲染,聚焦
DESIGN.md 中的配方

94% 匹配度

primary · desktop

它的渲染与网站的相似度为 95%,低于 97% 的标准。

默认匹配度 95%25 项测量全部一致

原始
网站上的原始 Button, primary (4),默认
渲染
Button, primary (4) 的独立渲染,默认

悬停匹配度 95%22 项测量全部一致

原始
网站上的原始 Button, primary (4),悬停
渲染
Button, primary (4) 的独立渲染,悬停

聚焦匹配度 94%22 项测量全部一致

原始
网站上的原始 Button, primary (4),聚焦
渲染
Button, primary (4) 的独立渲染,聚焦
DESIGN.md 中的配方

94% 匹配度

primary · desktop

它的渲染与网站的相似度为 96%,低于 97% 的标准。

默认匹配度 96%25 项测量全部一致

原始
网站上的原始 Button, primary (5),默认
渲染
Button, primary (5) 的独立渲染,默认

悬停匹配度 96%22 项测量全部一致

原始
网站上的原始 Button, primary (5),悬停
渲染
Button, primary (5) 的独立渲染,悬停

聚焦匹配度 94%22 项测量全部一致

原始
网站上的原始 Button, primary (5),聚焦
渲染
Button, primary (5) 的独立渲染,聚焦
DESIGN.md 中的配方

99% 匹配度

secondary · desktop

默认匹配度 100%26 项测量全部一致

原始
网站上的原始 Button, secondary,默认
渲染
Button, secondary 的独立渲染,默认

悬停匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, secondary,悬停
渲染
Button, secondary 的独立渲染,悬停

聚焦匹配度 99%22 项测量全部一致

原始
网站上的原始 Button, secondary,聚焦
渲染
Button, secondary 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

secondary · desktop

默认匹配度 100%26 项测量全部一致

原始
网站上的原始 Button, secondary (2),默认
渲染
Button, secondary (2) 的独立渲染,默认

悬停匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, secondary (2),悬停
渲染
Button, secondary (2) 的独立渲染,悬停

聚焦匹配度 100%22 项测量全部一致

原始
网站上的原始 Button, secondary (2),聚焦
渲染
Button, secondary (2) 的独立渲染,聚焦
DESIGN.md 中的配方

97% 匹配度

secondary · desktop

根元素 的 width 为 138px,网站上为 202px; 根元素 的 height 为 64px,网站上为 92px。

默认匹配度 97%22 项测量中有 2 项不同

原始
网站上的原始 Button, secondary (3),默认
渲染
Button, secondary (3) 的独立渲染,默认

悬停匹配度 97%18 项测量全部一致

原始
网站上的原始 Button, secondary (3),悬停
渲染
Button, secondary (3) 的独立渲染,悬停

聚焦匹配度 97%18 项测量全部一致

原始
网站上的原始 Button, secondary (3),聚焦
渲染
Button, secondary (3) 的独立渲染,聚焦
DESIGN.md 中的配方

Input1

89% 匹配度

desktop

聚焦时,它的渲染与网站的相似度为 89%,低于 97% 的标准。

默认匹配度 99%90 项测量全部一致

原始
网站上的原始 Input,默认
渲染
Input 的独立渲染,默认

聚焦匹配度 89%22 项测量全部一致

原始
网站上的原始 Input,聚焦
渲染
Input 的独立渲染,聚焦
DESIGN.md 中的配方

Cards9

100% 匹配度

desktop

Media 的 y 为 93px,网站上为 57px; Text 的 y 为 149px,网站上为 106px,另有 3 项。

默认匹配度 100%201 项测量中有 5 项不同

原始
网站上的原始 Card,默认
渲染
Card 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Card,悬停
渲染
Card 的独立渲染,悬停

聚焦匹配度 100%18 项测量中有 1 项不同

原始
网站上的原始 Card,聚焦
渲染
Card 的独立渲染,聚焦

默认,实例 2匹配度 100%201 项测量中有 5 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%201 项测量中有 5 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 4匹配度 100%201 项测量中有 5 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 5匹配度 100%201 项测量中有 5 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 6匹配度 100%201 项测量中有 5 项不同

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Break 的 y 为 110px,网站上为 138px; Text 的 y 为 138px,网站上为 166px。

默认匹配度 100%73 项测量中有 2 项不同

原始
网站上的原始 Card (2),默认
渲染
Card (2) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Card (2),悬停
渲染
Card (2) 的独立渲染,悬停

聚焦匹配度 100%18 项测量中有 1 项不同

原始
网站上的原始 Card (2),聚焦
渲染
Card (2) 的独立渲染,聚焦

默认,实例 2匹配度 100%73 项测量中有 2 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%73 项测量中有 2 项不同

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 y 为 0px,网站上为 77px; Media 的 y 为 0px,网站上为 77px,另有 14 项。

默认匹配度 100%190 项测量中有 16 项不同

原始
网站上的原始 Card (3),默认
渲染
Card (3) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Card (3),悬停
渲染
Card (3) 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Card (3),聚焦
渲染
Card (3) 的独立渲染,聚焦

默认,实例 2匹配度 100%190 项测量中有 16 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%190 项测量中有 16 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 4匹配度 100%190 项测量中有 16 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 5匹配度 100%190 项测量中有 16 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 6匹配度 100%190 项测量中有 16 项不同

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

99% 匹配度

desktop

默认匹配度 99%154 项测量全部一致

原始
网站上的原始 Card (4),默认
渲染
Card (4) 的独立渲染,默认

默认,实例 2匹配度 99%154 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 99%154 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 4匹配度 100%154 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

无法验证

desktop

无法验证:页面放入其中的照片、媒体或广告覆盖了它的大部分区域,且其他地方没有差异,因此这次对比无法说明配方的质量。

默认匹配度 100%66 项测量全部一致

原始
网站上的原始 Card (5),默认
渲染
Card (5) 的独立渲染,默认

默认,实例 2匹配度 100%66 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%66 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

无法验证

desktop

无法验证:页面放入其中的照片、媒体或广告覆盖了它的大部分区域,且其他地方没有差异,因此这次对比无法说明配方的质量。

默认匹配度 100%149 项测量全部一致

原始
网站上的原始 Card (6),默认
渲染
Card (6) 的独立渲染,默认

默认,实例 2匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 4匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 5匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

无法验证

desktop

无法验证:页面放入其中的照片、媒体或广告覆盖了它的大部分区域,且其他地方没有差异,因此这次对比无法说明配方的质量。

默认匹配度 100%63 项测量全部一致

原始
网站上的原始 Card (7),默认
渲染
Card (7) 的独立渲染,默认

默认,实例 2匹配度 100%63 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%63 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%119 项测量全部一致

原始
网站上的原始 Card (8),默认
渲染
Card (8) 的独立渲染,默认

默认,实例 2匹配度 100%119 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%119 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

95% 匹配度

desktop

Title 的 y 为 5px,网站上为 124px; Body 的 y 为 123px,网站上为 241px,另有 2 项。

默认匹配度 95%111 项测量中有 4 项不同

原始
网站上的原始 Card (9),默认
渲染
Card (9) 的独立渲染,默认

默认,实例 2匹配度 100%111 项测量中有 4 项不同

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%111 项测量中有 4 项不同

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

Extras26

100% 匹配度

desktop

根元素 的 height 为 78px,网站上为 56px; Group 2 的 height 为 44px,网站上为 22px,另有 2 项。

默认匹配度 100%109 项测量中有 4 项不同

原始
网站上的原始 Breadcrumbs,默认
渲染
Breadcrumbs 的独立渲染,默认
DESIGN.md 中的配方

91% 匹配度

desktop

聚焦时,它的渲染与网站的相似度为 91%,低于 96% 的标准。

默认匹配度 100%21 项测量全部一致

原始
网站上的原始 Card links,默认
渲染
Card links 的独立渲染,默认

聚焦匹配度 91%18 项测量全部一致

原始
网站上的原始 Card links,聚焦
渲染
Card links 的独立渲染,聚焦
DESIGN.md 中的配方

93% 匹配度

desktop

Group 2 的 y 为 87px,网站上为 98px; Text 的 y 为 87px,网站上为 98px。

默认匹配度 100%67 项测量中有 2 项不同

原始
网站上的原始 Card links (2),默认
渲染
Card links (2) 的独立渲染,默认

聚焦匹配度 93%18 项测量全部一致

原始
网站上的原始 Card links (2),聚焦
渲染
Card links (2) 的独立渲染,聚焦
DESIGN.md 中的配方

88% 匹配度

desktop

聚焦时,它的渲染与网站的相似度为 88%,低于 96% 的标准。

默认匹配度 100%23 项测量全部一致

原始
网站上的原始 Card links (3),默认
渲染
Card links (3) 的独立渲染,默认

聚焦匹配度 88%18 项测量全部一致

原始
网站上的原始 Card links (3),聚焦
渲染
Card links (3) 的独立渲染,聚焦
DESIGN.md 中的配方

无法验证

desktop

无法验证:页面放入其中的照片、媒体或广告覆盖了它的大部分区域,且其他地方没有差异,因此这次对比无法说明配方的质量。

默认匹配度 99%149 项测量全部一致

原始
网站上的原始 Carousel section,默认
渲染
Carousel section 的独立渲染,默认

默认,实例 2匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 4匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 5匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 6匹配度 100%149 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

List 的 width 为 225px,网站上为 176px; Item 的 width 为 225px,网站上为 176px,另有 31 项。

默认匹配度 100%776 项测量中有 33 项不同

原始
网站上的原始 Footer links,默认
渲染
Footer links 的独立渲染,默认
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%56 项测量全部一致

原始
网站上的原始 Icon buttons,默认
渲染
Icon buttons 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon buttons,悬停
渲染
Icon buttons 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon buttons,聚焦
渲染
Icon buttons 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%98 项测量全部一致

原始
网站上的原始 Icon buttons (2),默认
渲染
Icon buttons (2) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon buttons (2),悬停
渲染
Icon buttons (2) 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon buttons (2),聚焦
渲染
Icon buttons (2) 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%56 项测量全部一致

原始
网站上的原始 Icon link,默认
渲染
Icon link 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon link,悬停
渲染
Icon link 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon link,聚焦
渲染
Icon link 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%98 项测量全部一致

原始
网站上的原始 Icon link (2),默认
渲染
Icon link (2) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon link (2),悬停
渲染
Icon link (2) 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Icon link (2),聚焦
渲染
Icon link (2) 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

List 的 width 为 225px,网站上为 176px; Item 的 width 为 225px,网站上为 176px,另有 31 项。

默认匹配度 100%776 项测量中有 33 项不同

原始
网站上的原始 Link list,默认
渲染
Link list 的独立渲染,默认
DESIGN.md 中的配方

100% 匹配度

desktop

List 的 width 为 225px,网站上为 176px; Item 的 width 为 225px,网站上为 176px,另有 31 项。

默认匹配度 100%776 项测量中有 33 项不同

原始
网站上的原始 Nav links,默认
渲染
Nav links 的独立渲染,默认
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%22 项测量全部一致

原始
网站上的原始 Nav menu item,默认
渲染
Nav menu item 的独立渲染,默认

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Nav menu item,聚焦
渲染
Nav menu item 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%22 项测量全部一致

原始
网站上的原始 Navigation links,默认
渲染
Navigation links 的独立渲染,默认

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Navigation links,聚焦
渲染
Navigation links 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%22 项测量全部一致

原始
网站上的原始 Navigation menu item,默认
渲染
Navigation menu item 的独立渲染,默认

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Navigation menu item,聚焦
渲染
Navigation menu item 的独立渲染,聚焦
DESIGN.md 中的配方

50% 匹配度

desktop

它的渲染与网站的相似度为 50%,低于 96% 的标准。

默认匹配度 50%192 项测量全部一致

原始
网站上的原始 Promo banner,默认
渲染
Promo banner 的独立渲染,默认

悬停匹配度 50%18 项测量全部一致

原始
网站上的原始 Promo banner,悬停
渲染
Promo banner 的独立渲染,悬停

聚焦匹配度 50%18 项测量中有 1 项不同

原始
网站上的原始 Promo banner,聚焦
渲染
Promo banner 的独立渲染,聚焦

默认,实例 2匹配度 100%192 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%192 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 y 为 8px,网站上为 12px; Group 的 width 为 1180px,网站上为 1154px,另有 30 项。

默认匹配度 100%374 项测量中有 32 项不同

原始
网站上的原始 Sub navigation,默认
渲染
Sub navigation 的独立渲染,默认
DESIGN.md 中的配方

99% 匹配度

desktop

默认匹配度 99%91 项测量全部一致

原始
网站上的原始 Tabs,默认
渲染
Tabs 的独立渲染,默认

悬停匹配度 99%19 项测量全部一致

原始
网站上的原始 Tabs,悬停
渲染
Tabs 的独立渲染,悬停

聚焦匹配度 99%19 项测量全部一致

原始
网站上的原始 Tabs,聚焦
渲染
Tabs 的独立渲染,聚焦

默认,实例 2匹配度 100%91 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 3匹配度 100%91 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 4匹配度 100%91 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 5匹配度 100%91 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

默认,实例 6匹配度 100%91 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%77 项测量全部一致

原始
网站上的原始 Tabs (2),默认
渲染
Tabs (2) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Tabs (2),悬停
渲染
Tabs (2) 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Tabs (2),聚焦
渲染
Tabs (2) 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%77 项测量全部一致

原始
网站上的原始 Tabs (3),默认
渲染
Tabs (3) 的独立渲染,默认

悬停匹配度 100%18 项测量全部一致

原始
网站上的原始 Tabs (3),悬停
渲染
Tabs (3) 的独立渲染,悬停

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Tabs (3),聚焦
渲染
Tabs (3) 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 y 为 8px,网站上为 12px; Group 的 height 为 43px,网站上为 36px,另有 32 项。

默认匹配度 100%418 项测量中有 34 项不同

原始
网站上的原始 Tab bar,默认
渲染
Tab bar 的独立渲染,默认
DESIGN.md 中的配方

100% 匹配度

desktop

Text 2 的 y 为 33px,网站上为 17px; Group 的 width 为 0px,网站上为 4px。

默认匹配度 100%234 项测量中有 2 项不同

原始
网站上的原始 Table,默认
渲染
Table 的独立渲染,默认
DESIGN.md 中的配方

97% 匹配度

desktop

根元素 的 height 为 105px,网站上为 96px; Text 的 height 为 74px,网站上为 65px,另有 7 项。

默认匹配度 100%72 项测量中有 9 项不同

原始
网站上的原始 Text link,默认
渲染
Text link 的独立渲染,默认

聚焦匹配度 97%18 项测量全部一致

原始
网站上的原始 Text link,聚焦
渲染
Text link 的独立渲染,聚焦
DESIGN.md 中的配方

100% 匹配度

desktop

Group 3 的 y 为 55px,网站上为 66px; Text 的 y 为 55px,网站上为 66px。

默认匹配度 100%87 项测量中有 2 项不同

原始
网站上的原始 Text link (2),默认
渲染
Text link (2) 的独立渲染,默认

聚焦匹配度 100%18 项测量全部一致

原始
网站上的原始 Text link (2),聚焦
渲染
Text link (2) 的独立渲染,聚焦
DESIGN.md 中的配方

35% 匹配度

desktop

聚焦时,它的渲染与网站的相似度为 35%,低于 96% 的标准。

默认匹配度 100%21 项测量全部一致

原始
网站上的原始 Text link (3),默认
渲染
Text link (3) 的独立渲染,默认

聚焦匹配度 35%18 项测量全部一致

原始
网站上的原始 Text link (3),聚焦
渲染
Text link (3) 的独立渲染,聚焦
DESIGN.md 中的配方

74% 匹配度

desktop

根元素 的 width 为 138px,网站上为 202px; 根元素 的 height 为 64px,网站上为 92px。

默认匹配度 74%22 项测量中有 2 项不同

原始
网站上的原始 Toggle button,默认
渲染
Toggle button 的独立渲染,默认

聚焦匹配度 74%18 项测量全部一致

原始
网站上的原始 Toggle button,聚焦
渲染
Toggle button 的独立渲染,聚焦
DESIGN.md 中的配方

Headers8

100% 匹配度

desktop

Group 的 x 为 713px,网站上为 1146px; Icon 2 的 x 为 713px,网站上为 1146px。

默认匹配度 100%308 项测量中有 2 项不同

原始
网站上的原始 Header (inner),默认
渲染
Header (inner) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (inner),悬停
渲染
Header (inner) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (inner),聚焦
渲染
Header (inner) 的独立渲染,聚焦

nav link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 x 为 713px,网站上为 1146px; Icon 2 的 x 为 713px,网站上为 1146px。

默认匹配度 100%308 项测量中有 2 项不同

原始
网站上的原始 Header (inner, 2),默认
渲染
Header (inner, 2) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (inner, 2),悬停
渲染
Header (inner, 2) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (inner, 2),聚焦
渲染
Header (inner, 2) 的独立渲染,聚焦

nav link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

94% 匹配度

desktop

Group 4 的 y 为 52px,网站上为 -3px; Group 4 的 height 为 59px,网站上为 41px,另有 5 项。

默认匹配度 98%228 项测量中有 7 项不同

原始
网站上的原始 Header (inner, 3),默认
渲染
Header (inner, 3) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (inner, 3),悬停
渲染
Header (inner, 3) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (inner, 3),聚焦
渲染
Header (inner, 3) 的独立渲染,聚焦

cta 上的聚焦匹配度 97%22 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

cta 上的悬停匹配度 98%22 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

logo 上的聚焦匹配度 94%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 x 为 713px,网站上为 1146px; Icon 2 的 x 为 713px,网站上为 1146px。

默认匹配度 100%308 项测量中有 2 项不同

原始
网站上的原始 Header (landing),默认
渲染
Header (landing) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (landing),悬停
渲染
Header (landing) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (landing),聚焦
渲染
Header (landing) 的独立渲染,聚焦

nav link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

99% 匹配度

mobile

Nav link 2 的 x 为 261px,网站上为 246px; Group 的 x 为 277px,网站上为 262px,另有 2 项。

默认匹配度 100%385 项测量中有 4 项不同

原始
网站上的原始 Header (inner, 2),默认
渲染
Header (inner, 2) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (inner, 2),悬停
渲染
Header (inner, 2) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (inner, 2),聚焦
渲染
Header (inner, 2) 的独立渲染,聚焦

menu toggle 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

menu toggle 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

94% 匹配度

mobile

聚焦时,它的渲染与网站的相似度为 94%,低于 96% 的标准。

默认匹配度 100%207 项测量全部一致

原始
网站上的原始 Header (inner, 3),默认
渲染
Header (inner, 3) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (inner, 3),悬停
渲染
Header (inner, 3) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (inner, 3),聚焦
渲染
Header (inner, 3) 的独立渲染,聚焦

cta 上的聚焦匹配度 100%22 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

cta 上的悬停匹配度 100%22 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

logo 上的聚焦匹配度 94%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

99% 匹配度

mobile

Nav link 2 的 x 为 261px,网站上为 246px; Group 的 x 为 277px,网站上为 262px,另有 2 项。

默认匹配度 100%385 项测量中有 4 项不同

原始
网站上的原始 Header (inner),默认
渲染
Header (inner) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (inner),悬停
渲染
Header (inner) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (inner),聚焦
渲染
Header (inner) 的独立渲染,聚焦

menu toggle 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

menu toggle 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

99% 匹配度

mobile

Nav link 2 的 x 为 261px,网站上为 246px; Group 的 x 为 277px,网站上为 262px,另有 2 项。

默认匹配度 100%385 项测量中有 4 项不同

原始
网站上的原始 Header (landing),默认
渲染
Header (landing) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Header (landing),悬停
渲染
Header (landing) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Header (landing),聚焦
渲染
Header (landing) 的独立渲染,聚焦

menu toggle 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

menu toggle 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 3 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

Footers10

98% 匹配度

desktop

Inner 的 height 为 5418px,网站上为 7902px; Group 的 height 为 5418px,网站上为 7280px,另有 5 项。

默认匹配度 100%1504 项测量中有 7 项不同

原始
网站上的原始 Footer (inner),默认
渲染
Footer (inner) 的独立渲染,默认

聚焦未检查

原始
网站上的原始 Footer (inner),聚焦
渲染
Footer (inner) 的独立渲染,聚焦

link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 上的聚焦匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Inner 的 height 为 1244px,网站上为 2174px; Group 的 height 为 727px,网站上为 1552px,另有 122 项。

默认匹配度 100%1804 项测量中有 124 项不同

原始
网站上的原始 Footer (inner, 2),默认
渲染
Footer (inner, 2) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Footer (inner, 2),悬停
渲染
Footer (inner, 2) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Footer (inner, 2),聚焦
渲染
Footer (inner, 2) 的独立渲染,聚焦

nav link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Inner 的 height 为 838px,网站上为 1131px; Group 的 height 为 320px,网站上为 509px,另有 115 项。

默认匹配度 100%2107 项测量中有 117 项不同

原始
网站上的原始 Footer (inner, 3),默认
渲染
Footer (inner, 3) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Footer (inner, 3),悬停
渲染
Footer (inner, 3) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Footer (inner, 3),聚焦
渲染
Footer (inner, 3) 的独立渲染,聚焦

nav link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Inner 的 height 为 647px,网站上为 773px; List 的 height 为 22px,网站上为 0px,另有 2 项。

默认匹配度 100%2124 项测量中有 4 项不同

原始
网站上的原始 Footer (inner, 4),默认
渲染
Footer (inner, 4) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Footer (inner, 4),悬停
渲染
Footer (inner, 4) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Footer (inner, 4),聚焦
渲染
Footer (inner, 4) 的独立渲染,聚焦

nav link 2 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 2 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

100% 匹配度

desktop

Inner 的 height 为 870px,网站上为 996px; Group 4 的 height 为 323px,网站上为 349px,另有 2 项。

默认匹配度 100%2214 项测量中有 4 项不同

原始
网站上的原始 Footer (landing),默认
渲染
Footer (landing) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Footer (landing),悬停
渲染
Footer (landing) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Footer (landing),聚焦
渲染
Footer (landing) 的独立渲染,聚焦

link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 100%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

99% 匹配度

mobile

Inner 的 height 为 2134px,网站上为 4222px; Group 的 height 为 1575px,网站上为 3584px,另有 170 项。

默认匹配度 99%1615 项测量中有 172 项不同

原始
网站上的原始 Footer (inner, 2),默认
渲染
Footer (inner, 2) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Footer (inner, 2),悬停
渲染
Footer (inner, 2) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Footer (inner, 2),聚焦
渲染
Footer (inner, 2) 的独立渲染,聚焦

button 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

button 上的悬停匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的聚焦匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

nav link 上的悬停匹配度 99%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

未检查

mobile

无法单独渲染这个配方。

这个组件没有进行任何对比。

DESIGN.md 中的配方

未检查

mobile

无法单独渲染这个配方。

这个组件没有进行任何对比。

DESIGN.md 中的配方

未检查

mobile

无法单独渲染这个配方。

这个组件没有进行任何对比。

DESIGN.md 中的配方

98% 匹配度

mobile

根元素 的 height 为 1554px,网站上为 1433px; Inner 的 height 为 1554px,网站上为 1433px,另有 143 项。

默认匹配度 98%1880 项测量中有 145 项不同

原始
网站上的原始 Footer (landing),默认
渲染
Footer (landing) 的独立渲染,默认

悬停未检查

原始
网站上的原始 Footer (landing),悬停
渲染
Footer (landing) 的独立渲染,悬停

聚焦未检查

原始
网站上的原始 Footer (landing),聚焦
渲染
Footer (landing) 的独立渲染,聚焦

button 上的聚焦匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

button 上的悬停匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 2 上的聚焦匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 3 上的聚焦匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 3 上的悬停匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 4 上的聚焦匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 4 上的悬停匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片

link 上的聚焦匹配度 98%18 项测量全部一致

原始
没有存储图片
渲染
没有存储图片
DESIGN.md 中的配方

提取自 Apple 的公开网站,并非官方品牌规范。查看其他网站的字体

相似示例

浏览全部
Duolingo - The world’s most popular way to learn 网站预览
实用工具与日常工具 · Browser Extensions & Small Utilities

Duolingo - The world’s most popular way to learn

通过 CSSOM 频率分析提取的设计令牌,未经 LLM 解读。

Airbnb 网站预览
旅行、交通与物流

Airbnb

Airbnb 的设计系统以一款专有的可变字体(Airbnb Cereal VF)为核心,配色接近单色的中性色调,以深炭色(#222222)和浅灰色为基调。品牌标志性的珊瑚粉色"Rausch"(#ff385c)仅用于主要行动按钮和标志。布局采用响应式图片卡片网格,图片与文字的比例宽松,卡片带有 20px 的柔和圆角,并通过多层环境阴影营造细微的层次感,避免强烈的明暗对比。搜索栏是一个醒目的胶囊形容器,统一了用户的核心操作。

IKEA 网站预览
电商与零售 · E-commerce Store

IKEA

IKEA的全球首页采用大胆、扁平的设计系统,以标志性的IKEA黄色(#ffdb00)作为主要操作区域,并以IKEA蓝色(#0058a3)作为品牌标识的点缀色。整个字体体系基于一款定制字体Noto IKEA构建,使用400和700两种字重,字号等级划分严谨,从14px的正文到51px的展示标题。层级主要通过色彩对比和版面结构来体现,而非依靠阴影。版面采用最大宽度为90rem的容器,桌面端网格间距为1.5rem,交互元素统一应用8px的圆角。米白色背景(#fffefb)与纯粹的#111111文字形成温和对比,营造出高对比度、易于阅读的无障碍浏览体验。

Notion 网站预览
软件与 SaaS · Productivity & Notes

Notion

Notion 营销首页以深海军蓝(#02093a)的首屏区块搭配浅色(#f6f5f4)的主体背景,所有文字层级统一使用定制字体 NotionInter。设计采用 12 栏网格,栏间距为 28px,圆角体系兼顾两种规格:卡片使用 8px,药丸形按钮使用 9999px。浮层元素则采用多层递进式阴影系统。品牌蓝(#2537b1)用于行动按钮与重点强调,从 gray-200 到 gray-900 的语义化灰阶则负责所有文字与背景面的层级划分。

Railway 网站预览
开发者与基础设施 · Developer Tools & IDEs

Railway

Railway 的设计系统是一套以深色为主的开发者平台界面,底色是近乎黑色的深海军蓝(#13111c、#0b0b0f),文字采用高对比度的米白色(#f7f7f8),品牌强调色为独特的紫色(#853bce / #553f83)。首屏使用 IBM Plex Serif 呈现编辑式的厚重感,界面文案统一使用 Inter,代码场景则使用 JetBrains Mono 与 SF Mono。层级关系主要依靠内嵌的白色发光描边(rgba(255,255,255,0.2) 1.5px inset)来实现,而非投影,使界面呈现玻璃面板般的质感。间距系统以 4px 为基础,节奏紧凑而明确,常用 8/12/16/24/32。圆角普遍较小,以 4px 为主,卡片与首屏容器则有选择地使用 8px 和 16px。

Shopify 网站预览
商业与专业服务

Shopify

Shopify 营销首页采用极具冲击力的全幅视频主视觉,近黑色背景(#02090a)与上方白色导航栏形成鲜明对比。品牌主色为醒目的薄荷绿(#36f4a4),克制地用于高亮和交互状态。字体分工明确:展示与编辑类标题使用 NeueHaasGrotesk,界面正文使用 Inter-Variable。CTA 按钮采用全圆角药丸形(border-radius: 9999px)。整体风格自信、高对比、充满憧憬,旨在将访客转化为商家。

相似配色