Spacing Token

Named spacing value.

html

<div class="sptok sptok--stack">
  <code class="sptok__code">--space-3: 16px;</code>
  <div class="sptok__demo sptok__demo--stack" style="gap:16px;"><span style="background:#D9C8F0;"></span><span style="background:#D9C8F0;"></span></div>
  <div class="sptok__demo sptok__demo--inline" style="gap:16px;"><span style="background:#D9C8F0;"></span><span style="background:#D9C8F0;"></span></div>
  <div class="sptok__demo sptok__demo--inset" style="padding:16px;background:#D9C8F0;"><span class="sptok__inner"></span></div>
</div>
<style>
.sptok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 260px; box-sizing: border-box; }
.sptok__code { display: block; margin-bottom: 16px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; }
.sptok__demo { display: none; box-sizing: border-box; }
.sptok__demo--stack { flex-direction: column; align-items: center; }
.sptok__demo--stack span, .sptok__demo--inline span { display: block; width: 60px; height: 24px; border-radius: 5px; }
.sptok--stack .sptok__demo--stack, .sptok--inline .sptok__demo--inline { display: flex; }
.sptok--inset .sptok__demo--inset { display: block; border-radius: 10px; width: fit-content; }
.sptok__inner { display: block; width: 60px; height: 40px; background: #ffffff; border-radius: 6px; }
</style>

tailwind

<div class="sptoktw sptoktw--stack font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[260px] box-border">
  <code class="block mb-4 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono">--space-3: 16px;</code>
  <div class="sptoktw__demo sptoktw__demo--stack hidden flex-col items-center" style="gap:16px;"><span class="block w-[60px] h-6 rounded" style="background:#D9C8F0;"></span><span class="block w-[60px] h-6 rounded" style="background:#D9C8F0;"></span></div>
  <div class="sptoktw__demo sptoktw__demo--inline hidden" style="gap:16px;"><span class="block w-[60px] h-6 rounded" style="background:#D9C8F0;"></span><span class="block w-[60px] h-6 rounded" style="background:#D9C8F0;"></span></div>
  <div class="sptoktw__demo sptoktw__demo--inset hidden rounded-[10px] w-fit" style="padding:16px;background:#D9C8F0;"><span class="block w-[60px] h-10 bg-white rounded-md"></span></div>
</div>
<style>
.sptoktw--stack .sptoktw__demo--stack, .sptoktw--inline .sptoktw__demo--inline { display: flex; }
.sptoktw--inset .sptoktw__demo--inset { display: block; }
</style>

react

export function SpacingToken({
  name = "space-3",
  value = 16,
  context = "stack",
  accent = "#D9C8F0",
}) {
  const box = { display: "block", width: 60, height: 24, borderRadius: 5, background: accent };
  let demo;
  if (context === "stack") demo = <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: value }}><span style={box} /><span style={box} /></div>;
  else if (context === "inline") demo = <div style={{ display: "flex", gap: value }}><span style={box} /><span style={box} /></div>;
  else demo = <div style={{ display: "block", width: "fit-content", borderRadius: 10, padding: value, background: accent }}><span style={{ display: "block", width: 60, height: 40, background: "#ffffff", borderRadius: 6 }} /></div>;
  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: 16, padding: "8px 10px", background: "#24143012", borderRadius: 6, font: "12px/1.4 ui-monospace, monospace" }}>--{name}: {value}px;</code>
      {demo}
    </div>
  );
}