diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index dddb85f..7e0995c 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -27,7 +27,8 @@ jobs:
         run: |
           set -euo pipefail
           mkdir -p _site/specs/v3
-          cp docs/index.html _site/index.html
+          # Stage everything in docs/ so a new asset needs no workflow change.
+          cp -R docs/. _site/
           cp specs/v3/*.yaml _site/specs/v3/
 
       - name: Rewrite spec paths for flat layout
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index f2720d2..d370032 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -17,3 +17,15 @@ jobs:
 
       - name: Lint OpenAPI specs with Spectral
         run: npx --yes @stoplight/spectral-cli@^6.14.0 lint specs/v3/*.yaml --fail-severity error
+
+      - name: Check design tokens referenced by the docs page are defined
+        run: |
+          set -euo pipefail
+          missing=0
+          for name in $(grep -oE -- '--si-[a-z0-9-]+' docs/index.html | sort -u); do
+            if ! grep -qE -- "^[[:space:]]*${name}[[:space:]]*:" docs/tokens.css; then
+              echo "Undefined design token referenced in docs/index.html: $name"
+              missing=1
+            fi
+          done
+          exit $missing
diff --git a/README.md b/README.md
index 7603035..1293a34 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,19 @@ OpenAPI 3.0 specifications for the Smile Identity v3 API.
 
 Rendered API documentation is available via [GitHub Pages](https://smileidentity.github.io/api-reference/).
 
+The page is styled with the Smile ID design system. `docs/tokens.css` is a verbatim copy of that
+system's generated `dist/css/tokens.css` — don't hand-edit it. To refresh it, copy the file across
+again and record the source revision below. Its own header refers to a `tokens/` directory and a
+build command that belong to the design system repo, not this one.
+
+| | |
+|---|---|
+| Copied from | Smile ID design system, `dist/css/tokens.css` |
+| Copied on | 25 July 2026 |
+
+CI checks that every `--si-*` token `docs/index.html` references is defined in `docs/tokens.css`, so
+a rename in a refreshed copy fails the build rather than silently unstyling the page.
+
 ## Using the Specs
 
 ### Import into Postman
diff --git a/docs/index.html b/docs/index.html
index d022008..2349d67 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,37 +5,40 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Smile ID API Reference</title>
     <meta name="description" content="OpenAPI 3.0 reference for the Smile ID v3 API." />
+    <!-- Smile ID mark, primary blue -->
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34' fill='%23151f72'%3E%3Cpath d='M18.154 16.523H0v16.92h18.154v-16.92z'/%3E%3Cpath d='M22.565 0h-.499c-4.625 0-8.761 3.018-8.761 9.653v6.88h18.103v-6.88C31.408 3.018 27.23 0 22.565 0z'/%3E%3C/svg%3E"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700;800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Epilogue:wght@600;700;800&display=swap"
       rel="stylesheet"
     />
+    <!-- Smile ID design system tokens (generated; see docs/tokens.css header) -->
+    <link rel="stylesheet" href="tokens.css" />
     <style>
       :root {
-        --brand-navy: #151F72;
-        --brand-navy-deep: #00065C;
-        --brand-blue: #1E40AF;
-        --brand-orange: #FF9B00;
-        --brand-cream: #F9F0E7;
-        --ink: #1F2937;
-        --ink-muted: #4A5565;
-        --line: rgba(255, 255, 255, 0.08);
-        --sidebar-w: 280px;
+        --sidebar-w: 264px;
         --header-h: 64px;
-        --font-sans: "Epilogue", ui-sans-serif, system-ui, -apple-system,
-          BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-          sans-serif;
+        --rail-bg: var(--si-color-primary);
+        --rail-fg: var(--si-color-neutral-off-white);
+      }
+      /* Step the rail down from the header only where color-mix is supported.
+         Unguarded, an unsupported browser makes the background declaration
+         invalid at computed-value time and the rail loses its fill entirely. */
+      @supports (color: color-mix(in srgb, red, blue)) {
+        :root { --rail-bg: color-mix(in srgb, var(--si-color-primary) 90%, #000); }
       }
 
       * { box-sizing: border-box; }
-      html, body {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        font-family: var(--font-sans);
-        color: var(--ink);
-        background: #fff;
+      html, body { margin: 0; padding: 0; height: 100%; }
+      body {
+        font-family: var(--si-text-style-body-font-family);
+        color: var(--si-color-text-body);
+        background: var(--si-color-surface);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
@@ -46,47 +49,44 @@
         left: 0;
         right: 0;
         height: var(--header-h);
-        background: var(--brand-navy);
-        color: #fff;
+        background: var(--si-color-primary);
         display: flex;
         align-items: center;
-        padding: 0 28px;
+        gap: var(--si-spacing-md);
+        padding: 0 var(--si-spacing-lg);
         z-index: 10;
-        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
       }
+      /* Base colour for both chrome surfaces: everything painted on primary blue
+         inherits it, so a dimmed color-mix that fails still lands on legible text. */
+      #header, #sidebar { color: var(--si-color-on-primary); }
       #header .wordmark {
         display: flex;
         align-items: center;
-        gap: 10px;
-        font-weight: 700;
-        font-size: 17px;
-        letter-spacing: -0.01em;
         text-decoration: none;
-        color: #fff;
-      }
-      #header .wordmark .dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: var(--brand-orange);
+        color: var(--rail-fg);
       }
+      #header .wordmark svg { height: 22px; width: auto; display: block; }
       #header .subtitle {
-        margin-left: 14px;
-        padding-left: 14px;
-        border-left: 1px solid rgba(255, 255, 255, 0.18);
-        font-size: 13px;
-        font-weight: 400;
-        opacity: 0.78;
+        padding-left: var(--si-spacing-md);
+        border-left: 1px solid color-mix(in srgb, var(--rail-fg) 24%, transparent);
+        font-size: var(--si-font-size-14);
+        font-weight: var(--si-font-weight-medium);
+        color: color-mix(in srgb, var(--rail-fg) 82%, transparent);
       }
       #header .spacer { flex: 1; }
       #header a.external {
-        color: rgba(255, 255, 255, 0.78);
-        font-size: 13px;
+        color: color-mix(in srgb, var(--rail-fg) 82%, transparent);
+        font-size: var(--si-font-size-14);
+        font-weight: var(--si-font-weight-medium);
         text-decoration: none;
-        margin-left: 20px;
-        transition: color 0.15s;
+        padding: 6px var(--si-spacing-sm);
+        border-radius: var(--si-radius-control);
+        transition: background 0.15s, color 0.15s;
+      }
+      #header a.external:hover {
+        color: var(--rail-fg);
+        background: color-mix(in srgb, var(--rail-fg) 12%, transparent);
       }
-      #header a.external:hover { color: #fff; }
 
       #app {
         display: flex;
@@ -97,80 +97,115 @@
       #sidebar {
         width: var(--sidebar-w);
         flex: 0 0 var(--sidebar-w);
-        background: var(--brand-navy-deep);
-        color: rgba(255, 255, 255, 0.92);
+        background: var(--rail-bg);
         overflow-y: auto;
-        padding: 24px 0 32px;
-        font-size: 14px;
+        padding: var(--si-spacing-lg) 0;
         display: flex;
         flex-direction: column;
       }
-      #sidebar > ul:last-of-type { margin-bottom: auto; }
       #sidebar h2 {
-        font-family: var(--font-sans);
-        font-size: 11px;
-        font-weight: 600;
-        margin: 0 0 12px;
-        padding: 0 24px;
-        letter-spacing: 0.12em;
+        font-family: var(--si-text-style-overline-font-family);
+        font-size: var(--si-text-style-overline-font-size);
+        font-weight: var(--si-text-style-overline-font-weight);
+        line-height: var(--si-text-style-overline-line-height);
+        letter-spacing: var(--si-text-style-overline-letter-spacing);
         text-transform: uppercase;
-        color: rgba(255, 255, 255, 0.55);
+        margin: 0 0 var(--si-spacing-sm);
+        padding: 0 var(--si-spacing-lg);
+        color: color-mix(in srgb, var(--rail-fg) 60%, transparent);
       }
-      #sidebar ul { list-style: none; margin: 0 0 24px; padding: 0; }
+      #sidebar ul { list-style: none; margin: 0; padding: 0 var(--si-spacing-sm); }
       #sidebar li a {
         display: block;
-        padding: 9px 24px;
-        color: rgba(255, 255, 255, 0.82);
+        padding: 9px var(--si-spacing-md);
+        margin-bottom: 2px;
+        border-radius: var(--si-radius-sm);
+        color: color-mix(in srgb, var(--rail-fg) 82%, transparent);
         text-decoration: none;
-        font-weight: 500;
-        border-left: 3px solid transparent;
-        transition: background 0.15s, color 0.15s, border-color 0.15s;
+        font-size: var(--si-font-size-14);
+        font-weight: var(--si-font-weight-medium);
+        transition: background 0.15s, color 0.15s;
       }
       #sidebar li a:hover {
-        background: rgba(255, 255, 255, 0.05);
-        color: #fff;
+        background: color-mix(in srgb, var(--rail-fg) 8%, transparent);
+        color: var(--rail-fg);
       }
       #sidebar li a.active {
-        background: rgba(255, 255, 255, 0.07);
-        color: #fff;
-        border-left-color: var(--brand-orange);
-        font-weight: 600;
+        background: color-mix(in srgb, var(--rail-fg) 14%, transparent);
+        color: var(--rail-fg);
+        font-weight: var(--si-font-weight-semibold);
+        box-shadow: inset 3px 0 0 var(--si-color-brand-orange);
       }
       #sidebar .footer {
         margin-top: auto;
-        padding: 20px 24px;
-        border-top: 1px solid var(--line);
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.55);
-        line-height: 1.5;
+        padding: var(--si-spacing-md) var(--si-spacing-lg) 0;
+        font-size: var(--si-font-size-12);
+        line-height: 1.6;
+        color: color-mix(in srgb, var(--rail-fg) 60%, transparent);
       }
       #sidebar .footer a {
-        color: rgba(255, 255, 255, 0.78);
-        text-decoration: none;
-        border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
+        color: color-mix(in srgb, var(--rail-fg) 82%, transparent);
+        text-decoration: underline;
+        text-underline-offset: 2px;
       }
-      #sidebar .footer a:hover { color: #fff; }
+      #sidebar .footer a:hover { color: var(--rail-fg); }
 
       #content {
         flex: 1;
         overflow: auto;
-        background: #fff;
+        background: var(--si-color-surface);
       }
 
-      /* Tighter type inside Redoc to feel native to the wrapper */
-      #redoc-container .api-info h1 { font-family: var(--font-sans); }
+      /* Redoc overrides for the bits its theme object doesn't reach. Redoc v2.4.0
+         has no theme key for border radius, so its controls are styled here.
+         Selectors stay on standard attributes — Redoc's own class names are
+         generated and change between releases. */
+      #redoc-container h1,
+      #redoc-container h2,
+      #redoc-container h3 { letter-spacing: -0.01em; }
+      #redoc-container [role="navigation"] { border-right: 1px solid var(--si-color-border); }
+      #redoc-container button[type="submit"] { border-radius: var(--si-radius-control); }
+
+      @media (max-width: 860px) {
+        #app { flex-direction: column; height: auto; }
+        #sidebar {
+          width: 100%;
+          flex: 0 0 auto;
+          padding: var(--si-spacing-sm) 0;
+        }
+        /* The heading is redundant once the list reads as a row of chips. The
+           footer stays: it holds the only link to the source repo. */
+        #sidebar h2 { display: none; }
+        #sidebar ul {
+          display: flex;
+          gap: var(--si-spacing-xs);
+          overflow-x: auto;
+          padding: 0 var(--si-spacing-md);
+          -webkit-overflow-scrolling: touch;
+        }
+        #sidebar li a {
+          white-space: nowrap;
+          margin: 0;
+          border-radius: var(--si-radius-control);
+        }
+        #sidebar li a.active { box-shadow: none; }
+        #sidebar .footer {
+          margin-top: 0;
+          padding: var(--si-spacing-sm) var(--si-spacing-md) var(--si-spacing-xs);
+        }
+      }
 
-      @media (max-width: 768px) {
-        #app { flex-direction: column; }
-        #sidebar { width: 100%; flex: 0 0 auto; max-height: 30vh; }
+      @media (max-width: 560px) {
+        #header { padding: 0 var(--si-spacing-md); gap: var(--si-spacing-xs); }
+        #header .subtitle { display: none; }
+        #header a.external { padding: 6px var(--si-spacing-xs); }
       }
     </style>
   </head>
   <body>
     <header id="header">
-      <a class="wordmark" href="?">
-        <span class="dot"></span>
-        <span>Smile ID</span>
+      <a class="wordmark" href="?" aria-label="Smile ID home">
+        <svg viewBox="0 0 181 34" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M45.314 25.627c.214 1.453 1.273 3.15 4.177 3.15 2.475 0 3.667-.864 3.667-2.287 0-1.422-.835-2.022-2.353-2.205l-5.135-.549c-4.462-.467-7.08-3.038-7.08-7.245 0-4.684 3.555-7.803 10.687-7.803 7.67 0 10.717 3.597 11.012 7.834h-7.202c-.214-1.595-1.528-2.611-3.78-2.611-1.997 0-3.382.731-3.382 2.032 0 1.057.662 1.85 2.404 1.991l4.177.366c5.634.468 7.997 3.15 7.997 7.611 0 4.756-2.975 8.088-11.155 8.088-7.997 0-10.758-4.135-11.125-8.373h7.09zM95.66 22.477V33.38h-7.131V23.229c0-1.484-1.141-2.805-2.618-2.825-2.19-.02-3.118 1.31-3.118 4.166v8.81h-7.019V23.229c0-1.474-1.14-2.805-2.628-2.825-2.19-.03-3.118 1.31-3.118 4.166v8.81h-7.12V15.252h7.12v2.794c1.131-2.103 3.057-3.373 6.072-3.373 3.016 0 5.053 1.422 6.031 3.84 1.172-2.346 3.128-3.84 6.367-3.84 4.91 0 7.162 3.048 7.162 7.804zM99.022 33.38V18.068h7.131v15.314h-7.131zM109.515 33.38V9.277h7.121V33.38h-7.121zM132.416 27.791h7.029c-.692 3.343-3.392 6.178-10.085 6.178-7.702 0-10.32-4.826-10.32-9.684 0-5.222 3.087-9.612 10.32-9.612 7.966 0 10.106 4.857 10.106 9.867a9.19 9.19 0 01-.102 1.554h-13.376c.356 2.327 1.518 3.19 3.525 3.19 1.375 0 2.394-.66 2.903-1.493zm-6.398-5.609h6.724c-.214-1.89-1.12-2.936-3.27-2.936-1.997 0-3.056.762-3.454 2.936zM153.382 33.38h-7.294l.02-24.103h7.264l.01 24.103zM181 21.278c0 6.198-3.667 12.102-11.481 12.102h-12.796V9.277h12.796c7.814 0 11.481 5.792 11.481 12zm-13.193 6.381c3.892 0 5.603-2.174 5.603-6.381 0-4.207-1.782-6.28-5.603-6.28h-3.779V27.66h3.779zM18.154 16.523H0v16.92h18.154v-16.92z"/><path d="M22.565 0h-.499c-4.625 0-8.761 3.018-8.761 9.653v6.88h18.103v-6.88C31.408 3.018 27.23 0 22.565 0zM106.143 9.268h-7.121v7.107h7.121V9.268z"/></svg>
       </a>
       <span class="subtitle">API Reference</span>
       <div class="spacer"></div>
@@ -228,6 +263,29 @@ <h2>APIs</h2>
     </script>
     <script src="https://cdn.redoc.ly/redoc/v2.4.0/bundles/redoc.standalone.js"></script>
     <script>
+      // Redoc derives tints and shades from these values at runtime, so it needs
+      // literal colours rather than var(--si-*). Read them out of the cascade so
+      // tokens.css stays the single source of truth and can't drift from this file.
+      const style = getComputedStyle(document.documentElement);
+      const v = (name) => style.getPropertyValue(name).trim();
+      const T = {
+        primary: v("--si-color-primary"),
+        primaryBright: v("--si-color-brand-blue-bright"),
+        cream: v("--si-color-surface-alt"),
+        orange: v("--si-color-feedback-warning-fill"),
+        orangeBlood: v("--si-color-brand-orange-blood"),
+        green: v("--si-color-brand-green"),
+        red: v("--si-color-feedback-error-fill"),
+        title: v("--si-color-text-title"),
+        body: v("--si-color-text-body"),
+        border: v("--si-color-border"),
+        bodyFont: v("--si-text-style-body-font-family"),
+        displayFont: v("--si-text-style-heading-page-font-family"),
+        // No monospace token in the design system.
+        codeFont:
+          'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+      };
+
       Redoc.init(
         `../specs/v3/${selected.file}.yaml`,
         {
@@ -236,41 +294,37 @@ <h2>APIs</h2>
           nativeScrollbars: true,
           theme: {
             colors: {
-              primary: { main: "#151F72" },
-              success: { main: "#00A544" },
-              warning: { main: "#FF9B00" },
-              error: { main: "#FB2C36" },
-              text: { primary: "#1F2937", secondary: "#4A5565" },
+              primary: { main: T.primary },
+              success: { main: T.green },
+              warning: { main: T.orange },
+              error: { main: T.red },
+              text: { primary: T.title, secondary: T.body },
+              border: { light: T.border, dark: T.border },
               http: {
-                get: "#1E40AF",
-                post: "#00A544",
-                put: "#FF9B00",
-                delete: "#FB2C36",
-                patch: "#C07EFF"
+                get: T.primaryBright,
+                post: T.green,
+                put: T.orange,
+                patch: T.orangeBlood,
+                delete: T.red
               }
             },
             typography: {
               fontSize: "15px",
-              fontFamily:
-                '"Epilogue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-              headings: {
-                fontFamily:
-                  '"Epilogue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-                fontWeight: "700"
-              },
-              code: {
-                fontFamily:
-                  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-                fontSize: "13px"
-              },
-              links: { color: "#1E40AF", hover: "#001096" }
+              lineHeight: "1.6",
+              fontFamily: T.bodyFont,
+              headings: { fontFamily: T.displayFont, fontWeight: "700", lineHeight: "1.3" },
+              code: { fontFamily: T.codeFont, fontSize: "13px" },
+              links: { color: T.primary, hover: T.primaryBright, visited: T.primary }
             },
             sidebar: {
-              width: "240px",
-              backgroundColor: "#F9F0E7",
-              textColor: "#1F2937"
+              width: "236px",
+              backgroundColor: T.cream,
+              textColor: T.title,
+              activeTextColor: T.primary,
+              groupItems: { textTransform: "uppercase" }
             },
-            rightPanel: { backgroundColor: "#0B0F2C", textColor: "#E2E8F0" }
+            rightPanel: { backgroundColor: T.primary, textColor: T.cream },
+            spacing: { sectionHorizontal: 40, sectionVertical: 24 }
           }
         },
         document.getElementById("redoc-container")
diff --git a/docs/tokens.css b/docs/tokens.css
new file mode 100644
index 0000000..7fbde75
--- /dev/null
+++ b/docs/tokens.css
@@ -0,0 +1,486 @@
+/*
+ * Smile ID Design System — GENERATED FILE. Do not edit by hand.
+ * Regenerate with: npm --prefix build run build
+ * Source of truth: tokens/ (DTCG). Brand anchor blue #151F72; body type DM Sans.
+ */
+:root {
+  --si-color-brand-orange: #ff9b00;
+  --si-color-brand-orange-blood: #ff5805;
+  --si-color-brand-green: #06a850;
+  --si-color-brand-green-vivid: #2cc05c;
+  --si-color-brand-green-dark: #0a462f;
+  --si-color-brand-blue: #151f72;
+  --si-color-brand-blue-bright: #4d88ff;
+  --si-color-brand-blue-accent-dark: #7ba3ff;
+  --si-color-brand-sky-blue: #7fcbf5;
+  --si-color-brand-yellow: #fdb515;
+  --si-color-brand-red-deep: #91190f;
+  --si-color-brand-sand: #dbdbc4;
+  --si-color-brand-pink: #fbd1ee;
+  --si-color-neutral-white: #ffffff;
+  --si-color-neutral-off-white: #f9f0e7;
+  --si-color-neutral-off-black: #2d2b2a;
+  --si-color-grey-50: #f9fafb;
+  --si-color-grey-200: #eaecf0;
+  --si-color-grey-400: #c2c5cb;
+  --si-color-grey-500: #848282;
+  --si-color-grey-600: #5e646e;
+  --si-color-grey-800: #21232c;
+  --si-color-grey-dark-bg: #1a1c23;
+  --si-color-grey-dark-card: #272a35;
+  --si-color-grey-dark-card-alt: #2d3748;
+  --si-color-grey-dark-text: #f2f2f2;
+  --si-color-status-red: #ef4343;
+  --si-color-status-red-dark: #ea2d2d;
+  --si-color-status-green: #00c853;
+  --si-color-status-green-dark: #00e676;
+  --si-color-status-green-confirm: #12b76a;
+  --si-color-alpha-black-10: rgba(0, 0, 0, 0.102);
+  --si-color-alpha-black-15: rgba(0, 0, 0, 0.149);
+  --si-color-alpha-black-75: rgba(0, 0, 0, 0.749);
+  --si-color-alpha-white-90: rgba(255, 255, 255, 0.902);
+  --si-color-background: #f9fafb;
+  --si-color-surface: #ffffff;
+  --si-color-surface-alt: #f9f0e7;
+  --si-color-surface-muted: #f9fafb;
+  --si-color-border: #eaecf0;
+  --si-color-overlay-scrim: rgba(0, 0, 0, 0.749);
+  --si-color-text-title: #21232c;
+  --si-color-text-body: #5e646e;
+  --si-color-text-muted: #848282;
+  --si-color-text-inverse: #ffffff;
+  --si-color-text-link: #151f72;
+  --si-color-primary: #151f72;
+  --si-color-on-primary: #ffffff;
+  --si-color-secondary: #5e646e;
+  --si-color-accent: #4d88ff;
+  --si-color-focus-ring: #4d88ff;
+  --si-color-feedback-success-fill: #00c853;
+  --si-color-feedback-success-on: #ffffff;
+  --si-color-feedback-warning-fill: #ff9b00;
+  --si-color-feedback-warning-on: #2d2b2a;
+  --si-color-feedback-error-fill: #ef4343;
+  --si-color-feedback-error-on: #ffffff;
+  --si-color-feedback-info-fill: #4d88ff;
+  --si-color-feedback-info-on: #ffffff;
+  --si-color-decorative-yellow: #fdb515;
+  --si-color-decorative-green: #06a850;
+  --si-color-decorative-orange: #ff9b00;
+  --si-color-decorative-blood-orange: #ff5805;
+  --si-color-decorative-sky: #7fcbf5;
+  --si-color-decorative-pink: #fbd1ee;
+  --si-color-decorative-sand: #dbdbc4;
+  --si-color-decorative-dark-green: #0a462f;
+  --si-color-decorative-deep-red: #91190f;
+  --si-color-capture-overlay: rgba(255, 255, 255, 0.902);
+  --si-color-capture-feedback-bg: rgba(0, 0, 0, 0.749);
+  --si-color-capture-feedback-text: #ffffff;
+  --si-color-capture-guide-default: #c2c5cb;
+  --si-color-capture-guide-active: #2cc05c;
+  --si-color-capture-guide-warning: #ef4343;
+  --si-space-0: 0px;
+  --si-space-2: 2px;
+  --si-space-4: 4px;
+  --si-space-8: 8px;
+  --si-space-12: 12px;
+  --si-space-16: 16px;
+  --si-space-20: 20px;
+  --si-space-24: 24px;
+  --si-space-32: 32px;
+  --si-space-40: 40px;
+  --si-space-48: 48px;
+  --si-space-64: 64px;
+  --si-radius-none: 0px;
+  --si-radius-sm: 8px;
+  --si-radius-md: 12px;
+  --si-radius-lg: 16px;
+  --si-radius-xl: 20px;
+  --si-radius-pill: 32px;
+  --si-radius-full: 999px;
+  --si-radius-field: 12px;
+  --si-radius-control: 32px;
+  --si-radius-surface: 16px;
+  --si-radius-sheet: 20px;
+  --si-radius-chip: 999px;
+  --si-border-width-none: 0px;
+  --si-border-width-hairline: 1px;
+  --si-border-width-thin: 1.5px;
+  --si-border-width-thick: 2px;
+  --si-size-icon-sm: 16px;
+  --si-size-icon-md: 20px;
+  --si-size-icon-lg: 24px;
+  --si-size-control-md: 44px;
+  --si-size-control-lg: 52px;
+  --si-size-logo-min: 35px;
+  --si-duration-fast: 200ms;
+  --si-duration-normal: 300ms;
+  --si-duration-slow: 350ms;
+  --si-shadow-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.102);
+  --si-shadow-elevated: 0px 4px 12px 0px rgba(0, 0, 0, 0.149);
+  --si-font-family-display: Epilogue,DM Sans,system-ui,sans-serif;
+  --si-font-family-body: DM Sans,system-ui,sans-serif;
+  --si-font-weight-regular: 400;
+  --si-font-weight-medium: 500;
+  --si-font-weight-semibold: 600;
+  --si-font-weight-bold: 700;
+  --si-font-weight-extrabold: 800;
+  --si-font-size-10: 10px;
+  --si-font-size-12: 12px;
+  --si-font-size-14: 14px;
+  --si-font-size-16: 16px;
+  --si-font-size-18: 18px;
+  --si-font-size-20: 20px;
+  --si-font-size-24: 24px;
+  --si-font-size-28: 28px;
+  --si-font-size-32: 32px;
+  --si-font-size-40: 40px;
+  --si-font-size-48: 48px;
+  --si-line-height-16: 16px;
+  --si-line-height-20: 20px;
+  --si-line-height-24: 24px;
+  --si-line-height-26: 26px;
+  --si-line-height-32: 32px;
+  --si-line-height-40: 40px;
+  --si-line-height-48: 48px;
+  --si-line-height-56: 56px;
+  --si-letter-spacing-tight: -0.4px;
+  --si-letter-spacing-normal: 0px;
+  --si-elevation-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.102);
+  --si-elevation-floating: 0px 4px 12px 0px rgba(0, 0, 0, 0.149);
+  --si-motion-transition: 300ms;
+  --si-motion-progress: 350ms;
+  --si-spacing-none: 0px;
+  --si-spacing-xxs: 4px;
+  --si-spacing-xs: 8px;
+  --si-spacing-sm: 12px;
+  --si-spacing-md: 16px;
+  --si-spacing-lg: 24px;
+  --si-spacing-xl: 40px;
+  --si-spacing-2xl: 64px;
+  --si-text-style-display-lg-font-family: Epilogue, "DM Sans", system-ui, sans-serif;
+  --si-text-style-display-lg-font-size: 40px;
+  --si-text-style-display-lg-font-weight: 800;
+  --si-text-style-display-lg-line-height: 48px;
+  --si-text-style-display-lg-letter-spacing: -0.4px;
+  --si-text-style-display-md-font-family: Epilogue, "DM Sans", system-ui, sans-serif;
+  --si-text-style-display-md-font-size: 32px;
+  --si-text-style-display-md-font-weight: 800;
+  --si-text-style-display-md-line-height: 40px;
+  --si-text-style-display-md-letter-spacing: -0.4px;
+  --si-text-style-heading-page-font-family: Epilogue, "DM Sans", system-ui, sans-serif;
+  --si-text-style-heading-page-font-size: 24px;
+  --si-text-style-heading-page-font-weight: 800;
+  --si-text-style-heading-page-line-height: 32px;
+  --si-text-style-heading-page-letter-spacing: -0.4px;
+  --si-text-style-heading-card-font-family: Epilogue, "DM Sans", system-ui, sans-serif;
+  --si-text-style-heading-card-font-size: 20px;
+  --si-text-style-heading-card-font-weight: 800;
+  --si-text-style-heading-card-line-height: 26px;
+  --si-text-style-heading-card-letter-spacing: -0.4px;
+  --si-text-style-heading-section-font-family: Epilogue, "DM Sans", system-ui, sans-serif;
+  --si-text-style-heading-section-font-size: 18px;
+  --si-text-style-heading-section-font-weight: 600;
+  --si-text-style-heading-section-line-height: 24px;
+  --si-text-style-heading-section-letter-spacing: 0px;
+  --si-text-style-title-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-title-font-size: 16px;
+  --si-text-style-title-font-weight: 700;
+  --si-text-style-title-line-height: 24px;
+  --si-text-style-title-letter-spacing: 0px;
+  --si-text-style-subtitle-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-subtitle-font-size: 14px;
+  --si-text-style-subtitle-font-weight: 500;
+  --si-text-style-subtitle-line-height: 20px;
+  --si-text-style-subtitle-letter-spacing: 0px;
+  --si-text-style-body-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-body-font-size: 16px;
+  --si-text-style-body-font-weight: 400;
+  --si-text-style-body-line-height: 24px;
+  --si-text-style-body-letter-spacing: 0px;
+  --si-text-style-body-strong-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-body-strong-font-size: 16px;
+  --si-text-style-body-strong-font-weight: 600;
+  --si-text-style-body-strong-line-height: 24px;
+  --si-text-style-body-strong-letter-spacing: 0px;
+  --si-text-style-body-sm-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-body-sm-font-size: 14px;
+  --si-text-style-body-sm-font-weight: 400;
+  --si-text-style-body-sm-line-height: 20px;
+  --si-text-style-body-sm-letter-spacing: 0px;
+  --si-text-style-caption-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-caption-font-size: 12px;
+  --si-text-style-caption-font-weight: 500;
+  --si-text-style-caption-line-height: 16px;
+  --si-text-style-caption-letter-spacing: 0px;
+  --si-text-style-overline-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-overline-font-size: 10px;
+  --si-text-style-overline-font-weight: 700;
+  --si-text-style-overline-line-height: 16px;
+  --si-text-style-overline-letter-spacing: 0px;
+  --si-text-style-button-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-button-font-size: 16px;
+  --si-text-style-button-font-weight: 700;
+  --si-text-style-button-line-height: 24px;
+  --si-text-style-button-letter-spacing: 0px;
+  --si-text-style-button-sm-font-family: "DM Sans", system-ui, sans-serif;
+  --si-text-style-button-sm-font-size: 14px;
+  --si-text-style-button-sm-font-weight: 700;
+  --si-text-style-button-sm-line-height: 20px;
+  --si-text-style-button-sm-letter-spacing: 0px;
+  --si-avatar-bg: #4d88ff;
+  --si-avatar-text: #ffffff;
+  --si-avatar-radius: 999px;
+  --si-avatar-placeholder-bg: #f9fafb;
+  --si-avatar-placeholder-icon: #848282;
+  --si-avatar-size-sm: 32px;
+  --si-avatar-size-md: 40px;
+  --si-avatar-size-lg: 48px;
+  --si-avatar-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-avatar-font-font-size: 14px;
+  --si-avatar-font-font-weight: 500;
+  --si-avatar-font-line-height: 20px;
+  --si-avatar-font-letter-spacing: 0px;
+  --si-badge-radius: 999px;
+  --si-badge-padding-x: 8px;
+  --si-badge-padding-y: 4px;
+  --si-badge-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-badge-font-font-size: 10px;
+  --si-badge-font-font-weight: 700;
+  --si-badge-font-line-height: 16px;
+  --si-badge-font-letter-spacing: 0px;
+  --si-badge-success-background: #00c853;
+  --si-badge-success-text: #ffffff;
+  --si-badge-error-background: #ef4343;
+  --si-badge-error-text: #ffffff;
+  --si-badge-warning-background: #ff9b00;
+  --si-badge-warning-text: #2d2b2a;
+  --si-badge-info-background: #4d88ff;
+  --si-badge-info-text: #ffffff;
+  --si-banner-radius: 12px;
+  --si-banner-padding: 16px;
+  --si-banner-gap: 12px;
+  --si-banner-bg: #f9f0e7;
+  --si-banner-border: #eaecf0;
+  --si-banner-title: #21232c;
+  --si-banner-text: #5e646e;
+  --si-banner-title-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-banner-title-font-font-size: 16px;
+  --si-banner-title-font-font-weight: 600;
+  --si-banner-title-font-line-height: 24px;
+  --si-banner-title-font-letter-spacing: 0px;
+  --si-banner-text-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-banner-text-font-font-size: 14px;
+  --si-banner-text-font-font-weight: 400;
+  --si-banner-text-font-line-height: 20px;
+  --si-banner-text-font-letter-spacing: 0px;
+  --si-banner-info-accent: #4d88ff;
+  --si-banner-success-accent: #00c853;
+  --si-banner-warning-accent: #ff9b00;
+  --si-banner-error-accent: #ef4343;
+  --si-button-radius: 32px;
+  --si-button-padding-x: 24px;
+  --si-button-padding-y: 12px;
+  --si-button-height: 52px;
+  --si-button-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-button-font-font-size: 16px;
+  --si-button-font-font-weight: 700;
+  --si-button-font-line-height: 24px;
+  --si-button-font-letter-spacing: 0px;
+  --si-button-primary-background: #151f72;
+  --si-button-primary-text: #ffffff;
+  --si-button-secondary-background: rgba(0, 0, 0, 0.102);
+  --si-button-secondary-border: #5e646e;
+  --si-button-secondary-text: #5e646e;
+  --si-button-disabled-background: #eaecf0;
+  --si-button-disabled-text: #848282;
+  --si-card-background: #ffffff;
+  --si-card-border: #eaecf0;
+  --si-card-title-text: #21232c;
+  --si-card-body-text: #5e646e;
+  --si-card-radius: 16px;
+  --si-card-padding: 24px;
+  --si-card-gap: 12px;
+  --si-card-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.102);
+  --si-card-title-font-font-family: Epilogue, "DM Sans", system-ui, sans-serif;
+  --si-card-title-font-font-size: 20px;
+  --si-card-title-font-font-weight: 800;
+  --si-card-title-font-line-height: 26px;
+  --si-card-title-font-letter-spacing: -0.4px;
+  --si-data-field-label: #848282;
+  --si-data-field-value: #21232c;
+  --si-data-field-value-link: #151f72;
+  --si-data-field-gap: 4px;
+  --si-data-field-row-gap: 16px;
+  --si-data-field-label-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-data-field-label-font-font-size: 12px;
+  --si-data-field-label-font-font-weight: 500;
+  --si-data-field-label-font-line-height: 16px;
+  --si-data-field-label-font-letter-spacing: 0px;
+  --si-data-field-value-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-data-field-value-font-font-size: 14px;
+  --si-data-field-value-font-font-weight: 400;
+  --si-data-field-value-font-line-height: 20px;
+  --si-data-field-value-font-letter-spacing: 0px;
+  --si-filter-trigger-bg: #ffffff;
+  --si-filter-trigger-border: #eaecf0;
+  --si-filter-trigger-text: #21232c;
+  --si-filter-trigger-icon: #848282;
+  --si-filter-trigger-radius: 12px;
+  --si-filter-trigger-height: 44px;
+  --si-filter-popover-bg: #ffffff;
+  --si-filter-popover-border: #eaecf0;
+  --si-filter-popover-radius: 12px;
+  --si-filter-popover-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.149);
+  --si-filter-chip-bg: #ffffff;
+  --si-filter-chip-border: #eaecf0;
+  --si-filter-chip-radius: 12px;
+  --si-filter-chip-label: #5e646e;
+  --si-filter-chip-divider: #dbdbc4;
+  --si-filter-chip-value: #4d88ff;
+  --si-filter-chip-remove: #848282;
+  --si-filter-chip-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-filter-chip-font-font-size: 14px;
+  --si-filter-chip-font-font-weight: 400;
+  --si-filter-chip-font-line-height: 20px;
+  --si-filter-chip-font-letter-spacing: 0px;
+  --si-input-background: #ffffff;
+  --si-input-text: #21232c;
+  --si-input-placeholder: #848282;
+  --si-input-border: #eaecf0;
+  --si-input-border-focus: #4d88ff;
+  --si-input-border-error: #ef4343;
+  --si-input-radius: 12px;
+  --si-input-padding-x: 16px;
+  --si-input-height: 44px;
+  --si-input-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-input-font-font-size: 14px;
+  --si-input-font-font-weight: 400;
+  --si-input-font-line-height: 20px;
+  --si-input-font-letter-spacing: 0px;
+  --si-link-text: #151f72;
+  --si-link-text-hover: #151f72;
+  --si-link-icon: #151f72;
+  --si-link-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-link-font-font-size: 14px;
+  --si-link-font-font-weight: 400;
+  --si-link-font-line-height: 20px;
+  --si-link-font-letter-spacing: 0px;
+  --si-search-background: #ffffff;
+  --si-search-text: #21232c;
+  --si-search-placeholder: #848282;
+  --si-search-icon: #848282;
+  --si-search-border: #eaecf0;
+  --si-search-border-focus: #4d88ff;
+  --si-search-radius: 12px;
+  --si-search-height: 44px;
+  --si-search-padding-x: 16px;
+  --si-search-gap: 8px;
+  --si-search-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-search-font-font-size: 14px;
+  --si-search-font-font-weight: 400;
+  --si-search-font-line-height: 20px;
+  --si-search-font-letter-spacing: 0px;
+  --si-skeleton-bg: #f9fafb;
+  --si-skeleton-highlight: #eaecf0;
+  --si-skeleton-radius: 12px;
+  --si-skeleton-duration: 350ms;
+  --si-table-container-radius: 16px;
+  --si-table-border: #eaecf0;
+  --si-table-header-bg: #f9fafb;
+  --si-table-header-text: #848282;
+  --si-table-header-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-table-header-font-font-size: 10px;
+  --si-table-header-font-font-weight: 700;
+  --si-table-header-font-line-height: 16px;
+  --si-table-header-font-letter-spacing: 0px;
+  --si-table-row-bg: #ffffff;
+  --si-table-row-bg-alt: #f9fafb;
+  --si-table-row-bg-hover: #f9fafb;
+  --si-table-row-border: #eaecf0;
+  --si-table-cell-text: #5e646e;
+  --si-table-cell-strong: #21232c;
+  --si-table-cell-link: #151f72;
+  --si-table-cell-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-table-cell-font-font-size: 14px;
+  --si-table-cell-font-font-weight: 400;
+  --si-table-cell-font-line-height: 20px;
+  --si-table-cell-font-letter-spacing: 0px;
+  --si-table-cell-padding-x: 16px;
+  --si-table-cell-padding-y: 12px;
+  --si-tab-bg: #ffffff;
+  --si-tab-text: #848282;
+  --si-tab-text-active: #21232c;
+  --si-tab-indicator: #151f72;
+  --si-tab-border: #eaecf0;
+  --si-tab-padding-x: 16px;
+  --si-tab-padding-y: 12px;
+  --si-tab-font-font-family: "DM Sans", system-ui, sans-serif;
+  --si-tab-font-font-size: 14px;
+  --si-tab-font-font-weight: 500;
+  --si-tab-font-line-height: 20px;
+  --si-tab-font-letter-spacing: 0px;
+}
+
+[data-theme="dark"] {
+  --si-color-background: #1a1c23;
+  --si-color-surface: #272a35;
+  --si-color-surface-alt: #2d3748;
+  --si-color-surface-muted: #1a1c23;
+  --si-color-text-title: #f2f2f2;
+  --si-color-text-body: #c2c5cb;
+  --si-color-text-inverse: #2d2b2a;
+  --si-color-text-link: #4d88ff;
+  --si-color-primary: #4d88ff;
+  --si-color-secondary: #c2c5cb;
+  --si-color-accent: #7ba3ff;
+  --si-color-feedback-success-fill: #00e676;
+  --si-color-feedback-success-on: #2d2b2a;
+  --si-color-feedback-error-fill: #ea2d2d;
+  --si-color-feedback-info-on: #2d2b2a;
+  --si-color-decorative-green: #2cc05c;
+  --si-avatar-bg: #7ba3ff;
+  --si-avatar-placeholder-bg: #1a1c23;
+  --si-badge-success-background: #00e676;
+  --si-badge-success-text: #2d2b2a;
+  --si-badge-error-background: #ea2d2d;
+  --si-badge-info-text: #2d2b2a;
+  --si-banner-bg: #2d3748;
+  --si-banner-title: #f2f2f2;
+  --si-banner-text: #c2c5cb;
+  --si-banner-info-accent: #7ba3ff;
+  --si-banner-success-accent: #00e676;
+  --si-banner-error-accent: #ea2d2d;
+  --si-button-primary-background: #4d88ff;
+  --si-button-secondary-border: #c2c5cb;
+  --si-button-secondary-text: #c2c5cb;
+  --si-card-background: #272a35;
+  --si-card-title-text: #f2f2f2;
+  --si-card-body-text: #c2c5cb;
+  --si-data-field-value: #f2f2f2;
+  --si-data-field-value-link: #4d88ff;
+  --si-filter-trigger-bg: #272a35;
+  --si-filter-trigger-text: #f2f2f2;
+  --si-filter-popover-bg: #272a35;
+  --si-filter-chip-bg: #272a35;
+  --si-filter-chip-label: #c2c5cb;
+  --si-filter-chip-value: #7ba3ff;
+  --si-input-background: #272a35;
+  --si-input-text: #f2f2f2;
+  --si-input-border-error: #ea2d2d;
+  --si-link-text: #4d88ff;
+  --si-link-text-hover: #4d88ff;
+  --si-link-icon: #4d88ff;
+  --si-search-background: #272a35;
+  --si-search-text: #f2f2f2;
+  --si-skeleton-bg: #1a1c23;
+  --si-table-header-bg: #1a1c23;
+  --si-table-row-bg: #272a35;
+  --si-table-row-bg-alt: #1a1c23;
+  --si-table-row-bg-hover: #1a1c23;
+  --si-table-cell-text: #c2c5cb;
+  --si-table-cell-strong: #f2f2f2;
+  --si-table-cell-link: #4d88ff;
+  --si-tab-bg: #272a35;
+  --si-tab-text-active: #f2f2f2;
+  --si-tab-indicator: #4d88ff;
+}