Colour Token

Named colour value.

html

<div class="token-card">
  <code class="token-card__code">--color-brand-primary: #A8E6C1;</code>
  <div class="token-card__preview token-card__preview--background" style="--tv:#A8E6C1;">Aa</div>
  <p class="token-card__label">color-brand-primary &middot; applied as background</p>
</div>
<style>
.token-card { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; max-width: 260px; box-sizing: border-box; }
.token-card__code { display: block; margin-bottom: 14px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; word-break: break-all; }
.token-card__preview { width: 100%; height: 72px; border-radius: 10px; display: grid; place-items: center; font: 600 22px/1 system-ui, sans-serif; box-sizing: border-box; }
.token-card__preview--background { background: var(--tv); color: #241430; }
.token-card__preview--text { background: #ffffff; color: var(--tv); border: 1.5px solid #24143020; }
.token-card__preview--border { background: #ffffff; color: #241430; border: 4px solid var(--tv); }
.token-card__label { margin: 10px 0 0; font-size: 12px; color: #24143099; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl max-w-[260px] box-border">
  <code class="block mb-3.5 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono break-all">--color-brand-primary: #A8E6C1;</code>
  <div class="token-tw token-tw--background w-full h-[72px] rounded-[10px] grid place-items-center text-[22px] font-semibold box-border" style="--tv:#A8E6C1;">Aa</div>
  <p class="mt-2.5 text-xs text-[#24143099]">color-brand-primary &middot; applied as background</p>
</div>
<style>
.token-tw--background { background: var(--tv); color: #241430; }
.token-tw--text { background: #ffffff; color: var(--tv); border: 1.5px solid #24143020; }
.token-tw--border { background: #ffffff; color: #241430; border: 4px solid var(--tv); }
</style>

react

export function ColourToken({
  tokenName = "color-brand-primary",
  value = "#A8E6C1",
  usage = "background",
  showCode = true,
}) {
  const preview = {
    background: { background: value, color: "#241430" },
    text: { background: "#ffffff", color: value, border: "1.5px solid #24143020" },
    border: { background: "#ffffff", color: "#241430", border: `4px solid ${value}` },
  }[usage];
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, maxWidth: 260, boxSizing: "border-box" }}>
      {showCode && (
        <code style={{ display: "block", marginBottom: 14, padding: "8px 10px", background: "#24143012", borderRadius: 6, font: "12px/1.4 ui-monospace, monospace", wordBreak: "break-all" }}>
          --{tokenName}: {value};
        </code>
      )}
      <div style={{ width: "100%", height: 72, borderRadius: 10, display: "grid", placeItems: "center", fontSize: 22, fontWeight: 600, boxSizing: "border-box", ...preview }}>Aa</div>
      <p style={{ margin: "10px 0 0", fontSize: 12, color: "#24143099" }}>{tokenName} &middot; applied as {usage}</p>
    </div>
  );
}