Design your identity

At a glanceCopy Anchor Link

• Who: Teams that want to try spacing, borders, type and colour on a live card before copying tokens.
• What: A docs page writes compact identity tokens onto a scoped draft through the CSS variable writer. The address bar keeps the draft and the dark preview. Reset restores the chosen look. Contrast chips warn when foreground and background miss WCAG AA. Suggest turns a short request into a token preview; Apply writes it, Discard keeps the draft.
• Use when: To try a look on one card without changing the whole page identity.
• Avoid when: To switch the published page look — use IdentitySwitcher or data-identity on the root instead.
• See also: Switch the visual identity with one attribute

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.7.2 (via changesets).

ExampleCopy Anchor Link

import { applyIdentityTokenSheet, identityPresets } from "@zedtech/zedkit-ui";

applyIdentityTokenSheet(
  identityPresets.mist,
  '[data-identity-scope][data-identity="draft"]',
);

Wraps: zod (token schema); CSS variables from applyIdentityTokenSheet

Live editorCopy Anchor Link

Mist is already filled in. Change spacing first, then watch the card. Dark previews the dark colour pair on that card only. Contrast chips warn when text and background miss WCAG AA. Describe a look and Suggest; review the list, then Apply or Discard. When Suggest is off, a keyword match fills the preview instead. The address bar keeps the draft so a refresh or a shared link opens the same look. Reset restores the look you picked.