디자인 시스템

디자인 시스템의 단일 출처는 코드의 study-platform-client/src/app/global.css(@theme inline 블록)입니다. 아래는 그 핵심 토큰을 큐레이션한 요약입니다. 브랜드 컬러/톤앤매너 방향성은 노션 “브랜딩 톤앤매너” 문서를 함께 정리했습니다.

브랜드 톤앤매너

컨셉: “Fun & Confident Learning” — 딱딱한 에듀테크가 아니라 “재미있고 자신감 있게 코딩 입문하는 젊은 커뮤니티”. Duolingo의 밝은 에너지를 코딩 입문 버전으로 가져온 느낌.
Primary = 핑크(#F63D68, 핫핑크/Fuchsia 계열): 로고·아이콘·썸네일·인사이트에 사용. 노마드코더·Lyft처럼 핑크를 메인으로 과감히 써서 기존 IT/에듀테크(파랑·초록·회색)와 차별화.
Secondary = 민트 (논의 중): 강조·CTA 버튼·탭/GNB/텍스트 hover 인터랙션·제목에 적용하자는 제안. 패스트캠퍼스와 메인/인터랙션 컬러가 겹치는 문제를 풀기 위해 도입 논의. 단, 코드 토큰에는 아직 민트/teal 계열이 없어 현재는 제안 단계입니다.
주의: 과도한 핑크 도배는 “유아적/가벼움”으로 비칠 위험 → 배경은 중립색, 핑크는 아이콘/CTA/하이라이트 포인트로 사용. 다크그레이·오프화이트로 균형.

컬러 토큰 (코드 구현)

원시 팔레트는 50~900(일부 0/150/275/1000) 단계로 정의됩니다.

그레이: --color-gray-0(#ffffff) ~ --color-gray-1000(#0a0d12) — 13단계 중립 스케일
로즈(브랜드 핑크): --color-rose-50(#fff1f3) ~ --color-rose-900(#89123e), 핵심 rose-500 = #f63d68
그 외 액센트: red / pink / grape / purple / indigo / blue / green / yellow / orange 각 50~900
특수: --color-qna-answered(#02c76e), --color-qna-answered-bg(#dafbe7)

시맨틱 토큰

원시 컬러를 의미 단위로 매핑합니다.

--color-text-brand / --color-icon-brand / --color-border-brand → rose-500 (브랜드 핑크가 시스템 전반의 brand 토큰)
text-*: subtle/default/strong/subtlest/disabled/error/success/warning/information/inverse
background-*: default/alternative/dimmer(rgba(24,29,39,0.8))/disabled, brand/danger/neutral/success 의 subtle·default·strong
background-accent-{blue|grape|gray|green|indigo|orange|pink|purple|red|rose|yellow} 의 subtle·default·strong
fill-{brand|danger|success...}-{default|strong|subtle}-{default|hover|pressed} — 인터랙션 상태별 fill

타이포그래피

본문 폰트: Pretendard Variable (PretendardVariable.woff2, layout.tsx에서 로드)
디스플레이 폰트 토큰: --font-display: 'Satoshi', sans-serif
font-weight: regular 400 / medium 500 / semibold 600 / bold 700
타이포 유틸리티 클래스 (@utility):
- font-display-headings1~6 — 디스플레이 헤딩 (예: headings1 = 72px / semibold / line-height 108px)
- font-bold-h1~h6 — 볼드 헤딩 스케일
- font-designer-* — 디자이너 친화적 네이밍 스케일. font-designer-{62|36|32|28|26|24|22|20|18|16|15|14|13...}{r|m|sb|b} 형태로, 사이즈(px) + 굵기(r=regular, m=medium, sb=semibold, b=bold)를 직관적으로 조합. 디자이너가 핵심 타겟인 팀답게 Figma 텍스트 스타일과 1:1 대응되도록 설계.

radius / spacing 토큰

radius: --radius-0(0) ~ --radius-750(60px). 단계: 0/25(2)/50(4)/75(6)/100(8)/125(10)/150(12)/200(16)/250(20)/300(24)/400(32)/500(40)/750(60)
spacing: --spacing-0 ~ --spacing-650(52px) 등 px 기반 세밀 스케일(25=2px, 100=8px, 200=1rem, 400=2rem, 600=3rem …). Figma의 픽셀 단위 간격을 그대로 토큰화.
breakpoint: --breakpoint-3xl: 1920px (Tailwind 4 @theme)

기술 스택 참고

Tailwind CSS 4.0 기반. 4.0부터 전역 변수를 CSS의 @theme / @theme inline 블록에서 직접 정의합니다. 다크모드는 @custom-variant dark (&:is(.dark *))로 처리.

원문: 브랜딩 톤앤매너 · 코드: study-platform-client/src/app/global.css