Actibooky Design System
하나의 디자인 언어로,
모든 서비스를 일관되게.
단일 코어 + 서비스별 스킨. shadcn/ui · Tailwind v4 · OKLCH 토큰 · 라이트/다크. 토큰·컴포넌트·화면을 브랜드센터 · Components · shadcn 레지스트리로 함께 배포합니다.
Foundations
모든 값은 OKLCH 토큰. raw hex/rgb 하드코딩 금지.
로고
워드마크
기본 로고 · 가로형
심볼
단독 사용 · 정방형 (앱 아이콘 · 파비콘 · 워터마크)
브랜드 컬러
좌: Light 배경용 · 우: Dark 배경용사용 가이드
- 배경 대비 · 라이트 배경엔 라이트 로고, 다크 배경엔 다크 로고를 사용합니다.
- 여백(클리어스페이스) · 로고 주위로 심볼 점 지름 이상의 여백을 확보합니다.
- 최소 크기 · 워드마크 높이 16px, 심볼 16×16px 이상에서만 사용합니다.
- 금지 · 색상 변경 · 비율 왜곡 · 회전 · 그림자/효과 추가를 하지 않습니다.
컬러 토큰
타이포그래피
기본 Pretendard. 서비스에 따라 SUIT · SUITE 를 선택해 쓸 수 있습니다 (기본 본문 · 전 서비스 공통).
농촌의 하루를 잇다
고향사랑기부, 더 가깝게
지역을 잇는 새로운 방법
여행으로 만난 지역에 기부하기
이번 달 인기 답례품
리드 문장은 본문보다 한 단계 크게 둡니다.
본문은 16px 이상, 한글 가독성을 최우선으로 둡니다.
보조 정보와 메타 텍스트에 사용합니다.
캡션 · 라벨 · 도움말
tabular-nums = 모든 숫자 폭이 동일 → 금액·표·카운터에서 자릿수가 세로로 정렬되고 값이 바뀌어도 흔들리지 않습니다. 기본(proportional)은 1 이 8 보다 좁아 행마다 자리가 어긋납니다.
111,111원
888,888원
181,818원
111,111원
888,888원
181,818원
유틸리티: font-sans(Pretendard 기본) · font-suit · font-suite 로 부분 적용할 수 있습니다.
컴포넌트
60+ 컴포넌트를 Components 문서에서 라이브 프리뷰 · Controls · 소스 코드 · npx shadcn add 로 확인합니다.