Tasty Design System
Design foundations
Explore the colours, typography, and spacing that shape Tasty. The examples below use the --tasty-* design tokens in the copy stored with this site.
This page uses a saved copy of the design system, last changed on . It may differ from the current design source.
Explore the components
Try buttons, menus, and layouts in the gallery. Each example explains when to use it, how it behaves, and which dimensions and tokens it uses.
Brand
Logo & Wordmark
Watermelon-slice mark + monospace wordmark
View source:brand-logo.htmlWatermelon Palette
The three mark colors + their token names
View source:brand-palette.htmlTerminal Specimen
The product surface — black bg, ANSI colors, OSC-133 prompt
View source:brand-terminal.htmlColors
ANSI 16 — Mocha
Terminal palette, normal + bright
View source:color-ansi-mocha.htmlLatte — Accents
Light-theme accent ramp
View source:color-latte-accents.htmlLatte — Surfaces & Text
Light theme ramp (data-theme=latte)
View source:color-latte-surfaces.htmlMocha — Accents
13 Catppuccin accents
View source:color-mocha-accents.htmlMocha — Surfaces
Dark elevation ramp: crust → surface2
View source:color-mocha-surfaces.htmlMocha — Overlays & Text
Overlay grays and the text ramp
View source:color-mocha-text.htmlSemantic — Accent Roles
Status + agent accent mapping
View source:color-semantic-accents.htmlSemantic — Elevation & Text
What UI code references, not raw ramp names
View source:color-semantic-elevation.htmlStates — Overlays & Selection
hover/active overlays + terminal selection, derived from is_light
View source:color-states.htmlType
Monospace — D2Coding
The brand typeface: terminal, code, and metadata
View source:type-mono.htmlUI Sans — Chrome
Native system sans for app chrome — capped at 14px
View source:type-sans.htmlWeights & Casing
Four weights of D2Coding-driven hierarchy
View source:type-weights.htmlSpacing
4px Grid
Every gap is a multiple of 4 — xs/sm/md/lg/xl only
View source:spacing-grid.htmlInteractive Heights
Fixed row heights for tree / control / tab
View source:spacing-heights.htmlMotion
Terminal = 0ms. UI feedback = 90–150ms. Resting states canonical; transitions decorative.
View source:spacing-motion.htmlRadius & Border
One radius (4px), one border (1px). No shadow system.
View source:spacing-radius.html