Theming

SM products override the --accent CSS variable to apply their brand color throughout the UI. The design token system handles the rest automatically.

The --accent Variable

@nomadahq/sm-ui/css defines --accent as the Sprint Mode blue by default. Products override it in their own CSS:

/* In your product's root CSS file — applied at :root or on the app container */
:root {
  --accent:       #7947d1;   /* Studios purple */
  --accent-10:    hsla(266, 48%, 54%, 0.10);
  --accent-20:    hsla(266, 48%, 54%, 0.20);
  --accent-hover: #6535c0;
  --accent-tint:  #f1ecfa;
}

Product Color Reference

Product	--accent	--accent-tint
Sprint Mode	#2362ea (blue)	#e9effc
Studios	#7947d1 (purple)	#f1ecfa
Mode	#f4930a (orange)	#fdf4e6
Hub	#2362ea (blue)	#e9effc
Sprint Capital	#1fac6a (green)	#e8f6f0
PrivacyAI	#0fb67f (teal)	#e7f7f2

Full Token Reference

Import @nomadahq/sm-ui/css to get all tokens:

/* Brand */
--blue:        hsl(221, 83%, 53%);   /* #2362ea */
--blue-hover:  hsl(221, 83%, 45%);
--blue-10:     hsla(221, 83%, 53%, 0.1);
--blue-20:     hsla(221, 83%, 53%, 0.2);

/* Text */
--foreground:  hsl(0, 0%, 9%);       /* near-black */
--muted:       hsl(220, 9%, 40%);    /* secondary text */

/* Surfaces */
--bg:          hsl(0, 0%, 100%);
--bg-subtle:   hsl(220, 14%, 97%);   /* off-white */
--bg-card:     hsl(0, 0%, 100%);

/* Borders */
--border:      hsl(214, 32%, 91%);

/* Semantic */
--green:       hsl(142, 71%, 45%);
--green-light: hsl(142, 71%, 95%);
--red:         hsl(0, 84%, 60%);
--red-light:   hsl(0, 84%, 96%);
--amber:       hsl(38, 92%, 50%);
--amber-light: hsl(38, 92%, 95%);

/* Layout */
--radius:      0.75rem;
--radius-sm:   0.5rem;
--max-w-app:   72rem;
--sidebar-w:   248px;
--font:        'Noto Sans', system-ui, -apple-system, sans-serif;

Dark Mode

Dark mode is automatic via prefers-color-scheme. The token file handles it:

@media (prefers-color-scheme: dark) {
  :root {
    --foreground:  hsl(0, 0%, 93%);
    --muted:       hsl(220, 9%, 60%);
    --bg:          hsl(220, 14%, 10%);
    --bg-subtle:   hsl(220, 14%, 8%);
    --bg-card:     hsl(220, 14%, 13%);
    --border:      hsl(214, 20%, 20%);
  }
}

Never build a manual dark mode toggle. System setting drives theme automatically.

Typography

Font is always Noto Sans. The token CSS imports it from Google Fonts automatically.

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

Do not use any other font in SM products.

Logo Usage

Always use the provided logo files. Never recreate them. Use the <picture> element for automatic dark mode switching:

<picture>
  <source
    srcset="/logo-sprint-mode-horizontal-dark.png"
    media="(prefers-color-scheme: dark)"
  >
  <img src="/logo-sprint-mode-horizontal.png" alt="Sprint Mode" height="32">
</picture>

Both light and dark logo variants must be copied into each portal's own repo — never referenced cross-domain.

Logo files live in _jockey/brand-assets/ in the nomadahq/sprint-mode repo.