The Kit/Palettes

Neutral Contract

A calm periwinkle-accented baseline that flatters almost any component. The default starting point when a design has not chosen its voice yet.

  • --bg#0c0e13
  • --surface#14171e
  • --surface-2#1b1f28
  • --ink#f1f3f7
  • --ink-dim#aab0bd
  • --accent#6ea8fe
  • --accent-2#b66efe
  • --good#36d399
  • --warn#f5b544
  • --bad#ff5d6c
palette.css
/* Neutral Contract - the library's own baseline colour system. */
[data-palette="neutral-contract"] {
  --bg: #0c0e13;
  --surface: #14171e;
  --surface-2: #1b1f28;
  --ink: #f1f3f7;
  --ink-dim: #aab0bd;
  --accent: #6ea8fe;
  --accent-2: #b66efe;
  --good: #36d399;
  --warn: #f5b544;
  --bad: #ff5d6c;
}
← The whole kit