← tasteMarkdown

Core taste rules

The 25 rules that matter most, in priority order. Every other guide in this kit elaborates one of them.

Condensed from: all 14 sources (see list_sources). Where they disagree, the more specific rule won.

Decide before you draw

  1. Write the one-line brief first: who it is for, and the one thing the screen must make them feel or do. If you cannot write it, ask before building.
  2. Commit to one direction (pick_direction) with a named signature move: a type treatment, a layout idea, a material, a motion moment. Generic is what a non-decision looks like.
  3. DESIGN.md is law. If the repo has one, follow it. If it does not, write one (write_design_md) before the second screen, so every later session builds in the same style.

Type

  1. Two families at most (plus an optional mono). Inter, Roboto, Arial or bare system-ui as the only face reads as "default"; if you keep a neutral sans for UI, pair it with a display face that has a voice, or set it with conviction (tight tracking, big size contrast).
  2. Use a modular scale: about 1.2 for apps, 1.25 to 1.333 for marketing. Display tracking -0.02em to -0.04em; body 0. All-caps only for short functional labels (table headers, tags) at 11 to 12px with +0.06em to +0.1em; never a tiny tracked-caps eyebrow above every heading.
  3. Readable text: body 16 to 18px on the web (13 to 14px only for dense app UI), line-height 1.5 to 1.65 for body and 1.05 to 1.2 for headings, line length 45 to 75 characters. Tabular numerals wherever numbers align.
  4. Hierarchy comes from size and weight, not colour. Three weights at most.

Colour

  1. Tinted neutrals plus one accent. Give the grey ramp a slight warm or cool hue, and keep the accent to roughly 10% of the screen: primary action, focus, the key datum.
  2. No pure #000 on #fff: use near-black (#111 to #1c1c1c) and an off-white. Text contrast 4.5:1, large text and UI parts 3:1.
  3. No purple-to-blue gradients, no gradient-filled headline text, no rainbow glows. A gradient is fine when it stays in one hue family (a few % of lightness) or is part of the actual brand.
  4. Dark mode is not inverted: raise surfaces with lighter tones instead of shadows, desaturate the accent a little, and use off-white text (about #e6e6e6), not #fff.

Layout and space

  1. 4px grid. Scale 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Section padding 96 to 160px on desktop, 56 to 96px on mobile.
  2. Proximity groups things: the space inside a group is at most half the space between groups.
  3. Few alignment edges. Left-align text by default; centre only short hero lines and single CTAs.
  4. Break the template. Avoid hero, three identical icon cards, logo strip, testimonials, CTA in that order. Vary section anatomy, use asymmetry, and give each screen one oversized element.
  5. Contain it: page content about 1200 to 1280px wide, text columns 600 to 720px.

Surfaces and components

  1. One shape family: two or three radii, and a nested radius equals the outer radius minus the padding. Separate with borders or with shadows, not both at full strength; shadows are soft, layered, low opacity and tinted toward the background.
  2. Icons: one family, one stroke width (1.5px at 24px), sized to the text they sit beside. Never emoji as UI icons.
  3. Every control has hover, focus-visible (2px ring, 2px offset), active (scale 0.97 or one shade darker) and disabled states. Touch targets are at least 44px.
  4. Design the states, not only the happy path: empty (with a first action), loading (skeletons shaped like the content), error (what happened and how to fix it), success.

Motion

  1. Animate to explain change, not to decorate. 150 to 250ms for UI and 300 to 500ms for large surfaces; ease-out on enter, for example cubic-bezier(0.23, 1, 0.32, 1); never ease-in for UI; animate transform and opacity only; never transition: all; honour prefers-reduced-motion.
  2. One signature motion moment per page. No bouncing or pulsing CTAs, and no fade-up on every section.

Copy and content

  1. Specific beats clever: name the user, the job and the number. Banned: "Unlock", "Elevate", "Seamless", "Revolutionize", "Supercharge", "cutting-edge", "In today's fast-paced world", and a "Get Started" plus "Learn More" pair.
  2. Real content only: real product screenshots, realistic data, honest proof. No lorem ipsum, no invented logos, stats or testimonials.

Verify

  1. It is not designed until you have looked at it. Screenshot at 390px and 1440px, squint for a single focal point, run audit_ui, fix, and look again.

Read by your agent through get_guide("core") in the taste MCP.