Apple 디자인 시스템

apple.com
PRO엔진 v4

CSSOM 빈도 분석으로 추출했으며 LLM 해석을 거치지 않은 디자인 토큰입니다.

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

컴포넌트

Buttons12

100% 일치

ghost · desktop

기본 상태100% 일치측정값 26개 일치

원본
사이트의 원본 Button, ghost, 기본 상태
렌더
Button, ghost 단독 렌더, 기본 상태

호버100% 일치측정값 22개 일치

원본
사이트의 원본 Button, ghost, 호버
렌더
Button, ghost 단독 렌더, 호버

포커스100% 일치측정값 22개 일치

원본
사이트의 원본 Button, ghost, 포커스
렌더
Button, ghost 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

ghost · desktop

기본 상태100% 일치측정값 22개 일치

원본
사이트의 원본 Button, ghost (2), 기본 상태
렌더
Button, ghost (2) 단독 렌더, 기본 상태

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Button, ghost (2), 포커스
렌더
Button, ghost (2) 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

ghost · desktop

Label y: 59px (사이트: 0px).

기본 상태100% 일치측정값 57개 중 1개 다름

원본
사이트의 원본 Button, ghost (3), 기본 상태
렌더
Button, ghost (3) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Button, ghost (3), 호버
렌더
Button, ghost (3) 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Button, ghost (3), 포커스
렌더
Button, ghost (3) 단독 렌더, 포커스
DESIGN.md의 레시피

검증 불가

ghost · desktop

검증 불가: 페이지가 넣은 사진, 미디어, 광고가 대부분을 덮고 있고 그 외에는 다른 점이 없어서, 비교 결과로는 레시피에 대해 알 수 있는 것이 없어요.

기본 상태100% 일치측정값 35개 일치

원본
사이트의 원본 Button, ghost (4), 기본 상태
렌더
Button, ghost (4) 단독 렌더, 기본 상태

포커스61% 일치측정값 18개 일치

원본
사이트의 원본 Button, ghost (4), 포커스
렌더
Button, ghost (4) 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

primary · desktop

기본 상태100% 일치측정값 26개 일치

원본
사이트의 원본 Button, primary, 기본 상태
렌더
Button, primary 단독 렌더, 기본 상태

호버100% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary, 호버
렌더
Button, primary 단독 렌더, 호버

포커스100% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary, 포커스
렌더
Button, primary 단독 렌더, 포커스
DESIGN.md의 레시피

76% 일치

primary · desktop

Label 2 y: 27px (사이트: 9px).

기본 상태100% 일치측정값 29개 중 1개 다름

원본
사이트의 원본 Button, primary (2), 기본 상태
렌더
Button, primary (2) 단독 렌더, 기본 상태

호버91% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (2), 호버
렌더
Button, primary (2) 단독 렌더, 호버

포커스76% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (2), 포커스
렌더
Button, primary (2) 단독 렌더, 포커스
DESIGN.md의 레시피

76% 일치

primary · desktop

Group y: 27px (사이트: 9px); Label 2 y: 28px (사이트: 10px) 외 2개.

기본 상태100% 일치측정값 55개 중 4개 다름

원본
사이트의 원본 Button, primary (3), 기본 상태
렌더
Button, primary (3) 단독 렌더, 기본 상태

호버91% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (3), 호버
렌더
Button, primary (3) 단독 렌더, 호버

포커스76% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (3), 포커스
렌더
Button, primary (3) 단독 렌더, 포커스
DESIGN.md의 레시피

94% 일치

primary · desktop

사이트와의 렌더링 일치도가 95%로, 기준치 97%에 못 미쳐요.

기본 상태95% 일치측정값 25개 일치

원본
사이트의 원본 Button, primary (4), 기본 상태
렌더
Button, primary (4) 단독 렌더, 기본 상태

호버95% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (4), 호버
렌더
Button, primary (4) 단독 렌더, 호버

포커스94% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (4), 포커스
렌더
Button, primary (4) 단독 렌더, 포커스
DESIGN.md의 레시피

94% 일치

primary · desktop

사이트와의 렌더링 일치도가 96%로, 기준치 97%에 못 미쳐요.

기본 상태96% 일치측정값 25개 일치

원본
사이트의 원본 Button, primary (5), 기본 상태
렌더
Button, primary (5) 단독 렌더, 기본 상태

호버96% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (5), 호버
렌더
Button, primary (5) 단독 렌더, 호버

포커스94% 일치측정값 22개 일치

원본
사이트의 원본 Button, primary (5), 포커스
렌더
Button, primary (5) 단독 렌더, 포커스
DESIGN.md의 레시피

99% 일치

secondary · desktop

기본 상태100% 일치측정값 26개 일치

원본
사이트의 원본 Button, secondary, 기본 상태
렌더
Button, secondary 단독 렌더, 기본 상태

호버100% 일치측정값 22개 일치

원본
사이트의 원본 Button, secondary, 호버
렌더
Button, secondary 단독 렌더, 호버

포커스99% 일치측정값 22개 일치

원본
사이트의 원본 Button, secondary, 포커스
렌더
Button, secondary 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

secondary · desktop

기본 상태100% 일치측정값 26개 일치

원본
사이트의 원본 Button, secondary (2), 기본 상태
렌더
Button, secondary (2) 단독 렌더, 기본 상태

호버100% 일치측정값 22개 일치

원본
사이트의 원본 Button, secondary (2), 호버
렌더
Button, secondary (2) 단독 렌더, 호버

포커스100% 일치측정값 22개 일치

원본
사이트의 원본 Button, secondary (2), 포커스
렌더
Button, secondary (2) 단독 렌더, 포커스
DESIGN.md의 레시피

97% 일치

secondary · desktop

루트 width: 138px (사이트: 202px); 루트 height: 64px (사이트: 92px).

기본 상태97% 일치측정값 22개 중 2개 다름

원본
사이트의 원본 Button, secondary (3), 기본 상태
렌더
Button, secondary (3) 단독 렌더, 기본 상태

호버97% 일치측정값 18개 일치

원본
사이트의 원본 Button, secondary (3), 호버
렌더
Button, secondary (3) 단독 렌더, 호버

포커스97% 일치측정값 18개 일치

원본
사이트의 원본 Button, secondary (3), 포커스
렌더
Button, secondary (3) 단독 렌더, 포커스
DESIGN.md의 레시피

Input1

89% 일치

desktop

포커스 시, 사이트와의 렌더링 일치도가 89%로, 기준치 97%에 못 미쳐요.

기본 상태99% 일치측정값 90개 일치

원본
사이트의 원본 Input, 기본 상태
렌더
Input 단독 렌더, 기본 상태

포커스89% 일치측정값 22개 일치

원본
사이트의 원본 Input, 포커스
렌더
Input 단독 렌더, 포커스
DESIGN.md의 레시피

Cards9

100% 일치

desktop

Media y: 93px (사이트: 57px); Text y: 149px (사이트: 106px) 외 3개.

기본 상태100% 일치측정값 201개 중 5개 다름

원본
사이트의 원본 Card, 기본 상태
렌더
Card 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Card, 호버
렌더
Card 단독 렌더, 호버

포커스100% 일치측정값 18개 중 1개 다름

원본
사이트의 원본 Card, 포커스
렌더
Card 단독 렌더, 포커스

기본 상태, 인스턴스 2100% 일치측정값 201개 중 5개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 201개 중 5개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 4100% 일치측정값 201개 중 5개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 5100% 일치측정값 201개 중 5개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 6100% 일치측정값 201개 중 5개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Break y: 110px (사이트: 138px); Text y: 138px (사이트: 166px).

기본 상태100% 일치측정값 73개 중 2개 다름

원본
사이트의 원본 Card (2), 기본 상태
렌더
Card (2) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Card (2), 호버
렌더
Card (2) 단독 렌더, 호버

포커스100% 일치측정값 18개 중 1개 다름

원본
사이트의 원본 Card (2), 포커스
렌더
Card (2) 단독 렌더, 포커스

기본 상태, 인스턴스 2100% 일치측정값 73개 중 2개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 73개 중 2개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Group y: 0px (사이트: 77px); Media y: 0px (사이트: 77px) 외 14개.

기본 상태100% 일치측정값 190개 중 16개 다름

원본
사이트의 원본 Card (3), 기본 상태
렌더
Card (3) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Card (3), 호버
렌더
Card (3) 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Card (3), 포커스
렌더
Card (3) 단독 렌더, 포커스

기본 상태, 인스턴스 2100% 일치측정값 190개 중 16개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 190개 중 16개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 4100% 일치측정값 190개 중 16개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 5100% 일치측정값 190개 중 16개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 6100% 일치측정값 190개 중 16개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

99% 일치

desktop

기본 상태99% 일치측정값 154개 일치

원본
사이트의 원본 Card (4), 기본 상태
렌더
Card (4) 단독 렌더, 기본 상태

기본 상태, 인스턴스 299% 일치측정값 154개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 399% 일치측정값 154개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 4100% 일치측정값 154개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

검증 불가

desktop

검증 불가: 페이지가 넣은 사진, 미디어, 광고가 대부분을 덮고 있고 그 외에는 다른 점이 없어서, 비교 결과로는 레시피에 대해 알 수 있는 것이 없어요.

기본 상태100% 일치측정값 66개 일치

원본
사이트의 원본 Card (5), 기본 상태
렌더
Card (5) 단독 렌더, 기본 상태

기본 상태, 인스턴스 2100% 일치측정값 66개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 66개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

검증 불가

desktop

검증 불가: 페이지가 넣은 사진, 미디어, 광고가 대부분을 덮고 있고 그 외에는 다른 점이 없어서, 비교 결과로는 레시피에 대해 알 수 있는 것이 없어요.

기본 상태100% 일치측정값 149개 일치

원본
사이트의 원본 Card (6), 기본 상태
렌더
Card (6) 단독 렌더, 기본 상태

기본 상태, 인스턴스 2100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 4100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 5100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

검증 불가

desktop

검증 불가: 페이지가 넣은 사진, 미디어, 광고가 대부분을 덮고 있고 그 외에는 다른 점이 없어서, 비교 결과로는 레시피에 대해 알 수 있는 것이 없어요.

기본 상태100% 일치측정값 63개 일치

원본
사이트의 원본 Card (7), 기본 상태
렌더
Card (7) 단독 렌더, 기본 상태

기본 상태, 인스턴스 2100% 일치측정값 63개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 63개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 119개 일치

원본
사이트의 원본 Card (8), 기본 상태
렌더
Card (8) 단독 렌더, 기본 상태

기본 상태, 인스턴스 2100% 일치측정값 119개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 119개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

95% 일치

desktop

Title y: 5px (사이트: 124px); Body y: 123px (사이트: 241px) 외 2개.

기본 상태95% 일치측정값 111개 중 4개 다름

원본
사이트의 원본 Card (9), 기본 상태
렌더
Card (9) 단독 렌더, 기본 상태

기본 상태, 인스턴스 2100% 일치측정값 111개 중 4개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 111개 중 4개 다름

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

Extras26

100% 일치

desktop

루트 height: 78px (사이트: 56px); Group 2 height: 44px (사이트: 22px) 외 2개.

기본 상태100% 일치측정값 109개 중 4개 다름

원본
사이트의 원본 Breadcrumbs, 기본 상태
렌더
Breadcrumbs 단독 렌더, 기본 상태
DESIGN.md의 레시피

91% 일치

desktop

포커스 시, 사이트와의 렌더링 일치도가 91%로, 기준치 96%에 못 미쳐요.

기본 상태100% 일치측정값 21개 일치

원본
사이트의 원본 Card links, 기본 상태
렌더
Card links 단독 렌더, 기본 상태

포커스91% 일치측정값 18개 일치

원본
사이트의 원본 Card links, 포커스
렌더
Card links 단독 렌더, 포커스
DESIGN.md의 레시피

93% 일치

desktop

Group 2 y: 87px (사이트: 98px); Text y: 87px (사이트: 98px).

기본 상태100% 일치측정값 67개 중 2개 다름

원본
사이트의 원본 Card links (2), 기본 상태
렌더
Card links (2) 단독 렌더, 기본 상태

포커스93% 일치측정값 18개 일치

원본
사이트의 원본 Card links (2), 포커스
렌더
Card links (2) 단독 렌더, 포커스
DESIGN.md의 레시피

88% 일치

desktop

포커스 시, 사이트와의 렌더링 일치도가 88%로, 기준치 96%에 못 미쳐요.

기본 상태100% 일치측정값 23개 일치

원본
사이트의 원본 Card links (3), 기본 상태
렌더
Card links (3) 단독 렌더, 기본 상태

포커스88% 일치측정값 18개 일치

원본
사이트의 원본 Card links (3), 포커스
렌더
Card links (3) 단독 렌더, 포커스
DESIGN.md의 레시피

검증 불가

desktop

검증 불가: 페이지가 넣은 사진, 미디어, 광고가 대부분을 덮고 있고 그 외에는 다른 점이 없어서, 비교 결과로는 레시피에 대해 알 수 있는 것이 없어요.

기본 상태99% 일치측정값 149개 일치

원본
사이트의 원본 Carousel section, 기본 상태
렌더
Carousel section 단독 렌더, 기본 상태

기본 상태, 인스턴스 2100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 4100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 5100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 6100% 일치측정값 149개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

List width: 225px (사이트: 176px); Item width: 225px (사이트: 176px) 외 31개.

기본 상태100% 일치측정값 776개 중 33개 다름

원본
사이트의 원본 Footer links, 기본 상태
렌더
Footer links 단독 렌더, 기본 상태
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 56개 일치

원본
사이트의 원본 Icon buttons, 기본 상태
렌더
Icon buttons 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Icon buttons, 호버
렌더
Icon buttons 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Icon buttons, 포커스
렌더
Icon buttons 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 98개 일치

원본
사이트의 원본 Icon buttons (2), 기본 상태
렌더
Icon buttons (2) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Icon buttons (2), 호버
렌더
Icon buttons (2) 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Icon buttons (2), 포커스
렌더
Icon buttons (2) 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 56개 일치

원본
사이트의 원본 Icon link, 기본 상태
렌더
Icon link 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Icon link, 호버
렌더
Icon link 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Icon link, 포커스
렌더
Icon link 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 98개 일치

원본
사이트의 원본 Icon link (2), 기본 상태
렌더
Icon link (2) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Icon link (2), 호버
렌더
Icon link (2) 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Icon link (2), 포커스
렌더
Icon link (2) 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

List width: 225px (사이트: 176px); Item width: 225px (사이트: 176px) 외 31개.

기본 상태100% 일치측정값 776개 중 33개 다름

원본
사이트의 원본 Link list, 기본 상태
렌더
Link list 단독 렌더, 기본 상태
DESIGN.md의 레시피

100% 일치

desktop

List width: 225px (사이트: 176px); Item width: 225px (사이트: 176px) 외 31개.

기본 상태100% 일치측정값 776개 중 33개 다름

원본
사이트의 원본 Nav links, 기본 상태
렌더
Nav links 단독 렌더, 기본 상태
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 22개 일치

원본
사이트의 원본 Nav menu item, 기본 상태
렌더
Nav menu item 단독 렌더, 기본 상태

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Nav menu item, 포커스
렌더
Nav menu item 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 22개 일치

원본
사이트의 원본 Navigation links, 기본 상태
렌더
Navigation links 단독 렌더, 기본 상태

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Navigation links, 포커스
렌더
Navigation links 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 22개 일치

원본
사이트의 원본 Navigation menu item, 기본 상태
렌더
Navigation menu item 단독 렌더, 기본 상태

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Navigation menu item, 포커스
렌더
Navigation menu item 단독 렌더, 포커스
DESIGN.md의 레시피

50% 일치

desktop

사이트와의 렌더링 일치도가 50%로, 기준치 96%에 못 미쳐요.

기본 상태50% 일치측정값 192개 일치

원본
사이트의 원본 Promo banner, 기본 상태
렌더
Promo banner 단독 렌더, 기본 상태

호버50% 일치측정값 18개 일치

원본
사이트의 원본 Promo banner, 호버
렌더
Promo banner 단독 렌더, 호버

포커스50% 일치측정값 18개 중 1개 다름

원본
사이트의 원본 Promo banner, 포커스
렌더
Promo banner 단독 렌더, 포커스

기본 상태, 인스턴스 2100% 일치측정값 192개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 192개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Group y: 8px (사이트: 12px); Group width: 1180px (사이트: 1154px) 외 30개.

기본 상태100% 일치측정값 374개 중 32개 다름

원본
사이트의 원본 Sub navigation, 기본 상태
렌더
Sub navigation 단독 렌더, 기본 상태
DESIGN.md의 레시피

99% 일치

desktop

기본 상태99% 일치측정값 91개 일치

원본
사이트의 원본 Tabs, 기본 상태
렌더
Tabs 단독 렌더, 기본 상태

호버99% 일치측정값 19개 일치

원본
사이트의 원본 Tabs, 호버
렌더
Tabs 단독 렌더, 호버

포커스99% 일치측정값 19개 일치

원본
사이트의 원본 Tabs, 포커스
렌더
Tabs 단독 렌더, 포커스

기본 상태, 인스턴스 2100% 일치측정값 91개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 3100% 일치측정값 91개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 4100% 일치측정값 91개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 5100% 일치측정값 91개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

기본 상태, 인스턴스 6100% 일치측정값 91개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 77개 일치

원본
사이트의 원본 Tabs (2), 기본 상태
렌더
Tabs (2) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Tabs (2), 호버
렌더
Tabs (2) 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Tabs (2), 포커스
렌더
Tabs (2) 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 77개 일치

원본
사이트의 원본 Tabs (3), 기본 상태
렌더
Tabs (3) 단독 렌더, 기본 상태

호버100% 일치측정값 18개 일치

원본
사이트의 원본 Tabs (3), 호버
렌더
Tabs (3) 단독 렌더, 호버

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Tabs (3), 포커스
렌더
Tabs (3) 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

Group y: 8px (사이트: 12px); Group height: 43px (사이트: 36px) 외 32개.

기본 상태100% 일치측정값 418개 중 34개 다름

원본
사이트의 원본 Tab bar, 기본 상태
렌더
Tab bar 단독 렌더, 기본 상태
DESIGN.md의 레시피

100% 일치

desktop

Text 2 y: 33px (사이트: 17px); Group width: 0px (사이트: 4px).

기본 상태100% 일치측정값 234개 중 2개 다름

원본
사이트의 원본 Table, 기본 상태
렌더
Table 단독 렌더, 기본 상태
DESIGN.md의 레시피

97% 일치

desktop

루트 height: 105px (사이트: 96px); Text height: 74px (사이트: 65px) 외 7개.

기본 상태100% 일치측정값 72개 중 9개 다름

원본
사이트의 원본 Text link, 기본 상태
렌더
Text link 단독 렌더, 기본 상태

포커스97% 일치측정값 18개 일치

원본
사이트의 원본 Text link, 포커스
렌더
Text link 단독 렌더, 포커스
DESIGN.md의 레시피

100% 일치

desktop

Group 3 y: 55px (사이트: 66px); Text y: 55px (사이트: 66px).

기본 상태100% 일치측정값 87개 중 2개 다름

원본
사이트의 원본 Text link (2), 기본 상태
렌더
Text link (2) 단독 렌더, 기본 상태

포커스100% 일치측정값 18개 일치

원본
사이트의 원본 Text link (2), 포커스
렌더
Text link (2) 단독 렌더, 포커스
DESIGN.md의 레시피

35% 일치

desktop

포커스 시, 사이트와의 렌더링 일치도가 35%로, 기준치 96%에 못 미쳐요.

기본 상태100% 일치측정값 21개 일치

원본
사이트의 원본 Text link (3), 기본 상태
렌더
Text link (3) 단독 렌더, 기본 상태

포커스35% 일치측정값 18개 일치

원본
사이트의 원본 Text link (3), 포커스
렌더
Text link (3) 단독 렌더, 포커스
DESIGN.md의 레시피

74% 일치

desktop

루트 width: 138px (사이트: 202px); 루트 height: 64px (사이트: 92px).

기본 상태74% 일치측정값 22개 중 2개 다름

원본
사이트의 원본 Toggle button, 기본 상태
렌더
Toggle button 단독 렌더, 기본 상태

포커스74% 일치측정값 18개 일치

원본
사이트의 원본 Toggle button, 포커스
렌더
Toggle button 단독 렌더, 포커스
DESIGN.md의 레시피

Headers8

100% 일치

desktop

Group x: 713px (사이트: 1146px); Icon 2 x: 713px (사이트: 1146px).

기본 상태100% 일치측정값 308개 중 2개 다름

원본
사이트의 원본 Header (inner), 기본 상태
렌더
Header (inner) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (inner), 호버
렌더
Header (inner) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (inner), 포커스
렌더
Header (inner) 단독 렌더, 포커스

nav link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Group x: 713px (사이트: 1146px); Icon 2 x: 713px (사이트: 1146px).

기본 상태100% 일치측정값 308개 중 2개 다름

원본
사이트의 원본 Header (inner, 2), 기본 상태
렌더
Header (inner, 2) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (inner, 2), 호버
렌더
Header (inner, 2) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (inner, 2), 포커스
렌더
Header (inner, 2) 단독 렌더, 포커스

nav link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

94% 일치

desktop

Group 4 y: 52px (사이트: -3px); Group 4 height: 59px (사이트: 41px) 외 5개.

기본 상태98% 일치측정값 228개 중 7개 다름

원본
사이트의 원본 Header (inner, 3), 기본 상태
렌더
Header (inner, 3) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (inner, 3), 호버
렌더
Header (inner, 3) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (inner, 3), 포커스
렌더
Header (inner, 3) 단독 렌더, 포커스

cta의 포커스97% 일치측정값 22개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

cta의 호버98% 일치측정값 22개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

logo의 포커스94% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Group x: 713px (사이트: 1146px); Icon 2 x: 713px (사이트: 1146px).

기본 상태100% 일치측정값 308개 중 2개 다름

원본
사이트의 원본 Header (landing), 기본 상태
렌더
Header (landing) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (landing), 호버
렌더
Header (landing) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (landing), 포커스
렌더
Header (landing) 단독 렌더, 포커스

nav link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

99% 일치

mobile

Nav link 2 x: 261px (사이트: 246px); Group x: 277px (사이트: 262px) 외 2개.

기본 상태100% 일치측정값 385개 중 4개 다름

원본
사이트의 원본 Header (inner, 2), 기본 상태
렌더
Header (inner, 2) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (inner, 2), 호버
렌더
Header (inner, 2) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (inner, 2), 포커스
렌더
Header (inner, 2) 단독 렌더, 포커스

menu toggle의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

menu toggle의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

94% 일치

mobile

포커스 시, 사이트와의 렌더링 일치도가 94%로, 기준치 96%에 못 미쳐요.

기본 상태100% 일치측정값 207개 일치

원본
사이트의 원본 Header (inner, 3), 기본 상태
렌더
Header (inner, 3) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (inner, 3), 호버
렌더
Header (inner, 3) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (inner, 3), 포커스
렌더
Header (inner, 3) 단독 렌더, 포커스

cta의 포커스100% 일치측정값 22개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

cta의 호버100% 일치측정값 22개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

logo의 포커스94% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

99% 일치

mobile

Nav link 2 x: 261px (사이트: 246px); Group x: 277px (사이트: 262px) 외 2개.

기본 상태100% 일치측정값 385개 중 4개 다름

원본
사이트의 원본 Header (inner), 기본 상태
렌더
Header (inner) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (inner), 호버
렌더
Header (inner) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (inner), 포커스
렌더
Header (inner) 단독 렌더, 포커스

menu toggle의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

menu toggle의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

99% 일치

mobile

Nav link 2 x: 261px (사이트: 246px); Group x: 277px (사이트: 262px) 외 2개.

기본 상태100% 일치측정값 385개 중 4개 다름

원본
사이트의 원본 Header (landing), 기본 상태
렌더
Header (landing) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Header (landing), 호버
렌더
Header (landing) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Header (landing), 포커스
렌더
Header (landing) 단독 렌더, 포커스

menu toggle의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

menu toggle의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 3의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

Footers10

98% 일치

desktop

Inner height: 5418px (사이트: 7902px); Group height: 5418px (사이트: 7280px) 외 5개.

기본 상태100% 일치측정값 1504개 중 7개 다름

원본
사이트의 원본 Footer (inner), 기본 상태
렌더
Footer (inner) 단독 렌더, 기본 상태

포커스확인 안 됨

원본
사이트의 원본 Footer (inner), 포커스
렌더
Footer (inner) 단독 렌더, 포커스

link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link의 포커스98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Inner height: 1244px (사이트: 2174px); Group height: 727px (사이트: 1552px) 외 122개.

기본 상태100% 일치측정값 1804개 중 124개 다름

원본
사이트의 원본 Footer (inner, 2), 기본 상태
렌더
Footer (inner, 2) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Footer (inner, 2), 호버
렌더
Footer (inner, 2) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Footer (inner, 2), 포커스
렌더
Footer (inner, 2) 단독 렌더, 포커스

nav link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Inner height: 838px (사이트: 1131px); Group height: 320px (사이트: 509px) 외 115개.

기본 상태100% 일치측정값 2107개 중 117개 다름

원본
사이트의 원본 Footer (inner, 3), 기본 상태
렌더
Footer (inner, 3) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Footer (inner, 3), 호버
렌더
Footer (inner, 3) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Footer (inner, 3), 포커스
렌더
Footer (inner, 3) 단독 렌더, 포커스

nav link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Inner height: 647px (사이트: 773px); List height: 22px (사이트: 0px) 외 2개.

기본 상태100% 일치측정값 2124개 중 4개 다름

원본
사이트의 원본 Footer (inner, 4), 기본 상태
렌더
Footer (inner, 4) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Footer (inner, 4), 호버
렌더
Footer (inner, 4) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Footer (inner, 4), 포커스
렌더
Footer (inner, 4) 단독 렌더, 포커스

nav link 2의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link 2의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

100% 일치

desktop

Inner height: 870px (사이트: 996px); Group 4 height: 323px (사이트: 349px) 외 2개.

기본 상태100% 일치측정값 2214개 중 4개 다름

원본
사이트의 원본 Footer (landing), 기본 상태
렌더
Footer (landing) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Footer (landing), 호버
렌더
Footer (landing) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Footer (landing), 포커스
렌더
Footer (landing) 단독 렌더, 포커스

link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버100% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

99% 일치

mobile

Inner height: 2134px (사이트: 4222px); Group height: 1575px (사이트: 3584px) 외 170개.

기본 상태99% 일치측정값 1615개 중 172개 다름

원본
사이트의 원본 Footer (inner, 2), 기본 상태
렌더
Footer (inner, 2) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Footer (inner, 2), 호버
렌더
Footer (inner, 2) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Footer (inner, 2), 포커스
렌더
Footer (inner, 2) 단독 렌더, 포커스

button의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

button의 호버99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 포커스99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

nav link의 호버99% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

확인 안 됨

mobile

레시피를 단독으로 렌더링하지 못했어요.

이 컴포넌트는 비교한 항목이 없어요.

DESIGN.md의 레시피

확인 안 됨

mobile

레시피를 단독으로 렌더링하지 못했어요.

이 컴포넌트는 비교한 항목이 없어요.

DESIGN.md의 레시피

확인 안 됨

mobile

레시피를 단독으로 렌더링하지 못했어요.

이 컴포넌트는 비교한 항목이 없어요.

DESIGN.md의 레시피

98% 일치

mobile

루트 height: 1554px (사이트: 1433px); Inner height: 1554px (사이트: 1433px) 외 143개.

기본 상태98% 일치측정값 1880개 중 145개 다름

원본
사이트의 원본 Footer (landing), 기본 상태
렌더
Footer (landing) 단독 렌더, 기본 상태

호버확인 안 됨

원본
사이트의 원본 Footer (landing), 호버
렌더
Footer (landing) 단독 렌더, 호버

포커스확인 안 됨

원본
사이트의 원본 Footer (landing), 포커스
렌더
Footer (landing) 단독 렌더, 포커스

button의 포커스98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

button의 호버98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link 2의 포커스98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link 3의 포커스98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link 3의 호버98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link 4의 포커스98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link 4의 호버98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음

link의 포커스98% 일치측정값 18개 일치

원본
저장된 이미지 없음
렌더
저장된 이미지 없음
DESIGN.md의 레시피

Apple 공개 웹사이트에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 다른 사이트의 폰트 확인하기

비슷한 디자인 시스템

전체 보기
Duolingo - The world’s most popular way to learn 웹사이트 미리보기
유틸리티 & 일상 도구 · Browser Extensions & Small Utilities

Duolingo - The world’s most popular way to learn

CSSOM 빈도 분석으로 추출한 디자인 토큰이며, LLM 해석은 거치지 않았습니다.

Airbnb 웹사이트 미리보기
여행, 교통 & 물류

Airbnb

Airbnb의 디자인 시스템은 단일 독점 가변 폰트(Airbnb Cereal VF)를 중심으로 구축되어 있으며, 짙은 차콜(#222222)과 밝은 그레이를 기반으로 한 거의 무채색에 가까운 중립 팔레트를 사용합니다. 브랜드의 상징적인 "Rausch" 코랄 핑크(#ff385c)는 기본 CTA와 로고에만 제한적으로 사용됩니다. 레이아웃은 반응형 사진 카드 그리드로 이루어지며, 이미지와 텍스트의 비율을 여유 있게 가져갑니다. 카드에는 20px의 부드러운 둥근 모서리가 적용되고, 여러 겹으로 된 은은한 그림자 시스템이 강한 대비 없이 섬세한 깊이감을 만들어 냅니다. 핵심 사용자 행동을 하나로 묶는 검색창은 눈에 잘 띄는 알약 모양의 컨테이너로 구성되어 있습니다.

IKEA 웹사이트 미리보기
커머스 & 리테일 · E-commerce Store

IKEA

IKEA의 글로벌 홈페이지는 굵고 평평한 디자인 시스템을 바탕으로 하며, 상징적인 IKEA Yellow(#ffdb00)를 주요 액션 영역으로, IKEA Blue(#0058a3)를 브랜드 로고 강조색으로 사용합니다. 전체 타이포그래피 체계는 Noto IKEA라는 단일 커스텀 서체로 구성되며, 400과 700 두께를 사용해 본문 14px에서 디스플레이 제목 51px까지 촘촘하게 정의된 크기 체계를 따릅니다. 입체감은 그림자가 아니라 색의 대비와 레이아웃 구조를 통해 전달됩니다. 레이아웃은 최대 너비 90rem의 컨테이너와 데스크톱 기준 1.5rem의 그리드 간격을 사용하며, 상호작용 요소에는 8px 모서리 반경 토큰을 일관되게 적용합니다. 오프화이트 배경(#fffefb)은 짙은 #111111 텍스트와 어우러져 따뜻함을 더하고, 대비가 높아 읽기 쉽고 접근성이 좋은 화면을 만들어 냅니다.

Notion 웹사이트 미리보기
소프트웨어 & SaaS · Productivity & Notes

Notion

Notion의 마케팅 홈페이지는 짙은 네이비(#02093a) 히어로 섹션과 밝은(#f6f5f4) 본문 영역을 결합한 구성입니다. 모든 텍스트 역할에 커스텀 서체인 NotionInter를 사용합니다. 레이아웃은 거터 28px의 12열 그리드를 기반으로 하며, 카드에는 8px, 알약형 요소에는 9999px의 이중 모서리 반경을 적용합니다. 플로팅 UI 요소에는 여러 겹으로 이루어진 점진적 그림자 시스템을 사용합니다. 브랜드 블루(#2537b1)는 CTA와 강조 요소에 쓰이며, gray-200부터 gray-900까지의 의미 기반 회색 단계가 모든 텍스트와 표면의 위계를 구성합니다.

Railway 웹사이트 미리보기
개발 도구 & 인프라 · Developer Tools & IDEs

Railway

Railway의 디자인 시스템은 짙은 네이비 계열의 거의 검은 표면(#13111c, #0b0b0f)을 기반으로 한 다크 중심의 개발자 플랫폼 UI입니다. 고대비의 오프화이트 텍스트(#f7f7f8)와 보라색 브랜드 강조색(#853bce / #553f83)이 특징적입니다. 히어로 영역에는 에디토리얼한 무게감을 주기 위해 IBM Plex Serif를 사용하고, 모든 UI 문구는 Inter가 담당하며, 코드가 표시되는 곳에는 JetBrains Mono와 SF Mono를 씁니다. 입체감은 드롭 섀도 대신 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를, UI 본문에 Inter-Variable을 나누어 적용합니다. CTA 버튼은 완전히 둥근 필(pill) 형태(border-radius: 9999px)를 사용합니다. 전체적인 시스템은 자신감 있고 고대비이며 열망을 자극하는 느낌으로, 방문자를 판매자로 전환하도록 설계되어 있습니다.

비슷한 팔레트

Apple 디자인 시스템 | Design Extractor