Actibooky Design System
하나의 디자인 언어로,
모든 서비스를 일관되게.
단일 코어 + 서비스별 스킨. shadcn/ui · Tailwind v4 · OKLCH 토큰 · 라이트/다크. 토큰·컴포넌트·화면을 브랜드센터 · Components · shadcn 레지스트리로 함께 배포합니다.
우리가 일하는 방식
감각이 아니라, 규칙으로 일관되게.
좋은 화면은 감각에서 나온다고들 합니다. 하지만 감각만으로는 팀이 커질수록 기준이 흔들리기 쉽습니다. actibooky 디자인 시스템은 일관성의 기본선을 토큰과 제약으로 받쳐, 누구나 같은 출발점에서 시작하게 합니다. 디자이너는 그 위에서 더 중요한 판단에 집중할 수 있습니다.
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 로 부분 적용할 수 있습니다.