From 2ee2374ee1ea479d5da27f119ff473b8a6032a27 Mon Sep 17 00:00:00 2001
From: patcapulong <me@patcapulong.com>
Date: Fri, 23 Jan 2026 16:15:27 -0800
Subject: [PATCH 1/2] Add Lightspark design tokens

- Create tokens.css with colors, alphas, and radius from Figma
- Prefix tokens with "ls-" to avoid Mintlify variable conflicts
- Update custom homepage styles to use token variables
- Add mintlify/tokens/ to .gitignore (local Figma JSON reference)
---
 .gitignore                 |  3 ++
 mintlify/styles/styles.css | 45 +++++++++++----------
 mintlify/styles/tokens.css | 82 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 21 deletions(-)
 create mode 100644 mintlify/styles/tokens.css

diff --git a/.gitignore b/.gitignore
index 5fa327b..83d32db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,6 @@ bin/
 .env
 local.properties
 
+# Figma design tokens (local reference only)
+mintlify/tokens/
+
diff --git a/mintlify/styles/styles.css b/mintlify/styles/styles.css
index 49f5654..0b9e4a0 100644
--- a/mintlify/styles/styles.css
+++ b/mintlify/styles/styles.css
@@ -1,3 +1,6 @@
+/* Import design tokens */
+@import "./tokens.css";
+
 /* ===========================================
    Custom Font Styles for Suisse Intl
    
@@ -73,27 +76,27 @@ code, pre, kbd, samp, .font-mono {
    =========================================== */
 
 html.light .hero {
-  background: #f0f0ee;
+  background: var(--ls-gray-100);
   background-image: radial-gradient(
     circle,
-    rgba(0, 0, 0, 0.15) 1px,
+    var(--ls-black-10) 1px,
     transparent 1px
   );
   background-size: 24px 24px;
   background-position: 0 0;
   background-repeat: repeat;
-  border-bottom: 1px solid var(--border-tertiary, rgba(0, 0, 0, 0.1));
-  border-top: 1px solid var(--border-tertiary, rgba(0, 0, 0, 0.1));
+  border-bottom: 1px solid var(--ls-black-10);
+  border-top: 1px solid var(--ls-black-10);
 }
 
 html .hero {
-  background: var(--surface-secondary, #1a1a1a);
-  background-image: radial-gradient(circle, #2b2b2a 1px, transparent 1px);
+  background: var(--ls-gray-950);
+  background-image: radial-gradient(circle, var(--ls-gray-850) 1px, transparent 1px);
   background-size: 24px 24px;
   background-position: 0 0;
   background-repeat: repeat;
-  border-bottom: 1px solid var(--border-tertiary, rgba(255, 255, 255, 0.05));
-  border-top: 1px solid var(--border-tertiary, rgba(255, 255, 255, 0.05));
+  border-bottom: 1px solid var(--ls-white-04);
+  border-top: 1px solid var(--ls-white-04);
 }
 
 .blue-lines {
@@ -113,43 +116,43 @@ html .hero {
 }
 
 html.light .title {
-  color: #1a1a1a;
+  color: var(--ls-gray-950);
 }
 
 html .title {
-  color: #f8f8f7;
+  color: var(--ls-gray-050);
 }
 
 html.light .usecase {
-  background: #f8f8f7;
+  background: var(--ls-gray-050);
 }
 
 html.light .highlight {
-  color: #1a1a1a;
+  color: var(--ls-gray-950);
 }
 
 html .highlight {
-  color: #f8f8f7;
+  color: var(--ls-gray-050);
 }
 html.light .hero-card {
-  background: var(--surface-base, #fff);
+  background: var(--ls-white);
 }
 
 html.dark .hero-card {
-  background: var(--surface-base, #1a1a1a);
+  background: var(--ls-gray-950);
 }
 
 .hero .call-to-action {
   cursor: pointer;
-  background: #00b3e0;
-  color: var(--gray-050, #f8f8f7);
+  background: var(--ls-sky-500);
+  color: var(--ls-gray-050);
   display: flex;
   height: 40px;
-  padding: var(--spacing-xs, 8px) 16px;
+  padding: 8px 16px;
   justify-content: center;
   align-items: center;
   gap: 4px;
-  border-radius: 4px;
+  border-radius: var(--ls-radius-xs);
   font-size: 16px;
   font-style: normal;
   font-weight: 500; /* Medium weight for buttons */
@@ -190,7 +193,7 @@ html.dark .hero-card {
 .hero .subtext {
   width: 100%;
   max-width: 538px;
-  color: var(--gray-950, #989898);
+  color: var(--ls-gray-400);
   text-align: center;
   font-feature-settings: "salt" on;
   font-size: 18px;
@@ -291,7 +294,7 @@ html.dark .hero-card {
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
-  border-radius: 4px;
+  border-radius: var(--ls-radius-xs);
   min-height: 200px;
 }
 
diff --git a/mintlify/styles/tokens.css b/mintlify/styles/tokens.css
new file mode 100644
index 0000000..7ff72fd
--- /dev/null
+++ b/mintlify/styles/tokens.css
@@ -0,0 +1,82 @@
+/* ===========================================
+   Lightspark Design Tokens
+   
+   Prefixed with "ls-" to avoid collision with
+   Mintlify's built-in CSS variables (--gray-XXX).
+   
+   Values from Figma design system.
+   Spacing uses Tailwind classes (p-4, gap-6, etc.)
+   
+   Note: docs.json uses these same hex values for
+   Mintlify theming (JSON can't reference CSS vars).
+   Keep them in sync when updating colors.
+   =========================================== */
+
+:root {
+  /* Base Colors */
+  --ls-white: #FFFFFF;
+  --ls-black: #000000;
+
+  /* Brand Colors */
+  --ls-sky-500: #00B3E0;
+
+  /* Gray Scale */
+  --ls-gray-025: #FAFAF9;
+  --ls-gray-050: #F8F8F7;
+  --ls-gray-075: #F4F4F3;
+  --ls-gray-100: #F0F0EE;
+  --ls-gray-150: #EBEBE9;
+  --ls-gray-200: #DEDED9;
+  --ls-gray-300: #C1C0B8;
+  --ls-gray-400: #989898;
+  --ls-gray-500: #7C7C7C;
+  --ls-gray-600: #656565;
+  --ls-gray-700: #464646;
+  --ls-gray-800: #3D3D3D;
+  --ls-gray-850: #333333;
+  --ls-gray-900: #282828;
+  --ls-gray-925: #212121;
+  --ls-gray-950: #1A1A1A;
+  --ls-gray-975: #111111;
+
+  /* Alpha White */
+  --ls-white-02: rgba(255, 255, 255, 0.02);
+  --ls-white-04: rgba(255, 255, 255, 0.04);
+  --ls-white-06: rgba(255, 255, 255, 0.06);
+  --ls-white-10: rgba(255, 255, 255, 0.1);
+  --ls-white-20: rgba(255, 255, 255, 0.2);
+  --ls-white-30: rgba(255, 255, 255, 0.3);
+  --ls-white-40: rgba(255, 255, 255, 0.4);
+  --ls-white-50: rgba(255, 255, 255, 0.5);
+  --ls-white-60: rgba(255, 255, 255, 0.6);
+  --ls-white-70: rgba(255, 255, 255, 0.7);
+  --ls-white-80: rgba(255, 255, 255, 0.8);
+  --ls-white-90: rgba(255, 255, 255, 0.9);
+
+  /* Alpha Black */
+  --ls-black-02: rgba(0, 0, 0, 0.02);
+  --ls-black-04: rgba(0, 0, 0, 0.04);
+  --ls-black-06: rgba(0, 0, 0, 0.06);
+  --ls-black-10: rgba(0, 0, 0, 0.1);
+  --ls-black-20: rgba(0, 0, 0, 0.2);
+  --ls-black-30: rgba(0, 0, 0, 0.3);
+  --ls-black-40: rgba(0, 0, 0, 0.4);
+  --ls-black-50: rgba(0, 0, 0, 0.5);
+  --ls-black-60: rgba(0, 0, 0, 0.6);
+  --ls-black-70: rgba(0, 0, 0, 0.7);
+  --ls-black-80: rgba(0, 0, 0, 0.8);
+  --ls-black-90: rgba(0, 0, 0, 0.9);
+
+  /* Border Radius */
+  --ls-radius-none: 0px;
+  --ls-radius-2xs: 2px;
+  --ls-radius-xs: 4px;
+  --ls-radius-sm: 6px;
+  --ls-radius-md: 8px;
+  --ls-radius-lg: 12px;
+  --ls-radius-xl: 16px;
+  --ls-radius-2xl: 24px;
+  --ls-radius-3xl: 32px;
+  --ls-radius-4xl: 40px;
+  --ls-radius-round: 999px;
+}

From 88cf8658d57e63e1e4b4ff9ecc7e747139f70696 Mon Sep 17 00:00:00 2001
From: patcapulong <me@patcapulong.com>
Date: Fri, 23 Jan 2026 17:13:55 -0800
Subject: [PATCH 2/2] Add brand colors to design tokens

- Blue (800, 500), sky, teal, green, yellow, orange, pink (800, 500)
- Colors from Figma design system for use in sidenav icons and components
---
 mintlify/styles/tokens.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/mintlify/styles/tokens.css b/mintlify/styles/tokens.css
index 7ff72fd..27de485 100644
--- a/mintlify/styles/tokens.css
+++ b/mintlify/styles/tokens.css
@@ -18,7 +18,15 @@
   --ls-black: #000000;
 
   /* Brand Colors */
+  --ls-blue-800: #004D92;
+  --ls-blue-500: #0091FF;
   --ls-sky-500: #00B3E0;
+  --ls-teal-500: #44DDB5;
+  --ls-green-600: #11A967;
+  --ls-yellow-600: #E09000;
+  --ls-orange-500: #F77D26;
+  --ls-pink-800: #A90087;
+  --ls-pink-500: #FF21CC;
 
   /* Gray Scale */
   --ls-gray-025: #FAFAF9;