Tokens, and how to make Lilt yours

Rebranding: mint is a guest

The pine accent and its mint wash are swappable defaults. To rebrand, replace five semantic values per mode and keep the contrast rules: a deep primary that can fill controls in light mode, a pale one in dark. Every button, badge, focus ring, and selection follows automatically:

:root {
  --lilt-primary: #5b46b8;      /* your accent, deep enough to fill controls */
  --lilt-primary-tint: #c7b9ff; /* its pale wash: selection, soft hovers */
  --lilt-primary-soft: #efeaff; /* its soft tint */
  --lilt-primary-text: #3a2d73; /* AAA text on the tint */
  --lilt-focus: #5b46b8;        /* focus ring, AA on canvas */
}
.dark {
  --lilt-primary: #b6a6f5;
  --lilt-primary-tint: #b6a6f5;
  --lilt-primary-soft: #2c2352;
  --lilt-primary-text: #cfc3ff;
  --lilt-focus: #b6a6f5;
}

Color tokens

Radius, motion, and type

• Radius roles: 12px compact controls, 16px controls and cards, 20px dialogs, pills for md/lg buttons.
• Motion: 140ms fast / 220ms base / 320ms expressive, one shared ease-out curve, hover lift capped at 2px — all removed under reduced motion.
• Type: Space Grotesk (display, tight tracking) and DM Sans (body, 1.65 line height).
• Elevation: none. Borders and surface shifts only.