taste:
id: sky
name: Sky
summary: >-
A playful retro ecommerce interface balancing compact high-contrast layout, tactile shadows, and
soft sky-blue radial washes.
app_type: WEBSITE
project_types:
- ecommerce
styles:
- playful
- retro
industry: retail-consumer
aesthetics:
- playful
- retro
tags:
- playful
- retro
theme:
default_mode: LIGHT_MODE
palette_note: >-
Only the 500 anchor is provided per palette; the full 17-step ramp (100-900) is derived from
it by the system's heuristic shade tool.
palettes:
neutral:
'500': '#767676'
description: Balanced slate grey matching the brand's physical neutral ramp.
brand:
'500': '#0A0A0A'
description: Deep charcoal ink anchoring the retro-minimalist framework.
danger:
'500': '#E11D48'
warning:
'500': '#F59E0B'
success:
'500': '#10B981'
info:
'500': '#06B6D4'
accent:
'500': '#8FD5FF'
colors:
background:
light: '#FFFFFF'
dark: neutral/900
foreground:
light: '#0A0A0A'
dark: neutral/100
card:
light: neutral/100
dark: neutral/850
card-foreground:
light: neutral/900
dark: neutral/100
popover:
light: neutral/100
dark: neutral/850
popover-foreground:
light: neutral/900
dark: neutral/100
primary:
light: brand/900
dark: brand/100
primary-foreground:
light: neutral/100
dark: neutral/900
secondary:
light: neutral/200
dark: neutral/800
secondary-foreground:
light: neutral/900
dark: neutral/100
muted:
light: neutral/150
dark: neutral/800
muted-foreground:
light: neutral/700
dark: neutral/350
accent:
light: neutral/200
dark: neutral/800
accent-foreground:
light: neutral/900
dark: neutral/100
destructive:
light: danger/600
dark: danger/400
destructive-foreground:
light: neutral/100
dark: neutral/900
border:
light: neutral/200
dark: neutral/800
input:
light: neutral/300
dark: neutral/700
ring:
light: brand/500
dark: brand/400
chart-1:
light: brand/500
dark: brand/300
chart-2:
light: accent/500
dark: accent/300
chart-3:
light: success/500
dark: success/300
chart-4:
light: warning/500
dark: warning/300
chart-5:
light: danger/500
dark: danger/300
sidebar:
light: neutral/150
dark: neutral/900
sidebar-foreground:
light: neutral/900
dark: neutral/100
sidebar-primary:
light: brand/900
dark: brand/100
sidebar-primary-foreground:
light: neutral/100
dark: neutral/900
sidebar-accent:
light: neutral/250
dark: neutral/800
sidebar-accent-foreground:
light: neutral/900
dark: neutral/100
sidebar-border:
light: neutral/200
dark: neutral/800
sidebar-ring:
light: brand/500
dark: brand/400
radius:
base:
value: 1.125rem
description: 18px base radius ensuring rounded-xl maps perfectly to the measured 22px.
shadows:
xs:
value: 0 1px 2px rgba(0,0,0,0.05)
sm:
value: >-
color(srgb 1 1 1 / 0.1) 0px 0px 0px 1px inset, color(srgb 1 1 1 / 0.9) 1.8px 3px 0px -2px
inset, color(srgb 1 1 1 / 0.8) -2px -2px 0px -2px inset, color(srgb 1 1 1 / 0.6) -3px -8px
1px -6px inset, color(srgb 0 0 0 / 0.12) -0.3px -1px 4px 0px inset, color(srgb 0 0 0 /
0.2) -1.5px 2.5px 0px -2px inset, color(srgb 0 0 0 / 0.2) 0px 3px 4px -2px inset,
color(srgb 0 0 0 / 0.1) 2px -6.5px 1px -4px inset, color(srgb 0 0 0 / 0.1) 0px 1px 5px
0px, color(srgb 0 0 0 / 0.08) 0px 6px 16px 0px
md:
value: color(srgb 1 1 1 / 0.1) 0px 0px 0px 1px inset, color(srgb 0 0 0 / 0.15) 0px 8px 24px 0px
lg:
value: color(srgb 1 1 1 / 0.1) 0px 0px 0px 1px inset, color(srgb 0 0 0 / 0.2) 0px 12px 32px 0px
xl:
value: color(srgb 1 1 1 / 0.1) 0px 0px 0px 1px inset, color(srgb 0 0 0 / 0.25) 0px 20px 48px 0px
gradients:
brand_wash:
value: 'radial-gradient(at 50% 30%, #9DD5F1, #8FD5FF)'
fonts:
sans:
family: DM Sans
description: Clean, high-legibility geometric UI face
display:
family: Bricolage Grotesque
description: Characterful, playful retro-grotesque display face
mono:
family: DM Sans
description: Clean geometric face used strictly for measurements and metrics
typography:
hero:
font: display
size_px: 56
line_height_px: 60
weight: 400
letter_spacing_em: -0.01
transform: none
title:
font: display
size_px: 36
line_height_px: 42
weight: 400
letter_spacing_em: 0
transform: none
heading:
font: display
size_px: 24
line_height_px: 32
weight: 400
letter_spacing_em: 0
transform: none
body:
font: sans
size_px: 14
line_height_px: 14
weight: 400
letter_spacing_em: 0
transform: uppercase
caption:
font: sans
size_px: 12
line_height_px: 13
weight: 400
letter_spacing_em: 0
transform: uppercase
label:
font: sans
size_px: 14
line_height_px: 14
weight: 400
letter_spacing_em: 0
transform: uppercase
overline:
font: sans
size_px: 12
line_height_px: 13
weight: 400
letter_spacing_em: 0.08
transform: uppercase
style_guidelines:
visual_direction:
title: Visual Direction
recommendations:
- >-
A stark, high-contrast grid punctuated by soft, sky-blue radial gradients and heavily
rounded pill components that soften the retro-industrial layout.
- >-
Incorporate tactile, layered shadows that mimic physical stickers or retro plastic badges
floating above the canvas.
hierarchy:
title: Hierarchy
recommendations:
- >-
Structure layouts with a compact vertical rhythm, grouping items tightly with defined 12px
gaps before generous 75px section breaks.
- >-
Establish priority through pure black typography contrasted against soft sky-blue blocks
and generous white space.
layout:
title: Layout
recommendations:
- >-
Deploy a structured, multi-column grid that supports high density and allows up to
thirty-three product thumbnail slots to co-exist without clutter.
- >-
Alternate between pure white canvases and soft radial-gradient hero banners to signal
transition in content.
components:
title: Components
recommendations:
- >-
Style primary actions as highly tactile pills with a border-radius of 22px and low-opacity
overlay backdrops.
- >-
Render cards with a uniform 12px padding and explicit 1px high-contrast borders, avoiding
soft fading borders.
typography:
title: Typography
recommendations:
- >-
Feature Bricolage Grotesque in tight, uniform-light weights for expressive headings,
keeping line heights compressed.
- >-
Execute body copy in DM Sans, using small, tracked uppercase treatments for a technical
yet playful retro catalog aesthetic.
color_and_effects:
title: Color & Effects
recommendations:
- >-
Utilize the complex multi-layered shadow stack to give buttons and cards a physical,
clicky presence.
quality_bar:
title: Quality Bar
checks:
- id: hero-gradient-prominence
label: Hero Gradient Prominence
recommendation: >-
Hero sections must feature the signature sky-blue radial gradient with stark black text,
immediately establishing the playful retro personality.
- id: button-tactility
label: Button Tactility
recommendation: >-
Ensure primary buttons strictly use the 22px border radius with the multi-layered
retro-tactile shadow stack.
- id: imagery-density-check
label: Imagery Density
recommendation: >-
Maintain a high-density product grid showing at least 12-24 structured product thumbnails
per view to reflect the tactile catalog atmosphere.
- id: contrast-compliance
label: Contrast Compliance
recommendation: >-
All uppercase text must meet strict 4.5:1 contrast, especially when laid over the
signature blue gradient or neutral tints.
- id: spacing-rhythm
label: Spacing Rhythm
recommendation: >-
Enforce the tight 12px element gap alongside the generous 75px section gap to maintain the
compact yet readable layout rhythm.
active_remix:
mode: light
brand: '#0A0A0A'
display_font: Bricolage Grotesque
shape: system
depth: system
spacing: system
spacing_value: null
craft: >
# Craft (universal core + conditional craft)
How to apply this design system well. These rules contain no brand look of their own — all
per-system character comes from the tokens and taste notes above; this section only governs
how they are composed. **Precedence:** the design system above is the authority on how things
look — where its own notes conflict with a rule here, the design system wins. And the user's
request is the authority on what the screen IS — notes above that describe the source
product's screens (workspaces, dashboards, panels) are its aesthetic heritage, not an
instruction to build that kind of screen.
## Universal — applies to every screen (screen-agnostic craft)
- **Surface definition.** Every container is visually separable from what it sits on — at least
one
honest edge cue: a hairline border, a ≥4% tonal step from its parent, or a real shadow. Never a card
whose fill matches its section with no border; never nested surfaces that dissolve together.
- **Accent discipline.** The brand/primary color is a scalpel, not paint: spend it on the primary
action, the active/selected/focused state, and at most **one** brand or data highlight per screen.
Everything else rides neutral background / card / muted / border tokens. A screen flooded with brand
color reads unfinished, not bold.
- **Restraint ledger.** Beauty is also what you don't do: at most one glow and two gradient
directions
screen-wide; decoration only where content doesn't reach; no ornament between a heading and its own
action. Every decorative element must answer "what does this make clearer or more felt?" — if the
answer is "nothing," remove it.
- **Type with intent.** The measured faces/scale are fixed; character comes from *usage*, and the
move
must fit the surface — a marketing page earns a dramatic display move; a working screen earns a
crisp, tight, legible hierarchy at UI scale (display-hero type on a dense tool is a smell). Chrome
and wayfinding are never display type; data numerals are tabular (mono or sans), never the
decorative face. Headings stay roman — italics live as emphasis inside running text, not as
display styling (unless the system's own type says otherwise).
- **Anti-default.** If the screen could pass for a generic template with the colors swapped, it is
not
done. Make the brand unmistakable through the accent's *use*, the type, the radius + density, and
**one** signature detail — never by importing another surface's clichés.
- **Honest content.** Never invent proof — no made-up adoption counts, growth percentages,
testimonials, client logos, or awards. Use the user's real content, a neutral placeholder, or
leave the element out and let the layout carry it. Never hand-draw fake browser bars, phone
frames, or editor chrome around content — show the content itself, or nothing.
- **Interaction integrity.** Buttons, links, tabs, and nav labels never wrap to two lines; display
headlines wrap cleanly, never clipping mid-word; nothing overflows horizontally at any width;
keyboard focus gets an instant, clearly visible ring.
- **Token fidelity.** Every design value comes from a token: colors, radii, shadows, and fonts
from
the system's variables — never a literal hex, a hand-picked shadow, or a substitute font. For a
translucent or composited value (a scrim, a glow, a hairline over a fill), derive it from a token
(an opacity modifier or color-mix), never a literal rgba. If the system specifies square corners and
a hard shadow, the screen shows square corners and that hard shadow — not a rounded, soft substitute.
## Conditional — apply ONLY the layer that matches the screen the user asked for
**First name the screen honestly from the user's prompt.** Then apply the matching guidance. Do
not
cross layers, and **do not add elements from a layer the screen doesn't call for** — a screen that
is
not a data view must not sprout KPI tiles, charts, filter bars, or data tables to satisfy a
template.
- **If it's a data / dashboard / admin / table view:** density done well (comfortable rows, tight
control clusters, one spacing rhythm); a populated working state (real rows/cards, not empty feature
boxes); tables with aligned tabular numerals, status as badges, row hover, one visible selected row,
and control states that agree with the data shown. KPI tiles, *if the screen has them*, are
value + label + delta. **At most one** chart, of a real metric for this domain, token-colored and
axis-labeled — never a decorative sine wave or filler sparkline. Exactly one unambiguous primary
action.
- **If it's a focused task / tool / player / capture / monitor / form / wizard (not a data
view):**
the screen's real job dominates the frame; chrome recedes. Honor the screen's own nature — a player
looks like a player, a monitor like a monitor, a form like a form — with the design system's color,
type, radius, and depth applied to *those* elements. **No dashboard furniture**: no KPI tiles, no
charts, no data tables, no filter chrome unless the task itself is about that data. Real-time or
safety-critical readouts get calm, unambiguous, high-legibility treatment over decoration.
- **If it's a marketing / landing surface:** editorial art direction belongs here — section rhythm
(modulate surface temperature, density, and scale; one oversized moment; at least one full-bleed
band) and considered visual treatments. Never put this on a working app screen.
- **Mobile:** follow the platform's native idioms for the screen's type (e.g. an app screen:
compact
top bar, one focused column, a bottom tab bar, ≥44px targets, safe areas) — the same conditional
rules above still decide what content belongs.
## Imagery (universal)
- **Imagery is content, not decoration** on working screens: images are data (covers, products,
avatars, places) in purposeful containers, one consistent treatment across siblings — never a lone
photo floating in a box, never marketing's decorative fades on a work screen. When a moment needs
atmosphere, build it from the token system (tinted panels, token gradients, geometry).
