Design tokens
RightsKit Styleguide
Every design token, rendered live from src/styles/global.css. Colours sampled from the mock; type & spacing measured and rounded to a 4px base. Correct anything that looks off and I'll adjust the tokens.
Fonts
--font-display — Clash Grotesk (headings)
Aa Bb Cc Dd
ABCDEFGHIJKLM abcdefghijklm 0123456789 & ?!
--font-sans — Switzer (body / UI)
Aa Bb Cc Dd
ABCDEFGHIJKLM abcdefghijklm 0123456789 & ?!
Type scale
H1
Clash Grotesk · clamp 44 → 72px · lh 1.02 · 500
Your rights data toolkit
Display
Clash Grotesk · clamp 36 → 48px · lh 1.08 · 500
Uncover the true value
H2
Clash Grotesk · clamp 28 → 36px · lh 1.15 · 500
Data services
H3
Clash Grotesk · 24px · lh 1.3 · 600
Managed rights
Body
Switzer · 18px · lh 1.6 · 400
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small
Switzer · 14px · lh 1.5 · 400
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Eyebrow
Switzer · 13px · lh 1.4 · 500 · +0.08em · UPPER
Unlicensed commercial sync
Colours
brand
--color-brand
brand-hover
--color-brand-hover
ink
--color-ink
ink-muted
--color-ink-muted
surface
--color-surface
surface-muted
--color-surface-muted
panel
--color-panel
surface-dark
--color-surface-dark
surface-raised
--color-surface-raised
surface-raised-2
--color-surface-raised-2
on-dark-muted
--color-on-dark-muted
accent
--color-accent
Neutral ramp
neutral-100
#F4F4F5
neutral-200
#E6E6E9
neutral-300
#DBDBDB
neutral-500
#9A9BA3
neutral-700
#5B5D6B
Spacing scale (4px base)
Radii
rounded-sm
4px
rounded-md
6px
rounded-lg
8px
rounded-xl
12px
rounded-pill
9999px
Shadows
shadow-card
shadow-raised
Motion
--duration-fast· 150ms — hovers, small state changes--duration-base· 300ms — most transitions--duration-slow· 600ms — scroll reveals--ease-out-soft· cubic-bezier(0.22, 1, 0.36, 1)--ease-in-out-soft· cubic-bezier(0.65, 0, 0.35, 1)
Live scroll-reveal demo — these fade + rise in as you scroll (disabled under prefers-reduced-motion):