App Foundations
컬러 · 토큰
앱 셸의 실효 토큰은 assets/css/app.css의 .shell, .drawerbody, .auth-body 스코프 CSS 변수입니다. 2026-06 재스킨으로 화이트 베이스 + 퍼플 #6B3FF6 액센트 + 12px 라운드 + NanumSquare로 전환됐습니다. 스와치를 클릭하면 HEX가 복사됩니다.
서피스 · 보더
화이트 위계 — 페이지 배경(#F7F7F7) 위 카드(#FFFFFF), 입력·호버는 #F1F2F4, 보더로 구분.
액센트 (퍼플)
제품 UI 액센트는 퍼플 #6B3FF6 — 마케팅/External과 동일 색으로 통일됐습니다. 프라이머리 액션 · active 내비 · 링크에 절제해서 씁니다. active 항목 배경은 --tint(#F1ECFE).
레거시 변수명 참고: 재스킨 전 레드였던
--accent · --purple · --ink · --link · --accent-3가 모두 퍼플 #6B3FF6로 통일됐습니다. 이름이 아니라 역할(accent)로 쓰세요. 네이티브 폼 컨트롤은 accent-color:#6B3FF6.
텍스트
화이트 위 3단계 위계 — 가독성을 위해 muted는 #6B6B6B 이상.
시맨틱
상태 전용 색 — 데이터 증감 · 알림 · 경고. 화이트 표면용으로 한 단계 진한 톤.
라운드 · 폰트
제품 UI는 8–12px 라운드(마케팅 16/24보다 조밀)와 NanumSquare 본문(Pretendard 폴백), 숫자·코드엔 JetBrains Mono를 씁니다.
라운드
--r-sm
8px
--r-md
10px
--radius · --r-card
12px
폰트
NanumSquare 가나다 Ag
본문 14px · 헤딩 16–20px · weight 400/600/700/800
12,480 · JetBrains Mono (숫자·코드)
미리보기
실제 토큰으로 렌더한 화이트 표면 — 카드 · 버튼 · 입력 · 링크 · 시맨틱 뱃지.
상태
상승 +8%
검수 대기
마감 임박
CSS 토큰
앱 셸 스코프에 그대로 적용되는 변수. .shell 안에서 var(--…)로 참조합니다.
/* assets/css/app.css — .shell, .drawerbody, .auth-body */
.shell {
--bg:#F7F7F7; --surface:#FFFFFF; --surface-2:#F1F2F4;
--line:#E5E5E5; --line-strong:#D7D8DD;
--accent:#6B3FF6; --purple:#6B3FF6; --link:#6B3FF6; --tint:#F1ECFE;
--text:#1A1A1A; --muted:#6B6B6B; --muted-2:#9A9A9A;
--green:#16A34A; --amber:#B45309; --danger:#DC2626;
--r-sm:8px; --r-md:10px; --radius:12px; --r-card:12px;
--shadow:0 1px 2px rgba(16,16,18,.06),0 1px 3px rgba(16,16,18,.05);
font-family:'NanumSquare','Pretendard',-apple-system,sans-serif;
}
사용 규칙
권장
- · 화이트 표면 위 텍스트는
--text(#1A1A1A), muted는 #6B6B6B 이상 - · 퍼플 액센트는 절제 — 프라이머리 액션 · active 내비 · 링크에만
- · 라운드는 8–12px로 일관, 칩·뱃지만 pill · 포커스는 퍼플 링
- · 데이터·숫자는
tabular-nums+ JetBrains Mono
금지
- · 다크 서피스(#0F0F11)·레드 액센트(#E5484D) 잔존
- · 큰 면적 퍼플 솔리드 남발 · 액센트를 본문 강조색으로
- · 순백 위 저대비 텍스트(가독성)
- · 아이콘은 현재 uicons
fi-rr-*유지(아이콘 마이그레이션은 후순위)