Design System

Reusable components, patterns, rules and tokens.

html

<div class="dsys" role="img" aria-label="Design system tokens feeding a button component">
  <div class="dsys__tokens">
    <div class="dsys__token"><span class="dsys__swatch" style="background:#A8E6C1;"></span>colour</div>
    <div class="dsys__token"><span class="dsys__swatch" style="border-radius:12px;"></span>radius</div>
    <div class="dsys__token"><span class="dsys__swatch" style="width:16px;"></span>spacing</div>
  </div>
  <span class="dsys__arrow" aria-hidden="true">&rarr;</span>
  <div class="dsys__preview dsys__preview--button" style="background:#A8E6C1;border-radius:12px;padding:16px;">Button</div>
  <div class="dsys__preview dsys__preview--card" style="border-radius:12px;padding:16px;border-top:6px solid #A8E6C1;">Card</div>
</div>
<style>
.dsys { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; }
.dsys__tokens { display: flex; flex-direction: column; gap: 6px; }
.dsys__token { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #24143099; }
.dsys__swatch { display: inline-block; width: 18px; height: 18px; background: #24143018; flex-shrink: 0; }
.dsys__arrow { font-size: 18px; color: #24143060; }
.dsys__preview { display: none; font-weight: 600; text-align: center; background: #ffffff; box-sizing: border-box; flex: 1; }
.dsys__preview--button { color: #241430; }
.dsys--x { }
.dsys__preview--button { display: none; }
.dsys__preview--card { display: none; }
.dsys.dsys--button .dsys__preview--button, .dsys.dsys--card .dsys__preview--card { display: block; }
</style>

tailwind

<div class="dsystw dsystw--button font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border flex items-center gap-3" role="img" aria-label="Design system tokens feeding a button component">
  <div class="flex flex-col gap-1.5">
    <div class="flex items-center gap-1.5 text-[11px] text-[#24143099]"><span class="inline-block w-[18px] h-[18px] bg-[#24143018] shrink-0" style="background:#A8E6C1;"></span>colour</div>
    <div class="flex items-center gap-1.5 text-[11px] text-[#24143099]"><span class="inline-block w-[18px] h-[18px] bg-[#24143018] shrink-0" style="border-radius:12px;"></span>radius</div>
    <div class="flex items-center gap-1.5 text-[11px] text-[#24143099]"><span class="inline-block w-[18px] h-[18px] bg-[#24143018] shrink-0" style="width:16px;"></span>spacing</div>
  </div>
  <span class="text-lg text-[#24143060]" aria-hidden="true">&rarr;</span>
  <div class="dsystw__preview dsystw__preview--button hidden flex-1 text-center font-semibold bg-white box-border" style="background:#A8E6C1;border-radius:12px;padding:16px;">Button</div>
  <div class="dsystw__preview dsystw__preview--card hidden flex-1 text-center font-semibold bg-white box-border" style="border-radius:12px;padding:16px;border-top:6px solid #A8E6C1;">Card</div>
</div>
<style>
.dsystw--button .dsystw__preview--button, .dsystw--card .dsystw__preview--card { display: block; }
</style>

react

export function DesignSystem({
  colorToken = "#A8E6C1",
  radiusToken = 12,
  spacingToken = 16,
  preview = "button",
}) {
  return (
    <div role="img" aria-label={`Design system tokens feeding a ${preview} component`} style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box", display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#24143099" }}><span style={{ display: "inline-block", width: 18, height: 18, background: colorToken, flexShrink: 0 }} />colour</div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#24143099" }}><span style={{ display: "inline-block", width: 18, height: 18, background: "#24143018", borderRadius: radiusToken, flexShrink: 0 }} />radius</div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#24143099" }}><span style={{ display: "inline-block", width: spacingToken, height: 18, background: "#24143018", flexShrink: 0 }} />spacing</div>
      </div>
      <span style={{ fontSize: 18, color: "#24143060" }} aria-hidden="true">&rarr;</span>
      {preview === "button"
        ? <div style={{ flex: 1, textAlign: "center", fontWeight: 600, boxSizing: "border-box", background: colorToken, borderRadius: radiusToken, padding: spacingToken }}>Button</div>
        : <div style={{ flex: 1, textAlign: "center", fontWeight: 600, boxSizing: "border-box", background: "#ffffff", borderRadius: radiusToken, padding: spacingToken, borderTop: `6px solid ${colorToken}` }}>Card</div>}
    </div>
  );
}