01 / Visual Hero
비주얼 히어로
함께 여는 복지,
행복복지관
지역 주민 누구나 참여할 수 있는 열린 프로그램을 운영합니다.
02 / Text Hero
텍스트 히어로
Since 1998
이웃과 이웃을 잇는
스물여덟 해의 기록
숫자가 아니라 사람을 남기는 복지를 지향합니다.
03 / Colors
컬러 팔레트와 역할
Terracotta
#e06a4b · --ww-primary
CTA · 핵심 강조 · 링크
Terracotta Deep
#c2410c · --ww-primary-deep
hover · 액티브
Sun Yellow
#f2c94c · --ww-accent
하이라이트 · 뱃지
Sage
#6f9e80 · --ww-success
보조 강조 · 성공
Warm Ink
#44403c · --ww-ink
본문 · 헤딩
Muted
#a8a29e · --ww-muted
보조 텍스트 · 캡션
Cream Bg
#faf6f0 · --ww-bg
페이지 배경
Surface
#ffffff · --ww-surface
카드 · 패널
04 / Typography
타이포그래피 스케일
06 / Forms
폼 요소
07 / Cards
카드 — 라이트 · 다크
실버 요가 교실
매주 화·목 오전, 어르신 대상 가벼운 요가.
3.10 – 6.30 · 무료
방과후 돌봄
초등 저학년 돌봄과 학습 지원.
연중 · 신청 필수
야간 상담 창구
다크 배경 위 카드 규칙 — 액센트는 Sun Yellow.
매주 금 18–21시
08 / Badges & Chips
뱃지 · 칩
09 / Spacing
간격 스케일
10 / Radius
라운드 스케일
6 · 인풋 내부
12 · 카드·버튼
16 · 히어로·모달
pill · 칩·뱃지
11 / Elevation
그림자 깊이
Level 1
기본 카드 · 리스트
--ww-shadow-1
Level 2
hover · 강조 카드
--ww-shadow-2
Level 3
모달 · 팝오버
--ww-shadow-3
12 / States & Motion
상태 · 모션 규칙
이 시스템이 마음에 드시나요?
필요한 영역만 골라 SKILL.md · tokens.json · CSS 변수로 내려받으세요