BLUESOFT Design System

토큰은 Figma 변수 컬렉션 4개를 그대로 옮깁니다: Primitive(hex가 있는 유일한 곳) → Theme(시맨틱 + 컴포넌트 별칭, Default·Dark 2모드) → 컴포넌트가 var(--*) 커스텀 프로퍼티로 참조합니다. 크기·반응형 축은 별도 컬렉션입니다 — Shape(Rounded·Square·Pill 3모드, [data-shape]로 전환)와 Breakpoint(Mobile·Tablet·Laptop·Desktop·Wide 5모드, 미디어쿼리로 전환).

아이콘은 icons/sprite.svg 하나에 <symbol>로 묶여 있으며 <use href="assets/icons/sprite.svg#icon-base-check"> 형태로 참조합니다.

왼쪽 사이드바에서 토큰과 컴포넌트별 문서 페이지로 이동할 수 있습니다. 각 컴포넌트 페이지는 실제 클래스 조합으로 만든 모든 변형을 나열합니다.

구성

폴더 구조

scss/tokens/       _primitive, _theme, _shape, _breakpoint
scss/abstracts/    _maps, _mixins, _functions
scss/base/         _reset, _typography
scss/components/   button, icon-button, social-button, chip, tabs, table, board,
                   calendar, modal, checkbox-radio, scrollbar 외
scss/main.scss     진입점
icons/             sprite.svg (아이콘), logo/ (워드마크)
docs/              이 사이트(GitHub Pages)