Skip to content
livery
v1Taste · 5 sites Published 2026-10-07

ANDY's taste

0views 0downloads

ANDY's taste, measured across 5 sites (stark.et, voxide.app, goatrank.lol, miheretab.space and hackathon.stark.et). What holds on every one: a single accent, big headlines and a 4px grid. Where the sites differ, the rules give the measured range, so a new project can sit anywhere inside it and still feel like the same hand.

Free
8
Licence
0
Style
4

The Sites Behind This Taste

Paste this into Claude Code in your project. It downloads the kit, checks its hash and asks before changing anything.

Install the "ANDY's taste" design kit (v1) from Livery, then run it on this project.

1. mkdir -p .claude/skills/livery-taste-andy-9ea6f0
2. curl -fsSL "https://livery.site/k/taste-andy-9ea6f0/v1/kit.tar.gz" -o /tmp/livery-taste-andy-9ea6f0.tar.gz
3. Verify: the sha256 of /tmp/livery-taste-andy-9ea6f0.tar.gz must be 92600184858248cfdfb8fcf7777158ef9972950b7b1481e90deedfbb945a4295. If it doesn't match, stop and tell me.
4. tar -xzf /tmp/livery-taste-andy-9ea6f0.tar.gz -C .claude/skills/livery-taste-andy-9ea6f0
5. Read .claude/skills/livery-taste-andy-9ea6f0/SKILL.md and follow it. It will audit my project and ask me before changing anything.

If any response starts with "Couldn't read this site", stop and tell me. Don't continue.
Installs to .claude/skills/livery-taste-andy-9ea6f0

Levels in this kit

  • 1TokensColour, type, spacing, radii, borders and depth.
  • 2StructureComponent recipes, containers, grids and section rhythm.
  • 3FeelMotion timing and the tone of the copy.

Agents fetch livery.site/k/taste-andy-9ea6f0/v1/SKILL.md. This version never changes.

The Design at a Glance

dark theme

Background

#09090b

Surface

#27272a

Text

#a1a1aa

Muted

#71717a

Border

#27272a

Accent

#ff0000

light theme

Background

#ffffff

Surface

#f4f4f5

Text

#71717a

Border

#e4e4e7

Accent

#ff0000

Type · GeistSans

size-1818px Aa500
h618px Aa400
body-216px Aa400
body14px Aa300
body-314px Aa500
body-414px Aa400

Radius

pill
14px
12px
18px
6px
10px

Spacing · 4px grid

Principles

  • One accent per project

    Pick one accent per project and use it only for actions and active states.

  • Big type, quiet body

    Let the headline be at least two and a half times the body size.

  • Soft depth

    Lift raised elements with a soft, neutral shadow.

  • The same grid every time

    Space everything on a 4px grid.

Never

  • Never use two competing accent colours in one product.

    Each of the 5 sites commits to one.

  • Never tint shadows with colour.

    Every measured shadow is neutral; a coloured glow would read as a different product.

  • Never introduce a second accent colour.

    Only one saturated colour (#ff0000) carries weight in the measured palette.

Reference Frames

The site with its content removed: images are flat blocks, text is soft bars. Layout, rhythm and colour stay. Scroll inside each screen.

Desktop1440px wideFull page
Desktop layout of ANDY's taste, content removed
Phone layout of ANDY's taste, content removed
Phone · 390pxFull page

Every File in the Kit

---
name: livery-taste-andy-9ea6f0
description: Apply the ANDY's taste design kit (Livery v1) to this project. Use only when the user asks to apply this kit or this site's design.
---

# ANDY's taste design kit · v1 · flow 1

**Never edit a file before step 5. Ask, don't assume.**

ANDY's taste, measured across 5 sites (stark.et, voxide.app, goatrank.lol, miheretab.space and hackathon.stark.et). What holds on every one: a single accent, big headlines and a 4px grid. Where the sites differ, the rules give the measured range, so a new project can sit anywhere inside it and still feel like the same hand.

Kit files (read each one only when its step needs it): `rules.md`, `tokens.json`, `fonts.json`, `icons.json`, `components.md`, `layout.md`, `motion.md`, `voice.md`, `licences.md`, `frames/`.

Levels offered:
1. Tokens: Colour, type, spacing, radii, borders and depth.
2. Structure: Component recipes, containers, grids and section rhythm.
3. Feel: Motion timing and the tone of the copy.

## 0. Prepare
- Require git. If the working tree has uncommitted changes, ask the user to commit or stash first.
- Create and switch to the branch `livery/taste-andy-9ea6f0-v1`.
- If commits from an earlier run of this kit exist (`livery(ANDY's taste v1): …`), offer to resume after the last finished area.

## 1. Audit
Find theme files, design tokens, CSS variables, Tailwind config, fonts, the icon library and how colours are used.
Note the styling setup (Tailwind v4 or v3, CSS modules, shadcn/ui, CSS-in-JS, plain CSS).
Report colours that are scattered (hard-coded in many files) rather than centralised; offer to centralise them first.

## 2. Scan project rules
Read CLAUDE.md (root, nested, ~/.claude), AGENTS.md, .cursor/rules, .github/copilot-instructions.md, design docs, lint rules, and contrast or visual tests.
Sort each finding as hard (must keep), soft (preference) or unrelated.

## 3. Report the gap
For each area (tokens, components, layout, motion, voice), rate the gap small / medium / large in one or two lines, comparing the project with `rules.md` and `tokens.json`.

## 4. Ask
Ask which areas to apply. Warn clearly where the gap is large.
Ask what must not change (logo colours, required brand colours, legal copy).
For voice: show three of the user's own sentences rewritten with `voice.md`, then ask.

## 5. Resolve conflicts
For the chosen areas, quote each conflicting project rule with file:line. For each one offer: keep the rule / override once / override and update the rule.
For hard rules, ask a second time and repeat the rule's stated reason.

## 6. Licences
Read `licences.md`. Install fonts and icons only from their official sources (Google Fonts, Fontsource, npm), never from the source site.
For each item marked "needs a licence": use it only if the user confirms they hold a licence; otherwise use the listed free alternative.
Items marked "style only" (logos, photos, illustrations, custom icons) are recreated as style only: shape, weight and colour treatment, never copied files.
Styling the user's own login or checkout pages with these tokens is fine. Never recreate the source site's login, checkout or branding.

## 7. Apply
One area per commit, in this order: tokens → components → layout → motion → voice (only the areas this kit's levels include).
Commit message: `livery(ANDY's taste v1): <area>`. Edits to project rule files go in the same commit.
Read the data file for an area only when you reach it. Follow `rules.md` throughout, especially its "Never" list.

## 8. Verify
Check text contrast in both themes (4.5:1 for body text, 3:1 for large text and UI). If the accent fails on the user's backgrounds, adjust its lightness rather than shipping unreadable text.
If Playwright is available, screenshot the user's pages and compare their layout and rhythm with `frames/`; fix the differences.

## 9. Keep it
Offer to add the core of `rules.md` to the project's CLAUDE.md (or AGENTS.md) so future sessions keep the design.

## 10. Summary
List what changed per area with its commit hash. To undo one area: `git revert <hash>`.