harvard-university.vercel.app
A light interface on a near-white neutral background where a dark pink-red accent marks the next step. Type is ui-serif, corners are fully rounded on controls, and depth comes from soft neutral shadows.
- Free
- 3
- Licence
- 0
- Style
- 2
The Pages Behind This Kit
Open one to compare, without leaving this page.
Paste this into Claude Code in your project. It downloads the kit, checks its hash and asks before changing anything.
Install the "harvard-university.vercel.app" design kit (v4) from Livery, then run it on this project. 1. mkdir -p .claude/skills/livery-harvard-university-vercel-app-en 2. curl -fsSL "https://livery.site/k/harvard-university-vercel-app-en/v4/kit.tar.gz" -o /tmp/livery-harvard-university-vercel-app-en.tar.gz 3. Verify: the sha256 of /tmp/livery-harvard-university-vercel-app-en.tar.gz must be 0e6431f9992b7e0fd36e38e18f5b8654bd620ae13e0296e0223075a8675adc92. If it doesn't match, stop and tell me. 4. tar -xzf /tmp/livery-harvard-university-vercel-app-en.tar.gz -C .claude/skills/livery-harvard-university-vercel-app-en 5. Read .claude/skills/livery-harvard-university-vercel-app-en/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.
Levels in this kit
- 1TokensColour, type, spacing, radii, borders and depth.
- 2StructureComponent recipes, containers, grids and section rhythm.
- 3FeelMotion and interactions, craft details, the stack behind them, and the tone of the copy.
Agents fetch livery.site/k/harvard-university-vercel-app-en/v4/SKILL.md. This version never changes.
The Design at a Glance
light theme
Background
#f3f4f6
Surface
#ffffff
Text
#0f172a
Muted
#475569
Border
#e2e8f0
Accent
#a51c30
Type · ui-serif / Inter
Radius
Spacing · 4px grid
Motion style · 3 signature motions
Float
1s · ease · loops
Entrance
150ms · ease
Custom animation
150ms · ease
Principles
One accent, used sparingly
Reserve the dark pink-red accent (#a51c30) for primary actions, links and active states.
Soft, neutral depth
Lift raised elements with the measured shadow (rgba(0, 0, 0, 0.05) 0px 1px 2px 0px).
Big type, quiet body
Pair 48px headings with 14px body text in ui-serif.
A steady rhythm
Space everything on the 4px grid: 4, 8, 12, 16, 20, 24, 32, 48px.
Rounded and approachable
Use pill shapes for buttons and chips, and 24px corners for containers.
Never
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 (#a51c30) carries weight in the measured palette.
Never square off buttons.
Measured buttons are fully rounded; square ones would break the shape language.
Never set button labels in all capitals.
No measured button uses uppercase text.
Never use spacing off the 4px grid.
86% of measured spacing sits on it.
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.
Every File in the Kit
--- name: livery-harvard-university-vercel-app-en description: Apply the harvard-university.vercel.app design kit (Livery v4) to this project. Use only when the user asks to apply this kit or this site's design. --- # harvard-university.vercel.app design kit · v4 · flow 1 **Never edit a file before step 5. Ask, don't assume.** A light interface on a near-white neutral background where a dark pink-red accent marks the next step. Type is ui-serif, corners are fully rounded on controls, and depth comes from soft neutral shadows. 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/harvard-university-vercel-app-en-v4`. - If commits from an earlier run of this kit exist (`livery(harvard-university.vercel.app v4): …`), 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(harvard-university.vercel.app v4): <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>`.