L4T UI / DESIGN SYSTEM

Dark first.
Quiet by default.

L4T에서 쓰던 버튼과 규칙을 웹 컴포넌트로 정리했습니다.

컴포넌트 보기 토큰 보기

Foundations

색은 토큰에서만. 간격과 글자 크기도 같은 스케일을 씁니다.

Color

page#08090a
surface#0d0d10
surface-2#141419
rule#202127
fg#e9e9ec
body#b6b7bf
muted#80808a
green#34d399

Type

Aa

Heading 1

Heading 2

본문 16px. 읽는 일이 먼저다.

MONO 12 — label / code / number

Space & radius

space-36
space-48
space-612
space-716
space-824

Icons

확장에서 직접 만든 인라인 SVG. 이모지 대신 currentColor 벡터만 씁니다.

chevron-down select · menu
arrow-right action
external external link
search search
calendar date picker
clock time picker
minus exclude · collapse
plus include · add
refresh refresh
prev previous
next next
up collapse
down minimize
back back
warn error
check success
close close
grip drag to reorder
puzzle browser extensions
settings settings
bell seat alerts
star favorite

Buttons

주 동작은 흰 pill, 나머지는 서피스. 링크에는 arrow 아이콘.

Variants

Sizes & icons

Text, back, icon

Usage

<Button variant="primary" icon="arrow">둘러보기</Button>

Chips & tags

선택 상태는 초록 배경. 태그는 mono uppercase.

Chips

축구장 테니스장

Tags & live

Month Day LIVE

Lists & steps

별로 고르고 끌어서 정하는 목록, 갈 곳 목록, 단계를 끝내는 바.

Pick list (.ui-pick-list)

  • 서울시 공공예약 서울 전체
  • 올림픽공원 테니스장 송파구
  • 강동구도시관리공단 강일테니스장 · 명일테니스장

Link rows (.ui-link-row)

Quick list (.ui-quick-list) — extension popup

즐겨찾기

Action bar (.ui-action-bar) and toolbar hint (.ui-toolbar-hint)

즐겨찾기 3곳

Cards & callouts

카드는 surface + rule. 설명은 callout으로 분리.

시설 정보

서남센터 테니스장 6번 코트 · 양천구

기본

조회 결과는 브라우저 로컬 저장소에만 남습니다.

예약 가능

초록 점은 예약 가능한 날짜를 뜻합니다.

주의

네트워크가 끊기면 조회가 중단됩니다.

Forms

필드는 label + control + hint/error. 컨트롤 높이는 32px.

이름 또는 초성으로 검색

다른 사이트
  • 관악테니스장 관악구 · 곧 추가돼요

포커스가 있는 동안 아래로 펼쳐진다 (.ui-search__results)

올바른 이메일이 아닙니다.

Choices

Pickers

OS 날짜·시간 입력 대신 토큰으로 그린 필드. 값은 ISO(YYYY-MM-DD / HH:MM)이고 change는 hidden input에서 올라옵니다.

Date

YYYY.MM.DD (요일)로 표시

Time

30분 간격

Ranges

날짜
시간

Overlays

툴팁은 CSS, 드롭다운은 details, 다이얼로그는 native dialog.

Tooltip

축구장 즐겨찾기

Dropdown

종목

Dialog

예약 확인

이 작업은 되돌릴 수 없습니다.

Toast

Data

표는 실제 데이터, 예약 그리드는 확장의 월간 표를 그대로.

Table

시설별 가용일
시설 구 가용일
서남센터 테니스장 6번 코트 양천구 11
보라매테니스장 1번코트 평일 주간 동작구 8
한남테니스장 1번코트 평일 주간 용산구 6

Reservation grid

Calendar

2026.11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Stats

코트
99
종목
16
추적
0

Timetable

일 보기: 시간 축 위에 회차를 얹고, 칸 안에 신청/모집과 상태를 적습니다.

2026.11.07 (토)
초록 = 예약 가능 · 회녹색/적갈색 = 정원 참 · 숫자 = 신청/모집
2026년 11월 7일 시설별 회차
시설060708091011121314151617가능제외
서남센터 테니스장 6번 코트1/10/11/20/22/4
보라매테니스장 1번코트 평일 주간1/10/11/12/3
한남테니스장 1번코트 평일 주간-0/1
가좌테니스장 주말 및 공휴일 야간 B코트1/10/11/2
신도림테니스장 11월 평일 B코트 야간 점수1/11/1
탄천센터 테니스장 1면 조명꺼짐예약 없음
보라매테니스장 3번코트 평일 주간제외됨

App bar

확장의 상단 바 구조. 사이트 선택은 호버로 열리고, 필터 박스는 아래 패널을 토글합니다.

L4T /
2026.11
조회 40/40 · 가능 12 11.05 23:51

Patterns

섹션 헤드, 내비, 푸터. 페이지는 이 셋으로 조립합니다.

Section head

주요 기능

한 화면에서 확인하고, 필요한 것만 남깁니다.

App shell

header · main · footer를 형제로 두고 각각 ui-page 폭을 씁니다.