Glowstick Pipeline

• DisplayUnbounded
• BodyOnest
• MonoJetBrains Mono

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.

Color

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.

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.

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.

Elevation

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.

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.

Do

• Review every screen in dark mode first, then confirm that light mode works with the same semantic tokens and no per-mode overrides.
• 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.
• Build depth in dark mode with background neutral.950, card neutral.900 and popover/muted neutral.800, each with a 1px border token.
• Set Unbounded only at heading-lg (24px), display-md (32px) and display-lg (40px). Use Onest for tables, forms, buttons and body text.
• On every interactive element, show keyboard focus with a 2px ring token (brand.400 dark, brand.600 light) and a 2px offset.
• 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.
• Pair success, warning and destructive badges (22px, radius.full, caption) with an icon or text label such as 'Won', 'At risk' or 'Lost'.
• 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 use pure black (#000000) or untinted grey for surfaces. Take every surface from the neutral ramp.
• Don't apply glow or colored shadows anywhere except the focus ring and the primary button hover state.
• Don't set Unbounded below 20px, in all caps, or for paragraph text.
• Don't put white text on brand.400. In dark mode, primary-foreground is brand.950.
• Don't nest more than three surface levels (background, card, popover/muted) in one view.
• Don't use muted-foreground for body copy. Use foreground at body-md (16px) or body-sm (14px).
• Don't track display-lg or display-md wider than their tokens; positive tracking on Unbounded makes headings fall apart.