---
version: alpha
name: Sequin Streamer
description: "Dark-first, bouncy fashion UI: saturated indigo actions on deep blue-slate neutrals, rounded Outfit type and pill shapes with AA contrast."
colors:
  background: "#f5f7fb"
  foreground: "#0d1019"
  card: "#ffffff"
  card-foreground: "#0d1019"
  popover: "#ffffff"
  popover-foreground: "#0d1019"
  primary: "#3d4ddb"
  primary-foreground: "#ffffff"
  secondary: "#e8ecf4"
  secondary-foreground: "#181c28"
  muted: "#e8ecf4"
  muted-foreground: "#4b5468"
  accent: "#dfe7ff"
  accent-foreground: "#21276a"
  destructive: "#c42a4d"
  destructive-foreground: "#ffffff"
  success: "#0a6d51"
  success-foreground: "#ffffff"
  warning: "#fde68a"
  warning-foreground: "#4a3103"
  border: "#d3d9e6"
  input: "#aeb7c9"
  ring: "#5566f0"
  dark-background: "#0d1019"
  dark-foreground: "#f5f7fb"
  dark-card: "#181c28"
  dark-card-foreground: "#f5f7fb"
  dark-popover: "#181c28"
  dark-popover-foreground: "#f5f7fb"
  dark-primary: "#7189fb"
  dark-primary-foreground: "#151846"
  dark-secondary: "#252b3b"
  dark-secondary-foreground: "#e8ecf4"
  dark-muted: "#252b3b"
  dark-muted-foreground: "#aeb7c9"
  dark-accent: "#21276a"
  dark-accent-foreground: "#dfe7ff"
  dark-destructive: "#f0587a"
  dark-destructive-foreground: "#3a0a17"
  dark-success: "#2fc293"
  dark-success-foreground: "#03241c"
  dark-warning: "#f5b82e"
  dark-warning-foreground: "#2b1c02"
  dark-border: "#252b3b"
  dark-input: "#373f52"
  dark-ring: "#7189fb"
typography:
  display-lg:
    fontFamily: Outfit
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  display-md:
    fontFamily: Outfit
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Outfit
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Outfit
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Outfit
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Outfit
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Outfit
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  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.lg}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 0 16px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.xl}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.xl}"
    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 12px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 0 16px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.xl}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.xl}"
    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 12px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
---

# Sequin Streamer

## Overview

Sequin Streamer is for fashion shopping and wardrobe tools. It is built dark-first: background neutral.950 (#0d1019) and card neutral.900 (#181c28) are blue-tinted, so the indigo primary and rounded shapes stand out without glare. The playful tone comes from radii of 12–24px, springy motion and one saturated hue, not from extra decoration. Every status or selected state pairs color with shape, a label or an icon.

Moods: playful, friendly, bold, energetic. Built for: fashion, retail, e-commerce. 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 brand hue, Velvet Indigo (OKLCH hue about 265), drives primary, accent and ring. In light mode primary is brand.600 (#3d4ddb, 6.4:1 with white). In dark mode it is brand.400 (#7189fb, 6.0:1 on background, 5.3:1 with its brand.950 label). Neutrals carry a small amount of the same blue hue, so surfaces and brand read as one family. Chroma rises from 50 to 500–600 and falls toward 950 on every scale, so mid-steps stay clean. Destructive is a magenta-leaning crimson: danger.600 in light mode and danger.400 in dark mode. Its hue is about 80° away from primary (ΔE2000 > 30 in both modes), so an error never reads as a brand action. Success leans cool emerald-teal to match the blue temperature. Warning stays a golden amber and is reserved for status, never decoration.

- **Primary** `#3d4ddb` / dark `#7189fb`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f5f7fb` / dark `#0d1019` on `#0d1019` / dark `#f5f7fb`: page surface and body text.
- **Card** `#ffffff` / dark `#181c28`: raised surfaces.
- **Secondary** `#e8ecf4` / dark `#252b3b`: secondary buttons and quiet controls.
- **Muted** `#e8ecf4` / dark `#252b3b` with **muted-foreground** `#4b5468` / dark `#aeb7c9`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#dfe7ff` / dark `#21276a`: highlights, selected rows, badges.
- **Destructive** `#c42a4d` / dark `#f0587a`, **Success** `#0a6d51` / dark `#2fc293`, **Warning** `#fde68a` / dark `#f5b82e`: status only, always paired with an icon or label.
- **Border** `#d3d9e6` / dark `#252b3b`, **Input** `#aeb7c9` / dark `#373f52`, **Ring** `#5566f0` / dark `#7189fb`.

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

## Typography

Outfit is the single voice for display and interface text; its round geometric terminals match the shapes. Headings and display sizes follow a perfect-fourth scale (×1.333): 18 → 24 → 32 → 42 → 56px. Tracking tightens as size grows, from -0.005em at 18px to -0.025em at 56px. Body text uses 16px at a 1.55 line height, with 18px and 14px variants. Display uses Outfit 600 and 700, and the UI uses 400, 500 and 600, all shipped by Google Fonts. Geist Mono 400 at 14px is reserved for SKUs, sizes, order IDs and code.

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

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Outfit | 56px | 1.05 | 700 |
| display-md | Outfit | 42px | 1.1 | 700 |
| heading-lg | Outfit | 32px | 1.2 | 600 |
| heading-md | Outfit | 24px | 1.25 | 600 |
| heading-sm | Outfit | 18px | 1.35 | 600 |
| body-lg | Outfit | 18px | 1.6 | 400 |
| body-md | Outfit | 16px | 1.55 | 400 |
| body-sm | Outfit | 14px | 1.5 | 400 |
| label | Outfit | 14px | 1.25 | 600 |
| caption | Outfit | 12px | 1.4 | 500 |
| code | Geist Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid (space.1 = 4px). Product grids use space.6 (24px) gutters. Cards use space.6 (24px) padding, or space.4 (16px) on compact tiles. Buttons and inputs are 44px tall, and table or list rows are at least 44px, so touch targets meet the 44px minimum.

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

## Elevation & Depth

Dark surfaces separate by ramp step first: background neutral.950, then card and popover neutral.900, then secondary and muted neutral.800. A 1px border comes next, and shadow comes last. Shadows are tinted with near-black blue (rgba 3, 5, 15). Use shadow.sm on cards, shadow.md on menus and popovers, and shadow.lg on dialogs and sheets only.

- sm: `0 1px 2px rgba(3, 5, 15, 0.30)`
- md: `0 6px 16px -4px rgba(3, 5, 15, 0.40)`
- lg: `0 20px 44px -10px rgba(3, 5, 15, 0.55)`

## Shapes

Rounding is core to the personality. Use radius.md (12px) on small controls such as checkboxes and segmented items. Use radius.lg (16px) on buttons and inputs, with radius.full available for pill buttons. Use radius.xl (24px) on product cards and sheets. Badges and avatars use radius.full. radius.none and radius.sm are only for inline code and table cells.

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: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per view (e.g. Add to bag). Set other actions to secondary (neutral.100 light / neutral.800 dark) or ghost buttons.
- **Do:** Use radius.lg (16px) on buttons and inputs and radius.xl (24px) on product cards and sheets. Use radius.full only for pill buttons, badges and avatars.
- **Do:** Layer dark screens as background neutral.950, then card/popover neutral.900, then muted neutral.800. Add a 1px border token before reaching for shadow.md or shadow.lg.
- **Do:** Show focus as a 2px ring token outline with a 2px offset on every button, input, swatch and card link. Never rely on a color change alone.
- **Do:** Pair success, warning and destructive with an icon and a text label, such as a check icon with 'In stock' or an alert icon with 'Only 2 left'.
- **Do:** Set SKUs, sizes and order IDs in the code style (Geist Mono 14px/1.5, weight 400) with letterSpacing 0.
- **Don't:** Don't use primary for delete, remove-from-bag or error text. Use destructive with destructive-foreground instead.
- **Don't:** Don't set text below body-sm (14px) on muted or accent surfaces. Keep muted-foreground for secondary copy only, not for prices or button labels.
- **Don't:** Don't use #000000 for dark-mode surfaces. Use neutral.950 for background and neutral.900 for cards, and keep #ffffff for light-mode card and popover only.
- **Don't:** Don't use radius below radius.md (12px) on buttons, inputs, cards or badges.
- **Don't:** Don't add a second saturated accent hue. Keep success, warning and destructive for status messages and badges, never decoration.
- **Don't:** Don't apply negative letterSpacing to body-md, body-sm, label or caption. Tight tracking is only for heading-sm and larger.