Hệ thống thiết kế Apple

apple.com
PROEngine v4

Các design token được trích xuất từ phân tích tần suất CSSOM, không qua diễn giải của LLM.

Hệ thống trực quan
100% độ tin cậy
98% độ tin cậy
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% độ tin cậy
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% độ tin cậy
xs · 8px
sm · 10px
md · 11px
lg · 14px
xl · 18px
2xl · 20px
3xl · 48px
4xl · 56px
pill · 980px
full · 9999px

Component

Buttons12

100% khớp

ghost · desktop

Bình thườngKhớp 100%26 số đo khớp

Bản gốc
Button, ghost gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, ghost, bình thường

HoverKhớp 100%22 số đo khớp

Bản gốc
Button, ghost gốc trên trang web, hover
Bản render
Bản render riêng của Button, ghost, hover

FocusKhớp 100%22 số đo khớp

Bản gốc
Button, ghost gốc trên trang web, focus
Bản render
Bản render riêng của Button, ghost, focus
Công thức trong DESIGN.md

100% khớp

ghost · desktop

Bình thườngKhớp 100%22 số đo khớp

Bản gốc
Button, ghost (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, ghost (2), bình thường

FocusKhớp 100%18 số đo khớp

Bản gốc
Button, ghost (2) gốc trên trang web, focus
Bản render
Bản render riêng của Button, ghost (2), focus
Công thức trong DESIGN.md

100% khớp

ghost · desktop

Label y là 59px, trang web có 0px.

Bình thườngKhớp 100%1 trên 57 số đo khác nhau

Bản gốc
Button, ghost (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, ghost (3), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Button, ghost (3) gốc trên trang web, hover
Bản render
Bản render riêng của Button, ghost (3), hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Button, ghost (3) gốc trên trang web, focus
Bản render
Bản render riêng của Button, ghost (3), focus
Công thức trong DESIGN.md

Không thể xác minh

ghost · desktop

Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.

Bình thườngKhớp 100%35 số đo khớp

Bản gốc
Button, ghost (4) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, ghost (4), bình thường

FocusKhớp 61%18 số đo khớp

Bản gốc
Button, ghost (4) gốc trên trang web, focus
Bản render
Bản render riêng của Button, ghost (4), focus
Công thức trong DESIGN.md

100% khớp

primary · desktop

Bình thườngKhớp 100%26 số đo khớp

Bản gốc
Button, primary gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, primary, bình thường

HoverKhớp 100%22 số đo khớp

Bản gốc
Button, primary gốc trên trang web, hover
Bản render
Bản render riêng của Button, primary, hover

FocusKhớp 100%22 số đo khớp

Bản gốc
Button, primary gốc trên trang web, focus
Bản render
Bản render riêng của Button, primary, focus
Công thức trong DESIGN.md

76% khớp

primary · desktop

Label 2 y là 27px, trang web có 9px.

Bình thườngKhớp 100%1 trên 29 số đo khác nhau

Bản gốc
Button, primary (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, primary (2), bình thường

HoverKhớp 91%22 số đo khớp

Bản gốc
Button, primary (2) gốc trên trang web, hover
Bản render
Bản render riêng của Button, primary (2), hover

FocusKhớp 76%22 số đo khớp

Bản gốc
Button, primary (2) gốc trên trang web, focus
Bản render
Bản render riêng của Button, primary (2), focus
Công thức trong DESIGN.md

76% khớp

primary · desktop

Group y là 27px, trang web có 9px; Label 2 y là 28px, trang web có 10px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 55 số đo khác nhau

Bản gốc
Button, primary (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, primary (3), bình thường

HoverKhớp 91%22 số đo khớp

Bản gốc
Button, primary (3) gốc trên trang web, hover
Bản render
Bản render riêng của Button, primary (3), hover

FocusKhớp 76%22 số đo khớp

Bản gốc
Button, primary (3) gốc trên trang web, focus
Bản render
Bản render riêng của Button, primary (3), focus
Công thức trong DESIGN.md

94% khớp

primary · desktop

Bản render giống trang web ở mức 95%, dưới ngưỡng 97%.

Bình thườngKhớp 95%25 số đo khớp

Bản gốc
Button, primary (4) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, primary (4), bình thường

HoverKhớp 95%22 số đo khớp

Bản gốc
Button, primary (4) gốc trên trang web, hover
Bản render
Bản render riêng của Button, primary (4), hover

FocusKhớp 94%22 số đo khớp

Bản gốc
Button, primary (4) gốc trên trang web, focus
Bản render
Bản render riêng của Button, primary (4), focus
Công thức trong DESIGN.md

94% khớp

primary · desktop

Bản render giống trang web ở mức 96%, dưới ngưỡng 97%.

Bình thườngKhớp 96%25 số đo khớp

Bản gốc
Button, primary (5) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, primary (5), bình thường

HoverKhớp 96%22 số đo khớp

Bản gốc
Button, primary (5) gốc trên trang web, hover
Bản render
Bản render riêng của Button, primary (5), hover

FocusKhớp 94%22 số đo khớp

Bản gốc
Button, primary (5) gốc trên trang web, focus
Bản render
Bản render riêng của Button, primary (5), focus
Công thức trong DESIGN.md

99% khớp

secondary · desktop

Bình thườngKhớp 100%26 số đo khớp

Bản gốc
Button, secondary gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, secondary, bình thường

HoverKhớp 100%22 số đo khớp

Bản gốc
Button, secondary gốc trên trang web, hover
Bản render
Bản render riêng của Button, secondary, hover

FocusKhớp 99%22 số đo khớp

Bản gốc
Button, secondary gốc trên trang web, focus
Bản render
Bản render riêng của Button, secondary, focus
Công thức trong DESIGN.md

100% khớp

secondary · desktop

Bình thườngKhớp 100%26 số đo khớp

Bản gốc
Button, secondary (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, secondary (2), bình thường

HoverKhớp 100%22 số đo khớp

Bản gốc
Button, secondary (2) gốc trên trang web, hover
Bản render
Bản render riêng của Button, secondary (2), hover

FocusKhớp 100%22 số đo khớp

Bản gốc
Button, secondary (2) gốc trên trang web, focus
Bản render
Bản render riêng của Button, secondary (2), focus
Công thức trong DESIGN.md

97% khớp

secondary · desktop

Gốc width là 138px, trang web có 202px; Gốc height là 64px, trang web có 92px.

Bình thườngKhớp 97%2 trên 22 số đo khác nhau

Bản gốc
Button, secondary (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Button, secondary (3), bình thường

HoverKhớp 97%18 số đo khớp

Bản gốc
Button, secondary (3) gốc trên trang web, hover
Bản render
Bản render riêng của Button, secondary (3), hover

FocusKhớp 97%18 số đo khớp

Bản gốc
Button, secondary (3) gốc trên trang web, focus
Bản render
Bản render riêng của Button, secondary (3), focus
Công thức trong DESIGN.md

Input1

89% khớp

desktop

Khi focus, bản render giống trang web ở mức 89%, dưới ngưỡng 97%.

Bình thườngKhớp 99%90 số đo khớp

Bản gốc
Input gốc trên trang web, bình thường
Bản render
Bản render riêng của Input, bình thường

FocusKhớp 89%22 số đo khớp

Bản gốc
Input gốc trên trang web, focus
Bản render
Bản render riêng của Input, focus
Công thức trong DESIGN.md

Cards9

100% khớp

desktop

Media y là 93px, trang web có 57px; Text y là 149px, trang web có 106px và thêm 3 khác.

Bình thườngKhớp 100%5 trên 201 số đo khác nhau

Bản gốc
Card gốc trên trang web, bình thường
Bản render
Bản render riêng của Card, bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Card gốc trên trang web, hover
Bản render
Bản render riêng của Card, hover

FocusKhớp 100%1 trên 18 số đo khác nhau

Bản gốc
Card gốc trên trang web, focus
Bản render
Bản render riêng của Card, focus

Bình thường, lần xuất hiện 2Khớp 100%5 trên 201 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%5 trên 201 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 4Khớp 100%5 trên 201 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 5Khớp 100%5 trên 201 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 6Khớp 100%5 trên 201 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Break y là 110px, trang web có 138px; Text y là 138px, trang web có 166px.

Bình thườngKhớp 100%2 trên 73 số đo khác nhau

Bản gốc
Card (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (2), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Card (2) gốc trên trang web, hover
Bản render
Bản render riêng của Card (2), hover

FocusKhớp 100%1 trên 18 số đo khác nhau

Bản gốc
Card (2) gốc trên trang web, focus
Bản render
Bản render riêng của Card (2), focus

Bình thường, lần xuất hiện 2Khớp 100%2 trên 73 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%2 trên 73 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Group y là 0px, trang web có 77px; Media y là 0px, trang web có 77px và thêm 14 khác.

Bình thườngKhớp 100%16 trên 190 số đo khác nhau

Bản gốc
Card (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (3), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Card (3) gốc trên trang web, hover
Bản render
Bản render riêng của Card (3), hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Card (3) gốc trên trang web, focus
Bản render
Bản render riêng của Card (3), focus

Bình thường, lần xuất hiện 2Khớp 100%16 trên 190 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%16 trên 190 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 4Khớp 100%16 trên 190 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 5Khớp 100%16 trên 190 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 6Khớp 100%16 trên 190 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

99% khớp

desktop

Bình thườngKhớp 99%154 số đo khớp

Bản gốc
Card (4) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (4), bình thường

Bình thường, lần xuất hiện 2Khớp 99%154 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 99%154 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 4Khớp 100%154 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Không thể xác minh

desktop

Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.

Bình thườngKhớp 100%66 số đo khớp

Bản gốc
Card (5) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (5), bình thường

Bình thường, lần xuất hiện 2Khớp 100%66 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%66 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Không thể xác minh

desktop

Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.

Bình thườngKhớp 100%149 số đo khớp

Bản gốc
Card (6) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (6), bình thường

Bình thường, lần xuất hiện 2Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 4Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 5Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Không thể xác minh

desktop

Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.

Bình thườngKhớp 100%63 số đo khớp

Bản gốc
Card (7) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (7), bình thường

Bình thường, lần xuất hiện 2Khớp 100%63 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%63 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%119 số đo khớp

Bản gốc
Card (8) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (8), bình thường

Bình thường, lần xuất hiện 2Khớp 100%119 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%119 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

95% khớp

desktop

Title y là 5px, trang web có 124px; Body y là 123px, trang web có 241px và thêm 2 khác.

Bình thườngKhớp 95%4 trên 111 số đo khác nhau

Bản gốc
Card (9) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card (9), bình thường

Bình thường, lần xuất hiện 2Khớp 100%4 trên 111 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%4 trên 111 số đo khác nhau

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Extras26

100% khớp

desktop

Gốc height là 78px, trang web có 56px; Group 2 height là 44px, trang web có 22px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 109 số đo khác nhau

Bản gốc
Breadcrumbs gốc trên trang web, bình thường
Bản render
Bản render riêng của Breadcrumbs, bình thường
Công thức trong DESIGN.md

91% khớp

desktop

Khi focus, bản render giống trang web ở mức 91%, dưới ngưỡng 96%.

Bình thườngKhớp 100%21 số đo khớp

Bản gốc
Card links gốc trên trang web, bình thường
Bản render
Bản render riêng của Card links, bình thường

FocusKhớp 91%18 số đo khớp

Bản gốc
Card links gốc trên trang web, focus
Bản render
Bản render riêng của Card links, focus
Công thức trong DESIGN.md

93% khớp

desktop

Group 2 y là 87px, trang web có 98px; Text y là 87px, trang web có 98px.

Bình thườngKhớp 100%2 trên 67 số đo khác nhau

Bản gốc
Card links (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card links (2), bình thường

FocusKhớp 93%18 số đo khớp

Bản gốc
Card links (2) gốc trên trang web, focus
Bản render
Bản render riêng của Card links (2), focus
Công thức trong DESIGN.md

88% khớp

desktop

Khi focus, bản render giống trang web ở mức 88%, dưới ngưỡng 96%.

Bình thườngKhớp 100%23 số đo khớp

Bản gốc
Card links (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Card links (3), bình thường

FocusKhớp 88%18 số đo khớp

Bản gốc
Card links (3) gốc trên trang web, focus
Bản render
Bản render riêng của Card links (3), focus
Công thức trong DESIGN.md

Không thể xác minh

desktop

Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.

Bình thườngKhớp 99%149 số đo khớp

Bản gốc
Carousel section gốc trên trang web, bình thường
Bản render
Bản render riêng của Carousel section, bình thường

Bình thường, lần xuất hiện 2Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 4Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 5Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 6Khớp 100%149 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

List width là 225px, trang web có 176px; Item width là 225px, trang web có 176px và thêm 31 khác.

Bình thườngKhớp 100%33 trên 776 số đo khác nhau

Bản gốc
Footer links gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer links, bình thường
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%56 số đo khớp

Bản gốc
Icon buttons gốc trên trang web, bình thường
Bản render
Bản render riêng của Icon buttons, bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Icon buttons gốc trên trang web, hover
Bản render
Bản render riêng của Icon buttons, hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Icon buttons gốc trên trang web, focus
Bản render
Bản render riêng của Icon buttons, focus
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%98 số đo khớp

Bản gốc
Icon buttons (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Icon buttons (2), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Icon buttons (2) gốc trên trang web, hover
Bản render
Bản render riêng của Icon buttons (2), hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Icon buttons (2) gốc trên trang web, focus
Bản render
Bản render riêng của Icon buttons (2), focus
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%56 số đo khớp

Bản gốc
Icon link gốc trên trang web, bình thường
Bản render
Bản render riêng của Icon link, bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Icon link gốc trên trang web, hover
Bản render
Bản render riêng của Icon link, hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Icon link gốc trên trang web, focus
Bản render
Bản render riêng của Icon link, focus
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%98 số đo khớp

Bản gốc
Icon link (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Icon link (2), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Icon link (2) gốc trên trang web, hover
Bản render
Bản render riêng của Icon link (2), hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Icon link (2) gốc trên trang web, focus
Bản render
Bản render riêng của Icon link (2), focus
Công thức trong DESIGN.md

100% khớp

desktop

List width là 225px, trang web có 176px; Item width là 225px, trang web có 176px và thêm 31 khác.

Bình thườngKhớp 100%33 trên 776 số đo khác nhau

Bản gốc
Link list gốc trên trang web, bình thường
Bản render
Bản render riêng của Link list, bình thường
Công thức trong DESIGN.md

100% khớp

desktop

List width là 225px, trang web có 176px; Item width là 225px, trang web có 176px và thêm 31 khác.

Bình thườngKhớp 100%33 trên 776 số đo khác nhau

Bản gốc
Nav links gốc trên trang web, bình thường
Bản render
Bản render riêng của Nav links, bình thường
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%22 số đo khớp

Bản gốc
Nav menu item gốc trên trang web, bình thường
Bản render
Bản render riêng của Nav menu item, bình thường

FocusKhớp 100%18 số đo khớp

Bản gốc
Nav menu item gốc trên trang web, focus
Bản render
Bản render riêng của Nav menu item, focus
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%22 số đo khớp

Bản gốc
Navigation links gốc trên trang web, bình thường
Bản render
Bản render riêng của Navigation links, bình thường

FocusKhớp 100%18 số đo khớp

Bản gốc
Navigation links gốc trên trang web, focus
Bản render
Bản render riêng của Navigation links, focus
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%22 số đo khớp

Bản gốc
Navigation menu item gốc trên trang web, bình thường
Bản render
Bản render riêng của Navigation menu item, bình thường

FocusKhớp 100%18 số đo khớp

Bản gốc
Navigation menu item gốc trên trang web, focus
Bản render
Bản render riêng của Navigation menu item, focus
Công thức trong DESIGN.md

50% khớp

desktop

Bản render giống trang web ở mức 50%, dưới ngưỡng 96%.

Bình thườngKhớp 50%192 số đo khớp

Bản gốc
Promo banner gốc trên trang web, bình thường
Bản render
Bản render riêng của Promo banner, bình thường

HoverKhớp 50%18 số đo khớp

Bản gốc
Promo banner gốc trên trang web, hover
Bản render
Bản render riêng của Promo banner, hover

FocusKhớp 50%1 trên 18 số đo khác nhau

Bản gốc
Promo banner gốc trên trang web, focus
Bản render
Bản render riêng của Promo banner, focus

Bình thường, lần xuất hiện 2Khớp 100%192 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%192 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Group y là 8px, trang web có 12px; Group width là 1180px, trang web có 1154px và thêm 30 khác.

Bình thườngKhớp 100%32 trên 374 số đo khác nhau

Bản gốc
Sub navigation gốc trên trang web, bình thường
Bản render
Bản render riêng của Sub navigation, bình thường
Công thức trong DESIGN.md

99% khớp

desktop

Bình thườngKhớp 99%91 số đo khớp

Bản gốc
Tabs gốc trên trang web, bình thường
Bản render
Bản render riêng của Tabs, bình thường

HoverKhớp 99%19 số đo khớp

Bản gốc
Tabs gốc trên trang web, hover
Bản render
Bản render riêng của Tabs, hover

FocusKhớp 99%19 số đo khớp

Bản gốc
Tabs gốc trên trang web, focus
Bản render
Bản render riêng của Tabs, focus

Bình thường, lần xuất hiện 2Khớp 100%91 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 3Khớp 100%91 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 4Khớp 100%91 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 5Khớp 100%91 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Bình thường, lần xuất hiện 6Khớp 100%91 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%77 số đo khớp

Bản gốc
Tabs (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Tabs (2), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Tabs (2) gốc trên trang web, hover
Bản render
Bản render riêng của Tabs (2), hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Tabs (2) gốc trên trang web, focus
Bản render
Bản render riêng của Tabs (2), focus
Công thức trong DESIGN.md

100% khớp

desktop

Bình thườngKhớp 100%77 số đo khớp

Bản gốc
Tabs (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Tabs (3), bình thường

HoverKhớp 100%18 số đo khớp

Bản gốc
Tabs (3) gốc trên trang web, hover
Bản render
Bản render riêng của Tabs (3), hover

FocusKhớp 100%18 số đo khớp

Bản gốc
Tabs (3) gốc trên trang web, focus
Bản render
Bản render riêng của Tabs (3), focus
Công thức trong DESIGN.md

100% khớp

desktop

Group y là 8px, trang web có 12px; Group height là 43px, trang web có 36px và thêm 32 khác.

Bình thườngKhớp 100%34 trên 418 số đo khác nhau

Bản gốc
Tab bar gốc trên trang web, bình thường
Bản render
Bản render riêng của Tab bar, bình thường
Công thức trong DESIGN.md

100% khớp

desktop

Text 2 y là 33px, trang web có 17px; Group width là 0px, trang web có 4px.

Bình thườngKhớp 100%2 trên 234 số đo khác nhau

Bản gốc
Table gốc trên trang web, bình thường
Bản render
Bản render riêng của Table, bình thường
Công thức trong DESIGN.md

97% khớp

desktop

Gốc height là 105px, trang web có 96px; Text height là 74px, trang web có 65px và thêm 7 khác.

Bình thườngKhớp 100%9 trên 72 số đo khác nhau

Bản gốc
Text link gốc trên trang web, bình thường
Bản render
Bản render riêng của Text link, bình thường

FocusKhớp 97%18 số đo khớp

Bản gốc
Text link gốc trên trang web, focus
Bản render
Bản render riêng của Text link, focus
Công thức trong DESIGN.md

100% khớp

desktop

Group 3 y là 55px, trang web có 66px; Text y là 55px, trang web có 66px.

Bình thườngKhớp 100%2 trên 87 số đo khác nhau

Bản gốc
Text link (2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Text link (2), bình thường

FocusKhớp 100%18 số đo khớp

Bản gốc
Text link (2) gốc trên trang web, focus
Bản render
Bản render riêng của Text link (2), focus
Công thức trong DESIGN.md

35% khớp

desktop

Khi focus, bản render giống trang web ở mức 35%, dưới ngưỡng 96%.

Bình thườngKhớp 100%21 số đo khớp

Bản gốc
Text link (3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Text link (3), bình thường

FocusKhớp 35%18 số đo khớp

Bản gốc
Text link (3) gốc trên trang web, focus
Bản render
Bản render riêng của Text link (3), focus
Công thức trong DESIGN.md

74% khớp

desktop

Gốc width là 138px, trang web có 202px; Gốc height là 64px, trang web có 92px.

Bình thườngKhớp 74%2 trên 22 số đo khác nhau

Bản gốc
Toggle button gốc trên trang web, bình thường
Bản render
Bản render riêng của Toggle button, bình thường

FocusKhớp 74%18 số đo khớp

Bản gốc
Toggle button gốc trên trang web, focus
Bản render
Bản render riêng của Toggle button, focus
Công thức trong DESIGN.md

Headers8

100% khớp

desktop

Group x là 713px, trang web có 1146px; Icon 2 x là 713px, trang web có 1146px.

Bình thườngKhớp 100%2 trên 308 số đo khác nhau

Bản gốc
Header (inner) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (inner), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (inner) gốc trên trang web, hover
Bản render
Bản render riêng của Header (inner), hover

Focuschưa kiểm tra

Bản gốc
Header (inner) gốc trên trang web, focus
Bản render
Bản render riêng của Header (inner), focus

Focus trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Group x là 713px, trang web có 1146px; Icon 2 x là 713px, trang web có 1146px.

Bình thườngKhớp 100%2 trên 308 số đo khác nhau

Bản gốc
Header (inner, 2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (inner, 2), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (inner, 2) gốc trên trang web, hover
Bản render
Bản render riêng của Header (inner, 2), hover

Focuschưa kiểm tra

Bản gốc
Header (inner, 2) gốc trên trang web, focus
Bản render
Bản render riêng của Header (inner, 2), focus

Focus trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

94% khớp

desktop

Group 4 y là 52px, trang web có -3px; Group 4 height là 59px, trang web có 41px và thêm 5 khác.

Bình thườngKhớp 98%7 trên 228 số đo khác nhau

Bản gốc
Header (inner, 3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (inner, 3), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (inner, 3) gốc trên trang web, hover
Bản render
Bản render riêng của Header (inner, 3), hover

Focuschưa kiểm tra

Bản gốc
Header (inner, 3) gốc trên trang web, focus
Bản render
Bản render riêng của Header (inner, 3), focus

Focus trên ctaKhớp 97%22 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên ctaKhớp 98%22 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên logoKhớp 94%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Group x là 713px, trang web có 1146px; Icon 2 x là 713px, trang web có 1146px.

Bình thườngKhớp 100%2 trên 308 số đo khác nhau

Bản gốc
Header (landing) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (landing), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (landing) gốc trên trang web, hover
Bản render
Bản render riêng của Header (landing), hover

Focuschưa kiểm tra

Bản gốc
Header (landing) gốc trên trang web, focus
Bản render
Bản render riêng của Header (landing), focus

Focus trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

99% khớp

mobile

Nav link 2 x là 261px, trang web có 246px; Group x là 277px, trang web có 262px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 385 số đo khác nhau

Bản gốc
Header (inner, 2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (inner, 2), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (inner, 2) gốc trên trang web, hover
Bản render
Bản render riêng của Header (inner, 2), hover

Focuschưa kiểm tra

Bản gốc
Header (inner, 2) gốc trên trang web, focus
Bản render
Bản render riêng của Header (inner, 2), focus

Focus trên menu toggleKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên menu toggleKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 2Khớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 3Khớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

94% khớp

mobile

Khi focus, bản render giống trang web ở mức 94%, dưới ngưỡng 96%.

Bình thườngKhớp 100%207 số đo khớp

Bản gốc
Header (inner, 3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (inner, 3), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (inner, 3) gốc trên trang web, hover
Bản render
Bản render riêng của Header (inner, 3), hover

Focuschưa kiểm tra

Bản gốc
Header (inner, 3) gốc trên trang web, focus
Bản render
Bản render riêng của Header (inner, 3), focus

Focus trên ctaKhớp 100%22 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên ctaKhớp 100%22 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên logoKhớp 94%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

99% khớp

mobile

Nav link 2 x là 261px, trang web có 246px; Group x là 277px, trang web có 262px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 385 số đo khác nhau

Bản gốc
Header (inner) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (inner), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (inner) gốc trên trang web, hover
Bản render
Bản render riêng của Header (inner), hover

Focuschưa kiểm tra

Bản gốc
Header (inner) gốc trên trang web, focus
Bản render
Bản render riêng của Header (inner), focus

Focus trên menu toggleKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên menu toggleKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 2Khớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 3Khớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

99% khớp

mobile

Nav link 2 x là 261px, trang web có 246px; Group x là 277px, trang web có 262px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 385 số đo khác nhau

Bản gốc
Header (landing) gốc trên trang web, bình thường
Bản render
Bản render riêng của Header (landing), bình thường

Hoverchưa kiểm tra

Bản gốc
Header (landing) gốc trên trang web, hover
Bản render
Bản render riêng của Header (landing), hover

Focuschưa kiểm tra

Bản gốc
Header (landing) gốc trên trang web, focus
Bản render
Bản render riêng của Header (landing), focus

Focus trên menu toggleKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên menu toggleKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 2Khớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav link 3Khớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 3Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Footers10

98% khớp

desktop

Inner height là 5418px, trang web có 7902px; Group height là 5418px, trang web có 7280px và thêm 5 khác.

Bình thườngKhớp 100%7 trên 1504 số đo khác nhau

Bản gốc
Footer (inner) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (inner), bình thường

Focuschưa kiểm tra

Bản gốc
Footer (inner) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (inner), focus

Focus trên link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên linkKhớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Inner height là 1244px, trang web có 2174px; Group height là 727px, trang web có 1552px và thêm 122 khác.

Bình thườngKhớp 100%124 trên 1804 số đo khác nhau

Bản gốc
Footer (inner, 2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (inner, 2), bình thường

Hoverchưa kiểm tra

Bản gốc
Footer (inner, 2) gốc trên trang web, hover
Bản render
Bản render riêng của Footer (inner, 2), hover

Focuschưa kiểm tra

Bản gốc
Footer (inner, 2) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (inner, 2), focus

Focus trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Inner height là 838px, trang web có 1131px; Group height là 320px, trang web có 509px và thêm 115 khác.

Bình thườngKhớp 100%117 trên 2107 số đo khác nhau

Bản gốc
Footer (inner, 3) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (inner, 3), bình thường

Hoverchưa kiểm tra

Bản gốc
Footer (inner, 3) gốc trên trang web, hover
Bản render
Bản render riêng của Footer (inner, 3), hover

Focuschưa kiểm tra

Bản gốc
Footer (inner, 3) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (inner, 3), focus

Focus trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Inner height là 647px, trang web có 773px; List height là 22px, trang web có 0px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 2124 số đo khác nhau

Bản gốc
Footer (inner, 4) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (inner, 4), bình thường

Hoverchưa kiểm tra

Bản gốc
Footer (inner, 4) gốc trên trang web, hover
Bản render
Bản render riêng của Footer (inner, 4), hover

Focuschưa kiểm tra

Bản gốc
Footer (inner, 4) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (inner, 4), focus

Focus trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav link 2Khớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

100% khớp

desktop

Inner height là 870px, trang web có 996px; Group 4 height là 323px, trang web có 349px và thêm 2 khác.

Bình thườngKhớp 100%4 trên 2214 số đo khác nhau

Bản gốc
Footer (landing) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (landing), bình thường

Hoverchưa kiểm tra

Bản gốc
Footer (landing) gốc trên trang web, hover
Bản render
Bản render riêng của Footer (landing), hover

Focuschưa kiểm tra

Bản gốc
Footer (landing) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (landing), focus

Focus trên linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 100%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

99% khớp

mobile

Inner height là 2134px, trang web có 4222px; Group height là 1575px, trang web có 3584px và thêm 170 khác.

Bình thườngKhớp 99%172 trên 1615 số đo khác nhau

Bản gốc
Footer (inner, 2) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (inner, 2), bình thường

Hoverchưa kiểm tra

Bản gốc
Footer (inner, 2) gốc trên trang web, hover
Bản render
Bản render riêng của Footer (inner, 2), hover

Focuschưa kiểm tra

Bản gốc
Footer (inner, 2) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (inner, 2), focus

Focus trên buttonKhớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên buttonKhớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên nav linkKhớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên nav linkKhớp 99%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Chưa kiểm tra

mobile

Không thể render riêng công thức này.

Không có gì được so sánh cho component này.

Công thức trong DESIGN.md

Chưa kiểm tra

mobile

Không thể render riêng công thức này.

Không có gì được so sánh cho component này.

Công thức trong DESIGN.md

Chưa kiểm tra

mobile

Không thể render riêng công thức này.

Không có gì được so sánh cho component này.

Công thức trong DESIGN.md

98% khớp

mobile

Gốc height là 1554px, trang web có 1433px; Inner height là 1554px, trang web có 1433px và thêm 143 khác.

Bình thườngKhớp 98%145 trên 1880 số đo khác nhau

Bản gốc
Footer (landing) gốc trên trang web, bình thường
Bản render
Bản render riêng của Footer (landing), bình thường

Hoverchưa kiểm tra

Bản gốc
Footer (landing) gốc trên trang web, hover
Bản render
Bản render riêng của Footer (landing), hover

Focuschưa kiểm tra

Bản gốc
Footer (landing) gốc trên trang web, focus
Bản render
Bản render riêng của Footer (landing), focus

Focus trên buttonKhớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên buttonKhớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên link 2Khớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên link 3Khớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên link 3Khớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên link 4Khớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Hover trên link 4Khớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu

Focus trên linkKhớp 98%18 số đo khớp

Bản gốc
Không có ảnh được lưu
Bản render
Không có ảnh được lưu
Công thức trong DESIGN.md

Được trích xuất từ website công khai của Apple, không phải hướng dẫn thương hiệu chính thức. Kiểm tra font chữ của trang web khác

Mẫu tương tự

Xem tất cả
Ảnh xem trước website Duolingo - The world’s most popular way to learn
Tiện ích & Công cụ hằng ngày · Browser Extensions & Small Utilities

Duolingo - The world’s most popular way to learn

Các token thiết kế được trích xuất từ phân tích tần suất CSSOM, không qua diễn giải bằng LLM.

Ảnh xem trước website Airbnb
Du lịch, Vận tải & Logistics

Airbnb

Hệ thống thiết kế của Airbnb được xây dựng quanh một phông chữ biến thiên độc quyền duy nhất (Airbnb Cereal VF), với bảng màu trung tính gần như đơn sắc, lấy màu than đậm (#222222) và các sắc xám nhạt làm nền tảng. Màu hồng san hô đặc trưng của thương hiệu, "Rausch" (#ff385c), chỉ được dành riêng cho các nút kêu gọi hành động chính và logo. Bố cục là lưới thẻ ảnh đáp ứng, với tỷ lệ ảnh so với chữ rộng rãi, các thẻ bo góc mềm 20px và hệ thống bóng đổ môi trường nhiều lớp tạo chiều sâu tinh tế mà không gây tương phản gắt. Thanh tìm kiếm dạng viên thuốc nổi bật, quy tụ hành động cốt lõi của người dùng.

Ảnh xem trước website IKEA
Thương mại & Bán lẻ · E-commerce Store

IKEA

IKEA là hệ thống thiết kế phẳng, táo bạo trên trang chủ toàn cầu, lấy màu vàng IKEA đặc trưng (#ffdb00) làm bề mặt hành động chính và xanh IKEA (#0058a3) làm điểm nhấn cho logo thương hiệu. Toàn bộ hệ thống chữ được xây dựng trên một kiểu chữ tùy chỉnh duy nhất là Noto IKEA, dùng hai độ đậm 400 và 700 trên thang cỡ chữ được xác định chặt chẽ, từ chữ nội dung 14px đến tiêu đề hiển thị 51px. Độ nổi được truyền tải hoàn toàn bằng độ tương phản màu sắc và cấu trúc bố cục thay vì bóng đổ. Bố cục dùng container có chiều rộng tối đa 90rem với khoảng cách lưới 1.5rem trên máy tính, và một token bo góc 8px nhất quán áp dụng cho các phần tử tương tác. Nền trắng ngà (#fffefb) mang lại cảm giác ấm áp khi đặt cạnh chữ #111111 đậm nét, tạo nên trải nghiệm đọc có độ tương phản cao và dễ tiếp cận.

Ảnh xem trước website Notion
Phần mềm & SaaS · Productivity & Notes

Notion

Trang chủ tiếp thị của Notion kết hợp phần hero màu xanh navy đậm (#02093a) với nội dung chính màu sáng (#f6f5f4), sử dụng một kiểu chữ tùy chỉnh (NotionInter) cho mọi vai trò văn bản. Thiết kế dựa trên lưới 12 cột với khoảng cách rãnh 28px, hệ thống bo góc kép gồm 8px cho thẻ và 9999px cho các nút dạng viên thuốc, cùng hệ thống đổ bóng nhiều lớp tăng dần cho các thành phần nổi. Màu xanh thương hiệu (#2537b1) dẫn dắt các nút kêu gọi hành động và điểm nhấn, trong khi thang màu xám ngữ nghĩa từ gray-200 đến gray-900 tạo nên cấu trúc phân cấp cho toàn bộ văn bản và bề mặt.

Ảnh xem trước website Railway
Lập trình & Hạ tầng · Developer Tools & IDEs

Railway

Hệ thống thiết kế của Railway là giao diện nền tối ưu tiên cho nền tảng dành cho nhà phát triển, được neo bởi các bề mặt xanh navy gần như đen sâu (#13111c, #0b0b0f), chữ off-white độ tương phản cao (#f7f7f8), và màu nhấn thương hiệu tím đặc trưng (#853bce / #553f83). Phần hero sử dụng IBM Plex Serif để tạo độ đậm mang phong cách biên tập, trong khi Inter đảm nhiệm toàn bộ nội dung giao diện, còn JetBrains Mono và SF Mono phục vụ các ngữ cảnh mã nguồn. Độ nổi khối được tạo bằng viền phát sáng trắng inset (rgba(255,255,255,0.2) 1.5px inset) thay vì bóng đổ, mang lại phong cách bảng kính mờ. Hệ thống khoảng cách dựa trên bội số 4px với nhịp điệu 8/12/16/24/32 rõ rệt. Bo góc chủ yếu là 4px, kết hợp có chọn lọc 8px và 16px cho thẻ và khung hero.

Ảnh xem trước website Shopify
Dịch vụ doanh nghiệp & Chuyên môn

Shopify

Trang chủ tiếp thị của Shopify sử dụng một khu vực hero video toàn màn hình đầy kịch tính, với nền gần đen (#02090a) tương phản rõ rệt với thanh điều hướng màu trắng phía trên. Màu nhấn thương hiệu chủ đạo là xanh bạc hà rực rỡ (#36f4a4), được dùng tiết chế cho các điểm nhấn và trạng thái tương tác. Kiểu chữ được phân chia giữa NeueHaasGrotesk cho tiêu đề hiển thị và mang tính biên tập, và Inter-Variable cho nội dung giao diện người dùng. Các nút kêu gọi hành động (CTA) có hình viên thuốc bo tròn hoàn toàn (border-radius: 9999px). Tổng thể hệ thống thiết kế tự tin, độ tương phản cao và đầy khát vọng, được xây dựng để biến khách truy cập thành người bán hàng.

Bảng màu tương tự