Design System Preview

Samsung의 디자인 시스템The Samsung design system

라이브 화면에서 실측한 컬러·타이포그래피·컴포넌트·모션을 한 장으로 정리했습니다. 모든 값에는 관측 횟수와 신뢰도가 함께 기록됩니다.Colors, typography, components and motion — measured from the live site and organized on one page. Every value carries its observation count and confidence.

토큰 살펴보기Explore tokens 타이포그래피Typography

텍스트 히어로Text hero

Extracted Type Scale

타이포가 말하는
브랜드의 위계
Typography speaks
the brand hierarchy

위 문장들은 실측 스케일 18px · 16px · 15px · 14px · 13px · 12px 그대로 렌더된 것입니다 — 크기 관계가 곧 브랜드의 목소리 톤입니다.These lines are rendered on the measured scale 18px · 16px · 15px · 14px · 13px · 12px — the size relationships are the brand’s tone of voice.

컬러 팔레트Color palette

역할Roles

Primary#fff01fCTA · 핵심 강조 · 링크CTA · key emphasis · links×6 · conf 0.81 · inferred
Accent#2189ff하이라이트 · 뱃지 · 보조 강조highlights · badges×96 · conf 0.65 · inferred
Background#f7f7f7페이지 배경page background×446 · conf 0.79 · observed
Ink#000000본문 · 헤딩body · headings×1464 · conf 0.8 · observed
Muted#555555보조 텍스트 · 캡션secondary text · captions×774 · conf 0.7 · inferred
Surface#ffffff카드 · 패널cards · panels×12 · conf 0.7 · inferred

관측 팔레트Observed palette 빈도순by frequency

#666666×290 · color, background-color
#313131×102 · color
#2c17a3×42 · color
#e6e6e6×36 · border-color
#bdbdbd×22 · border-color
#cccccc×22 · border-color
#006beb×16 · color, border-color
#aaaaaa×8 · border-color
#3c3a53×4 · background-color

타이포그래피 스케일Type scale

생각을 현실로, 디자인의 힘Ideas made real, by design

DISPLAY — 18px · ×272

모든 화면에 일관된 브랜드 경험A consistent brand on every screen

H1 — 16px · ×308

작은 디테일이 완성도를 만듭니다Small details make the difference

H2 — 15px · ×360

본문은 편안하게 읽히는 크기와 행간을 유지합니다. 실제 서비스 문장을 그대로 담아도 리듬이 무너지지 않아야 합니다.Body copy stays comfortable to read. Real product sentences should keep their rhythm at this size.

H3 — 14px · ×296

캡션과 각주는 조용히 정보를 보탭니다Captions add context, quietly

BODY-LG — 13px · ×268

보조 텍스트는 본문을 방해하지 않는 크기로Secondary text stays out of the way

BODY — 12px · ×134

법적 고지와 메타 정보는 가장 작게, 그러나 읽히게Legal and meta stay smallest, yet legible

BODY-SM — 11px · ×424

생각을 현실로, 디자인의 힘Ideas made real, by design

CAPTION — 10px · ×108

Font Families

SamsungOneKorean ×2584

Samsung Sharp Sans ×288

버튼Buttons

Primary
Soft Fill
Outline
Link
Hover
Focus
Disabled
실측 변형Measured
실측 1회measured ×1 · primary #fff01f

간격 스케일Spacing

6px×332
4px×134
19px×130
32px×122
20px×104
12px×84
16px×70
80px×70
2px×66
24px×64

라운드 스케일Radius

20px ×230

32px ×30

24px ×16

40px ×8

12px ×8

50px ×6

17.5px ×2

36px ×2

그림자 깊이Elevation

실측된 그림자 단계를 카드·버튼·패널 등 실제 요소에 입혀 확인합니다Measured shadow steps, worn by real elements — cards, buttons, panels

기본 카드CardLevel 1 · ×18

상태 · 모션States & motion

올려보세요 — 실측 전환Hover me — measured timing 0.3s
보더 전환Border transition
:focuscolorborder-color
전환 0.3s · 0.2s · 0.5s 관측transitions 0.3s · 0.2s · 0.5s

선언된 토큰Declared tokens

사이트가 스스로 선언한 커스텀 프로퍼티 — 고신뢰 부록Custom properties declared by the site — high-confidence appendix

--cpCarousel-size-picture: 312px
--cpCarousel-gap-flag: 16px
--cpCarousel-gap-price: 8px
--cpCarousel-gap-innr: 60px
--cpCarousel-title-component: 40px
--cpCarousel-title-sub: 20px
--cpCarousel-title-list: 22px
--cpCarousel-fontsize-price: 20px
--cpCarousel-fontsize-flag: 16px
--cpCarousel-fontsize-description: 16px
--cpCarousel-fontsize-date: 12px
--swiper-theme-color: #007aff
--swiper-navigation-size: 44px
--revampCompare__global-column-gap: 24px
--revampCompare__global-pl: 60px
--revampCompare__global-pr: 60px
--revampCompare__headline-pt: 32px
--revampCompare__headline-pb: 64px
--revampCompare__spec-disclaimer-pt: 56px
--revampCompare__spec-disclaimer-pb: 24px
--gnb04-top: 0
--gnb04-rightmenu-top: 0
--l1-container-current-height: 0
--gnb04-utility-user-height: 0