Lumenstripe.com DESIGN.md

CSS / UI 리팩터링 기준

educlopez/design-bites의 stripe.com DESIGN.md를 토큰으로 옮겼습니다. 헤드라인은 300, 섀도는 없고, 퍼플은 인터랙션에만 씁니다.

Color

brand

#533AFD

hover

#2E2B8C

tint

#E2E4FF

soft

#E8E9FF

chart

#7F7DFC

navy

#061B31

dark

#0D1738

canvas

#F8FAFD

paper

#FFFFFF

line

#E5EDF5

headline

#81B81A

instant

#00D66F

accent

#FF6118

Type

성장하는 비즈니스를 위한 결제

홈 · 오늘 매출 ₩18,420,340

호스티드 결제창

본문 16 / 400. 디스플레이는 크기와 자간으로만 위계를 만든다.

캡션·버튼 14 · weight 400

Buttons

완료대기실패환불처리 중

Do / Don't

  1. 1. 헤드라인weight 300만. 600–700은 Stripe 정체성을 바로 무너뜨린다.
  2. 2. ss01모든 텍스트에 font-feature-settings: "ss01".
  3. 3. 잉크순수 검정 금지. 본문은 딥 네이비 #061B31.
  4. 4. 퍼플#533AFD는 링크·CTA·액티브만. 넓은 면은 tint/soft.
  5. 5. 반경4–6px. 12px+ 나 알약(999px) 금지.
  6. 6. 깊이마케팅은 섀도 없음. 보더 #E5EDF5와 면 대비로만.
  7. 7. 호버링크는 색을 #2E2B8C로 바꾸고 opacity 0.6. 색만/투명도만은 안 됨.
  8. 8. 여백잡지가 빽빽하다고 느껴질 때까지 비운다.
  9. 9. 액센트그린·오렌지는 일러스트·차트만. UI 크롬에 쓰지 않음.