---
version: alpha
name: Impulse Kiosk
description: "Raw, high-contrast e-commerce UI: hard-edged violet actions, sharp corners, hard offset shadows and grotesk headlines."
colors:
  background: "#faf7f2"
  foreground: "#15130f"
  card: "#ffffff"
  card-foreground: "#15130f"
  popover: "#ffffff"
  popover-foreground: "#15130f"
  primary: "#7340c9"
  primary-foreground: "#ffffff"
  secondary: "#f1ece4"
  secondary-foreground: "#2b2823"
  muted: "#f1ece4"
  muted-foreground: "#57514a"
  accent: "#eee6ff"
  accent-foreground: "#301758"
  destructive: "#b3172f"
  destructive-foreground: "#ffffff"
  success: "#17663a"
  success-foreground: "#ffffff"
  warning: "#ffe27a"
  warning-foreground: "#432f00"
  border: "#15130f"
  input: "#2b2823"
  ring: "#8a57e0"
  dark-background: "#15130f"
  dark-foreground: "#faf7f2"
  dark-card: "#2b2823"
  dark-card-foreground: "#faf7f2"
  dark-popover: "#2b2823"
  dark-popover-foreground: "#faf7f2"
  dark-primary: "#a67ef0"
  dark-primary-foreground: "#1d0c38"
  dark-secondary: "#3f3b35"
  dark-secondary-foreground: "#f1ece4"
  dark-muted: "#3f3b35"
  dark-muted-foreground: "#c7bfb2"
  dark-accent: "#301758"
  dark-accent-foreground: "#eee6ff"
  dark-destructive: "#f05f6e"
  dark-destructive-foreground: "#30040c"
  dark-success: "#4fc276"
  dark-success-foreground: "#051d10"
  dark-warning: "#e8b923"
  dark-warning-foreground: "#2a1d00"
  dark-border: "#6f685d"
  dark-input: "#6f685d"
  dark-ring: "#a67ef0"
typography:
  display-lg:
    fontFamily: Epilogue
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.035em
  display-md:
    fontFamily: Epilogue
    fontSize: 45px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.03em
  heading-lg:
    fontFamily: Epilogue
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Karla
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Karla
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
  body-lg:
    fontFamily: Karla
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Karla
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Karla
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Karla
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
  caption:
    fontFamily: Karla
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0.05em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 2px
  lg: 4px
  xl: 6px
  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: 0px
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: 0px
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: 0px
    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.sm}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: 0px
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: 0px
    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.sm}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 8px
    height: 24px
---

# Impulse Kiosk

## Overview

Impulse Kiosk is for online shops that want to look deliberate rather than polished. Product pages are built from 2px borders, 0px corners and heavy Epilogue headlines, so the product photo and the primary action carry the weight. Every surface is either a warm neutral slab (background, card, muted) or a single violet primary block. No gradients, blur or decorative fills are used.

Moods: brutalist, bold, raw, deliberate. Built for: e-commerce, retail, direct-to-consumer. 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

One action color, Orchid (brand, hue about 288), is used for the primary button, selected states and the focus ring. In light mode, primary is brand.600 (#7340c9), which gives 6.4:1 with white text and 5.9:1 against the background. In dark mode, primary is brand.400 (#a67ef0), which gives 5.9:1 with brand.950 text. Neutrals are a warm grey-beige ramp that runs from #faf7f2 to #15130f, so high contrast does not feel clinical. Destructive uses a crimson danger ramp held at one hue from 50 to 950, so the mid-steps do not drift toward orange. The ramp is far from violet in hue: danger.600 is used in light mode (6.9:1 with white) and danger.400 in dark mode (5.7:1 with danger.950). Success is a mid green and warning is a mustard amber. Both share the warm undertone of the neutral ramp and are used only for stock and shipping status.

- **Primary** `#7340c9` / dark `#a67ef0`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf7f2` / dark `#15130f` on `#15130f` / dark `#faf7f2`: page surface and body text.
- **Card** `#ffffff` / dark `#2b2823`: raised surfaces.
- **Secondary** `#f1ece4` / dark `#3f3b35`: secondary buttons and quiet controls.
- **Muted** `#f1ece4` / dark `#3f3b35` with **muted-foreground** `#57514a` / dark `#c7bfb2`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#eee6ff` / dark `#301758`: highlights, selected rows, badges.
- **Destructive** `#b3172f` / dark `#f05f6e`, **Success** `#17663a` / dark `#4fc276`, **Warning** `#ffe27a` / dark `#e8b923`: status only, always paired with an icon or label.
- **Border** `#15130f` / dark `#6f685d`, **Input** `#2b2823` / dark `#6f685d`, **Ring** `#8a57e0` / dark `#a67ef0`.

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

## Typography

The type scale uses a √2 ratio (about 1.414) from a 16px body: 16, 22, 32, 45 and 64. Epilogue sets display-lg (64/1.0, 800, -0.035em), display-md (45/1.05, 800, -0.03em) and heading-lg (32/1.1, 700, -0.02em). Karla 700 takes over from heading-md (22px) downward, and Karla 400 sets body text at 1.5 line height (1.55 for body-lg). Label (14px) and caption (12px) are set in Karla 700 with +0.04em and +0.05em tracking for short uppercase strings. IBM Plex Mono 400 and 500 are reserved for SKUs, order numbers, dimensions and spec tables.

- Display: **Epilogue** (fallback Arial Black, Helvetica, sans-serif)
- Interface: **Karla** (fallback Helvetica, Arial, sans-serif)
- Mono: **IBM Plex Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Epilogue | 64px | 1 | 800 |
| display-md | Epilogue | 45px | 1.05 | 800 |
| heading-lg | Epilogue | 32px | 1.1 | 700 |
| heading-md | Karla | 22px | 1.25 | 700 |
| heading-sm | Karla | 16px | 1.3 | 700 |
| body-lg | Karla | 18px | 1.55 | 400 |
| body-md | Karla | 16px | 1.5 | 400 |
| body-sm | Karla | 14px | 1.5 | 400 |
| label | Karla | 14px | 1.2 | 700 |
| caption | Karla | 12px | 1.35 | 700 |
| code | IBM Plex Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid (space.1 = 4px). Product grids use 24px gutters (space.6) so each item reads as a separate block. Content columns cap at 1280px. Buttons and inputs are 44px tall to meet touch-target size on mobile checkout.

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

## Elevation & Depth

Shadows are hard and offset with zero blur, drawn in neutral.950: shadow.sm is 2px, shadow.md 4px and shadow.lg 8px. Cards use shadow.md together with a 2px border. Popovers and dialogs use shadow.lg so layering is obvious. In dark mode the neutral.950 shadow disappears into the background, so the neutral.600 border (3.3:1 against the background) and the card step from neutral.950 to neutral.900 carry the edge instead.

- sm: `2px 2px 0 0 #15130f`
- md: `4px 4px 0 0 #15130f`
- lg: `8px 8px 0 0 #15130f`

## Shapes

Buttons, inputs and cards use 0px radius (radius.none). Badges use radius.sm (2px). Nothing in the system uses radius.full, because pill shapes would soften the brutalist look.

Radius scale: sm 2px, md 2px, lg 4px, xl 6px, 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: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use the primary token for exactly one main action per view, such as Add to bag or Checkout. Render every other action as secondary or as an outline with a 2px border.
- **Do:** Give every card and button a 2px border in the border token. Use shadow.md on cards and shadow.lg on popovers and dialogs.
- **Do:** In dark mode, rely on the neutral.600 border and the step from background to card (neutral.950 to neutral.900) to show edges, because the neutral.950 shadow is not visible there.
- **Do:** Set SKUs and order numbers in IBM Plex Mono 400 at the code style (14px). Set prices in Karla with tabular figures, right-aligned in cart tables.
- **Do:** Use Epilogue only at heading-lg (32px) and larger, for product titles and section headers. Switch to Karla 700 at heading-md (22px) and below.
- **Do:** Pair every status color with a text label, for example a success badge reading 'In stock' or a warning badge reading 'Low stock'.
- **Do:** Keep interactive targets at least 44px tall, matching the button and input heights, and show focus as a 2px ring in the ring token.
- **Don't:** Don't use primary or brand colors for errors, out-of-stock states or removals. Use destructive (danger.600 in light, danger.400 in dark) for those.
- **Don't:** Don't apply any radius to buttons, inputs or cards; they stay at radius.none (0px). Only badges may use radius.sm (2px).
- **Don't:** Don't add blur to shadows. Use only shadow.sm, shadow.md and shadow.lg.
- **Don't:** Don't use pure #000000 or cool greys for text, borders or shadows. Pull them from the warm neutral ramp.
- **Don't:** Don't set product descriptions or other body copy in IBM Plex Mono. Reserve it for codes, SKUs and spec values.
- **Don't:** Don't place multi-line body text on the accent surface (brand.100 in light, brand.900 in dark). Use accent only for selected rows and short highlights.