@jxsuite/starters 0.34.0 → 0.35.1

package/sites/saas/components/sa-hero.json

@@ -3,6 +3,7 @@
   "state": {
     "eyebrow": "",
     "heading": "",
+    "headingAccent": "",
     "subheading": "",
     "cta": "Get started free",
     "ctaHref": "/pricing/",
@@ -16,11 +17,21 @@
     "display": "block",
     "position": "relative",
     "overflow": "hidden",
-    "backgroundColor": "var(--color-bg-dark)",
     "color": "var(--color-text-white)",
-    "background": "radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99, 102, 241, 0.35), transparent 70%), var(--color-bg-dark)"
+    "background": "radial-gradient(ellipse 48% 42% at 15% 0%, rgba(124,116,255,0.38), transparent 60%), radial-gradient(ellipse 42% 40% at 88% 8%, rgba(34,211,238,0.20), transparent 62%), radial-gradient(ellipse 65% 55% at 50% 118%, rgba(244,114,182,0.16), transparent 60%), var(--color-bg)"
   },
   "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "inset": "0",
+        "backgroundImage": "radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px)",
+        "backgroundSize": "34px 34px",
+        "opacity": "0.6",
+        "pointerEvents": "none"
+      }
+    },
     {
       "tagName": "div",
       "style": {
@@ -37,37 +48,63 @@
           "style": {
             "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
             "alignItems": "center",
-            "gap": "0.5rem",
-            "padding": "0.375rem 0.9rem",
+            "gap": "0.55rem",
+            "padding": "0.4rem 0.95rem",
             "borderRadius": "999px",
-            "border": "1px solid rgba(255, 255, 255, 0.18)",
-            "backgroundColor": "rgba(255, 255, 255, 0.06)",
+            "border": "1px solid var(--color-border)",
+            "backgroundColor": "rgba(255, 255, 255, 0.04)",
             "fontSize": "0.8125rem",
             "fontWeight": "500",
-            "color": "rgba(255, 255, 255, 0.85)",
+            "color": "var(--color-text-primary)",
             "margin": "0 0 1.75rem"
           },
-          "textContent": "${state.eyebrow}"
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "width": "0.5rem",
+                "height": "0.5rem",
+                "borderRadius": "999px",
+                "background": "var(--grad-btn)",
+                "boxShadow": "0 0 10px var(--glow)"
+              }
+            },
+            { "tagName": "span", "textContent": "${state.eyebrow}" }
+          ]
         },
         {
           "tagName": "h1",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(2.5rem, 6.5vw, 4.5rem)",
+            "fontSize": "clamp(2.6rem, 6.8vw, 5rem)",
             "fontWeight": "700",
-            "lineHeight": "1.05",
+            "lineHeight": "1.02",
             "letterSpacing": "-0.04em",
             "margin": "0 auto 1.5rem",
-            "maxWidth": "16ch"
+            "maxWidth": "18ch",
+            "color": "var(--color-text-primary)"
           },
-          "textContent": "${state.heading}"
+          "children": [
+            { "tagName": "span", "textContent": "${state.heading} " },
+            {
+              "tagName": "span",
+              "style": {
+                "background": "var(--grad)",
+                "backgroundClip": "text",
+                "webkitBackgroundClip": "text",
+                "webkitTextFillColor": "transparent",
+                "color": "#22d3ee"
+              },
+              "textContent": "${state.headingAccent}"
+            }
+          ]
         },
         {
           "tagName": "p",
           "style": {
             "fontSize": "clamp(1.05rem, 2vw, 1.3rem)",
             "lineHeight": "1.65",
-            "color": "rgba(255, 255, 255, 0.72)",
+            "color": "var(--color-text-muted)",
             "margin": "0 auto 2.25rem",
             "maxWidth": "52ch"
           },
@@ -87,15 +124,19 @@
               "attributes": { "href": "${state.ctaHref}" },
               "style": {
                 "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.85rem 2rem",
-                "borderRadius": "var(--radius)",
+                "background": "var(--grad-btn)",
+                "color": "#ffffff",
+                "padding": "0.9rem 2rem",
+                "borderRadius": "999px",
                 "fontSize": "1.02rem",
                 "fontWeight": "600",
                 "textDecoration": "none",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "boxShadow": "0 10px 30px -8px var(--glow)",
+                "transition": "transform 0.15s, box-shadow 0.15s",
+                ":hover": {
+                  "transform": "translateY(-2px)",
+                  "boxShadow": "0 16px 40px -8px var(--glow)"
+                }
               },
               "textContent": "${state.cta}"
             },
@@ -104,15 +145,19 @@
               "attributes": { "href": "${state.cta2Href}" },
               "style": {
                 "display": "${state.cta2 ? 'inline-block' : 'none'}",
-                "border": "1px solid rgba(255, 255, 255, 0.28)",
-                "color": "var(--color-text-white)",
-                "padding": "0.85rem 2rem",
-                "borderRadius": "var(--radius)",
+                "border": "1px solid var(--color-border)",
+                "backgroundColor": "rgba(255,255,255,0.03)",
+                "color": "var(--color-text-primary)",
+                "padding": "0.9rem 2rem",
+                "borderRadius": "999px",
                 "fontSize": "1.02rem",
                 "fontWeight": "600",
                 "textDecoration": "none",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "rgba(255, 255, 255, 0.1)" }
+                "transition": "background-color 0.15s, border-color 0.15s",
+                ":hover": {
+                  "backgroundColor": "rgba(255, 255, 255, 0.07)",
+                  "borderColor": "var(--color-text-muted)"
+                }
               },
               "textContent": "${state.cta2}"
             }
@@ -123,7 +168,7 @@
           "style": {
             "display": "${state.note ? 'block' : 'none'}",
             "fontSize": "0.85rem",
-            "color": "rgba(255, 255, 255, 0.5)",
+            "color": "var(--color-text-muted)",
             "margin": "1.25rem 0 0"
           },
           "textContent": "${state.note}"
@@ -132,25 +177,97 @@
           "tagName": "div",
           "style": {
             "display": "${state.image ? 'block' : 'none'}",
-            "maxWidth": "960px",
+            "position": "relative",
+            "maxWidth": "1000px",
             "margin": "3.5rem auto 0"
           },
           "children": [
             {
-              "tagName": "img",
-              "attributes": {
-                "src": "${state.image}",
-                "alt": "${state.imageAlt}",
-                "loading": "eager"
-              },
+              "tagName": "div",
               "style": {
-                "display": "block",
-                "width": "100%",
-                "height": "auto",
-                "borderRadius": "var(--radius)",
-                "border": "1px solid rgba(255, 255, 255, 0.12)",
-                "boxShadow": "0 32px 80px rgba(0, 0, 0, 0.5)"
+                "position": "absolute",
+                "inset": "-1px",
+                "borderRadius": "calc(var(--radius) + 2px)",
+                "padding": "1px",
+                "background": "linear-gradient(160deg, rgba(139,123,255,0.7), rgba(34,211,238,0.25) 40%, transparent 70%)",
+                "pointerEvents": "none"
               }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "relative",
+                "borderRadius": "var(--radius)",
+                "overflow": "hidden",
+                "border": "1px solid var(--color-border)",
+                "backgroundColor": "var(--color-bg-elev)",
+                "boxShadow": "0 40px 90px -30px rgba(0,0,0,0.8), 0 0 80px -20px var(--glow)"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "display": "flex",
+                    "alignItems": "center",
+                    "gap": "0.5rem",
+                    "padding": "0.75rem 1rem",
+                    "borderBottom": "1px solid var(--color-border)",
+                    "backgroundColor": "var(--color-bg-elev2)"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "width": "0.7rem",
+                        "height": "0.7rem",
+                        "borderRadius": "999px",
+                        "backgroundColor": "#ff5f57"
+                      }
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "width": "0.7rem",
+                        "height": "0.7rem",
+                        "borderRadius": "999px",
+                        "backgroundColor": "#febc2e"
+                      }
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "width": "0.7rem",
+                        "height": "0.7rem",
+                        "borderRadius": "999px",
+                        "backgroundColor": "#28c840"
+                      }
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "marginLeft": "0.75rem",
+                        "fontSize": "0.75rem",
+                        "color": "var(--color-text-muted)",
+                        "fontFamily": "var(--font-heading)"
+                      },
+                      "textContent": "app.flowlark.com"
+                    }
+                  ]
+                },
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "${state.image}",
+                    "alt": "${state.imageAlt}",
+                    "loading": "eager"
+                  },
+                  "style": {
+                    "display": "block",
+                    "width": "100%",
+                    "height": "auto"
+                  }
+                }
+              ]
             }
           ]
         }

package/sites/saas/components/sa-nav.json

@@ -8,8 +8,8 @@
     "position": "sticky",
     "top": "0",
     "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.85)",
-    "backdropFilter": "blur(10px)",
+    "backgroundColor": "rgba(10, 10, 20, 0.72)",
+    "backdropFilter": "blur(14px)",
     "borderBottom": "1px solid var(--color-border)"
   },
   "children": [
@@ -31,7 +31,7 @@
           "style": {
             "display": "inline-flex",
             "alignItems": "center",
-            "gap": "0.55rem",
+            "gap": "0.6rem",
             "fontFamily": "var(--font-heading)",
             "fontSize": "1.3rem",
             "fontWeight": "700",
@@ -46,12 +46,13 @@
                 "display": "inline-flex",
                 "alignItems": "center",
                 "justifyContent": "center",
-                "width": "1.6rem",
-                "height": "1.6rem",
-                "borderRadius": "0.45rem",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "fontSize": "1rem"
+                "width": "1.7rem",
+                "height": "1.7rem",
+                "borderRadius": "0.5rem",
+                "background": "var(--grad-btn)",
+                "color": "#ffffff",
+                "fontSize": "1rem",
+                "boxShadow": "0 0 18px var(--glow)"
               },
               "textContent": "◆"
             },
@@ -63,7 +64,7 @@
           "style": {
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.6rem",
+            "gap": "1.7rem",
             "@--sm": { "gap": "0.9rem" }
           },
           "children": [
@@ -71,12 +72,13 @@
               "tagName": "a",
               "attributes": { "href": "/features/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-text-muted)",
                 "textDecoration": "none",
                 "fontWeight": "500",
-                "fontSize": "0.95rem",
+                "fontSize": "0.92rem",
                 "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-text-primary)" }
               },
               "textContent": "Features"
             },
@@ -84,11 +86,12 @@
               "tagName": "a",
               "attributes": { "href": "/pricing/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-text-muted)",
                 "textDecoration": "none",
                 "fontWeight": "500",
-                "fontSize": "0.95rem",
-                ":hover": { "color": "var(--color-primary)" }
+                "fontSize": "0.92rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-text-primary)" }
               },
               "textContent": "Pricing"
             },
@@ -96,12 +99,13 @@
               "tagName": "a",
               "attributes": { "href": "/contact/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-text-muted)",
                 "textDecoration": "none",
                 "fontWeight": "500",
-                "fontSize": "0.95rem",
+                "fontSize": "0.92rem",
                 "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-text-primary)" }
               },
               "textContent": "Contact"
             },
@@ -110,15 +114,19 @@
               "attributes": { "href": "/pricing/" },
               "style": {
                 "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.2rem",
-                "borderRadius": "var(--radius)",
+                "background": "var(--grad-btn)",
+                "color": "#ffffff",
+                "padding": "0.55rem 1.25rem",
+                "borderRadius": "999px",
                 "textDecoration": "none",
                 "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "fontSize": "0.92rem",
+                "boxShadow": "0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px -8px var(--glow)",
+                "transition": "transform 0.15s, box-shadow 0.15s",
+                ":hover": {
+                  "transform": "translateY(-1px)",
+                  "boxShadow": "0 0 0 1px rgba(255,255,255,0.12), 0 12px 30px -8px var(--glow)"
+                }
               },
               "textContent": "Get started"
             }

package/sites/saas/components/sa-pricing.json

@@ -55,7 +55,7 @@
                 "fontWeight": "600",
                 "fontFamily": "inherit",
                 "transition": "background-color 0.15s, color 0.15s, box-shadow 0.15s",
-                "backgroundColor": "${state.billing === 'monthly' ? 'var(--color-bg-white)' : 'transparent'}",
+                "backgroundColor": "${state.billing === 'monthly' ? 'var(--color-bg-elev2)' : 'transparent'}",
                 "color": "${state.billing === 'monthly' ? 'var(--color-text-primary)' : 'var(--color-text-muted)'}",
                 "boxShadow": "${state.billing === 'monthly' ? '0 1px 4px rgba(20, 20, 43, 0.1)' : 'none'}"
               }
@@ -79,7 +79,7 @@
                 "fontWeight": "600",
                 "fontFamily": "inherit",
                 "transition": "background-color 0.15s, color 0.15s, box-shadow 0.15s",
-                "backgroundColor": "${state.billing === 'annual' ? 'var(--color-bg-white)' : 'transparent'}",
+                "backgroundColor": "${state.billing === 'annual' ? 'var(--color-bg-elev2)' : 'transparent'}",
                 "color": "${state.billing === 'annual' ? 'var(--color-text-primary)' : 'var(--color-text-muted)'}",
                 "boxShadow": "${state.billing === 'annual' ? '0 1px 4px rgba(20, 20, 43, 0.1)' : 'none'}"
               }
@@ -213,9 +213,9 @@
             "flexDirection": "column",
             "padding": "2rem",
             "borderRadius": "var(--radius)",
-            "border": "2px solid var(--color-primary)",
-            "backgroundColor": "var(--color-bg-white)",
-            "boxShadow": "0 20px 48px rgba(99, 102, 241, 0.18)"
+            "border": "1px solid rgba(124, 116, 255, 0.6)",
+            "backgroundColor": "var(--color-bg-elev)",
+            "boxShadow": "0 24px 70px -18px var(--glow)"
           },
           "children": [
             {
@@ -299,15 +299,16 @@
                 "display": "block",
                 "textAlign": "center",
                 "padding": "0.7rem 1rem",
-                "borderRadius": "var(--radius)",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
+                "borderRadius": "999px",
+                "background": "var(--grad-btn)",
+                "color": "#ffffff",
                 "textDecoration": "none",
                 "fontWeight": "600",
                 "fontSize": "0.95rem",
                 "marginBottom": "1.5rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "boxShadow": "0 10px 26px -8px var(--glow)",
+                "transition": "transform 0.15s",
+                ":hover": { "transform": "translateY(-2px)" }
               },
               "textContent": "Start 14-day trial"
             },

package/sites/saas/components/sa-stat.json

@@ -7,11 +7,11 @@
   "style": {
     "display": "flex",
     "flexDirection": "column",
-    "gap": "0.4rem",
-    "padding": "1.75rem",
+    "gap": "0.5rem",
+    "padding": "1.9rem",
     "borderRadius": "var(--radius)",
     "border": "1px solid var(--color-border)",
-    "backgroundColor": "var(--color-bg-cream)",
+    "backgroundColor": "var(--color-bg-elev)",
     "textAlign": "center"
   },
   "children": [
@@ -19,10 +19,14 @@
       "tagName": "div",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(2.25rem, 5vw, 3.25rem)",
+        "fontSize": "clamp(2.25rem, 5vw, 3.4rem)",
         "fontWeight": "700",
         "letterSpacing": "-0.03em",
         "lineHeight": "1",
+        "background": "var(--grad)",
+        "backgroundClip": "text",
+        "webkitBackgroundClip": "text",
+        "webkitTextFillColor": "transparent",
         "color": "var(--color-primary)"
       },
       "textContent": "${state.value}"

package/sites/saas/package.json

@@ -9,7 +9,7 @@
     "dev": "jx dev"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^0.19.0",
-    "@jxsuite/runtime": "^0.19.0"
+    "@jxsuite/compiler": "^0.34.0",
+    "@jxsuite/runtime": "^0.34.0"
   }
 }

package/sites/saas/pages/index.md

@@ -11,25 +11,25 @@ state:
     limit: 4
 ---
 
-::sa-hero{props.eyebrow="✦ Now with automations & analytics" props.heading="The product platform for teams that ship." props.subheading="Flowlark brings planning, building, and shipping into one fast, delightful workspace — so your team spends less time on busywork and more time making things." props.cta="Get started free" props.ctaHref="/pricing/" props.cta2="See the features" props.cta2Href="/features/" props.note="Free forever plan · No credit card required" props.image="/images/hero.jpg" props.imageAlt="The Flowlark product dashboard showing projects, timelines, and analytics"}
+::sa-hero{props.eyebrow="Now with automations & analytics" props.heading="The product platform for teams that" props.headingAccent="ship." props.subheading="Flowlark brings planning, building, and shipping into one fast, delightful workspace — so your team spends less time on busywork and more time making things." props.cta="Get started free" props.ctaHref="/pricing/" props.cta2="See the features" props.cta2Href="/features/" props.note="Free forever plan · No credit card required" props.image="/images/hero.jpg" props.imageAlt="The Flowlark product dashboard showing projects, timelines, and analytics"}
 
 ::sa-logo-cloud{}
 
 :::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem"}
 ::sa-section-header{props.eyebrow="Why Flowlark" props.heading="Everything your team needs, nothing it doesn’t" props.subheading="One workspace that replaces the tangle of trackers, docs, and spreadsheets your team juggles today."}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
-::sa-feature-card{props.icon="⚡" props.title="Ship faster" props.text="Plan work, track progress, and hand off cleanly — all in a workspace that keeps everyone in sync."}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(6, 1fr)" style.gap="1rem" style.--md.gridTemplateColumns="1fr"}
+::sa-feature-card{props.col="3" props.icon="⚡" props.title="Ship faster" props.text="Plan work, track progress, and hand off cleanly — all in a workspace that keeps everyone in sync."}
 
-::sa-feature-card{props.icon="🤖" props.title="Automate the busywork" props.text="Trigger updates, assignments, and reminders automatically. Set a rule once and let it run."}
+::sa-feature-card{props.col="3" props.icon="🤖" props.title="Automate the busywork" props.text="Trigger updates, assignments, and reminders automatically. Set a rule once and let it run."}
 
-::sa-feature-card{props.icon="📊" props.title="See what matters" props.text="Live dashboards turn your team’s activity into insight — no exports, no stale slides."}
+::sa-feature-card{props.col="2" props.icon="📊" props.title="See what matters" props.text="Live dashboards turn your team’s activity into insight — no exports, no stale slides."}
 
-::sa-feature-card{props.icon="🧩" props.title="Fits your stack" props.text="Connect the tools you already use. Flowlark plays nicely with the rest of your workflow."}
+::sa-feature-card{props.col="2" props.icon="🧩" props.title="Fits your stack" props.text="Connect the tools you already use. Flowlark plays nicely with the rest of your workflow."}
 
-::sa-feature-card{props.icon="🔒" props.title="Secure by default" props.text="Encryption in transit and at rest, granular permissions, SSO, and audit logs when you need them."}
+::sa-feature-card{props.col="2" props.icon="🔒" props.title="Secure by default" props.text="Encryption in transit and at rest, granular permissions, SSO, and audit logs when you need them."}
 
-::sa-feature-card{props.icon="🌍" props.title="Built for teams" props.text="From two people to two thousand, Flowlark scales with you without slowing anyone down."}
+::sa-feature-card{props.col="6" props.icon="🌍" props.title="Built for teams, at any scale" props.text="From two people to two thousand, Flowlark scales with you without slowing anyone down — with the performance and controls larger teams need."}
 ::::
 :::::
 

package/sites/saas/project.json

@@ -33,7 +33,7 @@
       "tagName": "link",
       "attributes": {
         "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap"
+        "href": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap"
       }
     }
   ],
@@ -44,29 +44,37 @@
     "--sm": "(max-width: 640px)"
   },
   "style": {
-    "--color-primary": "#6366f1",
-    "--color-primary-hover": "#4f46e5",
-    "--color-ink": "#0d0d1a",
-    "--color-bg-dark": "#0d0d1a",
-    "--color-bg-cream": "#f6f6fb",
-    "--color-bg-surface": "#f6f6fb",
-    "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#14142b",
+    "--color-primary": "#7c74ff",
+    "--color-primary-hover": "#948dff",
+    "--color-ink": "#050509",
+    "--color-bg-dark": "#0a0a14",
+    "--color-bg-cream": "#14141f",
+    "--color-bg-surface": "#14141f",
+    "--color-bg-white": "#0a0a14",
+    "--color-bg": "#0a0a14",
+    "--color-bg-elev": "#14141f",
+    "--color-bg-elev2": "#1c1c2b",
+    "--color-text-primary": "#edecf5",
     "--color-text-white": "#ffffff",
-    "--color-text-muted": "#64647a",
-    "--color-border": "#e6e6f0",
-    "--color-accent": "#6366f1",
-    "--color-accent-soft": "rgba(99, 102, 241, 0.12)",
+    "--color-text-muted": "#9494ac",
+    "--color-border": "#262636",
+    "--color-line": "#262636",
+    "--color-accent": "#7c74ff",
+    "--color-accent-soft": "rgba(124, 116, 255, 0.14)",
+    "--grad": "linear-gradient(120deg, #8b7bff 0%, #22d3ee 55%, #f472b6 100%)",
+    "--grad-btn": "linear-gradient(120deg, #7c74ff, #a06bff)",
+    "--glow": "rgba(124, 116, 255, 0.45)",
     "--font-heading": "'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-body": "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
     "--max-width": "1200px",
     "--max-width-narrow": "820px",
-    "--radius": "0.75rem",
+    "--radius": "0.9rem",
     "margin": "0",
     "padding": "0",
-    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontFamily": "var(--font-body)",
     "lineHeight": "1.6",
     "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)",
+    "backgroundColor": "var(--color-bg)",
     "table": {
       "width": "100%",
       "borderCollapse": "collapse",