Building with oks-ui

Theme to your brand

Ten minutes, one stylesheet, no build step. This is the order to do it in.

1. Set the primary ramp

primary is the role that colours your main buttons, links, and focus states. Override the whole ramp so hover and active states stay coherent — not just the 500.

:root {
  --oks-color-primary-50:  #eef2ff;
  --oks-color-primary-100: #e0e7ff;
  --oks-color-primary-500: #4f46e5;  /* your brand */
  --oks-color-primary-600: #4338ca;  /* hover */
  --oks-color-primary-700: #3730a3;  /* active */
}

Check contrast

A solid button uses white (or near-black) text on the 500. Make sure your 500 clears 4.5:1 against that label — pick a deeper shade if it doesn't.

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, and set the two consumer-defined tokens — see Dark mode.