오더히어로 앱 · 디자인 시스템
디자인 토큰 프로덕션 추출
운영 서비스 app.dl-orderhero.com(Vue 3 + Tailwind, Pretendard) CSS에서 실측 추출한 디자인 토큰. FE가 v5 화면을 프로덕션과 동일한 색·타이포로 구현하도록 정리.
출처운영 CSS(releases/20260710) 스택Vue 3 · Tailwind · Pretendard 추출색 40+ · 타이포 14단 · 라운드/섀도 기준2026-07-15
⚠️ FE 참고: 앞서 배포한 v5 목업(홈·취소·거래명세서)은 제가 근사 색(#1B6FDB 등)을 사용했습니다. 실제 구현은 아래 프로덕션 토큰(primary #467FF7, navy #0C2540, gray00/66/88/99)을 기준으로 하세요.

⬇ 토큰 파일 다운로드 (FE가 저장소에 바로 넣기)

페이지에서 복붙할 필요 없이 실제 파일을 받아 프로젝트에 넣으세요. 4종 포맷 제공.

Tailwind tailwind.tokens.cjs CSS 변수 tokens.css SCSS tokens.scss JSON tokens.json
01

브랜드 컬러

primary·navy 중심
Primary
primary
#467FF7
Primary Strong
primary-strong
#0051D6
Secondary
secondary
#5480EF
Sky
sky
#0095FF
Navy
navy
#0C2540
Navy 2
navy-2
#123A4A
Blue 50
blue-50
#EEF3FE
Blue 100
blue-100
#E5EEFF
02

그레이 스케일

커스텀 명명(gray00·66·88·99) + 뉴트럴
Gray 00
gray00
#000000
Gray 5D
gray-5d
#5D5D5D
Gray 66
gray66
#666666
Gray 88
gray88
#888888
Gray 90
gray-90
#909090
Gray 99
gray99
#999999
Gray BC
gray-bc
#BCBCBC
Gray D0
gray-d0
#D0D0D0
Border
border / gray-eb
#EBEBEB
Gray EF
gray-ef
#EFEFEF
BG
bg / gray-f5
#F5F5F5
Gray F8
gray-f8
#F8F8F8
03

시맨틱 컬러

Error / Red
error
#FF3C3C
Red Alt
red-alt
#F24C4C
Error BG
error-bg
#FFF8F8
Teal / Success
teal
#09B4B6
04

그라디언트

brand · #0051D6 → #0095FF
navy · #0C2540 → #123A4A
blue-50 → white
05

타이포그래피

Pretendard Variable
34 / bold오더히어로 Aa 123
28 / bold오더히어로 Aa 123
24 / bold오더히어로 Aa 123
20 / semibold오더히어로 Aa 123
17 / semibold오더히어로 Aa 123
16 / regular · base오더히어로 Aa 123 — 기본 본문
15 / medium오더히어로 Aa 123
14 / regular오더히어로 Aa 123
13 / regular오더히어로 Aa 123 — 보조 텍스트
12 / regular오더히어로 Aa 123
11 · 10 / caption오더히어로 Aa 123 — 캡션·라벨
06

폰트 웨이트

가변폭 200~800
Aa 가
300 Light
Aa 가
400 Regular
Aa 가
500 Medium
Aa 가
600 SemiBold
Aa 가
700 Bold
Aa 가
800 ExtraBold
07

라운드 · 섀도

4px
6px (.375rem)
8px
10px
12px
16px
pill 9999
circle 50%
card / shadow-md
0 4px 6px -1px rgba(0,0,0,.1),
0 2px 4px -1px rgba(0,0,0,.06)
soft
0 2px 12px rgba(0,0,0,.08)
bottom-sheet up
0 -3px 6px rgba(0,0,0,.06)
08

tailwind.config — theme.extend

복사해서 바로 사용
// tailwind.config.js — 프로덕션 추출 토큰
theme: {
  extend: {
    colors: {
      primary: '#467FF7', 'primary-strong': '#0051D6',
      secondary: '#5480EF', sky: '#0095FF',
      navy: '#0C2540', 'navy-2': '#123A4A',
      'blue-50': '#EEF3FE', 'blue-100': '#E5EEFF',
      error: '#FF3C3C', 'error-bg': '#FFF8F8', teal: '#09B4B6',
      gray00: '#000000', gray66: '#666666',
      gray88: '#888888', gray99: '#999999',
      'gray-5d': '#5D5D5D', 'gray-90': '#909090',
      'gray-bc': '#BCBCBC', 'gray-d0': '#D0D0D0',
      'gray-eb': '#EBEBEB', 'gray-ef': '#EFEFEF',
      'gray-f5': '#F5F5F5', 'gray-f8': '#F8F8F8',
    },
    fontFamily: { sans: ['Pretendard Variable', 'Pretendard', 'sans-serif'] },
    boxShadow: {
      card: '0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06)',
      soft: '0 2px 12px rgba(0,0,0,.08)',
      up:   '0 -3px 6px rgba(0,0,0,.06)',
    },
    backgroundImage: {
      'grad-brand': 'linear-gradient(135deg,#0051D6,#0095FF)',
      'grad-navy':  'linear-gradient(135deg,#0C2540,#123A4A)',
    },
  },
}
09

CSS 변수 (비-Tailwind용)

/* :root design tokens */
:root {
  --primary: #467FF7; --primary-strong: #0051D6;
  --secondary: #5480EF; --sky: #0095FF;
  --navy: #0C2540; --navy-2: #123A4A;
  --blue-50: #EEF3FE; --blue-100: #E5EEFF;
  --error: #FF3C3C; --error-bg: #FFF8F8; --teal: #09B4B6;
  --text: #1A1A1A; --text-sub: #5D5D5D; --text-hint: #999999;
  --border: #EBEBEB; --bg: #F5F5F5; --surface: #FFFFFF;
  --font-sans: 'Pretendard Variable', Pretendard, sans-serif;
  --radius: 6px; --radius-lg: 12px; --radius-pill: 9999px;
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}