Skip to content
oks-ui

Theme to your brand

To theme oks-ui to your brand, override its colour ramp, radius and density in one stylesheet, with no build step. This is the order to do it in, and it takes about ten minutes.

LiveOverview

Workspace settings

Changes save to every member.

Pro plan

Start from the defaults.

1. Set the primary ramp

primary is the role that colours your main buttons, links, and focus states. Override the whole ramp, 50 to 950, so hover and pressed states stay coherent: a solid button fills with the 700 shade, hover reads 800 and pressed reads 900. Leave any shade out and that state keeps the default colour.

:root {
  --oks-color-primary-50:  #eef2ff;
  --oks-color-primary-100: #e0e7ff;
  --oks-color-primary-200: #c7d2fe;
  --oks-color-primary-300: #a5b4fc;
  --oks-color-primary-400: #818cf8;
  --oks-color-primary-500: #6366f1;
  --oks-color-primary-600: #4f46e5;
  --oks-color-primary-700: #4338ca;
  --oks-color-primary-800: #3730a3;
  --oks-color-primary-900: #312e81;
  --oks-color-primary-950: #1e1b4b;
  /* 700 is the fill of a solid button; 800 is hover, 900 is pressed */
}

2. Match the shape

:root {
  --oks-radius-sm: 0.125rem;
  --oks-radius-md: 0.5rem;   /* the one most components use */
  --oks-radius-lg: 0.875rem;
}

3. Dial in density

The space scale drives padding and gaps everywhere. Nudge --oks-space-4 (the workhorse) up for an airy feel, down for a compact one.

:root { --oks-space-4: 14px; }  /* default is 16px */

4. Point neutral surfaces at your grey

If your brand grey isn't the default, alias the neutral role — form fields, borders, and muted text follow.

:root {
  --oks-color-neutral-100: var(--oks-palette-stone-100);
  --oks-color-neutral-500: var(--oks-palette-stone-500);
}

5. Dark mode

Do the same overrides under your dark selector. If you changed the surfaces, set --oks-color-surface and --oks-form-field-bg for dark as well — see Dark mode.