Design Token

Named reusable design value.

html

<div class="dtok dtok--spacing">
  <code class="dtok__code">--space-4: 16px;</code>
  <div class="dtok__preview dtok__preview--spacing"><span class="dtok__bar" style="width:16px;background:#A8E6C1;"></span></div>
  <div class="dtok__preview dtok__preview--radius"><span class="dtok__box" style="border-radius:16px;background:#A8E6C1;"></span></div>
  <div class="dtok__preview dtok__preview--font-size"><span style="font-size:16px;color:#A8E6C1;">Aa</span></div>
</div>
<style>
.dtok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 260px; box-sizing: border-box; }
.dtok__code { display: block; margin-bottom: 14px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; }
.dtok__preview { display: none; height: 72px; align-items: center; }
.dtok--spacing .dtok__preview--spacing, .dtok--radius .dtok__preview--radius, .dtok--font-size .dtok__preview--font-size { display: flex; }
.dtok__bar { display: block; height: 18px; border-radius: 4px; max-width: 100%; }
.dtok__box { display: block; width: 64px; height: 64px; }
</style>

tailwind

<div class="dtoktw dtoktw--spacing font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[260px] box-border">
  <code class="block mb-3.5 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono">--space-4: 16px;</code>
  <div class="dtoktw__preview dtoktw__preview--spacing hidden h-[72px] items-center"><span class="block h-[18px] rounded max-w-full" style="width:16px;background:#A8E6C1;"></span></div>
  <div class="dtoktw__preview dtoktw__preview--radius hidden h-[72px] items-center"><span class="block w-16 h-16" style="border-radius:16px;background:#A8E6C1;"></span></div>
  <div class="dtoktw__preview dtoktw__preview--font-size hidden h-[72px] items-center"><span style="font-size:16px;color:#A8E6C1;">Aa</span></div>
</div>
<style>
.dtoktw--spacing .dtoktw__preview--spacing, .dtoktw--radius .dtoktw__preview--radius, .dtoktw--font-size .dtoktw__preview--font-size { display: flex; }
</style>

react

export function DesignToken({
  name = "space-4",
  value = 16,
  appliesTo = "spacing",
  accent = "#A8E6C1",
}) {
  let preview;
  if (appliesTo === "spacing") preview = <span style={{ display: "block", height: 18, width: value, maxWidth: "100%", borderRadius: 4, background: accent }} />;
  else if (appliesTo === "radius") preview = <span style={{ display: "block", width: 64, height: 64, borderRadius: value, background: accent }} />;
  else preview = <span style={{ fontSize: value, color: accent }}>Aa</span>;
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 260, boxSizing: "border-box" }}>
      <code style={{ display: "block", marginBottom: 14, padding: "8px 10px", background: "#24143012", borderRadius: 6, font: "12px/1.4 ui-monospace, monospace" }}>--{name}: {value}px;</code>
      <div style={{ height: 72, display: "flex", alignItems: "center" }}>{preview}</div>
    </div>
  );
}