Design System

홈, 문서, 위키와 프로젝트가 같은 언어로 보이고 작동하도록 토큰과 컴포넌트, 행동 규칙을 하나의 계약으로 관리합니다.

Core principleRole over value.

화면마다 값을 고르지 않고 의미가 있는 역할을 선택합니다.

Surface system

Stage

Workbench

Sheet

Implementation

--sys-*shadcn/uiBase UI

Reference logic

Atlassianroles
Geistdensity
shadcn/uitokens

Foundations

색상, 타이포그래피, 간격과 레이아웃의 공통 기준입니다.

Surface / Three modes

STAGE--sys-stage

상상을
코드로.

WORKBENCH--sys-workbench

찾고, 읽고,
실행합니다.

SHEET--sys-sheet

사람과 기록을
또렷하게.

Color palette

Surface

페이지와 컴포넌트가 놓이는 다섯 단계의 기본 재질

Stage--sys-stageoklch(0.125 0.023 236)

Workbench--sys-workbenchoklch(0.17 0.028 236)

Raised--sys-workbench-strongoklch(0.205 0.032 236)

Sheet--sys-sheetoklch(0.975 0.014 218)

Sheet muted--sys-sheet-mutedoklch(0.94 0.024 218)

Content

텍스트와 경계가 표면 위에서 만드는 기본 대비

Ink--sys-inkoklch(0.17 0.025 236)

Ink muted--sys-ink-mutedoklch(0.35 0.032 232)

Inverse--sys-ink-inverseoklch(0.955 0.012 218)

Inverse muted--sys-ink-inverse-mutedoklch(0.75 0.026 220)

Rule--sys-ruleoklch(0.79 0.025 220)

Rule inverse--sys-rule-inverseoklch(0.31 0.035 234)

Brand

행동과 LIKELION TUK의 인상을 만드는 고유 색

Bold--sys-brand-boldoklch(0.49 0.17 234)

Accent--sys-brand-accentoklch(0.86 0.075 215)

On bold--sys-brand-on-boldoklch(0.955 0.012 218)

On accent--sys-brand-on-accentoklch(0.12 0.025 236)

Signal--color-signaloklch(0.86 0.17 96)

Feedback

정보·성공·주의·위험·포커스를 구분하는 상태 색

Information--sys-information-on-darkoklch(0.78 0.075 215)

Positive--sys-positive-on-darkoklch(0.76 0.10 155)

Warning--sys-warning-on-darkoklch(0.80 0.11 80)

Danger--sys-danger-on-darkoklch(0.74 0.15 25)

Focus / Sheet--sys-focusoklch(0.63 0.18 235)

Focus / Workbench--sys-focus-on-darkoklch(0.86 0.075 215)

Semantic color roles

Canvas

페이지 기본 재질

SHEET

--background--sys-sheet

WORKBENCH

--background--sys-workbench

Raised

한 단계 구분되는 구획

SHEET

--muted--sys-sheet-muted

WORKBENCH

--muted--sys-workbench-strong

Text / primary

제목·본문 기본 전경

SHEET

--foreground--sys-ink

Ag 한글

WORKBENCH

--foreground--sys-ink-inverse

Ag 한글

Text / muted

설명·보조 메타데이터

SHEET

--muted-foreground--sys-ink-muted

Ag 한글

WORKBENCH

--muted-foreground--sys-ink-inverse-muted

Ag 한글

Border / default

행·패널·입력 경계

SHEET

--border--sys-rule

WORKBENCH

--border--sys-rule-inverse

Action / bold

행동 그룹의 대표 행동 1개

SHEET

--primary--sys-brand-bold

대표 행동

WORKBENCH

--primary--sys-action-on-dark

대표 행동

Action / subtle

hover·selected의 낮은 강조

SHEET

--accent--sys-action-subtle

Selected

WORKBENCH

--accent--sys-action-subtle-on-dark

Selected

Focus

키보드 focus-visible 전용

SHEET

--ring--sys-focus

Focus

WORKBENCH

--ring--sys-focus-on-dark

Focus

Type / Composite roles

Display--sys-type-display-*clamp(4rem, 10vw, 10rem) · 700 · 0.82 · −0.08emHome hero와 signature scene 전용

상상력.

Section--sys-type-section-*clamp(2.3rem, 4.8vw, 4.6rem) · 700 · 1.10 · −0.06em에디토리얼 route의 주요 section

작동하는 결과까지.

Title--sys-type-title-*clamp(1.75rem, 3vw, 3rem) · 700 · 1.10 · −0.04emfeature·route·large panel 제목

만들면서 배우는 기록

Heading--sys-type-heading-*1.25rem / 20px · 600 · 1.40 · −0.025emcomponent·dialog·panel 제목

프로젝트 공개 상태

Body L--sys-type-body-lg-*1rem / 16px · 400 · 1.75rem / 28px · 0긴 본문과 읽기 중심 화면

설명은 읽는 속도를 방해하지 않는 폭과 행간을 유지합니다.

Body M--sys-type-body-*0.875rem / 14px · 400 · 1.5rem / 24px · 0짧은 설명·목록·component body

현재 상태와 다음 행동을 짧고 분명하게 설명합니다.

UI--sys-type-ui-*0.875rem / 14px · 500 · 1.25rem / 20px · 0button·tab·field label

프로젝트 저장

Meta--sys-type-meta-*0.75rem / 12px · 600 · 1rem / 16px · +0.06em짧은 분류·상태·기술 label

CORE · UPDATED 07.27

Code--sys-type-code-*0.75rem / 12px · 400 · 1.25rem / 20px · 0token·경로·코드·식별자

--sys-action

Spacing / 4px core

Spacing scale

Spacing tokens
Token	Value	Use
`--sys-space-0-5`	2px	optical correction only
`--sys-space-1`	4px	micro inset·icon correction
`--sys-space-1-5`	6px	compact control anatomy only
`--sys-space-2`	8px	icon–label·dense inline gap
`--sys-space-3`	12px	field stack·compact cell padding
`--sys-space-4`	16px	default control group·row padding
`--sys-space-5`	20px	large control padding·small gutter
`--sys-space-6`	24px	panel padding·default grid gap
`--sys-space-8`	32px	compact content block
`--sys-space-10`	40px	subsection separation
`--sys-space-12`	48px	large content group
`--sys-space-16`	64px	major content break
`--sys-space-20`	80px	large layout break
`--sys-space-24`	96px	page section minimum
`--sys-space-36`	144px	editorial section maximum

Layout / Shared frame

DESKTOP FRAME100rem max

READING COLUMN46rem

GUTTER · 20–72px12 COLUMNS

--sys-container-maxwide 화면의 외곽선: 100rem / 1600px
--sys-gutter20–72px responsive page inset: clamp(1.25rem, 4vw, 4.5rem)
--sys-reading-max긴 본문 최대 폭: 46rem / 736px
--sys-grid-columnsdesktop composition: 12
--sys-section-space96–160px section rhythm: clamp(6rem, 11vw, 10rem)
--sys-navigation-heightglobal navigation: 4rem / 64px

Shape / Rule before shadow

Radius

--sys-radius-control0px

button·input·badge의 Core 기본값

--sys-radius-surface0px

panel·dialog·empty의 구조 경계

--sys-radius-workbench6px

Docs 같은 고밀도 작업면 내부에만 허용

--sys-radius-round999rem

avatar·progress dot only

Rule & depth

Rule and depth tokens
Token	Value	Use
`--sys-rule-hair`	`1px`	section·row·panel boundary
`--sys-rule-strong`	`2px`	selected·focus·active indicator
`--sys-shadow-raised`	`0 1px 2px oklch(0.08 0.02 232 / 0.18), 0 12px 32px -20px oklch(0.08 0.02 232 / 0.42)`	popover·floating toolbar
`--sys-shadow-overlay`	`0 2px 8px oklch(0.08 0.02 232 / 0.22), 0 28px 72px -24px oklch(0.08 0.02 232 / 0.58)`	dialog·modal only

Icon

--sys-icon-sm16px

button·metadata

--sys-icon-md20px

navigation·field affordance

--sys-icon-lg24px

empty state·feature marker

Components

프로젝트와 위키에서 사용하는 핵심 UI와 상태를 확인합니다. 이 섹션에 명시된 항목만 새 화면에서 지원하는 공개 컴포넌트 계약입니다.

Action / Button

WORKBENCH

Docs · console · dark tool

프로젝트12개의 결과

SHEET

Wiki · record · editorial

개인 기록최근 수정 07.27

코드 보기코드 닫기

TSX

1import { ArrowRight } from "lucide-react"2
3import { Button } from "@/components/ui/button"4
5export function ProjectActions() {6  return (7    <div className="flex flex-wrap gap-2">8      <Button type="button">프로젝트 추가</Button>9      <Button type="button" variant="outline">10        문서 보기11        <ArrowRight data-icon="inline-end" aria-hidden="true" />12      </Button>13    </div>14  )15}

VARIANTS

한 화면에서 위계 차이만 빠르게 비교합니다.

Primarydefault

Secondarysecondary

Outlineoutline

Ghostghost

Destructivedestructive

Linklink

위계 선택 기준

Primarydefault

surface가 매핑한 대표 행동 1개

REST: fill primary · rule primary
HOVER: fill primary 84% + foreground

Secondarysecondary

대표 행동을 보조하는 안전한 행동

REST: fill secondary 16% · rule secondary 42% + border
HOVER: fill secondary 24% · rule secondary 62% + border

Outlineoutline

동일 위계의 보조 행동

REST: fill transparent · rule border
HOVER: fill accent 20% · rule primary 60% + border

Ghostghost

toolbar와 낮은 위계 행동

REST: fill transparent · rule transparent
HOVER: fill accent 34%

Destructivedestructive

되돌리기 어려운 행동

REST: fill danger 14% · rule danger 36%
HOVER: fill danger 22% · rule danger 58%

Linklink

문장 안의 action; navigation은 Link 사용

REST: fill transparent · rule none
HOVER: underline · offset 4px

SIZES

색을 제거하고 실제 높이와 label 밀도만 비교합니다.

24pxxs

비터치 dense utility

32pxsm

table·toolbar

36pxdefault

기본 Button

40pxlg

강조 action

44pxtouch

route CTA·mobile hit area

크기 규격

XSxs

비터치 dense utility

HEIGHT: 24px
TYPE: 12 / 16px · 600
INSET: 8 / 6px
GAP: 4px
ICON: 12px

SMsm

table·toolbar

HEIGHT: 32px
TYPE: 13 / 16px · 600
INSET: 12 / 10px
GAP: 6px
ICON: 14px

MDdefault

기본 Button

HEIGHT: 36px
TYPE: 14 / 20px · 600
INSET: 16 / 12px
GAP: 8px
ICON: 16px

LGlg

강조 action

HEIGHT: 40px
TYPE: 14 / 20px · 600
INSET: 24 / 16px
GAP: 8px
ICON: 16px

Touchtouch

route CTA·mobile hit area

HEIGHT: 44px
TYPE: 15 / 20px · 600
INSET: 20 / 16px
GAP: 8px
ICON: 16px

REQUIRED STATES

Radius: 0px
Gap: 4 / 6 / 8px
Icon: 12 / 14 / 16px
Focus: 2px + 2px
Motion: 150ms · translateY(1px)

Field / Search

WORKBENCH

아이콘·shortcut·result meta

SHEET

입력값·clear affordance

코드 보기코드 닫기

TSX

1import { SearchField } from "@/components/ui/search-field"2
3<SearchField4  id="project-search"5  label="프로젝트 검색"6  name="project-search"7  placeholder="이름 또는 파트로 검색…"8  description="이름과 파트를 함께 검색합니다."9/>

Height: 36px / 44px
Inset X: 12px
Type: 14/20 · mobile 16/24
Meta: 12 / 16 · 400–600
Border · radius · focus: 1px · 0px · 3px ring

Selection / View & Filter

VIEW SWITCH

한 문맥 안의 관련 패널

목표, 담당 파트와 최근 변경을 같은 상세 문맥에서 확인합니다.

FILTER STATE

결과 집합의 조건

전체 프로젝트 12개

코드 보기코드 닫기

TSX

1import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"2
3<Tabs defaultValue="overview">4  <TabsList aria-label="프로젝트 상세 보기">5    <TabsTrigger value="overview">개요</TabsTrigger>6    <TabsTrigger value="activity">활동</TabsTrigger>7  </TabsList>8  <TabsContent value="overview">프로젝트 개요</TabsContent>9  <TabsContent value="activity">최근 활동</TabsContent>10</Tabs>

2px

active indicator · radius 0

Trigger: 36px
Inset X: 12px
Type: 14 / 20 · 600
List / item gap: 4 / 6px
Focus: 2px + 2px

Status / Badge

WORKBENCH

상태 1개 · 메타데이터는 neutral

CampusEats최근 검토 07.25

Product검토 중

SHEET

색은 좁은 면적에서만 의미 전달

StudyMate최근 공개 07.27

Frontend공개

코드 보기코드 닫기

TSX

1import { Badge } from "@/components/ui/badge"2import { StatusBadge } from "@/components/ui/status-badge"3
4<div className="flex items-center gap-2">5  <Badge variant="neutral">Frontend</Badge>6  <StatusBadge tone="positive">공개</StatusBadge>7</div>

Neutral

분류·미결정

초안--border

Information

진행·검토·정보

검토 중--status-information

Positive

완료·공개·정상

공개--status-positive

Warning

주의·보완·지연

보완 필요--status-warning

Danger

오류·실패·위험

동기화 실패--status-danger

Height: 24px
Inset X: 8px
Type: 12 / 16 · 600
Indicator: 6px round
Border / radius: 1px / 0px

Feedback / Result State

SHEET / RESULT REGION

first-use · filtered-empty · error

FIRST USE

아직 등록된 프로젝트가 없습니다.

첫 프로젝트를 추가해 결과 영역을 시작하세요.

FILTERED EMPTY

조건에 맞는 결과가 없습니다.

검색어를 지우거나 필터 범위를 넓혀 보세요.

ERROR / RETRY

프로젝트를 불러오지 못했습니다.

연결을 확인한 뒤 같은 위치에서 다시 시도하세요.

코드 보기코드 닫기

TSX

1import {2  Empty,3  EmptyContent,4  EmptyDescription,5  EmptyHeader,6  EmptyTitle,7} from "@/components/ui/empty"8
9<Empty size="compact">10  <EmptyHeader>11    <EmptyTitle>등록된 프로젝트가 없습니다.</EmptyTitle>12    <EmptyDescription>첫 프로젝트를 추가해 시작하세요.</EmptyDescription>13  </EmptyHeader>14  <EmptyContent><Button size="sm">프로젝트 추가</Button></EmptyContent>15</Empty>

Default padding: 24 / 48px
Compact padding: 24px
Media / icon: 40 / 24px
Copy max: 384px
Action count: 0–2

Navigation / Link

WORKBENCH

inline은 본문 rhythm을 상속

설치 전 환경 설정 문서를 확인하고 프로젝트를 시작하세요.

기술 문서

SHEET

standalone은 44px hit area

색 기준은 외부 레퍼런스새 창에서 열림와 함께 검증합니다.

사람 위키

코드 보기코드 닫기

TSX

1import { ArrowRight } from "lucide-react"2import { TextLink } from "@/components/ui/text-link"3
4<p>5  시작하기 전에 <TextLink href="/docs" mode="inline">환경 설정 문서</TextLink>를 확인하세요.6</p>7<TextLink href="/docs">8  기술 문서 <ArrowRight aria-hidden="true" />9</TextLink>

Inline: inherit type / line
Standalone: min 44px
Gap / icon: 8 / 16px
Underline offset: 4px
Focus: 2px + 2px

Navigation / Breadcrumb

WORKBENCH

상위 경로는 링크 · 현재 위치는 텍스트

SHEET

긴 경로는 중간 단계를 접어 유지

코드 보기코드 닫기

TSX

1import {2  Breadcrumb,3  BreadcrumbItem,4  BreadcrumbLink,5  BreadcrumbList,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from "@/components/ui/breadcrumb"9
10<Breadcrumb>11  <BreadcrumbList>12    <BreadcrumbItem><BreadcrumbLink href="/docs">문서</BreadcrumbLink></BreadcrumbItem>13    <BreadcrumbSeparator />14    <BreadcrumbItem><BreadcrumbLink href="/docs">시작하기</BreadcrumbLink></BreadcrumbItem>15    <BreadcrumbSeparator />16    <BreadcrumbItem><BreadcrumbPage>소개</BreadcrumbPage></BreadcrumbItem>17  </BreadcrumbList>18</Breadcrumb>

Semantics: nav > ol
Current: aria-current=page
Separator: presentation
Type: 12.48 / 16.85 · 400
Focus: 2px + 2px

Navigation / On this page

WORKBENCH

현재 섹션은 선과 텍스트로 함께 표시

SHEET

하위 제목은 한 단계 들여쓰기

코드 보기코드 닫기

TSX

1import { OnThisPage } from "@/components/ui/on-this-page"2
3<OnThisPage4  items={[5    { id: "role", label: "문서의 역할" },6    { id: "tracks", label: "4개의 트랙" },7    { id: "usage", label: "사용 방법" },8  ]}9  activeId="role"10/>

Semantics: nav > ol
Current: aria-current=location
Levels: 2 / 3
Type: 12.48 / 16.85 · 400
Focus: 2px + 2px

Data / Table

SHEET / TABLE

명사형 열 · 행 hover · 숫자 정렬

최근 업데이트 순 · 3개 프로젝트
프로젝트	상태	파트	업데이트	이동
StudyMate	공개	Frontend	07.27	상세
CampusEats	검토 중	Product	07.25	상세
Session Archive	보완 필요	Backend	07.18	상세

코드 보기코드 닫기

TSX

1import {2  Table,3  TableBody,4  TableCaption,5  TableCell,6  TableHead,7  TableHeader,8  TableRow,9} from "@/components/ui/table"10import { StatusBadge } from "@/components/ui/status-badge"11
12<Table>13  <TableCaption>최근 업데이트 순 · 3개 프로젝트</TableCaption>14  <TableHeader>15    <TableRow>16      <TableHead>프로젝트</TableHead>17      <TableHead>상태</TableHead>18      <TableHead className="text-right">업데이트</TableHead>19    </TableRow>20  </TableHeader>21  <TableBody>22    <TableRow interactive>23      <TableCell>StudyMate</TableCell>24      <TableCell><StatusBadge tone="positive">공개</StatusBadge></TableCell>25      <TableCell className="text-right tabular-nums">07.27</TableCell>26    </TableRow>27  </TableBody>28</Table>

48px minimum rowgrows with wrapped content

Header: 40px
Cell inset: 12px
Body minimum: 48px
Numeric: right / tabular
Compact: horizontal scroll

Dialog / Alert dialog

ALERT DIALOG

되돌릴 수 없는 작업에만 사용

코드 보기코드 닫기

TSX

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogTitle,10  AlertDialogTrigger,11} from "@/components/ui/alert-dialog"12
13<AlertDialog>14  <AlertDialogTrigger render={<Button variant="destructive" />}>15    프로젝트 삭제16  </AlertDialogTrigger>17  <AlertDialogContent>18    <AlertDialogHeader>19      <AlertDialogTitle>StudyMate 프로젝트를 삭제할까요?</AlertDialogTitle>20      <AlertDialogDescription>21        공개 이미지 4개와 활동 기록 18개가 함께 제거됩니다. 이 작업은 되돌릴 수 없습니다.22      </AlertDialogDescription>23    </AlertDialogHeader>24    <AlertDialogFooter>25      <AlertDialogCancel>취소</AlertDialogCancel>26      <AlertDialogAction variant="destructive">StudyMate 삭제</AlertDialogAction>27    </AlertDialogFooter>28  </AlertDialogContent>29</AlertDialog>

Pattern: AlertDialog
Use: 되돌릴 수 없는 작업
First focus: 취소
Action label: 대상 + 삭제
Surface: Dialog 공통

Docs code block

TypeScript

1export const project = {2  name: "StudyMate",3  status: "published",4  stack: ["Next.js", "TypeScript"],5}

코드 보기코드 닫기

TSX

1import { DocsCodeBlock } from "@/components/ui/docs-code-block"2
3<DocsCodeBlock language="typescript" code={code} />

Behavior

상호작용, 접근성, 모션과 반응형 동작의 공통 규칙입니다.

Interaction / Core states

Core interaction states
State	Visual	Timing	Accessibility
Hover	fill 또는 rule의 대비를 한 단계 높임	160ms	필수 정보는 hover에만 두지 않음
Press	색 또는 1px 이하 변위로 즉시 피드백	160ms fast transition	reduced motion에서는 변위 없이 같은 상태를 전달
Focus	단일 2px outline + 2px offset · 복합 필드 3px ring	즉시	:focus-visible; surface별 --ring 매핑
Disabled	크기는 유지하고 대비를 낮춤	없음	disabled 또는 이유가 있는 aria-disabled
Loading	label 폭과 control 위치 유지	작업 중	aria-busy와 구체적인 진행 문구
Empty	기존 결과 영역을 유지	없음	빈 이유와 다음 행동
Error	원인 가까이에 Danger 역할 사용	없음	수정 또는 재시도 방법
Cursor	pointer·text·not-allowed·wait·grab·resize	즉시	커서만으로 상태를 전달하지 않음

Access / Required behavior

Required interface behavior
Area	Requirement
Semantics	행동은 button, 이동은 Link, 데이터 비교는 table을 사용합니다.
Focus	단일 컨트롤은 2px outline과 2px offset, 복합 필드는 3px group ring을 가집니다.
Forms	label·name·autocomplete를 제공하고 오류는 해당 field 바로 뒤에 둡니다.
Async	변경 결과는 aria-live, 진행 중 control은 aria-busy로 전달합니다.
Content	빈 값, 긴 이름, 좁은 폭에서도 정보와 다음 행동을 잃지 않습니다.
Motion	reduced motion에서 이동을 제거하고 같은 정보 구조를 유지합니다.

Motion / Role before duration

Motion tokens
Role	Token	Duration	Use
Instant	`--sys-motion-instant`	`100ms`	press · immediate acknowledgement
Fast	`--sys-motion-fast`	`160ms`	hover · compact feedback
State	`--sys-motion-state`	`260ms`	selection · filter · result change
Layout	`--sys-motion-layout`	`420ms`	panel · nearby layout transition
Enter / Exit	`--sys-motion-enter / --sys-motion-exit`	`520ms / 210ms`	entrance는 맥락을 보여주고 exit는 짧게

Reduced motion에서는 애니메이션 대신 완료 상태를 즉시 보여줍니다.

Responsive / Information order

Responsive behavior
Range	Width	Required behavior
Compact	`320–639px`	1열, secondary navigation은 overlay로 전환, table horizontal scroll
Small	`640–767px`	2열 허용, primary action full-width 해제
Medium	`768–1023px`	navigation 확장, secondary rail 조건부 표시
Large	`1024–1279px`	12열 grid, 2–3열 composition
Wide	`1280px+`	100rem container, reading width 유지, 외곽 여백만 확장