Tasty Design System
디자인 살펴보기
Tasty의 색, 글꼴, 간격이 화면에서 어떻게 쓰이는지 살펴보세요. 아래 예시는 사이트에 보관한 디자인 사본의 --tasty-* 토큰을 사용합니다.
이 페이지는 저장소에 보관한 디자인 사본을 사용합니다. 사본의 마지막 수정일은 입니다. 현재 디자인 원본과 다를 수 있습니다.
컴포넌트 직접 살펴보기
갤러리에서 버튼, 메뉴, 화면 배치를 직접 사용해 보세요. 각 예시에서 사용 목적과 동작, 크기와 디자인 토큰을 확인할 수 있습니다.
Brand
Logo & Wordmark
Watermelon-slice mark + monospace wordmark
원본 보기:brand-logo.htmlWatermelon Palette
The three mark colors + their token names
원본 보기:brand-palette.htmlTerminal Specimen
The product surface — black bg, ANSI colors, OSC-133 prompt
원본 보기:brand-terminal.htmlColors
ANSI 16 — Mocha
Terminal palette, normal + bright
원본 보기:color-ansi-mocha.htmlLatte — Accents
Light-theme accent ramp
원본 보기:color-latte-accents.htmlLatte — Surfaces & Text
Light theme ramp (data-theme=latte)
원본 보기:color-latte-surfaces.htmlMocha — Accents
13 Catppuccin accents
원본 보기:color-mocha-accents.htmlMocha — Surfaces
Dark elevation ramp: crust → surface2
원본 보기:color-mocha-surfaces.htmlMocha — Overlays & Text
Overlay grays and the text ramp
원본 보기:color-mocha-text.htmlSemantic — Accent Roles
Status + agent accent mapping
원본 보기:color-semantic-accents.htmlSemantic — Elevation & Text
What UI code references, not raw ramp names
원본 보기:color-semantic-elevation.htmlStates — Overlays & Selection
hover/active overlays + terminal selection, derived from is_light
원본 보기:color-states.htmlType
Monospace — D2Coding
The brand typeface: terminal, code, and metadata
원본 보기:type-mono.htmlUI Sans — Chrome
Native system sans for app chrome — capped at 14px
원본 보기:type-sans.htmlWeights & Casing
Four weights of D2Coding-driven hierarchy
원본 보기:type-weights.htmlSpacing
4px Grid
Every gap is a multiple of 4 — xs/sm/md/lg/xl only
원본 보기:spacing-grid.htmlInteractive Heights
Fixed row heights for tree / control / tab
원본 보기:spacing-heights.htmlMotion
Terminal = 0ms. UI feedback = 90–150ms. Resting states canonical; transitions decorative.
원본 보기:spacing-motion.htmlRadius & Border
One radius (4px), one border (1px). No shadow system.
원본 보기:spacing-radius.html