Sony Store KR
디자인 가이드

1. 01검정 + 흰색 + 소니 블루 하나

   액센트는 #5865f5 단일. 시맨틱 색은 배지·가격 등 정보 전달에만 쓴다.

2. 02굵기로 위계, 색으로는 안 한다

   강조는 700, 나머지는 400. 색은 #222 → #444 → #666 → #888 네 단으로 내려간다.

3. 03각지다

   라운드는 원형(라디오·아바타)과 칩에만. 버튼·카드·인풋은 0.

4. 04그림자 없음

   깊이는 #fff / #fbfbfb / #f4f7fa 바탕 단차 + 1px #ddd 테두리로 만든다.

5. 05인풋은 밑줄형

   포커스 시 파란 2px 밑줄이 가운데서 양쪽으로 펼쳐진다.

6. 0614px / 1.4 / -0.025em / keep-all

   한글 본문 정본.

7. 07120 · 1440 · 640 / 1280

   섹션 간격, 콘텐츠 폭, 브레이크포인트.

패밀리

본문 기본값

body {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  word-break: keep-all;
  color: #666;
}

타입 스케일

• text-5xl48px → 24px13회
  소니 알파 A7C II
  페이지 제목 .page__title
• text-4xl40px → 24px14회
  소니 알파 A7C II
  h1, 배너 제목
• text-3xl32px → 20px26회
  소니 알파 A7C II
  h2, 컴포넌트 제목 .cmpnt__title
• text-2xl24px → 18px86회
  소니 알파 A7C II
  h3, 할인율, 쿠폰가
• text-xl20px90회
  소제목, 상품가(num), 페이지 설명
• text-lg18px139회
  인풋, 버튼(lg), 상품가
• text-md16px304회
  본문 강조, 버튼(md), 가격 단위
• text-base14px436회
  본문, 버튼(sm) — 정본
• text-sm13px33회
  밑줄 링크
• text-xs12px228회
  캡션, 배지, 링크, 에러
• text-2xs10px27회
  배지 라벨

브랜드

• #5865f5
  primary

  활성 탭, CTA, 포커스 밑줄, 포인트 텍스트, BEST 배지

  text 85 · bg 44 · border 15
• #434ebf
  primary-dark

  pressed

• #f2f2fe
  primary-tint

  프라이머리 틴트 배경

그레이 — 실사용 하드코딩값. 빈도가 압도적이라 이쪽이 실질 정본

• #000000
  black

  헤더 배경

  text 20 · bg 20
• #222222
  gray-900

  제목 · 강조 본문 · 다크 버튼

  text 259 · border 53
• #444444
  gray-800

  보조 본문

  text 109
• #666666
  gray-700

  body 기본 글자색

  text 65
• #888888
  gray-600

  캡션, 비활성

  text 101
• #909090
  gray-500text 11
• #bbbbbb
  gray-400

  취소선 원가, 비활성 버튼

  text 35
• #cccccc
  gray-300border 11
• #dddddd
  gray-200

  기본 테두리

  border 91
• #e1e1e1
  gray-150

  인풋 밑줄

  border 26
• #f4f4f4
  gray-100bg 6
• #f8f8f8
  gray-50bg 15
• #fbfbfb
  gray-25

  섹션 바탕

  bg 45
• #ffffff
  whitebg 84

뉴트럴 — 사이트가 :root 에 직접 선언한 유일한 팔레트

• #15181f
  neutral-90

  배지 텍스트, 다크 서피스

• #2b303c
  neutral-80
• #434853
  neutral-70
• #5b6069
  neutral-60
• #747780
  neutral-50

  링크, GNB 탭 비활성

• #a4a7ad
  neutral-40

  푸터 사업자 정보

• #bdbfc3
  neutral-30
• #d5d7d9
  neutral-20

  구분선

• #eeeef0
  neutral-10

  GNB 탭 하단선

시맨틱

• #e70000
  sale

  SALE 배지, 할인율, 에러

• #ff5619
  sale-price

  할인가 숫자, 카운트 배지

• #ff4e00
  coupon

  COUPON 배지

• #20b537
  new

  NEW 배지

• #39bfc9
  reserve

  예약판매 라벨 배경

• #4b96e6
  link

  외부 링크

서피스

• #ffffff
  surface-page

  페이지

• #fbfbfb
  surface-section

  섹션 바탕

• #f4f7fa
  surface-soft

  카드 · 패널

• #f1f5f9
  surface-footer

  푸터, GNB 카테고리 메뉴

• #edf4fc
  surface-info

  안내 박스

• #000000
  surface-header

  고정 헤더

바탕이 세 겹이다: 흰 페이지 → #fbfbfb 섹션 → #f4f7fa 카드. 차이가 작아 테두리 없이는 경계가 안 보이고, 실제로도 대부분 1px #ddd 와 함께 쓴다.

버튼 — 높이 46 / 48 / 54 / 56 / 64, 라운드 0

인풋 — 밑줄형. 눌러 보면 파란 밑줄이 가운데서 펼쳐진다

제목

상품 가격