BSS Design System
Social Solidarity Bank Design System
The design language of Social Solidarity Bank and its services. Every product — edu, data, and beyond — shares the same tokens, components, and rules. The single source of truth for rules is docs/design.md; for tokens it is app/_v2/tokens.css.
Foundations
Tokens shared across every page. Each category is covered in depth in its own doc.
Color
13 brand, neutral, and semantic colors plus line tokens — a unified palette organized by intent.
Learn more →02Typography
Pretendard + Satoshi, an 8-step type scale, and letter-spacing rules.
Learn more →03Button
Global default .btn — outline at rest, fills with primary on hover.
Surfaces
5-surface matrix — heading, body text, and CTA color pairings per background, plus section rotation order.
Learn more →05Patterns in Practice
Real screens assembling tokens and components — application card variants, card patterns, and long forms.
Learn more →Core Principles
Every rule derives from the design.md guardrails. Use these as a self-check checklist when building new screens.
Tokens only
Color, type, spacing, radius, and elevation must use tokens — never arbitrary hex or px values. If a token is missing, add it first.
Headings = ink-deep
h2–h5 use --c-ink-deep. Primary (blue) is reserved for links and emphasis only; eyebrows are normal weight (400).
Buttons default to outline
.btn is outline at rest, fills with primary on hover. Never use solid as the default.
Gradients: light × light only
Light-background washes only. Never blend two dark colors; achieve depth on dark surfaces with a flat color plus elevation.
No italic · No emoji
Emphasis via weight or color only. Icons must be inline SVG.
Hangul optical correction
Korean glyphs have no descenders, so rounded cards and boxes add 4–6 px of extra bottom padding relative to the top.