톤
따뜻한 종이 같은 지면 위에 조밀한 표와 잉크 같은 활자. 장식 없이 도구처럼 보이는 것이 목표다.
비개발자가 매일 여는 실무 도구라 밀도를 높게 잡았다. 표 행은 38px, 본문은 14px, 자간은 -0.01em 이다. 액센트는 딥 브릭 한 색이고, 화면당 강하게 쓰는 자리는 하나로 제한한다 — 모든 버튼을 액센트로 칠하면 무엇이 중요한지 사라진다.
중립축
순수 회색이 아니라 따뜻한 색을 섞은 6단계.
--color-canvas
#FAF8F4
페이지 지면
--color-surface
#FFFFFF
카드 — 지면보다 밝다
--color-sunken
#F2EFE9
입력·코드·잠금 행
--color-ink-900
#17140F
제목
--color-ink-700
#3B352D
본문
--color-ink-500
#6B6255
보조
--color-ink-300
#9A9184
흐림
--color-ink-200
#CFC8BC
보더 강
--color-ink-100
#E6E1D8
보더 약
액센트·시맨틱
액센트 대비는 흰 배경에서 6.6:1 이다.
--color-accent
#9C3D2E
액션 — 화면당 강하게 한 곳
--color-accent-weak
#F4E7E3
액센트 배경
--color-ok
#2F6B4F
완료
--color-warn
#8A6414
주의 · 샘플 데이터 라벨
--color-danger
#A03227
위험 — 면으로 칠하지 않는다
테마 프리셋
공개 화면의 브랜드 색만 갈아 끼운다. 지면과 중립축은 그대로다.
딥 브릭
#9C3D2E
먹빛
#2E2A24
황토
#8A6414
활자
한글 본문은 Pretendard, 숫자·필드키·정책 SQL 은 JetBrains Mono.
업종을 고르고, 채팅으로 고치고, 배포합니다
본문 15px — 설명 문단에 쓴다. 문장이 길어지는 자리다.
본문 14px — 화면 대부분이 이 크기다. 고밀도 실무 도구의 기준선.
메타 12px — 보조 설명과 캡션.
1,240,000원 · 2026-09-09 · tenant_id = t_seum
create policy tenant_isolation on customers
using (tenant_id = current_setting('app.tenant_id')::uuid);컨트롤
반경 2단계(6px 컨트롤 / 12px 카드), 그림자 2단계.
필수 상태 3종
로딩은 스켈레톤으로, 빈 상태는 예시와 함께, 에러는 복구 경로와 함께.
로딩
빈 상태
고치고 싶은 것을 문장으로 적으세요.
잠금(거부)
고객 표 전체 삭제
고객·딜·활동은 모든 CRM 이 공유하는 고정 구조라 지울 수 없습니다.
모션
180ms ease-out 하나로 통일. transform 과 opacity 만 움직인다.
- 진입: opacity 0→1 + translateY 6px→0
- diff 행: 32ms 씩 밀려서 들어온다
- 적용 반영: 대상 칸이 900ms 동안 액센트로 물들었다 사라진다
- prefers-reduced-motion: reduce 에서는 전부 정지한다. 예외 없음.