본문으로 건너뛰기

Lyra 파운데이션

고밀도 코드 협업 UI를 위한 base → semantic → product 계층의 독립 토큰 체계.

토큰 계층

Primitive--lyra-size-8

색과 크기의 원재료. 제품 코드에서 직접 사용하지 않는다.

Semantic--lyra-surface-inset

표면·콘텐츠·의도처럼 모드가 바뀌어도 유지되는 역할.

Product--lyra-state-merged

open·merged·diff처럼 코드 협업 도메인에 고정된 의미.

Compatibility--surface

기존 deux 컴포넌트를 Lyra 위에서 실행하기 위한 공통 별칭.

원칙

  • 정보 밀도 우선. 기본 본문은 14px, 컨트롤은 32px를 중심으로 구성한다.
  • 역할로 선택. hex나 단계가 아니라 surface, content, intent 토큰을 사용한다.
  • 색에만 의존하지 않기. 상태는 아이콘, 라벨, 텍스트를 함께 제공한다.
  • 모드 동등성. light와 dark에서 같은 semantic 이름과 위계를 유지한다.

Visual signature

Night-sky indigo · spectral signal · orbit geometry

CTA는 상태색과 분리된 indigo, 활동 밀도는 별빛 intensity, 중요한 경계는 teal에서 violet으로 흐르는 spectrum line으로 표현한다.

카탈로그