Foundations · 04
Materials
표층의 *재질감* — 라디우스 · 그림자 · 채움의 정해진 조합. Geist의 *Material* 개념을 BSS의 실제 토큰 조합으로 매핑한 카탈로그입니다.
Surface materials
page-level페이지 위에 놓이는 표층. 모든 카드·블록·섹션 wash는 여기서 출발합니다.
기본 카드
soft 그림자 + canvas 채움
Soft wash
canvas → light-grey 수직
Sky wash
canvas → sky-light 수직
Diagonal wash
135° canvas → sky-light
Flat (light-grey)
그림자 없음 · 단색
Inverted
짙은 표면 + 내부 강조
Raised materials
emphasis페이지에서 *떠 있어야* 하는 카드. 페이지당 1~2개로 절제해서 사용하세요 — 모든 카드가 raised면 어떤 것도 raised로 보이지 않습니다.
Apply card
hero 그림자 · 들린 느낌
Pull-out
ink-deep + 강한 그림자
Floating materials
above page페이지 흐름 위에 띄우는 표층. 아직 구현된 토큰·컴포넌트가 없어 *자리만 잡아둡니다* — 향후 Components(Tooltip · Sheet · Toast)와 함께 토큰화 예정.
툴팁 내용
메뉴 항목 1
메뉴 항목 2
메뉴 항목 3
모달 제목
짧은 본문 한 줄.
풀스크린 시트
현 시점에는 모두 *시각 자리잡기*만 — 실제 토큰(--mat-*)과 컴포넌트는 후속 작업에서 추가됩니다.
Input materials
interactive입력·선택 요소. 그림자 대신 *1px 외곽선*으로 표층을 만들고, hover·focus에서 inset shadow로 두께를 점진적으로 강화 — 레이아웃 시프트 없음.
선택된 옵션
selected 상태 — sky-light + 원형 체크
조기 신청
Track A
Token reference
위 materials를 구성하는 토큰. 새 material이 필요하면 이 안에서 조합하세요.
Radius
| Token | Value | 적용처 |
|---|---|---|
--r-md | 12px | input · button · option-card · badge wrapper |
--r-lg | 16px | week box · feature card · block frame |
--r-xl | 24px | card (기본) · hero · t-card |
--r-2xl | 32px | image · large surface |
--r-pill | 9999px | badge · pill button · carousel arrow |
Shadow
| Token | Value | 적용처 |
|---|---|---|
--sh-soft | 1px 3px 4% · subtle | 모든 카드의 기본 |
--sh-hero | 2px 8px 4% + 8px 24px 6% | 들린 apply 카드 · 강조 1~2개 |
--sh-full | 4px 16px 8% | ink-deep pull-out · 가장 강한 분리 |
Rules
DO
- 기본은
--sh-soft. 모든 카드의 출발점. - 그라데이션 워시는 *light × light*만, 그리고 *카드 사용자 요청 시*에만.
- 상하 padding 대칭 — flex column + gap으로 자식 간격.
DON'T
- 새 그림자 발명 금지 — 3개 안에서 해결.
- 새 radius 발명 금지 — 5개 안에서.
- 카드 안에 카드 nest 금지 — 그림자 중첩으로 시각이 무너짐.
- dark × dark 그라데이션 금지.