LIMDA DESIGN SYSTEM
하나의 기준으로
일관된 경험을
색·타이포·간격·모션·브랜드 시그니처·컴포넌트를 한 곳에 정의합니다. 원본은 tokens.css, 규칙 전문은 docs/design.md. 이 페이지는 그 토큰을 실제로 렌더링합니다.
00
원칙
절제된 여백한 화면에 오라 1개·대형 글래스 1개. 여백이 회복력을 말한다.
토큰이 진실색·radius·그림자·모션은 토큰 변수만. hex 하드코딩 금지.
한글 우선 조판word-break: keep-all, 본문 행간 1.7.
모션은 거들 뿐transform·opacity만, prefers-reduced-motion 존중.
01
색
로고 블루 #78B6D7 = sky-400 앵커Sky — 브랜드 스케일
50
100
200
300
400
500
600
700
800
900
Celadon — 공간 액센트 / Warm — 이원 온기
50
100
300
500
600
700
surface
border
ink
dot
중립 · 잉크
cream#F7F5F0
canvas#F1F3F5
surface#FBFBFA
line#E1E2E4
secondary-text#566571
muted-text#8A97A0
ink#383838
ink-strong#2A2A2A
시맨틱 (역할)
primary (CTA)
주요 버튼 — 밝은 로고블루 + 잉크 텍스트(흰 텍스트 금지)--sky-400ring (focus)
포커스 링--sky-500dot / mark
블루 닷·마크·틴트 전용(버튼 배경 금지)--sky-400destructive
삭제·위험#C15E6Baccent bg
연한 강조 배경--sky-100정의 필요다크 모드 값 — 각 시맨틱 색의 다크 대응(라이트 온리라 아직 없음)
02
타이포그래피
웨이트 400/500만 (감성 숫자 300 예외)한글 본문 · Pretendard
회복력을 진료하는 프라이빗 한의원. 오늘도 몸을 돌보러 오셨네요.
헤더·숫자 · Schibsted Grotesk
Limda 28 · 1,240
이탤릭 캡션 · Instrument Serif
“시작한 몸은 이미 달라지고 있어요”
감성 지수 전용 · Chakra Petch 300
72.4
스케일 (실사용)
h1clamp(26–31px)가나다 Ag
h222px가나다 Ag
본문15px / 1.7가나다 Ag
라벨13px가나다 Ag
캡션11.5px가나다 Ag
정의 필요역할 기반 타입 토큰 (screenTitle·articleBody 등) — 지금은 스케일만
03
스페이싱 · 그리드
현재 간격은 Tailwind 임의값으로 조판합니다. seed처럼 4px 그리드 토큰 스케일이 아직 성문화되지 않았어요.
정의 필요스페이싱 토큰 스케일 — 예: --space-1(4) · 2(8) · 3(12) · 4(16) · 6(24) · 8(32) · 10(40) · 14(56) / global-gutter 16px
04
형태 · Radius
sm8px
(기본)12px
lg20px
xl28px
pill9999px
xl(28)은 감성 서피스(오라·글래스) 전용. 임의 radius(9/26px 등) 금지 — 이 스케일로 수렴.
05
엘리베이션
잉크 #383838 기반 그림자e1
e2
e3
float(glass)
그림자는 필요한 곳만. 감성 서피스는 글래스(blur+saturate) + float 섀도.
06
모션
150ms
dur-1탭·색 전환250ms
dur-2진입·전개400ms
dur-3큰 전환·오라이징 --ease-soft cubic-bezier(0.2,0,0,1) · transform·opacity만 · reduced-motion 존중.
정의 필요진입/퇴장/강조 이징 곡선 (seed의 enter·exit·expressive) — 지금은 1곡선
07
상태 (State)
포커스는 정의됨 — :focus-visible 2px sky 링. 나머지 인터랙션 상태는 컴포넌트별로 제각각이라 표준이 필요합니다.
focus2px 링 (정의됨)
정의 필요hover
정의 필요pressed
정의 필요selected
정의 필요disabled
08
브랜드 시그니처
limda 전용 시각 언어블루 닷
불릿·구분·강조점. 마크/틴트 전용(버튼 배경 아님).
오라 (상태 washes)
good
watch
alert
info
글래스 · 딥 모먼트
프로스티드 글래스
blur 28 · saturate
blur 28 · saturate
딥 모먼트
sky-900 · 사이트당 1곳
sky-900 · 사이트당 1곳
로고/슬로건 SVG 변형·크롭 금지. 일러스트 생성 금지 — 사진→오라→블루 닷→여백 순.
09
라이팅 (보이스 & 톤)
초안 — 성문화 대상- 익숙한 말로. 시스템 용어 대신 사용자가 아는 말 (설정 아님 → 알림).
- 능동태·명확하게. 버튼은 할 일을 그대로 (‘발행’ → 토스트 ‘발행됨’).
- 에러는 해결책까지. 무엇이 잘못됐고 어떻게 고치는지. 사과·모호함 금지.
- 따뜻하게, 담백하게. 느낌표 아껴서. 긍정형 우선.
정의 필요보이스&톤 정식 문서 — 위 초안을 확정하고 예시 문구(온보딩·에러·빈 상태) 채우기
10
접근성 · 포용
✓ focus-visible 링
✓ 한글 keep-all · 행간 1.7
✓ prefers-reduced-motion
✓ 탭 타깃 지향
정의 필요대비 기준(APCA/WCAG) 명문화 · 다국어(EN/JA/ZH) 조판 원칙 — seed의 Inclusive/International Design
11
컴포넌트
shadcn 기반 + 커스텀버튼 3종
주요 (CTA)보조고스트
칩 · 카드
연락함완료추후연락
카드surface · line · radius 12 · e1
글래스 패널감성 서피스 · radius 28
전체 스니펫·상태 규격은 docs/design.md §3·§6.
→
채워야 할 것
seed엔 있는데 우리엔 아직 없는 것 — 원장님이 정의- 다크 모드 팔레트지금은 라이트 온리. seed는 라이트/다크 role-based. → 각 시맨틱 색의 다크 값 정의
- 스페이싱 토큰 스케일간격을 tailwind 임의값으로 씀. seed는 x0_5(2px)~x32(64px) 토큰. → --space-1…을 4px 그리드로 정의
- 상태(State) 매트릭스focus-visible만 있음. hover·pressed·selected·disabled의 오버레이/투명도 규칙 없음 → 표준화
- 모션 이징 확장ease-soft 1종. seed는 enter/exit/expressive/easing 4곡선. → 진입·퇴장 곡선 추가
- 역할 기반 타입 토큰스케일만 있음. screenTitle·articleBody 같은 "역할" 텍스트 토큰 없음 → 정의
- 포용적·국제 디자인한글 keep-all·reduced-motion은 있으나 대비(APCA)·다국어 조판 원칙 문서 없음 → 작성
- 보이스 & 톤 문서규칙이 코드에 흩어져 있음 → 한 페이지로 성문화(아래 라이팅 초안 기반)