kit_a9b822 · Untitled kit
---
# brand.md — Unslop Kit format v0.1
# Front matter is compatible with Google's DESIGN.md (version: alpha) token schema.
# Unslop extensions live under `x-unslop` so DESIGN.md linters can ignore them.
version: alpha
name: "Untitled kit"
# banned default paper, recorded so the guardrail hex is inside the front matter: #faf8f4
description: "A working brand assembled from library picks. Replace this sentence with the product in one line."
colors:
ink: "#1A1612"
paper: "#E7E2D6"
surface: "#F6F1E7"
line: "#D0C8BA"
muted: "#5A534A"
accent: "#C4321A"
accent-ink: "#FFF8F3"
highlight: "#E2B657"
danger: "#9E2B1A"
typography:
display:
fontFamily: "Newsreader, Georgia, serif"
fontSize: 52px
fontWeight: 600
lineHeight: 1.08
letterSpacing: "-0.02em"
h2:
fontFamily: "Newsreader, Georgia, serif"
fontSize: 34px
fontWeight: 600
lineHeight: 1.12
letterSpacing: "-0.02em"
h3:
fontFamily: "Figtree, system-ui, sans-serif"
fontSize: 20px
fontWeight: 600
lineHeight: 1.3
letterSpacing: "0em"
body:
fontFamily: "Figtree, system-ui, sans-serif"
fontSize: 17px
fontWeight: 400
lineHeight: 1.6
letterSpacing: "0em"
small:
fontFamily: "Figtree, system-ui, sans-serif"
fontSize: 14px
fontWeight: 500
lineHeight: 1.45
letterSpacing: "0.01em"
mono:
fontFamily: "IBM Plex Mono, ui-monospace, monospace"
fontSize: 13px
fontWeight: 400
lineHeight: 1.5
letterSpacing: "0em"
rounded:
none: 0px
sm: 4px
md: 6px
lg: 10px
full: 9999px
spacing:
base: 4px
scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 72px, 112px]
section-y: 96px
container: 1120px
gutter: 24px
components:
button-primary:
backgroundColor: "{colors.ink}"
textColor: "{colors.paper}"
rounded: "{rounded.md}"
padding: 12px 20px
typography: "{typography.small}"
button-accent:
backgroundColor: "{colors.accent}"
textColor: "{colors.accent-ink}"
rounded: "{rounded.md}"
padding: 12px 20px
button-ghost:
backgroundColor: transparent
textColor: "{colors.ink}"
border: "1px solid {colors.line}"
rounded: "{rounded.md}"
card:
backgroundColor: "{colors.surface}"
border: "1px solid {colors.line}"
rounded: "{rounded.lg}"
padding: 24px
shadow: none
input:
backgroundColor: "{colors.surface}"
border: "1px solid {colors.line}"
rounded: "{rounded.md}"
focusRing: "2px solid {colors.accent}"
x-unslop:
kit_id: kit_a9b822
generated: unspecified
picks:
[]
avoid:
[]
similarity:
method: public-brand-cosine-v0
max_single_brand: 0.159
nearest_public: "Aesop"
nearest_id: "aesop"
level: ok
own_brand: false
style_concentration: 0
dominant_style: "unspecified"
motion:
duration: 180ms
easing: "cubic-bezier(0.2, 0, 0, 1)"
shadow-float: "0 8px 24px rgba(22, 24, 29, 0.08)"
tailwind_theme: ./tokens/tailwind.css
shadcn_theme: ./tokens/shadcn.css
tokens_json: ./tokens/tokens.json
---
# Untitled kit: brand.md
> Hand this file to your coding agent (Cursor, Claude Code, Codex, v0, Lovable, Bolt) **before** asking for UI. Treat the YAML above as the source of truth for values. Treat the prose below as rules for judgment.
## Overview
**North star:** A working brand assembled from library picks. Replace this sentence with the product in one line.
- Personality: specific, considered, plain. Every page should feel like a person made choices.
- Audience: The people who will use the product, named specifically before any UI is written.
- Three words: **specific, considered, plain.**
## Colors
- Backgrounds: `paper` for pages, `surface` for raised items. Use no gradients anywhere.
- Text: `ink` for primary text and `muted` for secondary text. Never use a gray lighter than `muted` for body copy. Ink on paper is 13.9:1. Muted on paper is 5.9:1.
- **One accent.** Use `accent` for links, focus rings, and at most one accent button per viewport. Primary actions default to `ink` buttons.
- `highlight` is a marker on inline text only. It is never a fill for buttons or cards.
- Dark mode: swap `paper` and `ink`. Keep the accent. Recalculate hairlines so they stay visible. Do not invent a second accent hex.
## Typography
- Display and H2 use Newsreader. H3, body, and UI text use Figtree. Mono is for code and data only.
- Headline case: sentence case. Keep display lines short enough to read aloud.
- Body measure: 60–72 characters. Never set body text below the body size in the front matter.
- Use the weights listed above. Do not add a light or an extra-black.
## Layout
- 12-column grid, container 1120px, gutter 24px. Sections use the section-y token (96px on desktop, tighten on small screens).
- One idea per section. Do not center a headline, a subhead, and three equal cards.
- Separate sections with the `line` token, not alternating background bands.
## Elevation & Depth
- Cards use the card shadow recorded in the front matter. Do not invent a second shadow.
- Floating layers (menus, popovers, dialogs) use the float shadow and nothing heavier.
- Do not combine a hard offset shadow with a soft blur.
## Shapes
- Radii stay in one family: 4px small, 6px controls, 10px cards.
- `full` is for avatars only. Do not pill the buttons, the inputs, or the hero eyebrow.
- Borders are 1px and use `line`. Icons, when needed, use a hairline stroke in currentColor and label rather than decorate.
## Components
- **Buttons:** primary = `ink`, secondary = ghost, accent = rare. Labels are verbs. Never add an emoji to a label.
- **Cards:** surface fill, `{components.card.border}`, padding 24px. Do not nest a card inside a card.
- **Pricing:** tiers as a ledger or as two panels. Not three equal icon cards.
- **Nav:** wordmark left, four links or fewer, one primary action. Sticky with a hairline, not a blur.
- **Forms:** labels above fields, helper text in `muted`, accent focus ring, errors in `danger`.
## Do's and Don'ts
**Do**
- Let the headline carry the section. Use the section-y token instead of cramming.
- Use numbers and specifics in copy.
- Hit WCAG AA. Every text/background pair stays at or above 4.5:1.
- Build from the section ids in `x-unslop.picks` when they are present.
**Don't (slop guardrails: reject these if you generate them)**
- Purple/blue gradients, mesh or aurora backgrounds, glow blobs
- Inter or Geist as the default font, and the cream #faf8f4 plus sage combo
- A pill or eyebrow badge floating above the hero headline
- Three icon cards in a row with icons sitting in rounded squares
- Emoji in headings, or the phrases "AI-powered" and "Supercharge your workflow"
- Fade-up-on-scroll on every element, and `transition-all`
- More than one accent button per screen, or a font weight that is not in the front matter
- Stock 3D illustrations or generated pictures of people
**This kit**
- This token set passes the week-1 checks: no Inter/Geist, no purple accent, no #faf8f4 paper, no pill controls, and the text pairs above clear WCAG AA.
## Voice & Copy (extension)
Plain, specific, and specific. Short sentences. Name the thing. Avoid "unlock," "seamless," "supercharge," and "revolutionize." Avoid em-dash chains. No emoji in headings.
## Imagery (extension)
Use framed product UI, diagrams, or abstract geometric blocks built from `ink`, `accent`, and `line`. No generated faces. No borrowed logos.
## Motion (extension)
Hover and press use the motion duration and easing under `x-unslop.motion`. A hairline draws in under the wordmark. Respect `prefers-reduced-motion`.
## Logo & Wordmark (extension)
- Wordmark: "Untitled kit" set in the display face at the display weight, tracking from the display token, in `ink`.
- One flourish is allowed: a single accent detail, such as a square or a mark in the counter of a letter.
- Clear space equals the cap height. Do not stretch, outline, gradient, or shadow the wordmark.
- If no logo exists yet, ship the wordmark only. Do not invent a mascot.
## Agent Instructions (extension)
1. Load tokens from `tokens/shadcn.css` or `tokens/tailwind.css`. Do not invent new colors, radii, or spacing values. If you need one, stop and ask.
2. Build section by section, matching the layout patterns in `x-unslop.picks`. Treat `x-unslop.avoid` as vetoes.
3. Before finishing, self-check against **Don'ts** and list any violations you fixed.
4. Replace placeholder copy with specific, product-true copy in the voice above.