---
version: alpha
name: Seed Index
description: Mint paper and mauve ink — a palette with no warm colour anywhere, built for catalogues you order from.
meta:
  id: "theme-seed-index"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Cool all the way through, and easy to order from.
  bestFor: Nursery and grocery catalogues, subscription boxes, wellness commerce, product indexes, order forms
  avoidFor: Finance and enterprise tooling, dark-mode-first products, high-urgency alerting
  defaultMode: light
  surfaceStyle: elevated
  accentUse: fill
  caseStyle: none
  borderWidth: 1px
  imageTreatment: soft
  motion:
    intensity: 2
    duration: 240ms
    ease: "cubic-bezier(0.34, 1.3, 0.64, 1)"
    signature: "A small overshoot on add-to-order, so the count feels like it landed."
  displayFont: Bitter
  displayKind: serif
  bodyFont: Mulish
  monoFont: Sometype Mono
colors:
  background: "#E8EDCB"
  foreground: "#14150F"
  card: "#D9DBCD"
  card-foreground: "#14150F"
  popover: "#D9DBCD"
  popover-foreground: "#14150F"
  primary: "#957C98"
  primary-foreground: "#0D0E02"
  secondary: "#C8CAB7"
  secondary-foreground: "#14150F"
  muted: "#C8CAB7"
  muted-foreground: "#52544B"
  accent: "#9856A2"
  accent-foreground: "#FAFBF2"
  destructive: "#B6322D"
  destructive-foreground: "#FAFBF2"
  border: "#BBBEAD"
  input: "#BBBEAD"
  ring: "#957C98"
  chart-1: "#956F9B"
  chart-2: "#878B51"
  chart-3: "#9F626E"
  chart-4: "#4D9BAB"
  chart-5: "#93633F"
colorsDark:
  background: "#161800"
  foreground: "#E5EADC"
  card: "#21221A"
  card-foreground: "#E5EADC"
  popover: "#21221A"
  popover-foreground: "#E5EADC"
  primary: "#B69DBA"
  primary-foreground: "#0D0E05"
  secondary: "#2E2F24"
  secondary-foreground: "#E5EADC"
  muted: "#2E2F24"
  muted-foreground: "#949989"
  accent: "#A361AE"
  accent-foreground: "#0D0E05"
  destructive: "#FF776B"
  destructive-foreground: "#0D0E05"
  border: "#3E3F35"
  input: "#3E3F35"
  ring: "#B69DBA"
  chart-1: "#BE96C4"
  chart-2: "#9DA267"
  chart-3: "#DC9AA6"
  chart-4: "#53A1B1"
  chart-5: "#DDA983"
typography:
  display-lg:
    fontFamily: Bitter
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Bitter
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.22
    letterSpacing: -0.012em
  headline-md:
    fontFamily: Bitter
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.34
  body-lg:
    fontFamily: Mulish
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.66
  body-md:
    fontFamily: Mulish
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.62
  body-sm:
    fontFamily: Mulish
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Mulish
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.1em
  label-mono:
    fontFamily: Sometype Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
  numeral-xl:
    fontFamily: Sometype Mono
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 5px
  md: 9px
  lg: 14px
  xl: 20px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 10px
  md: 18px
  lg: 26px
  xl: 54px
  gutter: 22px
  margin: 30px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  card-item:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 18px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
---

# Seed Index

## Overview

Seed Index is a catalogue system with an unusual constraint: there is no warm
colour in it anywhere. The paper is mint, the ink is mauve, the neutrals are
cool. Nothing is beige, nothing is cream, and there is no orange call-to-action
waiting at the end of the funnel.

That constraint is what makes it feel unlike other commerce themes. Warm accents
are the default in retail because they are known to convert, and the result is
that every storefront looks the same. Here the buying colour is a mauve-pink
that reads as considered rather than urgent — a catalogue you order from twice a
year, not a checkout you are hurried through.

It is a poor fit for enterprise software and for anything that needs to raise an
alarm; the whole palette is at one emotional temperature.

## Colors

Mint, mauve, and nothing warm.

- **Ground (mint):** a genuinely tinted paper, not a white with a hint. It is
  the reason the mauve looks expensive rather than sweet.
- **Primary (soft mauve):** structure and navigation. Low chroma — it is the
  voice of the catalogue, not of the offer.
- **Accent (deep mauve):** the transaction. Add to order, checkout, quantity
  steppers. This is the only filled button colour in the system.
- **Neutrals** carry the mint, so a disabled control still belongs to the page.
- Charts use the accented strategy but stay in the cool half of the wheel.

## Typography

Bitter for display, Mulish for reading, Sometype Mono for prices and codes.

- **Display:** Bitter at 52px, weight 700. A slab with squared serifs — it gives
  a produce catalogue some weight without going rustic.
- **Body:** Mulish at 14.5px, 1.62. Rounded, low-contrast, friendly at small
  sizes, which matters because item descriptions here are short.
- **Prices and item codes:** Sometype Mono. Prices are never set in the body
  face; a price is a figure, and figures line up.
- **No uppercase.** Labels are sentence case at weight 700.

## Layout

A 12-column grid at 1300px with 22px gutters. The signature structure is the
**index row**: a 4-up card grid for browsing, but every card can collapse into a
single 56px row with the image as a 40px square on the left, so the same
catalogue reads as a grid or as an order form without a second design.

Vertical rhythm is 6px, which is looser than most of the library and is what
makes the pages feel unhurried.

## Elevation & Depth

Elevated. Cards sit on a soft, wide, very low-opacity shadow with no border, and
lift a further 2px on hover. This is one of the few systems in the library where
shadow is the primary depth cue rather than a rule or a fill.

Add-to-order overshoots slightly on the count, which is the only playful motion
in the system.

## Shapes

Round. 9px on inputs, 14px on cards, 20px on modals, and fully round on every
button and badge — pill buttons are a defining feature, not a default.

Photography is soft-treated, square-cropped, and always of the item alone on the
mint ground.

## Components

- **Index row:** the signature component. Grid card and list row are the same
  data at two densities; the toggle between them is a first-class control.
- **Stepper:** a pill with minus, a mono count, and plus. Used everywhere a
  quantity exists; there is no free-text quantity input in this system.
- **Buttons:** fully round. Primary uses the *accent*, not the primary — this is
  the one theme where those roles are swapped, because buying is the accent.
- **Cards:** no border, soft shadow, 14px radius, 18px padding.
- **Badges:** pill, secondary fill, sentence case.

## Do's and Don'ts

- Do keep every colour on the cool side of neutral.
- Do use the accent for the buying action and the primary for everything else.
- Do set prices in the mono face.
- Do offer grid and row density for the same catalogue.
- Don't introduce a warm or red alert colour; use the destructive token only.
- Don't square off buttons — they are pills.
- Don't use uppercase labels.