L4T / DESIGN DOC
Design doc.
L4T와 L4T UI를 같은 규칙으로 유지하기 위한 문서입니다. 토큰, 상태, 컴포넌트, 아이콘, 그리고 넣지 말아야 할 것까지 적었습니다.
Principles
좋은 디자인은 더하는 것이 아니라 덜어내는 것.
설명이 없어도 이해되는 것은 지웁니다. 색·간격·글자·radius는 토큰에서 가져오고, 반응형 프레임을 먼저 생각합니다. 이 문서도 같은 원칙으로 짧게 유지합니다.
Foundations
색은 의미로만. 크기와 간격은 같은 스케일을 공유합니다.
| Token | Value | Use |
|---|---|---|
--ui-page |
#08090a | 페이지 바탕 |
--ui-surface |
#0d0d10 | 카드·패널 |
--ui-surface-2 |
#141419 | 입력·칩·버튼 |
--ui-rule |
#202127 | 컴포넌트 경계 |
--ui-fg |
#e9e9ec | 주요 글자 |
--ui-body |
#b6b7bf | 본문 |
--ui-muted |
#80808a | 보조 글자 |
--ui-green |
#34d399 | 유일한 액센트 |
--ui-green-bg |
#12341f | 선택 상태 |
--ui-slot-on-bg |
#15381f | 시간표 예약 가능 |
--ui-slot-full |
#b3c3ba | 정원 참 |
--ui-slot-wait |
#d7b7aa | 대기/초과 |
--ui-focus |
#f0f0f4 | 키보드 포커스 |
Type & space
--ui-text-2xs..5xl (10–24px),
--ui-space-1..12 (2–64px). 본문은 16px, mono 라벨은
11–12px.
Radius & controls
--ui-r-2xs..full (2–999px). 컨트롤 높이는
--ui-ctl 32px, 주요 버튼은 40px.
Components
확장의 실제 화면에서 가져온 패턴. 각 항목은 라이브 예제로 이어집니다.
| Pattern | Parts | Live |
|---|---|---|
| App bar | AppBar · HoverMenu · FilterButton · FilterPanel · MonthNav · ProgressButton · StatusStamp | 보기 |
| Forms | Field · Input · SelectMenu · SearchField · Checkbox · Radio · Switch | 보기 |
| Pickers | DatePicker · TimePicker — calendar and time popovers instead of native OS inputs | 보기 |
| Timetable | TimeTable — -, 1/1, 0/1, full/wait tones | 보기 |
| Month grid | ReservationGrid — real 22px rows, 20px days, 3/7px dots | 보기 |
| Overlays | Tooltip · Dialog · Dropdown · Toast | 보기 |
| Cards & actions | Card · ActionLink · Callout | 보기 |
| Icons | Icon — 18 inline vectors, currentColor | 보기 |
Icons
확장에서 직접 만든 인라인 SVG. 이모지 대신 currentColor 벡터만 씁니다.
Rules
최근 디자인 리뷰에서 정한 것들. 새 화면도 같은 규칙을 따릅니다.
Do
- 토큰으로 간격·글자·색·radius를 정한다.
- eyebrow는 페이지당 하나 이하로 둔다.
- 구분선 대신 여백으로 섹션을 나눈다.
- OS 셀렉트 대신
SelectMenu를 쓴다. - OS 날짜·시간 입력 대신
DatePicker·TimePicker를 쓴다. - 조용한 다음 행동은
ActionLink: muted mono 라벨 + 벡터 화살표, 알약 없이. 카드에서는 오른쪽 정렬. 사이트 밖으로 나가면external, 새 탭 없이. - 시간표는
-,1/1,0/1을 그대로 보여 준다.
Don't
text-wrap: balance로 줄바꿈을 억지로 맞추지 않는다.- 네이티브
<select>로 OS 드롭다운을 띄우지 않는다. - 네이티브
type="date"·type="time"으로 OS 달력·시계를 띄우지 않는다. - 카드 안에 eyebrow나 header/footer hr을 넣지 않는다.
- 의미 없는 카피(이미지 설명, 중복 안내)를 넣지 않는다.
- 이모지를 아이콘처럼 쓰지 않는다.
- 표·카드·인풋 경계를 장식적인 hr로 덧칠하지 않는다.
Accessibility & responsive
키보드와 작은 화면을 나중에 붙이지 않고 처음부터 넣습니다.
Keyboard & labels
모든 컨트롤은 :focus-visible 링을 갖습니다. 메뉴·셀렉트는
listbox/option, 시간표 셀은 title·aria-label,
토스트는 role="status"를 씁니다.
Responsive frames
1120px 콘텐츠, 40/32px 거터, 900/760/680/480px 브레이크포인트. 앱바는 wrap, 시간표는 sticky 열 + 내부 스크롤, 페이지는 넘치지 않습니다.
Files
라이브러리와 L4T 페이지의 경계.
ui/styles/{tokens,base,components,fonts,index}.css — 라이브러리 CSS
ui/components/*.astro, icons.ts — Astro 래퍼와 아이콘
ui/components/ui.js — 호버 메뉴·셀렉트·패널·다이얼로그·피커 동작
src/pages/design/{index,docs}.astro — 쇼케이스와 이 문서
src/layouts/DesignLayout.astro — 디자인 페이지 셸
src/layouts/L4tHead.astro — 모든 페이지 공통 head (메타·공유 미리보기·아이콘·JSON-LD)
src/pages/*, src/layouts/L4tLayout.astro — 소비자 페이지 (같은 라이브러리 사용)
ui/l4t-design.md — 저장소용 설계 문서