Tokens

Every value lives once, as a CSS custom property in @zitdevs/tokens/tokens.css. theme.css teaches Tailwind the names, so a utility compiles to the variable itself — bg-primary to var(--ui-primary), text-label to var(--text-label) — and changing a token changes every component that uses it.

Quick path

I want…	Write
An interactive or brand colour	bg-primary, text-primary, border-accent
Heading, body, secondary text	text-ink, text-body, text-muted
A field	bg-surface, bg-surface-raised, bg-surface-inverse
A line	border-default, border-subtle, border-control
A status	border-danger, bg-success-soft, text-danger-strong
A font size	text-sm, text-label, text-display-section
Spacing	p-4 (16px), gap-2.5 (10px): every step is 4px
A radius or a shadow	rounded-sm, shadow-md, shadow-focus
The control transition	transition-control
A token with no utility	duration-(--duration-base), bg-(--ui-border-strong)
A brand colour that never re-themes	fill-zd-blue — only for brand artwork, such as the logo

Colour

Semantic roles

The roles components are written in, and their ZitDevs values, are listed in Theming.

Palette

The ZitDevs brand values: the identity manual’s five colours, their ramps, navy-tinted neutrals and the status colours. Utilities write them as bg-zd-blue, text-zd-orange-600. Components never do — they use the roles — except the logo, whose colours the manual fixes.

--zd-blue#2264dc

--zd-blue-light#5a8cff

--zd-orange#f25928

--zd-navy#0a0046

--zd-cream#faf7f0

--zd-white#ffffff

--zd-blue-50#eef3fe

--zd-blue-100#d9e4fc

--zd-blue-200#b4c9f8

--zd-blue-300#8fadf4

--zd-blue-400#5a8cff

--zd-blue-500#2264dc

--zd-blue-600#1b51b4

--zd-blue-700#153e8b

--zd-blue-800#0f2c63

--zd-blue-900#0a0046

--zd-orange-50#fef1ec

--zd-orange-100#fbdcd0

--zd-orange-200#f8b79e

--zd-orange-300#f5906b

--zd-orange-400#f25928

--zd-orange-500#d9430f

--zd-orange-600#a9350c

--zd-neutral-0#ffffff

--zd-neutral-25#faf7f0

--zd-neutral-50#f4f2ec

--zd-neutral-100#e9e7e1

--zd-neutral-200#d7d5d0

--zd-neutral-300#b7b5b1

--zd-neutral-400#8e8c89

--zd-neutral-500#6b6966

--zd-neutral-600#4c4a48

--zd-neutral-700#33312f

--zd-neutral-800#1f1e1d

--zd-neutral-900#141311

--zd-success#1e8e5a

--zd-success-surface#e7f4ee

--zd-warning#c97a0b

--zd-warning-surface#fbf1df

--zd-danger#d9430f

--zd-danger-surface#fef1ec

--zd-info#2264dc

--zd-info-surface#eef3fe

Type

One family, Proxima Nova, with JetBrains Mono for numbers and references. Weights: font-thin (200), font-light (300), font-regular (400), font-medium (500), font-semibold (600), font-bold (700), font-extrabold (800), font-black (900). Tailwind’s font-normal is reset: write font-regular.

The size scale, then the sizes named by role. Size utilities set the size alone; leading and tracking are separate (leading-control, tracking-eyebrow).

text-2xs11pxManaged technology

text-xs12pxManaged technology

text-sm14pxManaged technology

text-md16pxManaged technology

text-lg18pxManaged technology

text-xl20pxManaged technology

text-2xl24pxManaged technology

text-3xl30pxManaged technology

text-4xl38pxManaged technology

text-5xl48pxManaged technology

text-6xl60pxManaged technology

text-7xl76pxManaged technology

text-meta11.5pxManaged technology

text-hint12.5pxManaged technology

text-caption13pxManaged technology

text-label13.5pxManaged technology

text-ui14.5pxManaged technology

text-small15pxManaged technology

text-card15.5pxManaged technology

text-copy16.5pxManaged technology

text-emphasis17pxManaged technology

text-card-title22pxManaged technology

text-tag10.5pxManaged technology

text-panel-title26pxManaged technology

text-noteclamp(19px, 2vw, 26px)Managed technology

text-statclamp(34px, 3.6vw, 48px)Managed technology

text-display-heroclamp(40px, 5.2vw, 72px)Managed technology

text-display-pageclamp(32px, 3.8vw, 52px)Managed technology

text-display-sectionclamp(30px, 3.4vw, 48px)Managed technology

text-display-ctaclamp(32px, 4vw, 56px)Managed technology

text-lead-heroclamp(18px, 1.5vw, 21px)Managed technology

text-lead-pageclamp(16.5px, 1.3vw, 19px)Managed technology

text-lead-sectionclamp(17px, 1.3vw, 19px)Managed technology

text-lead-ctaclamp(18px, 1.4vw, 20px)Managed technology

Spacing, radius and motion

Group	Tokens	Utilities
Spacing	--space-1 = 4px; Tailwind multiplies it	p-4, gap-2.5, mt-5.5
Widths	--container-narrow 720px, -default 1120px, -wide 1360px; --measure-*	max-w-default, max-w-measure-lead
Radius	--radius-xs 2px, -sm 4px, -md 6px, -lg 10px, -xl 16px, -pill	rounded-sm, rounded-pill
Shadow	--shadow-xs … -lg, -brand, -sheet; the focus rings	shadow-md, shadow-focus
Duration	--duration-instant 80ms, -fast 140ms, -base 200ms, -slow, -slower	duration-(--duration-base)
Easing	--ease-standard, --ease-out, --ease-in	ease-standard
Animation	the spinner, the fade-in, the rise, the skeleton pulse, the indeterminate sweep	animate-spin, animate-pulse
Breakpoints	Tailwind’s own, plus the page designs’ page-sm 560px, page-md 820px, page-lg 1140px	page-lg:grid-cols-(--split-hero)
Containers	a service visual’s own widths, visual-split 384px and visual-row 576px	@visual-split:grid-cols-2

The triangle of the mark is a utility in four directions (clip-triangle-down, -up, -right, -left), and the chevron motif bleeds off a band’s edge with mask-chevron. The pattern tiles are --pattern-lines-blue, --pattern-marks-blue and --pattern-marks-cream: bg-(image:--pattern-marks-blue) bg-size-(--pattern-size-md), with tiles of --pattern-size-sm 160px, -md 260px and -lg 420px. --toaster-offset (0px) lifts the toaster above a page’s own bottom banner.

Breakpoints and container widths are values in theme.css, not variables in tokens.css: a media or container query cannot read a custom property. The page grids that use them are built by gridColumns, gridClass and cellClass from @zitdevs/ui, which leave no row short whatever the count. A select still showing its prompt matches the prompt-shown: variant.

In JavaScript

For React Native, canvas, charts or email, where a CSS variable cannot reach, the same values are exported as numbers and strings. Keys are the CSS names without their prefix; lengths are px, durations ms, letter spacing em.

import { fontFamily, fontSize, palette, radius, semantic, space } from '@zitdevs/tokens';

const styles = {
  button: {
    backgroundColor: semantic.primary, // '#2264dc'
    borderRadius: radius.sm, // 4
    paddingHorizontal: space[5], // 20
  },
  label: { color: semantic['on-primary'], fontFamily: fontFamily.sans, fontSize: fontSize.card },
  rule: { backgroundColor: palette['orange-600'] },
};

semantic is the ZitDevs mapping resolved to hex, and semanticMapping names the palette colour behind each role. The fluid clamp() sizes exist only in CSS.