Design System Apple

apple.com
PROEngine v4

Token desain yang diekstrak dari analisis frekuensi CSSOM tanpa interpretasi LLM.

Sistem visual
100% keyakinan
98% keyakinan
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% keyakinan
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% keyakinan
xs · 8px
sm · 10px
md · 11px
lg · 14px
xl · 18px
2xl · 20px
3xl · 48px
4xl · 56px
pill · 980px
full · 9999px

Komponen

Buttons12

100% kecocokan

ghost · desktop

DiamKecocokan 100%26 ukuran cocok

Asli
Button, ghost asli di situs, diam
Render
Render terpisah dari Button, ghost, diam

HoverKecocokan 100%22 ukuran cocok

Asli
Button, ghost asli di situs, hover
Render
Render terpisah dari Button, ghost, hover

FocusKecocokan 100%22 ukuran cocok

Asli
Button, ghost asli di situs, focus
Render
Render terpisah dari Button, ghost, focus
Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%22 ukuran cocok

Asli
Button, ghost (2) asli di situs, diam
Render
Render terpisah dari Button, ghost (2), diam

FocusKecocokan 100%18 ukuran cocok

Asli
Button, ghost (2) asli di situs, focus
Render
Render terpisah dari Button, ghost (2), focus
Resep di DESIGN.md

100% kecocokan

ghost · desktop

Label y bernilai 59px, sedangkan situs memakai 0px.

DiamKecocokan 100%1 dari 57 ukuran berbeda

Asli
Button, ghost (3) asli di situs, diam
Render
Render terpisah dari Button, ghost (3), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Button, ghost (3) asli di situs, hover
Render
Render terpisah dari Button, ghost (3), hover

FocusKecocokan 100%18 ukuran cocok

Asli
Button, ghost (3) asli di situs, focus
Render
Render terpisah dari Button, ghost (3), focus
Resep di DESIGN.md

Tidak dapat diverifikasi

ghost · desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%35 ukuran cocok

Asli
Button, ghost (4) asli di situs, diam
Render
Render terpisah dari Button, ghost (4), diam

FocusKecocokan 61%18 ukuran cocok

Asli
Button, ghost (4) asli di situs, focus
Render
Render terpisah dari Button, ghost (4), focus
Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%26 ukuran cocok

Asli
Button, primary asli di situs, diam
Render
Render terpisah dari Button, primary, diam

HoverKecocokan 100%22 ukuran cocok

Asli
Button, primary asli di situs, hover
Render
Render terpisah dari Button, primary, hover

FocusKecocokan 100%22 ukuran cocok

Asli
Button, primary asli di situs, focus
Render
Render terpisah dari Button, primary, focus
Resep di DESIGN.md

76% kecocokan

primary · desktop

Label 2 y bernilai 27px, sedangkan situs memakai 9px.

DiamKecocokan 100%1 dari 29 ukuran berbeda

Asli
Button, primary (2) asli di situs, diam
Render
Render terpisah dari Button, primary (2), diam

HoverKecocokan 91%22 ukuran cocok

Asli
Button, primary (2) asli di situs, hover
Render
Render terpisah dari Button, primary (2), hover

FocusKecocokan 76%22 ukuran cocok

Asli
Button, primary (2) asli di situs, focus
Render
Render terpisah dari Button, primary (2), focus
Resep di DESIGN.md

76% kecocokan

primary · desktop

Group y bernilai 27px, sedangkan situs memakai 9px; Label 2 y bernilai 28px, sedangkan situs memakai 10px dan 2 lainnya.

DiamKecocokan 100%4 dari 55 ukuran berbeda

Asli
Button, primary (3) asli di situs, diam
Render
Render terpisah dari Button, primary (3), diam

HoverKecocokan 91%22 ukuran cocok

Asli
Button, primary (3) asli di situs, hover
Render
Render terpisah dari Button, primary (3), hover

FocusKecocokan 76%22 ukuran cocok

Asli
Button, primary (3) asli di situs, focus
Render
Render terpisah dari Button, primary (3), focus
Resep di DESIGN.md

94% kecocokan

primary · desktop

Hasil render-nya 95% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 95%25 ukuran cocok

Asli
Button, primary (4) asli di situs, diam
Render
Render terpisah dari Button, primary (4), diam

HoverKecocokan 95%22 ukuran cocok

Asli
Button, primary (4) asli di situs, hover
Render
Render terpisah dari Button, primary (4), hover

FocusKecocokan 94%22 ukuran cocok

Asli
Button, primary (4) asli di situs, focus
Render
Render terpisah dari Button, primary (4), focus
Resep di DESIGN.md

94% kecocokan

primary · desktop

Hasil render-nya 96% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 96%25 ukuran cocok

Asli
Button, primary (5) asli di situs, diam
Render
Render terpisah dari Button, primary (5), diam

HoverKecocokan 96%22 ukuran cocok

Asli
Button, primary (5) asli di situs, hover
Render
Render terpisah dari Button, primary (5), hover

FocusKecocokan 94%22 ukuran cocok

Asli
Button, primary (5) asli di situs, focus
Render
Render terpisah dari Button, primary (5), focus
Resep di DESIGN.md

99% kecocokan

secondary · desktop

DiamKecocokan 100%26 ukuran cocok

Asli
Button, secondary asli di situs, diam
Render
Render terpisah dari Button, secondary, diam

HoverKecocokan 100%22 ukuran cocok

Asli
Button, secondary asli di situs, hover
Render
Render terpisah dari Button, secondary, hover

FocusKecocokan 99%22 ukuran cocok

Asli
Button, secondary asli di situs, focus
Render
Render terpisah dari Button, secondary, focus
Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%26 ukuran cocok

Asli
Button, secondary (2) asli di situs, diam
Render
Render terpisah dari Button, secondary (2), diam

HoverKecocokan 100%22 ukuran cocok

Asli
Button, secondary (2) asli di situs, hover
Render
Render terpisah dari Button, secondary (2), hover

FocusKecocokan 100%22 ukuran cocok

Asli
Button, secondary (2) asli di situs, focus
Render
Render terpisah dari Button, secondary (2), focus
Resep di DESIGN.md

97% kecocokan

secondary · desktop

Root width bernilai 138px, sedangkan situs memakai 202px; Root height bernilai 64px, sedangkan situs memakai 92px.

DiamKecocokan 97%2 dari 22 ukuran berbeda

Asli
Button, secondary (3) asli di situs, diam
Render
Render terpisah dari Button, secondary (3), diam

HoverKecocokan 97%18 ukuran cocok

Asli
Button, secondary (3) asli di situs, hover
Render
Render terpisah dari Button, secondary (3), hover

FocusKecocokan 97%18 ukuran cocok

Asli
Button, secondary (3) asli di situs, focus
Render
Render terpisah dari Button, secondary (3), focus
Resep di DESIGN.md

Input1

89% kecocokan

desktop

Saat focus, hasil render-nya 89% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 99%90 ukuran cocok

Asli
Input asli di situs, diam
Render
Render terpisah dari Input, diam

FocusKecocokan 89%22 ukuran cocok

Asli
Input asli di situs, focus
Render
Render terpisah dari Input, focus
Resep di DESIGN.md

Cards9

100% kecocokan

desktop

Media y bernilai 93px, sedangkan situs memakai 57px; Text y bernilai 149px, sedangkan situs memakai 106px dan 3 lainnya.

DiamKecocokan 100%5 dari 201 ukuran berbeda

Asli
Card asli di situs, diam
Render
Render terpisah dari Card, diam

HoverKecocokan 100%18 ukuran cocok

Asli
Card asli di situs, hover
Render
Render terpisah dari Card, hover

FocusKecocokan 100%1 dari 18 ukuran berbeda

Asli
Card asli di situs, focus
Render
Render terpisah dari Card, focus

Diam, instance 2Kecocokan 100%5 dari 201 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%5 dari 201 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%5 dari 201 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%5 dari 201 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%5 dari 201 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Break y bernilai 110px, sedangkan situs memakai 138px; Text y bernilai 138px, sedangkan situs memakai 166px.

DiamKecocokan 100%2 dari 73 ukuran berbeda

Asli
Card (2) asli di situs, diam
Render
Render terpisah dari Card (2), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Card (2) asli di situs, hover
Render
Render terpisah dari Card (2), hover

FocusKecocokan 100%1 dari 18 ukuran berbeda

Asli
Card (2) asli di situs, focus
Render
Render terpisah dari Card (2), focus

Diam, instance 2Kecocokan 100%2 dari 73 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%2 dari 73 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Group y bernilai 0px, sedangkan situs memakai 77px; Media y bernilai 0px, sedangkan situs memakai 77px dan 14 lainnya.

DiamKecocokan 100%16 dari 190 ukuran berbeda

Asli
Card (3) asli di situs, diam
Render
Render terpisah dari Card (3), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Card (3) asli di situs, hover
Render
Render terpisah dari Card (3), hover

FocusKecocokan 100%18 ukuran cocok

Asli
Card (3) asli di situs, focus
Render
Render terpisah dari Card (3), focus

Diam, instance 2Kecocokan 100%16 dari 190 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%16 dari 190 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%16 dari 190 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%16 dari 190 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%16 dari 190 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%154 ukuran cocok

Asli
Card (4) asli di situs, diam
Render
Render terpisah dari Card (4), diam

Diam, instance 2Kecocokan 99%154 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 99%154 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%154 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%66 ukuran cocok

Asli
Card (5) asli di situs, diam
Render
Render terpisah dari Card (5), diam

Diam, instance 2Kecocokan 100%66 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%66 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%149 ukuran cocok

Asli
Card (6) asli di situs, diam
Render
Render terpisah dari Card (6), diam

Diam, instance 2Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%63 ukuran cocok

Asli
Card (7) asli di situs, diam
Render
Render terpisah dari Card (7), diam

Diam, instance 2Kecocokan 100%63 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%63 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%119 ukuran cocok

Asli
Card (8) asli di situs, diam
Render
Render terpisah dari Card (8), diam

Diam, instance 2Kecocokan 100%119 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%119 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

95% kecocokan

desktop

Title y bernilai 5px, sedangkan situs memakai 124px; Body y bernilai 123px, sedangkan situs memakai 241px dan 2 lainnya.

DiamKecocokan 95%4 dari 111 ukuran berbeda

Asli
Card (9) asli di situs, diam
Render
Render terpisah dari Card (9), diam

Diam, instance 2Kecocokan 100%4 dari 111 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%4 dari 111 ukuran berbeda

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Extras26

100% kecocokan

desktop

Root height bernilai 78px, sedangkan situs memakai 56px; Group 2 height bernilai 44px, sedangkan situs memakai 22px dan 2 lainnya.

DiamKecocokan 100%4 dari 109 ukuran berbeda

Asli
Breadcrumbs asli di situs, diam
Render
Render terpisah dari Breadcrumbs, diam
Resep di DESIGN.md

91% kecocokan

desktop

Saat focus, hasil render-nya 91% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%21 ukuran cocok

Asli
Card links asli di situs, diam
Render
Render terpisah dari Card links, diam

FocusKecocokan 91%18 ukuran cocok

Asli
Card links asli di situs, focus
Render
Render terpisah dari Card links, focus
Resep di DESIGN.md

93% kecocokan

desktop

Group 2 y bernilai 87px, sedangkan situs memakai 98px; Text y bernilai 87px, sedangkan situs memakai 98px.

DiamKecocokan 100%2 dari 67 ukuran berbeda

Asli
Card links (2) asli di situs, diam
Render
Render terpisah dari Card links (2), diam

FocusKecocokan 93%18 ukuran cocok

Asli
Card links (2) asli di situs, focus
Render
Render terpisah dari Card links (2), focus
Resep di DESIGN.md

88% kecocokan

desktop

Saat focus, hasil render-nya 88% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%23 ukuran cocok

Asli
Card links (3) asli di situs, diam
Render
Render terpisah dari Card links (3), diam

FocusKecocokan 88%18 ukuran cocok

Asli
Card links (3) asli di situs, focus
Render
Render terpisah dari Card links (3), focus
Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 99%149 ukuran cocok

Asli
Carousel section asli di situs, diam
Render
Render terpisah dari Carousel section, diam

Diam, instance 2Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%149 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

List width bernilai 225px, sedangkan situs memakai 176px; Item width bernilai 225px, sedangkan situs memakai 176px dan 31 lainnya.

DiamKecocokan 100%33 dari 776 ukuran berbeda

Asli
Footer links asli di situs, diam
Render
Render terpisah dari Footer links, diam
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%56 ukuran cocok

Asli
Icon buttons asli di situs, diam
Render
Render terpisah dari Icon buttons, diam

HoverKecocokan 100%18 ukuran cocok

Asli
Icon buttons asli di situs, hover
Render
Render terpisah dari Icon buttons, hover

FocusKecocokan 100%18 ukuran cocok

Asli
Icon buttons asli di situs, focus
Render
Render terpisah dari Icon buttons, focus
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%98 ukuran cocok

Asli
Icon buttons (2) asli di situs, diam
Render
Render terpisah dari Icon buttons (2), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Icon buttons (2) asli di situs, hover
Render
Render terpisah dari Icon buttons (2), hover

FocusKecocokan 100%18 ukuran cocok

Asli
Icon buttons (2) asli di situs, focus
Render
Render terpisah dari Icon buttons (2), focus
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%56 ukuran cocok

Asli
Icon link asli di situs, diam
Render
Render terpisah dari Icon link, diam

HoverKecocokan 100%18 ukuran cocok

Asli
Icon link asli di situs, hover
Render
Render terpisah dari Icon link, hover

FocusKecocokan 100%18 ukuran cocok

Asli
Icon link asli di situs, focus
Render
Render terpisah dari Icon link, focus
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%98 ukuran cocok

Asli
Icon link (2) asli di situs, diam
Render
Render terpisah dari Icon link (2), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Icon link (2) asli di situs, hover
Render
Render terpisah dari Icon link (2), hover

FocusKecocokan 100%18 ukuran cocok

Asli
Icon link (2) asli di situs, focus
Render
Render terpisah dari Icon link (2), focus
Resep di DESIGN.md

100% kecocokan

desktop

List width bernilai 225px, sedangkan situs memakai 176px; Item width bernilai 225px, sedangkan situs memakai 176px dan 31 lainnya.

DiamKecocokan 100%33 dari 776 ukuran berbeda

Asli
Link list asli di situs, diam
Render
Render terpisah dari Link list, diam
Resep di DESIGN.md

100% kecocokan

desktop

List width bernilai 225px, sedangkan situs memakai 176px; Item width bernilai 225px, sedangkan situs memakai 176px dan 31 lainnya.

DiamKecocokan 100%33 dari 776 ukuran berbeda

Asli
Nav links asli di situs, diam
Render
Render terpisah dari Nav links, diam
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Asli
Nav menu item asli di situs, diam
Render
Render terpisah dari Nav menu item, diam

FocusKecocokan 100%18 ukuran cocok

Asli
Nav menu item asli di situs, focus
Render
Render terpisah dari Nav menu item, focus
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Asli
Navigation links asli di situs, diam
Render
Render terpisah dari Navigation links, diam

FocusKecocokan 100%18 ukuran cocok

Asli
Navigation links asli di situs, focus
Render
Render terpisah dari Navigation links, focus
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Asli
Navigation menu item asli di situs, diam
Render
Render terpisah dari Navigation menu item, diam

FocusKecocokan 100%18 ukuran cocok

Asli
Navigation menu item asli di situs, focus
Render
Render terpisah dari Navigation menu item, focus
Resep di DESIGN.md

50% kecocokan

desktop

Hasil render-nya 50% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 50%192 ukuran cocok

Asli
Promo banner asli di situs, diam
Render
Render terpisah dari Promo banner, diam

HoverKecocokan 50%18 ukuran cocok

Asli
Promo banner asli di situs, hover
Render
Render terpisah dari Promo banner, hover

FocusKecocokan 50%1 dari 18 ukuran berbeda

Asli
Promo banner asli di situs, focus
Render
Render terpisah dari Promo banner, focus

Diam, instance 2Kecocokan 100%192 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%192 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Group y bernilai 8px, sedangkan situs memakai 12px; Group width bernilai 1180px, sedangkan situs memakai 1154px dan 30 lainnya.

DiamKecocokan 100%32 dari 374 ukuran berbeda

Asli
Sub navigation asli di situs, diam
Render
Render terpisah dari Sub navigation, diam
Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%91 ukuran cocok

Asli
Tabs asli di situs, diam
Render
Render terpisah dari Tabs, diam

HoverKecocokan 99%19 ukuran cocok

Asli
Tabs asli di situs, hover
Render
Render terpisah dari Tabs, hover

FocusKecocokan 99%19 ukuran cocok

Asli
Tabs asli di situs, focus
Render
Render terpisah dari Tabs, focus

Diam, instance 2Kecocokan 100%91 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%91 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%91 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%91 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%91 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%77 ukuran cocok

Asli
Tabs (2) asli di situs, diam
Render
Render terpisah dari Tabs (2), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Tabs (2) asli di situs, hover
Render
Render terpisah dari Tabs (2), hover

FocusKecocokan 100%18 ukuran cocok

Asli
Tabs (2) asli di situs, focus
Render
Render terpisah dari Tabs (2), focus
Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%77 ukuran cocok

Asli
Tabs (3) asli di situs, diam
Render
Render terpisah dari Tabs (3), diam

HoverKecocokan 100%18 ukuran cocok

Asli
Tabs (3) asli di situs, hover
Render
Render terpisah dari Tabs (3), hover

FocusKecocokan 100%18 ukuran cocok

Asli
Tabs (3) asli di situs, focus
Render
Render terpisah dari Tabs (3), focus
Resep di DESIGN.md

100% kecocokan

desktop

Group y bernilai 8px, sedangkan situs memakai 12px; Group height bernilai 43px, sedangkan situs memakai 36px dan 32 lainnya.

DiamKecocokan 100%34 dari 418 ukuran berbeda

Asli
Tab bar asli di situs, diam
Render
Render terpisah dari Tab bar, diam
Resep di DESIGN.md

100% kecocokan

desktop

Text 2 y bernilai 33px, sedangkan situs memakai 17px; Group width bernilai 0px, sedangkan situs memakai 4px.

DiamKecocokan 100%2 dari 234 ukuran berbeda

Asli
Table asli di situs, diam
Render
Render terpisah dari Table, diam
Resep di DESIGN.md

97% kecocokan

desktop

Root height bernilai 105px, sedangkan situs memakai 96px; Text height bernilai 74px, sedangkan situs memakai 65px dan 7 lainnya.

DiamKecocokan 100%9 dari 72 ukuran berbeda

Asli
Text link asli di situs, diam
Render
Render terpisah dari Text link, diam

FocusKecocokan 97%18 ukuran cocok

Asli
Text link asli di situs, focus
Render
Render terpisah dari Text link, focus
Resep di DESIGN.md

100% kecocokan

desktop

Group 3 y bernilai 55px, sedangkan situs memakai 66px; Text y bernilai 55px, sedangkan situs memakai 66px.

DiamKecocokan 100%2 dari 87 ukuran berbeda

Asli
Text link (2) asli di situs, diam
Render
Render terpisah dari Text link (2), diam

FocusKecocokan 100%18 ukuran cocok

Asli
Text link (2) asli di situs, focus
Render
Render terpisah dari Text link (2), focus
Resep di DESIGN.md

35% kecocokan

desktop

Saat focus, hasil render-nya 35% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%21 ukuran cocok

Asli
Text link (3) asli di situs, diam
Render
Render terpisah dari Text link (3), diam

FocusKecocokan 35%18 ukuran cocok

Asli
Text link (3) asli di situs, focus
Render
Render terpisah dari Text link (3), focus
Resep di DESIGN.md

74% kecocokan

desktop

Root width bernilai 138px, sedangkan situs memakai 202px; Root height bernilai 64px, sedangkan situs memakai 92px.

DiamKecocokan 74%2 dari 22 ukuran berbeda

Asli
Toggle button asli di situs, diam
Render
Render terpisah dari Toggle button, diam

FocusKecocokan 74%18 ukuran cocok

Asli
Toggle button asli di situs, focus
Render
Render terpisah dari Toggle button, focus
Resep di DESIGN.md

Headers8

100% kecocokan

desktop

Group x bernilai 713px, sedangkan situs memakai 1146px; Icon 2 x bernilai 713px, sedangkan situs memakai 1146px.

DiamKecocokan 100%2 dari 308 ukuran berbeda

Asli
Header (inner) asli di situs, diam
Render
Render terpisah dari Header (inner), diam

Hovertidak dicek

Asli
Header (inner) asli di situs, hover
Render
Render terpisah dari Header (inner), hover

Focustidak dicek

Asli
Header (inner) asli di situs, focus
Render
Render terpisah dari Header (inner), focus

Focus pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Group x bernilai 713px, sedangkan situs memakai 1146px; Icon 2 x bernilai 713px, sedangkan situs memakai 1146px.

DiamKecocokan 100%2 dari 308 ukuran berbeda

Asli
Header (inner, 2) asli di situs, diam
Render
Render terpisah dari Header (inner, 2), diam

Hovertidak dicek

Asli
Header (inner, 2) asli di situs, hover
Render
Render terpisah dari Header (inner, 2), hover

Focustidak dicek

Asli
Header (inner, 2) asli di situs, focus
Render
Render terpisah dari Header (inner, 2), focus

Focus pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

94% kecocokan

desktop

Group 4 y bernilai 52px, sedangkan situs memakai -3px; Group 4 height bernilai 59px, sedangkan situs memakai 41px dan 5 lainnya.

DiamKecocokan 98%7 dari 228 ukuran berbeda

Asli
Header (inner, 3) asli di situs, diam
Render
Render terpisah dari Header (inner, 3), diam

Hovertidak dicek

Asli
Header (inner, 3) asli di situs, hover
Render
Render terpisah dari Header (inner, 3), hover

Focustidak dicek

Asli
Header (inner, 3) asli di situs, focus
Render
Render terpisah dari Header (inner, 3), focus

Focus pada ctaKecocokan 97%22 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada ctaKecocokan 98%22 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada logoKecocokan 94%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Group x bernilai 713px, sedangkan situs memakai 1146px; Icon 2 x bernilai 713px, sedangkan situs memakai 1146px.

DiamKecocokan 100%2 dari 308 ukuran berbeda

Asli
Header (landing) asli di situs, diam
Render
Render terpisah dari Header (landing), diam

Hovertidak dicek

Asli
Header (landing) asli di situs, hover
Render
Render terpisah dari Header (landing), hover

Focustidak dicek

Asli
Header (landing) asli di situs, focus
Render
Render terpisah dari Header (landing), focus

Focus pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

99% kecocokan

mobile

Nav link 2 x bernilai 261px, sedangkan situs memakai 246px; Group x bernilai 277px, sedangkan situs memakai 262px dan 2 lainnya.

DiamKecocokan 100%4 dari 385 ukuran berbeda

Asli
Header (inner, 2) asli di situs, diam
Render
Render terpisah dari Header (inner, 2), diam

Hovertidak dicek

Asli
Header (inner, 2) asli di situs, hover
Render
Render terpisah dari Header (inner, 2), hover

Focustidak dicek

Asli
Header (inner, 2) asli di situs, focus
Render
Render terpisah dari Header (inner, 2), focus

Focus pada menu toggleKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada menu toggleKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 2Kecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 3Kecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

94% kecocokan

mobile

Saat focus, hasil render-nya 94% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%207 ukuran cocok

Asli
Header (inner, 3) asli di situs, diam
Render
Render terpisah dari Header (inner, 3), diam

Hovertidak dicek

Asli
Header (inner, 3) asli di situs, hover
Render
Render terpisah dari Header (inner, 3), hover

Focustidak dicek

Asli
Header (inner, 3) asli di situs, focus
Render
Render terpisah dari Header (inner, 3), focus

Focus pada ctaKecocokan 100%22 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada ctaKecocokan 100%22 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada logoKecocokan 94%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

99% kecocokan

mobile

Nav link 2 x bernilai 261px, sedangkan situs memakai 246px; Group x bernilai 277px, sedangkan situs memakai 262px dan 2 lainnya.

DiamKecocokan 100%4 dari 385 ukuran berbeda

Asli
Header (inner) asli di situs, diam
Render
Render terpisah dari Header (inner), diam

Hovertidak dicek

Asli
Header (inner) asli di situs, hover
Render
Render terpisah dari Header (inner), hover

Focustidak dicek

Asli
Header (inner) asli di situs, focus
Render
Render terpisah dari Header (inner), focus

Focus pada menu toggleKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada menu toggleKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 2Kecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 3Kecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

99% kecocokan

mobile

Nav link 2 x bernilai 261px, sedangkan situs memakai 246px; Group x bernilai 277px, sedangkan situs memakai 262px dan 2 lainnya.

DiamKecocokan 100%4 dari 385 ukuran berbeda

Asli
Header (landing) asli di situs, diam
Render
Render terpisah dari Header (landing), diam

Hovertidak dicek

Asli
Header (landing) asli di situs, hover
Render
Render terpisah dari Header (landing), hover

Focustidak dicek

Asli
Header (landing) asli di situs, focus
Render
Render terpisah dari Header (landing), focus

Focus pada menu toggleKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada menu toggleKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 2Kecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav link 3Kecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 3Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Footers10

98% kecocokan

desktop

Inner height bernilai 5418px, sedangkan situs memakai 7902px; Group height bernilai 5418px, sedangkan situs memakai 7280px dan 5 lainnya.

DiamKecocokan 100%7 dari 1504 ukuran berbeda

Asli
Footer (inner) asli di situs, diam
Render
Render terpisah dari Footer (inner), diam

Focustidak dicek

Asli
Footer (inner) asli di situs, focus
Render
Render terpisah dari Footer (inner), focus

Focus pada link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada linkKecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Inner height bernilai 1244px, sedangkan situs memakai 2174px; Group height bernilai 727px, sedangkan situs memakai 1552px dan 122 lainnya.

DiamKecocokan 100%124 dari 1804 ukuran berbeda

Asli
Footer (inner, 2) asli di situs, diam
Render
Render terpisah dari Footer (inner, 2), diam

Hovertidak dicek

Asli
Footer (inner, 2) asli di situs, hover
Render
Render terpisah dari Footer (inner, 2), hover

Focustidak dicek

Asli
Footer (inner, 2) asli di situs, focus
Render
Render terpisah dari Footer (inner, 2), focus

Focus pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Inner height bernilai 838px, sedangkan situs memakai 1131px; Group height bernilai 320px, sedangkan situs memakai 509px dan 115 lainnya.

DiamKecocokan 100%117 dari 2107 ukuran berbeda

Asli
Footer (inner, 3) asli di situs, diam
Render
Render terpisah dari Footer (inner, 3), diam

Hovertidak dicek

Asli
Footer (inner, 3) asli di situs, hover
Render
Render terpisah dari Footer (inner, 3), hover

Focustidak dicek

Asli
Footer (inner, 3) asli di situs, focus
Render
Render terpisah dari Footer (inner, 3), focus

Focus pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Inner height bernilai 647px, sedangkan situs memakai 773px; List height bernilai 22px, sedangkan situs memakai 0px dan 2 lainnya.

DiamKecocokan 100%4 dari 2124 ukuran berbeda

Asli
Footer (inner, 4) asli di situs, diam
Render
Render terpisah dari Footer (inner, 4), diam

Hovertidak dicek

Asli
Footer (inner, 4) asli di situs, hover
Render
Render terpisah dari Footer (inner, 4), hover

Focustidak dicek

Asli
Footer (inner, 4) asli di situs, focus
Render
Render terpisah dari Footer (inner, 4), focus

Focus pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

100% kecocokan

desktop

Inner height bernilai 870px, sedangkan situs memakai 996px; Group 4 height bernilai 323px, sedangkan situs memakai 349px dan 2 lainnya.

DiamKecocokan 100%4 dari 2214 ukuran berbeda

Asli
Footer (landing) asli di situs, diam
Render
Render terpisah dari Footer (landing), diam

Hovertidak dicek

Asli
Footer (landing) asli di situs, hover
Render
Render terpisah dari Footer (landing), hover

Focustidak dicek

Asli
Footer (landing) asli di situs, focus
Render
Render terpisah dari Footer (landing), focus

Focus pada linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

99% kecocokan

mobile

Inner height bernilai 2134px, sedangkan situs memakai 4222px; Group height bernilai 1575px, sedangkan situs memakai 3584px dan 170 lainnya.

DiamKecocokan 99%172 dari 1615 ukuran berbeda

Asli
Footer (inner, 2) asli di situs, diam
Render
Render terpisah dari Footer (inner, 2), diam

Hovertidak dicek

Asli
Footer (inner, 2) asli di situs, hover
Render
Render terpisah dari Footer (inner, 2), hover

Focustidak dicek

Asli
Footer (inner, 2) asli di situs, focus
Render
Render terpisah dari Footer (inner, 2), focus

Focus pada buttonKecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada buttonKecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 99%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Tidak dicek

mobile

Resep tidak dapat dirender secara terpisah.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

Tidak dicek

mobile

Resep tidak dapat dirender secara terpisah.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

Tidak dicek

mobile

Resep tidak dapat dirender secara terpisah.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

98% kecocokan

mobile

Root height bernilai 1554px, sedangkan situs memakai 1433px; Inner height bernilai 1554px, sedangkan situs memakai 1433px dan 143 lainnya.

DiamKecocokan 98%145 dari 1880 ukuran berbeda

Asli
Footer (landing) asli di situs, diam
Render
Render terpisah dari Footer (landing), diam

Hovertidak dicek

Asli
Footer (landing) asli di situs, hover
Render
Render terpisah dari Footer (landing), hover

Focustidak dicek

Asli
Footer (landing) asli di situs, focus
Render
Render terpisah dari Footer (landing), focus

Focus pada buttonKecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada buttonKecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada link 2Kecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada link 3Kecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada link 3Kecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada link 4Kecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Hover pada link 4Kecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan

Focus pada linkKecocokan 98%18 ukuran cocok

Asli
Tidak ada gambar tersimpan
Render
Tidak ada gambar tersimpan
Resep di DESIGN.md

Diekstrak dari website publik Apple, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua
Pratinjau website Duolingo - The world’s most popular way to learn
Utilitas & Alat Sehari-hari · Browser Extensions & Small Utilities

Duolingo - The world’s most popular way to learn

Token desain yang diekstrak dari analisis frekuensi CSSOM tanpa interpretasi LLM.

Pratinjau website Airbnb
Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Pratinjau website IKEA
Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Pratinjau website Notion
Software & SaaS · Productivity & Notes

Notion

Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.

Pratinjau website Railway
Developer & Infrastruktur · Developer Tools & IDEs

Railway

Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.

Pratinjau website Shopify
Bisnis & Layanan Profesional

Shopify

Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

Palet serupa

Design System Apple | Design Extractor