---
version: alpha
name: Glowstick Pipeline
description: "Dark-first CRM interface: green-black surfaces, one luminous lime accent and wide display type for late-night pipeline work."
colors:
  background: "#f4f8f3"
  foreground: "#0a110b"
  card: "#ffffff"
  card-foreground: "#0a110b"
  popover: "#ffffff"
  popover-foreground: "#0a110b"
  primary: "#377a19"
  primary-foreground: "#ffffff"
  secondary: "#e5ece4"
  secondary-foreground: "#151e16"
  muted: "#e5ece4"
  muted-foreground: "#4d5e4c"
  accent: "#e0f7cb"
  accent-foreground: "#1f4412"
  destructive: "#c02d56"
  destructive-foreground: "#ffffff"
  success: "#16683d"
  success-foreground: "#ffffff"
  warning: "#f7d293"
  warning-foreground: "#3e2a00"
  border: "#cdd8cb"
  input: "#8a9d88"
  ring: "#479820"
  dark-background: "#0a110b"
  dark-foreground: "#f4f8f3"
  dark-card: "#151e16"
  dark-card-foreground: "#f4f8f3"
  dark-popover: "#222e23"
  dark-popover-foreground: "#f4f8f3"
  dark-primary: "#7bcf48"
  dark-primary-foreground: "#112a08"
  dark-secondary: "#222e23"
  dark-secondary-foreground: "#e5ece4"
  dark-muted: "#222e23"
  dark-muted-foreground: "#aebcac"
  dark-accent: "#1f4412"
  dark-accent-foreground: "#e0f7cb"
  dark-destructive: "#f66e89"
  dark-destructive-foreground: "#390011"
  dark-success: "#65b683"
  dark-success-foreground: "#00220f"
  dark-warning: "#ca9837"
  dark-warning-foreground: "#261800"
  dark-border: "#222e23"
  dark-input: "#364436"
  dark-ring: "#7bcf48"
typography:
  display-lg:
    fontFamily: Unbounded
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
  display-md:
    fontFamily: Unbounded
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Unbounded
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Onest
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Onest
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Onest
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Onest
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Onest
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Onest
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Onest
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 20px
  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 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  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: 22px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  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: 22px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
---

# Glowstick Pipeline

## Overview

Glowstick Pipeline is for CRM tools that sales and account teams keep open for hours, often after dark. Dark mode is the primary design and light mode is the companion; both use the same semantic tokens. Surfaces are green-tinted near-blacks, and a single lime accent (primary, ring, active stage chips) marks the next action. Glow appears only on the focus ring and the primary button hover, never as decoration.

Moods: nocturnal, cinematic, luminous, focused. Built for: crm, sales, customer-success. 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

Brand is a lime green at OKLCH hue ~130 with chroma peaking at brand.400–500 and tapering toward 50 and 950. Neutrals carry the same hue at low chroma, so neutral.950 (#0a110b) reads as tinted night rather than grey. Dark: primary brand.400 on neutral.950 is about 9.9:1, and primary-foreground brand.950 on brand.400 is about 8:1. Light: primary brand.700 with white text is about 5.3:1, and ring brand.600 on neutral.50 is about 3.4:1. Destructive uses the crimson danger ramp (hue ~5), far from the brand hue in both modes: danger.600 with white is about 5.6:1, danger.400 with danger.950 about 6.3:1. Success is a cooler emerald (success.700 light, success.400 dark) so a 'Won' badge is not confused with the primary button. Warning is a warm amber that sits next to the lime on the hue wheel. Light muted-foreground is neutral.600, about 6.5:1 on background and 5.8:1 on muted. Dark muted-foreground is neutral.300, about 7:1 on muted.

- **Primary** `#377a19` / dark `#7bcf48`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f8f3` / dark `#0a110b` on `#0a110b` / dark `#f4f8f3`: page surface and body text.
- **Card** `#ffffff` / dark `#151e16`: raised surfaces.
- **Secondary** `#e5ece4` / dark `#222e23`: secondary buttons and quiet controls.
- **Muted** `#e5ece4` / dark `#222e23` with **muted-foreground** `#4d5e4c` / dark `#aebcac`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#e0f7cb` / dark `#1f4412`: highlights, selected rows, badges.
- **Destructive** `#c02d56` / dark `#f66e89`, **Success** `#16683d` / dark `#65b683`, **Warning** `#f7d293` / dark `#ca9837`: status only, always paired with an icon or label.
- **Border** `#cdd8cb` / dark `#222e23`, **Input** `#8a9d88` / dark `#364436`, **Ring** `#479820` / dark `#7bcf48`.

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

## Typography

The scale is a major third (1.25) rounded to the 4px grid: 12, 14, 16, 20, 24, 32, 40. Unbounded (500/600) is used only for display-lg 40px, display-md 32px and heading-lg 24px. Because the face is wide, tracking tightens as size grows: -0.025em at 40px, -0.02em at 32px, -0.015em at 24px. Onest (400/500/600) covers all UI text. Body uses line-height 1.55–1.6 for long notes and 1.5 at 14px for table cells. JetBrains Mono (400/500) at code 13px is for deal IDs, API keys and timestamps.

- Display: **Unbounded** (fallback system-ui, sans-serif)
- Interface: **Onest** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Unbounded | 40px | 1.1 | 600 |
| display-md | Unbounded | 32px | 1.15 | 600 |
| heading-lg | Unbounded | 24px | 1.25 | 500 |
| heading-md | Onest | 20px | 1.3 | 600 |
| heading-sm | Onest | 16px | 1.4 | 600 |
| body-lg | Onest | 18px | 1.6 | 400 |
| body-md | Onest | 16px | 1.55 | 400 |
| body-sm | Onest | 14px | 1.5 | 400 |
| label | Onest | 14px | 1.25 | 500 |
| caption | Onest | 12px | 1.4 | 500 |
| code | JetBrains Mono | 13px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid. Content max width is 1280px and cards use space.6 (24px) padding. Table rows are 48px, and buttons and inputs are 40px. Badges are 22px with space.2 padding, so long contact lists stay scannable on dark surfaces.

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

## Elevation & Depth

In dark mode, depth comes from lightness steps rather than shadow: background neutral.950, card neutral.900, popover/secondary/muted neutral.800, each with a 1px border. Cards use shadow.sm; popovers and dialogs use shadow.md and shadow.lg. Shadows are pure black at 35–70% opacity, so they read on dark surfaces without colored halos.

- sm: `0 1px 2px rgba(0, 0, 0, 0.35)`
- md: `0 6px 18px -4px rgba(0, 0, 0, 0.55)`
- lg: `0 24px 56px -12px rgba(0, 0, 0, 0.70)`

## Shapes

radius.md (8px) for buttons and inputs, radius.lg (12px) for cards, radius.xl (20px) for hero and summary panels. radius.full is used only for status badges and pipeline stage chips.

Radius scale: sm 4px, md 8px, lg 12px, xl 20px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px 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:** Review every screen in dark mode first, then confirm that light mode works with the same semantic tokens and no per-mode overrides.
- **Do:** Use one primary button per view (brand.400 in dark, brand.700 in light), such as 'Add contact' or 'Log deal'. Make all other actions secondary or ghost.
- **Do:** Build depth in dark mode with background neutral.950, card neutral.900 and popover/muted neutral.800, each with a 1px border token.
- **Do:** Set Unbounded only at heading-lg (24px), display-md (32px) and display-lg (40px). Use Onest for tables, forms, buttons and body text.
- **Do:** On every interactive element, show keyboard focus with a 2px ring token (brand.400 dark, brand.600 light) and a 2px offset.
- **Do:** Set deal IDs, API keys and timestamps in JetBrains Mono at the code style (13px). Right-align numeric table columns in Onest with tabular figures.
- **Do:** Pair success, warning and destructive badges (22px, radius.full, caption) with an icon or text label such as 'Won', 'At risk' or 'Lost'.
- **Do:** Use muted-foreground (neutral.600 light, neutral.300 dark) for table metadata, helper text under 40px inputs, and captions.
- **Don't:** Don't use brand green for errors or success green for primary actions. Destructive buttons and 'Lost' stages use the danger ramp only.
- **Don't:** Don't use pure black (#000000) or untinted grey for surfaces. Take every surface from the neutral ramp.
- **Don't:** Don't apply glow or colored shadows anywhere except the focus ring and the primary button hover state.
- **Don't:** Don't set Unbounded below 20px, in all caps, or for paragraph text.
- **Don't:** Don't put white text on brand.400. In dark mode, primary-foreground is brand.950.
- **Don't:** Don't nest more than three surface levels (background, card, popover/muted) in one view.
- **Don't:** Don't use muted-foreground for body copy. Use foreground at body-md (16px) or body-sm (14px).
- **Don't:** Don't track display-lg or display-md wider than their tokens; positive tracking on Unbounded makes headings fall apart.