---
version: alpha
name: Damson Basket
description: "Warm, soft-edged food delivery UI: fig-violet actions on plum-tinted taupe neutrals, rounded shapes and friendly Geist type."
colors:
  background: "#faf7f9"
  foreground: "#1b161d"
  card: "#ffffff"
  card-foreground: "#1b161d"
  popover: "#ffffff"
  popover-foreground: "#1b161d"
  primary: "#774aa1"
  primary-foreground: "#ffffff"
  secondary: "#f2edf0"
  secondary-foreground: "#2e2830"
  muted: "#f2edf0"
  muted-foreground: "#5d535d"
  accent: "#f0e7f8"
  accent-foreground: "#331f46"
  destructive: "#bb2f40"
  destructive-foreground: "#ffffff"
  success: "#3b5e24"
  success-foreground: "#ffffff"
  warning: "#fbdb92"
  warning-foreground: "#3e2a00"
  border: "#e3dce1"
  input: "#cdc4cb"
  ring: "#9363bd"
  dark-background: "#1b161d"
  dark-foreground: "#faf7f9"
  dark-card: "#2e2830"
  dark-card-foreground: "#faf7f9"
  dark-popover: "#2e2830"
  dark-popover-foreground: "#faf7f9"
  dark-primary: "#b088d3"
  dark-primary-foreground: "#1f1229"
  dark-secondary: "#453d45"
  dark-secondary-foreground: "#f2edf0"
  dark-muted: "#453d45"
  dark-muted-foreground: "#cdc4cb"
  dark-accent: "#331f46"
  dark-accent-foreground: "#f0e7f8"
  dark-destructive: "#f56d78"
  dark-destructive-foreground: "#340509"
  dark-success: "#82ad58"
  dark-success-foreground: "#111e09"
  dark-warning: "#d6a232"
  dark-warning-foreground: "#251800"
  dark-border: "#453d45"
  dark-input: "#5d535d"
  dark-ring: "#b088d3"
typography:
  display-lg:
    fontFamily: Geist
    fontSize: 46px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
  display-md:
    fontFamily: Geist
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Geist
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Geist
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: Geist Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 12px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Damson Basket

## Overview

Damson Basket is for apps that deliver home-cooked and neighborhood food. Most food delivery UIs default to red and orange. This system uses deep fig violet (brand.600) on plum-tinted taupe neutrals instead. Rounded radii (12/16/24px), 44px controls and comfortable spacing make the UI feel handmade, without decorative textures or illustrations.

Moods: warm, approachable, earthy, friendly. Built for: food-delivery, restaurants, grocery. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Fig (brand, violet) is the only action color. It is used for primary buttons, links, selected states and the focus ring. The brand ramp holds chroma highest at 400–600 and tapers evenly toward 50 and 950, so no step looks greyed out. Neutrals carry a low, constant plum tint, so greys read as warm taupe, which flatters food photography. Success was shifted toward olive and warning is ochre; both lean warm to match Fig. Danger is a crimson that stays well apart from Fig in hue: destructive vs primary ΔE2000 is above 18 in both modes. Light mode: primary brand.600 on white is about 6.4:1, muted-foreground neutral.700 on muted is about 6.3:1, and ring brand.500 on background is about 4.2:1. Dark mode is built on its own tokens, not an inversion. The background is neutral.950, a deep aubergine-black. Card and popover sit one step lighter on neutral.900. Primary is a soft lilac (brand.400, about 6.2:1 on background) with brand.950 text, so it glows gently without looking neon.

- **Primary** `#774aa1` / dark `#b088d3`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf7f9` / dark `#1b161d` on `#1b161d` / dark `#faf7f9`: page surface and body text.
- **Card** `#ffffff` / dark `#2e2830`: raised surfaces.
- **Secondary** `#f2edf0` / dark `#453d45`: secondary buttons and quiet controls.
- **Muted** `#f2edf0` / dark `#453d45` with **muted-foreground** `#5d535d` / dark `#cdc4cb`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#f0e7f8` / dark `#331f46`: highlights, selected rows, badges.
- **Destructive** `#bb2f40` / dark `#f56d78`, **Success** `#3b5e24` / dark `#82ad58`, **Warning** `#fbdb92` / dark `#d6a232`: status only, always paired with an icon or label.
- **Border** `#e3dce1` / dark `#453d45`, **Input** `#cdc4cb` / dark `#5d535d`, **Ring** `#9363bd` / dark `#b088d3`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

Geist covers display, interface and body text. Geist Mono is reserved for order IDs, promo codes and timestamps. The heading scale steps by about 1.27: heading-sm 18, heading-md 22, heading-lg 28, display-md 36, display-lg 46. Tracking tightens as size grows, from -0.005em at 18px to -0.025em at 46px. Display styles use weight 600 and heading-lg uses 500, so headlines read friendly rather than corporate. Body-md is 16px at line height 1.6 for menus and dish descriptions. Labels are 14px/500 and captions are 12px/500. All weights used (400, 500, 600) ship with Geist and Geist Mono.

- Display: **Geist** (fallback system-ui, sans-serif)
- Interface: **Geist** (fallback system-ui, sans-serif)
- Mono: **Geist Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Geist | 46px | 1.1 | 600 |
| display-md | Geist | 36px | 1.14 | 600 |
| heading-lg | Geist | 28px | 1.2 | 500 |
| heading-md | Geist | 22px | 1.3 | 600 |
| heading-sm | Geist | 18px | 1.35 | 600 |
| body-lg | Geist | 18px | 1.6 | 400 |
| body-md | Geist | 16px | 1.6 | 400 |
| body-sm | Geist | 14px | 1.5 | 400 |
| label | Geist | 14px | 1.3 | 500 |
| caption | Geist | 12px | 1.4 | 500 |
| code | Geist Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid (space tokens). Mobile gutters are space.4–space.6 (16–24px); desktop content is capped at 1120px. Menu cards use space.5 (20px) padding. Order rows keep a minimum 44px tap height with space.3 (12px) vertical padding.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Mostly flat. Cards sit on the background with a 1px border token and shadow-sm, a plum-tinted shadow at 6% opacity. shadow-md is for the sticky cart bar, popovers and dropdown menus. shadow-lg is only for dialogs and bottom sheets. In dark mode, depth comes mainly from the surface step (neutral.950 to neutral.900) and the border (neutral.800), because shadows barely show on dark surfaces.

- sm: `0 1px 2px rgba(46, 40, 48, 0.06)`
- md: `0 6px 16px -4px rgba(46, 40, 48, 0.14)`
- lg: `0 20px 44px -10px rgba(46, 40, 48, 0.24)`

## Shapes

Generously rounded. Use radius.md (12px) on buttons and inputs, radius.lg (16px) on cards and card images, and radius.xl (24px) on bottom sheets, dialogs and hero images. radius.full (pill) is for badges, filter chips and the courier status tag. radius.sm (6px) is only for small inner elements such as checkboxes and tooltips. radius.none is only for dividers.

Radius scale: sm 6px, md 12px, lg 16px, xl 24px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 20px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per screen for the main action, such as 'Place order' or 'Add to basket'. Style other actions as secondary (neutral.100 surface) or ghost.
- **Do:** Keep buttons and inputs at their 44px height token, and give order rows at least 44px tap height.
- **Do:** Show the focus state as a 2px ring token (brand.500 light, brand.400 dark) with a 2px offset on buttons, inputs, chips and cards.
- **Do:** Round food photos with radius.lg (16px) inside cards and radius.xl (24px) for hero images and bottom sheets.
- **Do:** Set prices and delivery times in label or body-md with font-feature-settings: 'tnum', and right-align them in order summaries.
- **Do:** Use the code style (Geist Mono 14px) only for order IDs, promo codes and timestamps.
- **Do:** Pair every success, warning and destructive badge or banner with an icon and a text label, for example a check icon plus 'Delivered'.
- **Do:** Separate cards from the background with the 1px border token and shadow-sm. Use shadow-md for the sticky cart bar and popovers, and shadow-lg only for dialogs and bottom sheets.
- **Don't:** Don't use destructive (danger.600 / danger.400) for promotions or deals. Reserve it for errors, cancellations and 'Remove item'.
- **Don't:** Don't use #000000, a #ffffff page background or untinted greys. Use the neutral ramp, and keep #ffffff for light-mode card and popover only.
- **Don't:** Don't apply radius.none or radius.sm to cards, buttons, inputs or images.
- **Don't:** Don't set display-lg, display-md or heading-lg below 28px, in all caps, or at weight 400.
- **Don't:** Don't run body text longer than one line on the accent surface (brand.100 light / brand.900 dark). Use accent for selected rows, active filter chips and highlights.
- **Don't:** Don't put muted-foreground text on brand or status surfaces. Use the matching *-foreground token.
- **Don't:** Don't add decorative textures, illustrations or hand-drawn fonts. The warmth comes from the color, radius and spacing tokens.