Customization

CSS Variables Only

Shift CSS is fully customizable via CSS custom properties. No build step required.

Changing Brand Colors

Override seed hues to regenerate entire color palettes:

:root {
  /* Primary brand color */
  --shift-hue-primary: 280;    /* Default: 250 (blue) */

  /* Gray tint (matches primary for cohesion) */
  --shift-hue-neutral: 280;    /* Default: 250 */

  /* Secondary brand color */
  --shift-hue-secondary: 160;  /* Default: 180 (cyan) */

  /* Accent/highlight color */
  --shift-hue-accent: 45;      /* Default: 30 (orange) */
}

Overriding Specific Tokens

Target individual color steps:

:root {
  /* Make primary-500 more saturated */
  --s-primary-500: oklch(0.65 0.2 var(--shift-hue-primary));

  /* Custom semantic mappings */
  --s-interactive-primary: var(--s-primary-700);
}

Typography

:root {
  /* Font families */
  --s-font-sans: 'Inter', system-ui, sans-serif;
  --s-font-mono: 'JetBrains Mono', monospace;

  /* Base size (affects all fluid typography) */
  --s-font-base: 1rem;
}

Spacing Scale

:root {
  /* Override spacing values */
  --s-space-4: 1.25rem;  /* Default: 1rem */

  /* Or use a different base */
  --s-space-1: 0.3rem;   /* Tighter spacing */
}

Border Radius

:root {
  /* Rounded corners */
  --s-radius: 0.5rem;
  --s-radius-lg: 1rem;

  /* Or go sharp */
  --s-radius: 0;
  --s-radius-lg: 0;
  --s-radius-full: 0;
}

Component-Level Customization

Components use internal custom properties (prefixed with --_):

/* Customize buttons globally */
[s-btn] {
  --_radius: var(--s-radius-full);  /* Pill buttons */
}

/* Or scope to a container */
.my-section [s-btn] {
  --_bg: var(--s-accent-500);
}

Per-Instance Customization

Use inline styles for one-off changes:

<button s-btn="primary" style="--_bg: var(--s-success-500);">
  Success Button
</button>

<div s-surface="raised" style="background: var(--s-primary-100);">
  Custom tinted surface
</div>

Container Width

:root {
  --s-container-max: 1400px;  /* Default: 80rem (1280px) */
}

Token Naming Convention

All CSS custom properties follow consistent naming:

Category	Pattern	Example
Color scales	--s-{color}-{step}	--s-primary-500
Semantic colors	--s-{role}	--s-surface-base
Spacing	--s-space-{n}	--s-space-4
Typography	--s-font-{property}	--s-font-sans
Radii	--s-radius-{size}	--s-radius-lg