---
version: alpha
name: KidSuper
description: Streetwear-as-art-gallery — KidSuper's world (built with basement.studio) runs on a stark near-black canvas with electric primary-yellow accents, oversized condensed display type, hand-drawn playfulness, and a maximal cursor-driven storefront energy. Bold, colorful, unmistakably Colm Dillane.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f5f0"
  ink-secondary: "#a8a8a0"
  ink-muted: "#6e6e68"

  # Brand accents — KidSuper signature
  primary: "#ffe600"        # electric KidSuper yellow
  accent-blue: "#2b4cff"    # painterly cobalt
  accent-red: "#ff3b2f"     # marker red
  accent-pink: "#ff5fa2"    # bubblegum
  accent-green: "#1fd65f"   # acid green

  # On-color
  on-primary: "#0a0a0a"
  on-accent: "#f5f5f0"

  # Borders + lines
  border: "#2a2a2a"
  border-strong: "#3d3d3a"

  # Light inversion (occasional gallery sections)
  paper: "#f5f0e6"          # off-white canvas
  paper-ink: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Impact, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -1.5px
  display:
    fontFamily: "Anton, Oswald, Impact, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1px
  section-heading:
    fontFamily: "Anton, Oswald, Impact, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.5px
  button-ui:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  product-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  price-tag:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# KidSuper Design System

## Overview

KidSuper's world is a storefront that behaves like an exhibition. Founded by Colm Dillane and built in collaboration with basement.studio, the site rejects the clean SaaS-white minimalism of typical e-commerce in favor of a near-black gallery canvas (`{colors.background}`) where products, paintings, and runway moments hang like artworks under spotlight. The energy is maximal, cursor-driven, and unapologetically loud — a digital extension of a brand that has shown at Paris Fashion Week while still scrawling its logo by hand.

The typographic backbone is oversized condensed display type. Headlines arrive in a tall, narrow, all-caps face (Anton / Oswald lineage) at billboard scale (`{typography.display-hero}` at 96px), compressed tight with negative tracking so words stack like marquee posters. Against this, body copy stays neutral and readable in a clean grotesque (`{typography.body}`), and a monospace voice (`{typography.label-mono}`) handles technical labels, prices, and timestamps — the "backstage pass" texture that signals this is a working studio, not a polished corporation.

Color is where KidSuper announces itself. The signature electric yellow (`{colors.primary}`) is the brand's flag — used for CTAs, price tags, and accents that pop hard against the dark canvas. Around it orbits a painterly secondary palette pulled straight from Dillane's canvases: marker red, cobalt blue, bubblegum pink, acid green. These aren't muted UI tints; they're paint. The contrast-safe pairing rule is strict: bright accents sit on the dark `{colors.background}`, and `{colors.on-primary}` (near-black) always rides on the yellow so the CTA text reads cleanly.

**Key Characteristics:**
- Near-black gallery canvas (`{colors.background}`) — products framed like art, not listed like inventory
- Electric KidSuper yellow (`{colors.primary}`) as the singular brand flag for CTAs and price tags
- Oversized condensed all-caps display type (Anton / Oswald) at billboard scale with tight tracking
- Painterly accent palette (red, cobalt, pink, green) treated as paint, not UI tint
- Monospace labels (`{typography.label-mono}`) for prices, timestamps, technical chrome
- Sharp `{rounded.none}` corners on buttons, cards, and product tiles — hard-edged, poster-like
- Occasional off-white "paper" (`{colors.paper}`) inversion for editorial/gallery sections
- High-energy, cursor-driven storefront that reads as exhibition over catalog

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas — the gallery wall everything hangs on.
- **Surface** (`{colors.surface}`): Slightly lifted panel for cards and product tiles.
- **Surface Soft** (`{colors.surface-soft}`): Hover/raised state for surfaces.
- **Ink** (`{colors.ink}`): Warm off-white primary text — softer than pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Disabled, timestamps, fine print.

### Brand Accents
- **Primary Yellow** (`{colors.primary}`): The KidSuper flag — CTAs, price tags, key accents.
- **Cobalt** (`{colors.accent-blue}`): Painterly secondary, links, highlights.
- **Marker Red** (`{colors.accent-red}`): Sale badges, alerts, emphasis.
- **Pink** (`{colors.accent-pink}`): Playful highlight, drop announcements.
- **Acid Green** (`{colors.accent-green}`): In-stock, success, accent moments.

### On-Color
- **On Primary** (`{colors.on-primary}`): Near-black text that rides on yellow CTAs.
- **On Accent** (`{colors.on-accent}`): Off-white text on saturated accent fills.

### Borders
- **Border** (`{colors.border}`): Subtle dividers between dark surfaces.
- **Border Strong** (`{colors.border-strong}`): Outlined buttons, inputs.

### Inversion
- **Paper** (`{colors.paper}`): Off-white canvas for occasional editorial/gallery sections.
- **Paper Ink** (`{colors.paper-ink}`): Near-black text on paper.

## Typography

### Font Family
- **Display**: `Anton` / `Oswald` (condensed, all-caps grotesque) — fallbacks `Impact, sans-serif`
- **Body**: `Inter` — fallbacks `Helvetica, Arial, sans-serif`
- **Mono**: `Space Mono` — fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 96px marquee headlines — billboard impact |
| `display` | 64px section openers |
| `section-heading` | 40px feature/section titles |
| `card-title` | Product names, card headings |
| `body-large` | Lead paragraphs, descriptions |
| `body` | Standard reading text |
| `body-small` | Supporting copy |
| `label-mono` | Prices, timestamps, technical labels |
| `button-ui` | Buttons, nav links — condensed, tracked, caps |
| `caption` | Metadata, fine print |

### Principles
- **Display as marquee**: Condensed all-caps at billboard scale, tracked tight — headlines stack like poster type.
- **Mono for the backstage texture**: Prices, timestamps, and labels in `Space Mono` signal a working studio.
- **Neutral body for breathing room**: Inter keeps reading copy calm against loud display and color.
- **Caps + tracking on UI**: Buttons and nav use condensed caps with positive letter-spacing for a printed-tag feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}`–`{spacing.4xl}`) for gallery-style breathing room between sections.

### Grid & Container
- Product grids: 2–4 column hard-edged tiles, edge-to-edge framing
- Hero: full-bleed oversized headline + imagery, near-fullscreen
- Editorial sections may invert to `{colors.paper}` for contrast

### Whitespace Philosophy
- **Gallery hang**: Generous dark negative space around products — items framed, not crowded.
- **Loud-then-quiet rhythm**: Maximal hero/marquee moments alternate with calmer product grids.
- **Edge-to-edge tension**: Full-bleed imagery butts against sharp-cornered tiles for a poster-wall density.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, product tiles — hard-edged default |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Minor containers |
| `md` | 8px | Soft cards, modals |
| `pill` | 9999px | Badges, status pills, circular controls |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Yellow fill, near-black text, sharp corners. The default CTA; inverts to off-white-on-black on hover.
- **`button-outline`** — Transparent on dark with a strong border; fills to off-white on hover.

### Badges & Tags
- **`badge`** — Marker-red pill for sale/drop callouts.
- **`price-tag`** — Yellow chip with monospace price — the literal price-tag motif.

### Cards
- **`product-card`** — Sharp-cornered surface tile, full-bleed product image, mono price below.
- **`card`** — General content card with subtle border.

### Inputs
- **`input`** — Dark surface, strong border, sharp corners; focus border switches to yellow `{colors.primary}`.

### Navigation
- **`nav-bar`** — Dark sticky header, condensed caps links, cart counter, social links.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) — products are art on a gallery wall
- Use yellow (`{colors.primary}`) as the singular brand flag for CTAs and price tags
- Set oversized condensed all-caps headlines with tight tracking
- Use `Space Mono` for prices, timestamps, and technical labels
- Keep corners sharp (`{rounded.none}`) on buttons, cards, and product tiles
- Treat accent colors as paint — bold, saturated, confident
- Always ride near-black `{colors.on-primary}` text on the yellow CTA

### Don't
- Don't put bright accent text directly on bright accent fills — check contrast
- Don't round the corners of buttons and product tiles — sharpness is the poster aesthetic
- Don't dilute the yellow into a pastel — it must read electric
- Don't use condensed display for long body copy — Inter handles reading
- Don't go clean-white-SaaS — the brand is maximal gallery energy
- Don't scatter multiple accents in one CTA cluster — yellow leads

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column product stack, hero headline scales down |
| Tablet | 600–1024px | 2-column product grid |
| Desktop | 1024–1440px | 3–4 column grid, full marquee hero |
| Large | >1440px | Generous gallery margins, oversized display |

### Touch Targets
- Buttons use comfortable 14px vertical padding
- Cart/close controls use circular tap targets
- Nav links tracked with adequate spacing

### Collapsing Strategy
- Hero: 96px → scales down, maintains tight tracking
- Product grid: 4-col → 2-col → single column
- Nav: full horizontal → drawer/cart overlay
- Section spacing: 96px+ → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-black `{colors.background}`
- Primary CTA: Yellow `{colors.primary}` with near-black text `{colors.on-primary}`
- Heading text: Off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Price/label: Mono on yellow or dark

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline in Anton/Oswald all-caps at 96px, line-height 0.92, letter-spacing -1.5px, color `{colors.ink}`. Yellow CTA (`{colors.primary}` fill, `{colors.on-primary}` text, 0px radius, 14px 28px padding, condensed caps button-ui type)."
- "Build a product card: dark surface `{colors.surface}`, sharp 0px corners, full-bleed image, product name in card-title, price as a yellow `{colors.primary}` mono chip below."
- "Design a sale badge: marker-red `{colors.accent-red}` pill, off-white text, mono caption, 9999px radius, 4px 10px padding."

### Iteration Guide
1. Dark canvas first — everything hangs on near-black
2. Yellow is the one flag — CTAs and price tags only
3. Condensed all-caps for display, Inter for reading, Space Mono for labels
4. Hard corners everywhere — poster, not pill
5. Accents are paint — saturated and bold, contrast-checked on dark

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by KidSuper. Brand names and trademarks belong to their respective owners.