<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">TanStack design system snapshot</title>
  <desc id="desc">A compact snapshot of the TanStack design system showing color ramps, typography, semantic tokens, and component examples.</desc>
  <defs>
    <filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="18" stdDeviation="22" flood-color="#111111" flood-opacity=".16"/>
    </filter>
    <style>
      .display { font-family: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif; }
      .sans { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
      .mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
      .label { fill: #736b5d; font-size: 18px; font-weight: 600; }
      .caption { fill: #736b5d; font-size: 14px; }
      .ink { fill: #111111; }
    </style>
  </defs>
  <rect width="1200" height="720" fill="#f4f0df"/>
  <rect x="36" y="36" width="1128" height="648" rx="28" fill="#ece9d6" stroke="#3c352b" stroke-opacity=".12"/>

  <g transform="translate(76 76)">
    <text class="display ink" x="0" y="0" font-size="42" font-weight="700" dominant-baseline="hanging">TanStack DS</text>
    <text class="sans caption" x="0" y="58">Tokens, type, iconography, and components with one place to make decisions.</text>
    <text class="mono caption" x="930" y="10" text-anchor="end">/ds</text>
  </g>

  <g filter="url(#soft-shadow)">
    <rect x="76" y="164" width="508" height="244" rx="20" fill="#fffdf2"/>
    <rect x="616" y="164" width="508" height="244" rx="20" fill="#fffdf2"/>
    <rect x="76" y="440" width="508" height="188" rx="20" fill="#fffdf2"/>
    <rect x="616" y="440" width="508" height="188" rx="20" fill="#fffdf2"/>
  </g>

  <g transform="translate(108 196)">
    <text class="sans label" x="0" y="0">Primitive ramps</text>
    <text class="mono caption" x="0" y="28">green, terracotta, blue, purple, amber, neutral</text>
    <g transform="translate(0 62)">
      <text class="mono caption" x="0" y="18">green</text>
      <rect x="112" y="0" width="58" height="30" rx="7" fill="#daeedc"/>
      <rect x="176" y="0" width="58" height="30" rx="7" fill="#a7dbad"/>
      <rect x="240" y="0" width="58" height="30" rx="7" fill="#70b57a"/>
      <rect x="304" y="0" width="58" height="30" rx="7" fill="#44a54e"/>
      <rect x="368" y="0" width="58" height="30" rx="7" fill="#203f28"/>
    </g>
    <g transform="translate(0 104)">
      <text class="mono caption" x="0" y="18">terra</text>
      <rect x="112" y="0" width="58" height="30" rx="7" fill="#f4d9c9"/>
      <rect x="176" y="0" width="58" height="30" rx="7" fill="#e5ad95"/>
      <rect x="240" y="0" width="58" height="30" rx="7" fill="#d37556"/>
      <rect x="304" y="0" width="58" height="30" rx="7" fill="#c3502b"/>
      <rect x="368" y="0" width="58" height="30" rx="7" fill="#571e0e"/>
    </g>
    <g transform="translate(0 146)">
      <text class="mono caption" x="0" y="18">blue</text>
      <rect x="112" y="0" width="58" height="30" rx="7" fill="#daeef1"/>
      <rect x="176" y="0" width="58" height="30" rx="7" fill="#a2d1dc"/>
      <rect x="240" y="0" width="58" height="30" rx="7" fill="#69a8b7"/>
      <rect x="304" y="0" width="58" height="30" rx="7" fill="#469db8"/>
      <rect x="368" y="0" width="58" height="30" rx="7" fill="#013e53"/>
    </g>
  </g>

  <g transform="translate(648 196)">
    <text class="sans label" x="0" y="0">Typography</text>
    <text class="mono caption" x="0" y="28">Bricolage Grotesque, Inter, IBM Plex Mono</text>
    <text class="display ink" x="0" y="82" font-size="48" font-weight="700">Type-safe by default</text>
    <text class="sans" x="0" y="126" fill="#3c352b" font-size="20">Headless tools for building web apps.</text>
    <text class="mono" x="0" y="168" fill="#3c352b" font-size="19">const router = createRouter()</text>
  </g>

  <g transform="translate(108 472)">
    <text class="sans label" x="0" y="0">Semantic tokens</text>
    <text class="mono caption" x="0" y="28">components consume meaning, not raw colors</text>
    <g transform="translate(0 62)">
      <rect x="0" y="0" width="128" height="54" rx="12" fill="#111111"/>
      <text class="mono" x="64" y="33" text-anchor="middle" fill="#fffdf2" font-size="13">text-primary</text>
      <rect x="144" y="0" width="128" height="54" rx="12" fill="#ece9d6" stroke="#aba594"/>
      <text class="mono" x="208" y="33" text-anchor="middle" fill="#111111" font-size="13">surface</text>
      <rect x="288" y="0" width="128" height="54" rx="12" fill="#44a54e"/>
      <text class="mono" x="352" y="33" text-anchor="middle" fill="#fffdf2" font-size="13">success</text>
    </g>
  </g>

  <g transform="translate(648 472)">
    <text class="sans label" x="0" y="0">Component kit</text>
    <text class="mono caption" x="0" y="28">buttons, badges, inputs, cards, spinners, menus</text>
    <g transform="translate(0 62)">
      <rect x="0" y="0" width="132" height="46" rx="10" fill="#013e53"/>
      <text class="sans" x="66" y="29" text-anchor="middle" fill="#fffdf2" font-size="16" font-weight="700">Primary</text>
      <rect x="148" y="0" width="134" height="46" rx="10" fill="#fffdf2" stroke="#aba594"/>
      <text class="sans" x="215" y="29" text-anchor="middle" fill="#111111" font-size="16" font-weight="700">Secondary</text>
      <rect x="298" y="0" width="108" height="46" rx="23" fill="#f4d9c9" stroke="#c3502b" stroke-opacity=".3"/>
      <text class="sans" x="352" y="29" text-anchor="middle" fill="#571e0e" font-size="15" font-weight="700">Beta</text>
      <rect x="0" y="68" width="406" height="48" rx="12" fill="#ffffff" stroke="#aba594"/>
      <text class="sans" x="22" y="98" fill="#736b5d" font-size="15">Project config</text>
      <circle cx="370" cy="92" r="9" fill="#44a54e"/>
    </g>
  </g>
</svg>
