Overview

BSS Design System v3.0

사회연대은행 부설 함께만드는세상의 디자인 시스템. 토큰·컴포넌트·블록을 한 곳에서 보고, 그대로 사용하세요. 모든 페이지가 시각 진실의 원천입니다.

Foundations

모든 페이지가 사용하는 토큰. 각 카테고리는 자기 페이지에서 자세히 다룹니다.

컨테이너·그리드·간격·브레이크포인트. 모든 레이아웃의 출발점.

Brand · Backgrounds · Borders · Text · Status — 의미별 13개 토큰.

Headings · Copy · Buttons. Pretendard + Satoshi, 8개 토큰.

Radius × Shadow × Surface 조합 — 카드·입력·표층의 일관성.

함께만드는세상 · 함께온기금 — 로고 변종과 사용 가이드.

Button · Card · Field 등 기존 8 + Checkbox · Switch · Tooltip 등 신규.

시스템의 모든 규칙은 다음 다섯 원칙에서 파생됩니다. 새 페이지를 만들 때 자가 점검 기준으로 사용하세요.

그라데이션은 light × light hero wash 한정. 카드·버튼은 단색.

한글·영문·숫자·코드 모든 텍스트가 16px 이상.

한글·영문 통일. .t-* 유틸이 자동 적용.

강조는 weight (.t-body-strong) 또는 color.

라디오·체크박스·step 번호 모두 border-radius: 50%.

에이전트가 이 시스템을 사용해 새 페이지를 만들 때의 5단계. 출처는 CLAUDE.md §6.

새 CSS를 쓰기 전에 토큰·컴포넌트 카탈로그부터 확인.

.bg-* + .container + .t-* + .btn-* + .card* 조합.

새 패턴이 필요하면 페이지 <style>에 레이아웃만. 컬러·라디우스·폰트는 var(--*).

확신이 안 들면 이 문서와 landing-example.html을 다시 확인.

① ≥16px · ② 인디케이터 정렬 · ③ 카드 padding 대칭 · ④ 그라데이션 의도성.