Skip to content
livery
v1 · latest Published 2026-10-12

launchpot.space

Homepage
0views 0downloads

A dark interface on a near-black neutral background where a lime accent marks the next step. Type is Bricolage Grotesque set tight at large sizes, corners are fully rounded on controls, and depth comes from soft neutral shadows.

Free
3
Licence
0
Style
2

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

Install the "launchpot.space" design kit (v1) from Livery, then run it on this project.

1. mkdir -p .claude/skills/livery-launchpot-space
2. curl -fsSL "https://www.livery.site/k/launchpot-space/v1/kit.tar.gz" -o /tmp/livery-launchpot-space.tar.gz
3. Verify: the sha256 of /tmp/livery-launchpot-space.tar.gz must be fd266e50fe804fb0113f404bc4c1bfafb2413a6c76ca13e0bd54a83ebf801a8a. If it doesn't match, stop and tell me.
4. tar -xzf /tmp/livery-launchpot-space.tar.gz -C .claude/skills/livery-launchpot-space
5. Read .claude/skills/livery-launchpot-space/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-launchpot-space

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 www.livery.site/k/launchpot-space/v1/SKILL.md. This version never changes.

The Design at a Glance

dark theme

Background

#0d0e0b

Surface

#171814

Text

#f4f5ef

Muted

#a3a69b

Border

#2a2c24

Accent

#c6f432

light theme

Background

#f7f7f2

Surface

#ffffff

Text

#111210

Muted

#62655e

Border

#e6e6de

Accent

#c6f432

Type · Bricolage Grotesque / Geist

display54.5px Aa800
h138.5px Aa800
h218px Aa700
h317px Aa700
h416px Aa600
h515px Aa400

Radius

16px
18px
pill

Spacing · irregular

Motion style · 2 signature motions · off under reduced motion

  • Entrance

    500ms · cubic(.2,.7,.2,1) · +30ms

  • Custom animation

    2.2s · ease-out · loops

Built with · best guess

  • FrameworkNext.js
  • FrameworkReact
  • StylingTailwind CSS

Details · 5

  • Frosted glass

    1 surface blurs what's behind it (backdrop-filter), usually headers, menus and overlays.

  • Sticky elements

    1 element holds its place while the page scrolls (position: sticky).

  • OpenType features

    The type uses OpenType features: tabular figures. Turn on the same ones (font-feature-settings / font-variant-numeric) where the font supports them.

  • Considered underlines

    Links set their own underline offset rather than the browser default.

  • Focus ring

    Keyboard focus shows as box-shadow var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) (:focus-visible).

Principles

  • Soft, neutral depth

    Lift raised elements with the measured shadow (rgba(0, 0, 0, 0.04) 0px 1px 2px 0px).

  • Big type, quiet body

    Pair 54.5px headings with 14px body text in Bricolage Grotesque.

  • Rounded and approachable

    Use pill shapes for buttons and chips, and 18px 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 (#c6f432) carries weight in the measured palette.

  • Never use positive letter-spacing on headings.

    Large type is tightened, down to -0.035em on the biggest sizes.

  • Never square off buttons.

    Measured buttons are fully rounded; square ones would break the shape language.

  • Never animate longer than 150ms.

    Every measured transition finishes within 150ms; slower motion would feel heavy here.

  • Never set button labels in all capitals.

    No measured button uses uppercase text.

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.

1440px wideFull page
Desktop layout of launchpot.space, content removed
Phone layout of launchpot.space, content removed
Phone · 390pxFull page

Every File in the Kit

---
name: livery-launchpot-space
description: Apply the launchpot.space design kit (Livery v1) to this project. Use only when the user asks to apply this kit or this site's design.
---

# launchpot.space design kit · v1 · flow 1

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

A dark interface on a near-black neutral background where a lime accent marks the next step. Type is Bricolage Grotesque set tight at large sizes, 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`, `details.md`, `stack.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 and interactions, craft details, the stack behind them, 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/launchpot-space-v1`.
- If commits from an earlier run of this kit exist (`livery(launchpot.space 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.
`stack.md` says what the source site appears to be built with. Never switch this project's framework or add libraries just to match it: recreate each effect with what the project already uses, and suggest a library only when the user asks (for 3D, follow its notes).

## 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, details, 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 → details → voice (only the areas this kit's levels include).
Commit message: `livery(launchpot.space 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>`.

Using launchpot.space yourself?Make your own private version with the pages behind your login, using the Livery browser extension.
Show the badgeOwn launchpot.space, or built with this kit? Link to it from your site or README.›
HTML
<a href="https://www.livery.site/k/launchpot-space"><img src="https://www.livery.site/k/launchpot-space/badge.svg" alt="launchpot.space design kit on Livery" width="168" height="28"></a>
Markdown
[![launchpot.space design kit on Livery](https://www.livery.site/k/launchpot-space/badge.svg)](https://www.livery.site/k/launchpot-space)

Similar Kits

More dark kits