# taste.md

Read this before writing any UI. These are my defaults.
When they conflict with a library default, mine win.

Each rule carries its why. A rule without a why is a rule an agent will misapply the first time it meets a case I didn't list.

## Pick a mode by product type

Taste is not one look. Pick the mode first, then apply it without mixing.

**Mode A: minimal tool.** Dashboards, admin, internal tools, reports. The default.
**Mode B: juicy consumer.** Games and playful consumer apps. The deliberate opposite of A.
**Mode C: editorial brand.** Portfolio, blog, marketing. A quiet reading base with expressive brand moments.

Why modes: if this file described one look, every product would come out wearing the same outfit, and half of them would be wrong. The judgment "shadows are a feature in a game and clutter in a dashboard" is as much my taste as any single rule below.

## Mode A: minimal tool (the default)

- **Light mode by default.** Most people run light mode, so the common case ships first. Always build both and respect the system preference. Dark is a toggle, never the opener.
- **No drop shadows.** Separation comes from hairline borders and tonal layering. I find edge shadows on cards and tables dated, and I removed them from three projects in a row before this line existed. One exception: a soft shadow on a true floating layer, like a modal.
- **Declutter aggressively.** One rich table beats a page of stat tiles. "The table should do everything" is a sentence I said reviewing a dashboard with seven charts I never looked at. If I don't look at a widget, cut it.
- **Progressive disclosure over density.** Show the essentials, collapse everything else behind a tap or a hover. This line exists because a tool once showed me seven score bars per row and I could not read any of them. Density feels like power and reads like noise.
- **Documents get the same treatment.** Organize a report around the reader's questions, one-line answer visible, evidence collapsed. A linear section-by-section report is a wall; a question with a visible answer is a door.
- **Strong typography.** Tight type scale, hierarchy from weight and spacing, tabular numerals for anything with figures so columns of numbers actually align.
- **Time reads as days, not dates.** "7d ago", never "July 21". The question is always "how stale is this", so answer it without making the reader do date math.

## Mode B: juicy consumer

- **Dark, saturated, tactile.** Shadows, motion, haptics and sound are features here, not clutter. In a play context the fun is the job, so the restraint rules of Mode A would be a bug, not discipline.
- **An expressive display font. Buttons that feel pressable.** A playful product that types like a spreadsheet breaks its own promise.

## Mode C: editorial brand

- **Quiet where you read, expressive at the brand moments.** Reading is the product, so the body stays refined and minimal. The brand shows up in deliberate moments: one gradient wordmark, one shader moment, subtle sound. Juice is layered on top of calm, never mixed into it.
- **Clash Display for headings.** It's the face of my portfolio and it's becoming part of my personal brand. Repetition is what turns a font choice into an identity.

## All modes

- **Clear hierarchy, deliberate typography, no clutter.** The non-negotiables. Every mode above is a different surface treatment over the same skeleton.
- **Self-hosted variable fonts, never a font CDN.** No third-party request just to render text, and one variable file covers every weight.
- **Every product forks its theme from one shared base.** They share DNA without looking identical, the same way the modes share the skeleton.
- **Always ship a reduced motion and mute opt-out.** Motion and sound are seasoning. Letting people turn them off is respect, and it costs almost nothing.