Skip to content
ZikZuk UI

Theming

The brand is one ramp. Primary buttons, links, the focus ring, the active nav item, brand chips and the composition scale all derive from it — greys, status tones and type never change.

Try a colour

Pick a brand. The preview sets the ramp on one element with brandVars; the rest of this page stays teal.

OwnerNew
Allocation
  • Unallocated25
  • Pools45
  • Wallets30
Progress1 of 3 tasks
  1. Choose provider, CompleteComplete
  3. Go live, Not started

brandVars("#2a7a8c")

The ramp

100
#e8f2f4
200
#d0e2e6
300
#9cc3cc
400
#5c9dad
500
#2a7a8c
600
#1f5e6e
700
#16454f
800
#0d2a31

--brand-100 … --brand-800 on :root, teal by default. 500 is the primary (white text at 4.9:1), 600 its hover, 700 the deep text on a brand chip, 100 the tint behind it.

In CSS

Override the ramp after the kit's stylesheet:

app/globals.css
@import "tailwindcss";
@import "@zikzuk/ui/styles.css";

:root {
  --brand-100: #e8dfff;
  --brand-200: #d2c2ff;
  --brand-300: #b49aff;
  --brand-400: #9772ff;
  --brand-500: #6a35ff;
  --brand-600: #4a25b3;
  --brand-700: #351a80;
  --brand-800: #20104d;
}

The neo purple above ships as a theme: @import "@zikzuk/ui/themes/zikpe.css"; after the kit.

At runtime

When the colour comes from data — a partner's brand, say — derive the whole ramp from one hex. applyBrand sets it on <html>; brandVars returns the variables for a styleprop (server rendering, or one region). Text on the primary flips to dark ink when white wouldn't be legible.

import { applyBrand, brandVars } from "@zikzuk/ui";

applyBrand("#0b6bcb");                         // the whole page

<html style={brandVars(partner.colour) ?? undefined}>  // rendered on the server

Button corners

Buttons follow --button-radius when you set it — :root { --button-radius: 9999px }for pill buttons — and the kit's 6px otherwise.