Theming Your Product

SM products use a shared design token system. The only thing products customize is their accent color — fonts, spacing, border radius, and surface colors are fixed platform-wide.

The One Override

In your product's root CSS file:

:root {
  /* Override the accent for your product */
  --accent:       #7947d1;                    /* Studios purple */
  --accent-hover: #6535c0;
  --accent-10:    hsla(266, 48%, 54%, 0.10);
  --accent-20:    hsla(266, 48%, 54%, 0.20);
  --accent-tint:  #f1ecfa;
}

Every component in @nomadahq/sm-ui uses var(--accent) for interactive elements — buttons, active sidebar items, focus rings, progress bars, score rings. Override once, it propagates everywhere.

Product Accent Colors

Product	Hex	HSL
Sprint Mode	#2362ea	hsl(221, 83%, 53%)
Studios	#7947d1	hsl(266, 48%, 54%)
Mode	#f4930a	hsl(30, 90%, 50%)
Hub	#2362ea	same as Sprint Mode
Sprint Capital	#1fac6a	hsl(151, 69%, 40%)
PrivacyAI	#0fb67f	hsl(161, 80%, 38%)

Dark Mode

Dark mode is automatic. Import the SM CSS file — it includes the prefers-color-scheme: dark overrides. You don't write any dark mode styles.

import '@nomadahq/sm-ui/css'  // includes dark mode tokens

Your product CSS (for accent colors) is the same in both modes — the hsla() alpha values adapt because the underlying surface colors change.

What You Cannot Change

Fixed platform-wide	Reason
Font: Noto Sans	Brand consistency
Border radius: 0.75rem / 0.5rem	Visual identity
Spacing scale: 4px base	Layout consistency
Surface colors: --bg, --bg-card, etc.	Dark mode system
Text colors: --foreground, --muted	Readability

Logos

See DESIGN_SYSTEM.md for the complete logo spec. Short version:

1. Copy logo files from _jockey/brand-assets/ into your repo's public/assets/
2. Use <picture> with both light and dark variants
3. Never recreate, recolor, or reference logos cross-domain

Adding Brand-Specific UI

For product-specific visual elements that go beyond the accent color:

/* Fine — scoped to a product feature */
.mode-scan-badge {
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-20);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

Use SM tokens for all values — never hardcode hex colors except for your accent override at :root.