ระบบดีไซน์ Apple

apple.com
PROเอนจิน v4

Design tokens ที่ดึงมาจากการวิเคราะห์ความถี่ของ 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 สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, ghost ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost hover

Focusตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, ghost ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost focus
สูตรใน DESIGN.md

100% ตรงกัน

ghost · desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, ghost (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (2) สถานะปกติ

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Button, ghost (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (2) focus
สูตรใน DESIGN.md

100% ตรงกัน

ghost · desktop

Label y เป็น 59px แต่บนเว็บไซต์เป็น 0px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 1 จาก 57 ค่าแตกต่างกัน

ต้นฉบับ
Button, ghost (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (3) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Button, ghost (3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (3) hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Button, ghost (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (3) focus
สูตรใน DESIGN.md

ตรวจสอบไม่ได้

ghost · desktop

ตรวจสอบไม่ได้: ภาพถ่าย สื่อ หรือโฆษณาที่หน้าเว็บวางไว้ปิดทับส่วนใหญ่ขององค์ประกอบ และไม่มีส่วนอื่นที่ต่างกัน การเปรียบเทียบจึงไม่ได้บอกอะไรเกี่ยวกับสูตร

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 35 ค่าตรงกัน

ต้นฉบับ
Button, ghost (4) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (4) สถานะปกติ

Focusตรงกัน 61%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Button, ghost (4) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, ghost (4) focus
สูตรใน DESIGN.md

100% ตรงกัน

primary · desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 26 ค่าตรงกัน

ต้นฉบับ
Button, primary ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary hover

Focusตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary focus
สูตรใน DESIGN.md

76% ตรงกัน

primary · desktop

Label 2 y เป็น 27px แต่บนเว็บไซต์เป็น 9px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 1 จาก 29 ค่าแตกต่างกัน

ต้นฉบับ
Button, primary (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (2) สถานะปกติ

Hoverตรงกัน 91%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (2) hover

Focusตรงกัน 76%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (2) focus
สูตรใน DESIGN.md

76% ตรงกัน

primary · desktop

Group y เป็น 27px แต่บนเว็บไซต์เป็น 9px; Label 2 y เป็น 28px แต่บนเว็บไซต์เป็น 10px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 55 ค่าแตกต่างกัน

ต้นฉบับ
Button, primary (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (3) สถานะปกติ

Hoverตรงกัน 91%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (3) hover

Focusตรงกัน 76%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (3) focus
สูตรใน DESIGN.md

94% ตรงกัน

primary · desktop

เรนเดอร์ได้เหมือนเว็บไซต์ 95% ต่ำกว่าเกณฑ์ 97%

สถานะปกติตรงกัน 95%ค่าที่วัดได้ 25 ค่าตรงกัน

ต้นฉบับ
Button, primary (4) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (4) สถานะปกติ

Hoverตรงกัน 95%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (4) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (4) hover

Focusตรงกัน 94%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (4) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (4) focus
สูตรใน DESIGN.md

94% ตรงกัน

primary · desktop

เรนเดอร์ได้เหมือนเว็บไซต์ 96% ต่ำกว่าเกณฑ์ 97%

สถานะปกติตรงกัน 96%ค่าที่วัดได้ 25 ค่าตรงกัน

ต้นฉบับ
Button, primary (5) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (5) สถานะปกติ

Hoverตรงกัน 96%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (5) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (5) hover

Focusตรงกัน 94%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, primary (5) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, primary (5) focus
สูตรใน DESIGN.md

99% ตรงกัน

secondary · desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 26 ค่าตรงกัน

ต้นฉบับ
Button, secondary ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, secondary ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary hover

Focusตรงกัน 99%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, secondary ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary focus
สูตรใน DESIGN.md

100% ตรงกัน

secondary · desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 26 ค่าตรงกัน

ต้นฉบับ
Button, secondary (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary (2) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, secondary (2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary (2) hover

Focusตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Button, secondary (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary (2) focus
สูตรใน DESIGN.md

97% ตรงกัน

secondary · desktop

Root width เป็น 138px แต่บนเว็บไซต์เป็น 202px; Root height เป็น 64px แต่บนเว็บไซต์เป็น 92px

สถานะปกติตรงกัน 97%ค่าที่วัดได้ 2 จาก 22 ค่าแตกต่างกัน

ต้นฉบับ
Button, secondary (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary (3) สถานะปกติ

Hoverตรงกัน 97%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Button, secondary (3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary (3) hover

Focusตรงกัน 97%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Button, secondary (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Button, secondary (3) focus
สูตรใน DESIGN.md

Input1

89% ตรงกัน

desktop

เมื่อ focus เรนเดอร์ได้เหมือนเว็บไซต์ 89% ต่ำกว่าเกณฑ์ 97%

สถานะปกติตรงกัน 99%ค่าที่วัดได้ 90 ค่าตรงกัน

ต้นฉบับ
Input ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Input สถานะปกติ

Focusตรงกัน 89%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Input ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Input focus
สูตรใน DESIGN.md

Cards9

100% ตรงกัน

desktop

Media y เป็น 93px แต่บนเว็บไซต์เป็น 57px; Text y เป็น 149px แต่บนเว็บไซต์เป็น 106px และอีก 3 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 5 จาก 201 ค่าแตกต่างกัน

ต้นฉบับ
Card ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Card hover

Focusตรงกัน 100%ค่าที่วัดได้ 1 จาก 18 ค่าแตกต่างกัน

ต้นฉบับ
Card ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Card focus

สถานะปกติ อินสแตนซ์ที่ 2ตรงกัน 100%ค่าที่วัดได้ 5 จาก 201 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 3ตรงกัน 100%ค่าที่วัดได้ 5 จาก 201 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 4ตรงกัน 100%ค่าที่วัดได้ 5 จาก 201 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 5ตรงกัน 100%ค่าที่วัดได้ 5 จาก 201 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 6ตรงกัน 100%ค่าที่วัดได้ 5 จาก 201 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Break y เป็น 110px แต่บนเว็บไซต์เป็น 138px; Text y เป็น 138px แต่บนเว็บไซต์เป็น 166px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 73 ค่าแตกต่างกัน

ต้นฉบับ
Card (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (2) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card (2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (2) hover

Focusตรงกัน 100%ค่าที่วัดได้ 1 จาก 18 ค่าแตกต่างกัน

ต้นฉบับ
Card (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (2) focus

สถานะปกติ อินสแตนซ์ที่ 2ตรงกัน 100%ค่าที่วัดได้ 2 จาก 73 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 3ตรงกัน 100%ค่าที่วัดได้ 2 จาก 73 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Group y เป็น 0px แต่บนเว็บไซต์เป็น 77px; Media y เป็น 0px แต่บนเว็บไซต์เป็น 77px และอีก 14 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 16 จาก 190 ค่าแตกต่างกัน

ต้นฉบับ
Card (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (3) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card (3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (3) hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (3) focus

สถานะปกติ อินสแตนซ์ที่ 2ตรงกัน 100%ค่าที่วัดได้ 16 จาก 190 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 3ตรงกัน 100%ค่าที่วัดได้ 16 จาก 190 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 4ตรงกัน 100%ค่าที่วัดได้ 16 จาก 190 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 5ตรงกัน 100%ค่าที่วัดได้ 16 จาก 190 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 6ตรงกัน 100%ค่าที่วัดได้ 16 จาก 190 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน 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%ค่าที่วัดได้ 4 จาก 111 ค่าแตกต่างกัน

ต้นฉบับ
Card (9) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card (9) สถานะปกติ

สถานะปกติ อินสแตนซ์ที่ 2ตรงกัน 100%ค่าที่วัดได้ 4 จาก 111 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 3ตรงกัน 100%ค่าที่วัดได้ 4 จาก 111 ค่าแตกต่างกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

Extras26

100% ตรงกัน

desktop

Root height เป็น 78px แต่บนเว็บไซต์เป็น 56px; Group 2 height เป็น 44px แต่บนเว็บไซต์เป็น 22px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 109 ค่าแตกต่างกัน

ต้นฉบับ
Breadcrumbs ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Breadcrumbs สถานะปกติ
สูตรใน DESIGN.md

91% ตรงกัน

desktop

เมื่อ focus เรนเดอร์ได้เหมือนเว็บไซต์ 91% ต่ำกว่าเกณฑ์ 96%

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 21 ค่าตรงกัน

ต้นฉบับ
Card links ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card links สถานะปกติ

Focusตรงกัน 91%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card links ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Card links focus
สูตรใน DESIGN.md

93% ตรงกัน

desktop

Group 2 y เป็น 87px แต่บนเว็บไซต์เป็น 98px; Text y เป็น 87px แต่บนเว็บไซต์เป็น 98px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 67 ค่าแตกต่างกัน

ต้นฉบับ
Card links (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card links (2) สถานะปกติ

Focusตรงกัน 93%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card links (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Card links (2) focus
สูตรใน DESIGN.md

88% ตรงกัน

desktop

เมื่อ focus เรนเดอร์ได้เหมือนเว็บไซต์ 88% ต่ำกว่าเกณฑ์ 96%

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 23 ค่าตรงกัน

ต้นฉบับ
Card links (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Card links (3) สถานะปกติ

Focusตรงกัน 88%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Card links (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Card links (3) focus
สูตรใน 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%ค่าที่วัดได้ 33 จาก 776 ค่าแตกต่างกัน

ต้นฉบับ
Footer links ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer links สถานะปกติ
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 56 ค่าตรงกัน

ต้นฉบับ
Icon buttons ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon buttons สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon buttons ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon buttons hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon buttons ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon buttons focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 98 ค่าตรงกัน

ต้นฉบับ
Icon buttons (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon buttons (2) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon buttons (2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon buttons (2) hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon buttons (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon buttons (2) focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 56 ค่าตรงกัน

ต้นฉบับ
Icon link ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon link สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon link ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon link hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon link ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon link focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 98 ค่าตรงกัน

ต้นฉบับ
Icon link (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon link (2) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon link (2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon link (2) hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Icon link (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Icon link (2) focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

List width เป็น 225px แต่บนเว็บไซต์เป็น 176px; Item width เป็น 225px แต่บนเว็บไซต์เป็น 176px และอีก 31 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 33 จาก 776 ค่าแตกต่างกัน

ต้นฉบับ
Link list ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Link list สถานะปกติ
สูตรใน DESIGN.md

100% ตรงกัน

desktop

List width เป็น 225px แต่บนเว็บไซต์เป็น 176px; Item width เป็น 225px แต่บนเว็บไซต์เป็น 176px และอีก 31 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 33 จาก 776 ค่าแตกต่างกัน

ต้นฉบับ
Nav links ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Nav links สถานะปกติ
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Nav menu item ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Nav menu item สถานะปกติ

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Nav menu item ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Nav menu item focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Navigation links ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Navigation links สถานะปกติ

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Navigation links ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Navigation links focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
Navigation menu item ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Navigation menu item สถานะปกติ

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Navigation menu item ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Navigation menu item focus
สูตรใน DESIGN.md

50% ตรงกัน

desktop

เรนเดอร์ได้เหมือนเว็บไซต์ 50% ต่ำกว่าเกณฑ์ 96%

สถานะปกติตรงกัน 50%ค่าที่วัดได้ 192 ค่าตรงกัน

ต้นฉบับ
Promo banner ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Promo banner สถานะปกติ

Hoverตรงกัน 50%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Promo banner ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Promo banner hover

Focusตรงกัน 50%ค่าที่วัดได้ 1 จาก 18 ค่าแตกต่างกัน

ต้นฉบับ
Promo banner ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Promo banner focus

สถานะปกติ อินสแตนซ์ที่ 2ตรงกัน 100%ค่าที่วัดได้ 192 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

สถานะปกติ อินสแตนซ์ที่ 3ตรงกัน 100%ค่าที่วัดได้ 192 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Group y เป็น 8px แต่บนเว็บไซต์เป็น 12px; Group width เป็น 1180px แต่บนเว็บไซต์เป็น 1154px และอีก 30 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 32 จาก 374 ค่าแตกต่างกัน

ต้นฉบับ
Sub navigation ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Sub navigation สถานะปกติ
สูตรใน DESIGN.md

99% ตรงกัน

desktop

สถานะปกติตรงกัน 99%ค่าที่วัดได้ 91 ค่าตรงกัน

ต้นฉบับ
Tabs ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs สถานะปกติ

Hoverตรงกัน 99%ค่าที่วัดได้ 19 ค่าตรงกัน

ต้นฉบับ
Tabs ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs hover

Focusตรงกัน 99%ค่าที่วัดได้ 19 ค่าตรงกัน

ต้นฉบับ
Tabs ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs focus

สถานะปกติ อินสแตนซ์ที่ 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) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Tabs (2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs (2) hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Tabs (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs (2) focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 77 ค่าตรงกัน

ต้นฉบับ
Tabs (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs (3) สถานะปกติ

Hoverตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Tabs (3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs (3) hover

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Tabs (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Tabs (3) focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Group y เป็น 8px แต่บนเว็บไซต์เป็น 12px; Group height เป็น 43px แต่บนเว็บไซต์เป็น 36px และอีก 32 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 34 จาก 418 ค่าแตกต่างกัน

ต้นฉบับ
Tab bar ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Tab bar สถานะปกติ
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Text 2 y เป็น 33px แต่บนเว็บไซต์เป็น 17px; Group width เป็น 0px แต่บนเว็บไซต์เป็น 4px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 234 ค่าแตกต่างกัน

ต้นฉบับ
Table ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Table สถานะปกติ
สูตรใน DESIGN.md

97% ตรงกัน

desktop

Root height เป็น 105px แต่บนเว็บไซต์เป็น 96px; Text height เป็น 74px แต่บนเว็บไซต์เป็น 65px และอีก 7 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 9 จาก 72 ค่าแตกต่างกัน

ต้นฉบับ
Text link ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Text link สถานะปกติ

Focusตรงกัน 97%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Text link ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Text link focus
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Group 3 y เป็น 55px แต่บนเว็บไซต์เป็น 66px; Text y เป็น 55px แต่บนเว็บไซต์เป็น 66px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 87 ค่าแตกต่างกัน

ต้นฉบับ
Text link (2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Text link (2) สถานะปกติ

Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Text link (2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Text link (2) focus
สูตรใน DESIGN.md

35% ตรงกัน

desktop

เมื่อ focus เรนเดอร์ได้เหมือนเว็บไซต์ 35% ต่ำกว่าเกณฑ์ 96%

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 21 ค่าตรงกัน

ต้นฉบับ
Text link (3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Text link (3) สถานะปกติ

Focusตรงกัน 35%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Text link (3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Text link (3) focus
สูตรใน DESIGN.md

74% ตรงกัน

desktop

Root width เป็น 138px แต่บนเว็บไซต์เป็น 202px; Root height เป็น 64px แต่บนเว็บไซต์เป็น 92px

สถานะปกติตรงกัน 74%ค่าที่วัดได้ 2 จาก 22 ค่าแตกต่างกัน

ต้นฉบับ
Toggle button ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Toggle button สถานะปกติ

Focusตรงกัน 74%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
Toggle button ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Toggle button focus
สูตรใน DESIGN.md

Headers8

100% ตรงกัน

desktop

Group x เป็น 713px แต่บนเว็บไซต์เป็น 1146px; Icon 2 x เป็น 713px แต่บนเว็บไซต์เป็น 1146px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 308 ค่าแตกต่างกัน

ต้นฉบับ
Header (inner) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner) focus

Focus บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Group x เป็น 713px แต่บนเว็บไซต์เป็น 1146px; Icon 2 x เป็น 713px แต่บนเว็บไซต์เป็น 1146px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 308 ค่าแตกต่างกัน

ต้นฉบับ
Header (inner, 2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 2) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 2) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 2) focus

Focus บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

94% ตรงกัน

desktop

Group 4 y เป็น 52px แต่บนเว็บไซต์เป็น -3px; Group 4 height เป็น 59px แต่บนเว็บไซต์เป็น 41px และอีก 5 รายการ

สถานะปกติตรงกัน 98%ค่าที่วัดได้ 7 จาก 228 ค่าแตกต่างกัน

ต้นฉบับ
Header (inner, 3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 3) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 3) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 3) focus

Focus บน ctaตรงกัน 97%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน ctaตรงกัน 98%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน logoตรงกัน 94%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Group x เป็น 713px แต่บนเว็บไซต์เป็น 1146px; Icon 2 x เป็น 713px แต่บนเว็บไซต์เป็น 1146px

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 2 จาก 308 ค่าแตกต่างกัน

ต้นฉบับ
Header (landing) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (landing) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (landing) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (landing) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (landing) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (landing) focus

Focus บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

99% ตรงกัน

mobile

Nav link 2 x เป็น 261px แต่บนเว็บไซต์เป็น 246px; Group x เป็น 277px แต่บนเว็บไซต์เป็น 262px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 385 ค่าแตกต่างกัน

ต้นฉบับ
Header (inner, 2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 2) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 2) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 2) focus

Focus บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 2ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 3ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

94% ตรงกัน

mobile

เมื่อ focus เรนเดอร์ได้เหมือนเว็บไซต์ 94% ต่ำกว่าเกณฑ์ 96%

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 207 ค่าตรงกัน

ต้นฉบับ
Header (inner, 3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 3) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 3) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner, 3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner, 3) focus

Focus บน ctaตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน ctaตรงกัน 100%ค่าที่วัดได้ 22 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน logoตรงกัน 94%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

99% ตรงกัน

mobile

Nav link 2 x เป็น 261px แต่บนเว็บไซต์เป็น 246px; Group x เป็น 277px แต่บนเว็บไซต์เป็น 262px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 385 ค่าแตกต่างกัน

ต้นฉบับ
Header (inner) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (inner) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (inner) focus

Focus บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 2ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 3ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

99% ตรงกัน

mobile

Nav link 2 x เป็น 261px แต่บนเว็บไซต์เป็น 246px; Group x เป็น 277px แต่บนเว็บไซต์เป็น 262px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 385 ค่าแตกต่างกัน

ต้นฉบับ
Header (landing) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (landing) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Header (landing) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (landing) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Header (landing) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Header (landing) focus

Focus บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 2ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav link 3ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

Footers10

98% ตรงกัน

desktop

Inner height เป็น 5418px แต่บนเว็บไซต์เป็น 7902px; Group height เป็น 5418px แต่บนเว็บไซต์เป็น 7280px และอีก 5 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 7 จาก 1504 ค่าแตกต่างกัน

ต้นฉบับ
Footer (inner) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner) สถานะปกติ

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner) focus

Focus บน link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน linkตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Inner height เป็น 1244px แต่บนเว็บไซต์เป็น 2174px; Group height เป็น 727px แต่บนเว็บไซต์เป็น 1552px และอีก 122 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 124 จาก 1804 ค่าแตกต่างกัน

ต้นฉบับ
Footer (inner, 2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 2) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 2) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 2) focus

Focus บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Inner height เป็น 838px แต่บนเว็บไซต์เป็น 1131px; Group height เป็น 320px แต่บนเว็บไซต์เป็น 509px และอีก 115 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 117 จาก 2107 ค่าแตกต่างกัน

ต้นฉบับ
Footer (inner, 3) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 3) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 3) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 3) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 3) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 3) focus

Focus บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Inner height เป็น 647px แต่บนเว็บไซต์เป็น 773px; List height เป็น 22px แต่บนเว็บไซต์เป็น 0px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 2124 ค่าแตกต่างกัน

ต้นฉบับ
Footer (inner, 4) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 4) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 4) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 4) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 4) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 4) focus

Focus บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

100% ตรงกัน

desktop

Inner height เป็น 870px แต่บนเว็บไซต์เป็น 996px; Group 4 height เป็น 323px แต่บนเว็บไซต์เป็น 349px และอีก 2 รายการ

สถานะปกติตรงกัน 100%ค่าที่วัดได้ 4 จาก 2214 ค่าแตกต่างกัน

ต้นฉบับ
Footer (landing) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (landing) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (landing) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (landing) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (landing) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (landing) focus

Focus บน linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

99% ตรงกัน

mobile

Inner height เป็น 2134px แต่บนเว็บไซต์เป็น 4222px; Group height เป็น 1575px แต่บนเว็บไซต์เป็น 3584px และอีก 170 รายการ

สถานะปกติตรงกัน 99%ค่าที่วัดได้ 172 จาก 1615 ค่าแตกต่างกัน

ต้นฉบับ
Footer (inner, 2) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 2) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 2) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 2) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (inner, 2) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (inner, 2) focus

Focus บน buttonตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน buttonตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน nav linkตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน nav linkตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้
สูตรใน DESIGN.md

ไม่ได้ตรวจสอบ

mobile

เรนเดอร์สูตรแยกเดี่ยวไม่ได้

ไม่มีการเปรียบเทียบสำหรับคอมโพเนนต์นี้

สูตรใน DESIGN.md

ไม่ได้ตรวจสอบ

mobile

เรนเดอร์สูตรแยกเดี่ยวไม่ได้

ไม่มีการเปรียบเทียบสำหรับคอมโพเนนต์นี้

สูตรใน DESIGN.md

ไม่ได้ตรวจสอบ

mobile

เรนเดอร์สูตรแยกเดี่ยวไม่ได้

ไม่มีการเปรียบเทียบสำหรับคอมโพเนนต์นี้

สูตรใน DESIGN.md

98% ตรงกัน

mobile

Root height เป็น 1554px แต่บนเว็บไซต์เป็น 1433px; Inner height เป็น 1554px แต่บนเว็บไซต์เป็น 1433px และอีก 143 รายการ

สถานะปกติตรงกัน 98%ค่าที่วัดได้ 145 จาก 1880 ค่าแตกต่างกัน

ต้นฉบับ
Footer (landing) ต้นฉบับบนเว็บไซต์ สถานะปกติ
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (landing) สถานะปกติ

Hoverไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (landing) ต้นฉบับบนเว็บไซต์ hover
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (landing) hover

Focusไม่ได้ตรวจสอบ

ต้นฉบับ
Footer (landing) ต้นฉบับบนเว็บไซต์ focus
เรนเดอร์
ภาพเรนเดอร์แยกของ Footer (landing) focus

Focus บน buttonตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน buttonตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน link 2ตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน link 3ตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน link 3ตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน link 4ตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Hover บน link 4ตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน

ต้นฉบับ
ไม่มีภาพที่จัดเก็บไว้
เรนเดอร์
ไม่มีภาพที่จัดเก็บไว้

Focus บน 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

Design tokens ที่สกัดจากการวิเคราะห์ความถี่ของ CSSOM โดยไม่ผ่านการตีความของ LLM

ภาพตัวอย่างเว็บไซต์ Airbnb
การท่องเที่ยว การขนส่ง และโลจิสติกส์

Airbnb

Airbnb ใช้ระบบการออกแบบที่ตั้งอยู่บนฟอนต์แบบ variable ตัวเดียวที่เป็นกรรมสิทธิ์ (Airbnb Cereal VF) และชุดสีกลางเกือบเป็นขาวดำ โดยมีสีถ่านเข้ม (#222222) และสีเทาอ่อนเป็นหลัก ส่วนสีชมพูปะการัง "Rausch" (#ff385c) ซึ่งเป็นเอกลักษณ์ของแบรนด์ ถูกสงวนไว้เฉพาะสำหรับปุ่มเรียกร้องการกระทำหลัก (CTA) และโลโก้เท่านั้น เลย์เอาต์เป็นกริดการ์ดภาพที่ปรับตามขนาดหน้าจอ มีสัดส่วนพื้นที่ภาพต่อข้อความที่กว้างขวาง การ์ดมีมุมโค้งมน 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 กับข้อความทุกระดับ ดีไซน์ใช้กริดสิบสองคอลัมน์ที่มีร่อง 28px และระบบมุมโค้งสองแบบ คือ 8px สำหรับการ์ด และ 9999px สำหรับปุ่มทรงแคปซูล สำหรับองค์ประกอบลอยตัวใช้ระบบเงาหลายชั้นที่เข้มขึ้นตามลำดับ ปุ่มเรียกการกระทำและจุดเน้นสำคัญใช้สีน้ำเงินของแบรนด์ (#2537b1) ส่วนลำดับความสำคัญของข้อความและพื้นผิวทั้งหมดจัดโครงสร้างด้วยชุดสีเทาตามความหมาย ตั้งแต่ gray-200 ถึง gray-900

ภาพตัวอย่างเว็บไซต์ Railway
เครื่องมือนักพัฒนาและโครงสร้างพื้นฐาน · Developer Tools & IDEs

Railway

Design system ของ Railway เป็น UI สำหรับแพลตฟอร์มนักพัฒนาที่ออกแบบให้ใช้โหมดมืดเป็นหลัก โดยยึดพื้นผิวสีน้ำเงินเข้มเกือบดำ (#13111c, #0b0b0f) ข้อความสีขาวนวลที่คมชัด (#f7f7f8) และสีเน้นสีม่วงที่โดดเด่น (#853bce / #553f83) ส่วนฮีโร่ใช้ฟอนต์ IBM Plex Serif เพื่อให้ดูเป็นงานเชิงบรรณาธิการ ขณะที่ Inter ใช้กับข้อความ UI ทั้งหมด และ JetBrains Mono / SF Mono ใช้กับส่วนโค้ด การยกระดับองค์ประกอบทำผ่านขอบเรืองแสงสีขาวแบบ inset (rgba(255,255,255,0.2) 1.5px inset) แทนเงาตก ทำให้ UI มีบุคลิกแบบแผงกระจก ระบบระยะห่างอิงหน่วย 4px โดยจังหวะหลัก 8/12/16/24/32 ส่วนมุมโค้งค่อนข้างแคบ โดยใช้ 4px เป็นหลัก และใช้ 8px กับ 16px เฉพาะการ์ดและกล่องฮีโร่

ภาพตัวอย่างเว็บไซต์ Shopify
ธุรกิจและบริการวิชาชีพ

Shopify

Shopify ใช้หน้าแรกการตลาดที่มีส่วนฮีโร่เป็นวิดีโอเต็มความกว้างอย่างโดดเด่น โดยมีพื้นหลังสีดำเกือบสนิท (#02090a) ที่ตัดกับแถบนำทางสีขาวด้านบนอย่างชัดเจน สีเน้นหลักของแบรนด์คือสีเขียวมิ้นต์สด (#36f4a4) ซึ่งใช้อย่างประหยัดสำหรับจุดเด่นและสถานะการโต้ตอบ ตัวอักษรแบ่งเป็นสองแบบ คือ NeueHaasGrotesk สำหรับหัวข้อตัวใหญ่และหัวข้อแบบบรรณาธิการ และ Inter-Variable สำหรับเนื้อหาส่วนการใช้งาน ปุ่มเรียกให้ดำเนินการใช้รูปทรงแคปซูลโค้งมนเต็มที่ (border-radius: 9999px) ภาพรวมของระบบดีไซน์นี้มั่นใจ มีคอนทราสต์สูง และมุ่งสร้างแรงบันดาลใจ ออกแบบมาเพื่อเปลี่ยนผู้เข้าชมให้เป็นผู้ขาย

พาเลตต์สีที่คล้ายกัน

ระบบดีไซน์ Apple | Design Extractor