---
name: Knickey
description: "Worth including for its masterful use of typography and photography to create a premium, yet approachable, sustainable brand identity."
version: alpha

colors:
  background: "#f5f4ee"
  primary: "#241f20"
  tertiary: "#233735"
  neutral: "#8bba78"
  line: "rgba(36,31,32,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-0.4px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.4px"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.4px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.4px"

rounded:
  sm: 0px
  md: 4px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined, photo-led e-commerce interface for inclusive underwear.

*A quiet, curated catalog that lets the product photography breathe.*

## Colors

Earthy neutrals and soft greens create a calm, organic palette.

- **Background (`#f5f4ee`)** — uses `bg` token
- **Primary text (`#241f20`)** — uses `ink` token
- **Accent (`#233735`)** — uses `accent` token
- **Muted (`#8bba78`)** — uses `muted` token
- **Borders (`rgba(36,31,32,1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans

- Use didone-serif for hero numbers and large emphasis.
- Use humanist-sans for all interactive elements and body text.
- Maintain consistent wide letter-spacing on sans-serif elements.

## Layout

Split layout with full-bleed photography flanking a centered text column.

*Rhythm:* Consistent padding multiples of 4 and 8 create a breathable layout.

## Elevation & Depth

- Borders: No visible borders except for checkbox inputs; the modal relies on spacing and background contrast.

## Shapes

- `sm`: 0px
- `md`: 4px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Solid, dark rectangular button with uppercase white text and no border-radius.
- **card:** Image-heavy, borderless cards that rely on photography rather than containers.
- **chip:** None visible.
- **input:** Custom checkboxes with rounded corners and a soft gray border.
- **hero:** A full-screen or large modal overlay featuring a split composition of photography and centered text.

## Do's and Don'ts

**Don't:**
- Don't use heavy drop shadows — screenshot shows flat, borderless surfaces instead.
- Don't use bright, high-saturation accents — screenshot shows muted greens and dark teals instead.
- Don't use playful or rounded sans-serif fonts for display — screenshot shows a sharp didone-serif instead.
- Don't center-align long paragraphs — screenshot keeps the text column narrow and centered for short copy only.
- Don't add unnecessary borders to content cards — screenshot shows borderless imagery instead.
- Don't use dark mode or high-contrast themes — screenshot shows a light, creamy, off-white background instead.

---

## System Prompt (paste into AI agent)

```
This is a refined e-commerce interface for a sustainable underwear brand, characterized by a calm, earthy palette. Key colors include a creamy off-white background (#f5f4ee), dark ink text (#241f20), muted green accents (#8bba78), and a deep teal for primary buttons (#233735). Typography pairs a sharp didone-serif for large display text with a humanist-sans for all body and UI elements. The layout is spacious, often using a split composition with full-bleed photography flanking centered text. Key donts: Do not use bright, neon colors; avoid heavy borders or drop shadows; do not use playful, rounded fonts; avoid busy backgrounds; do not center-align long blocks of text; and avoid aggressive, urgent marketing language.
```