diff --git a/openless-all/app/scripts/aura-skin-contract.test.mjs b/openless-all/app/scripts/aura-skin-contract.test.mjs
index 4e6b1c99..5228a23e 100644
--- a/openless-all/app/scripts/aura-skin-contract.test.mjs
+++ b/openless-all/app/scripts/aura-skin-contract.test.mjs
@@ -186,7 +186,7 @@ assertUsesClassName(
   'sample should accept className usage',
 );
 
-const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMode, sourceFiles, remoteStyle] = await Promise.all([
+const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMode, stylePage, sourceFiles, remoteStyle] = await Promise.all([
   read('src/styles/tokens.css'),
   read('src/styles/global.css'),
   read('src/components/FloatingShell.tsx'),
@@ -194,6 +194,7 @@ const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMod
   read('src/pages/Overview.tsx'),
   read('src/pages/settings/tabs.tsx'),
   read('src/lib/themeMode.ts'),
+  read('src/pages/Style.tsx'),
   walkSourceFiles(srcRoot),
   read('src-tauri/src/remote_server/assets/style.css'),
 ]);
@@ -397,6 +398,36 @@ assert.match(
   'themeMode.ts must apply theme via data-ol-theme / dataset.olTheme',
 );
 
+const forbiddenStyleCardLightBackgrounds = [
+  /rgba\(\s*255\s*,\s*255\s*,\s*255/i,
+  /rgba\(\s*248\s*,\s*250\s*,\s*252/i,
+  /rgba\(\s*239\s*,\s*246\s*,\s*255/i,
+];
+
+for (const pattern of forbiddenStyleCardLightBackgrounds) {
+  assert.doesNotMatch(
+    stylePage,
+    pattern,
+    'Style.tsx must not hardcode light style-card backgrounds (use --ol-style-* tokens)',
+  );
+}
+
+assert.match(
+  stylePage,
+  /--ol-style-card-bg/,
+  'Style.tsx must reference --ol-style-card-bg for style pack surfaces',
+);
+assert.match(
+  stylePage,
+  /--ol-style-card-ink/,
+  'Style.tsx must reference --ol-style-card-ink for style pack text',
+);
+assert.match(
+  stylePage,
+  /--ol-style-subtle-bg/,
+  'Style.tsx must reference --ol-style-subtle-bg for editor subtle surfaces',
+);
+
 const illegalCssStringPatterns = [
   /color:\s*'var\([^)]+\)';/,
   /background:\s*'var\([^)]+\)';/,
diff --git a/openless-all/app/src/pages/Style.tsx b/openless-all/app/src/pages/Style.tsx
index 7e282a5d..43cabc5c 100644
--- a/openless-all/app/src/pages/Style.tsx
+++ b/openless-all/app/src/pages/Style.tsx
@@ -613,15 +613,11 @@ export function Style() {
                     textAlign: 'left',
                     position: 'relative',
                     border: '0.5px solid',
-                    borderColor: pack.active ? 'var(--ol-blue)' : 'var(--ol-line)',
-                    background: pack.active
-                      ? 'linear-gradient(180deg, rgba(239,246,255,0.92), rgba(255,255,255,0.98))'
-                      : isBuiltin
-                        ? 'linear-gradient(180deg, rgba(248,250,252,0.92), rgba(241,245,249,0.85))'
-                        : 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92))',
+                    borderColor: pack.active ? 'var(--ol-style-card-border-active)' : 'var(--ol-style-card-border)',
+                    background: pack.active ? 'var(--ol-style-card-bg-active)' : 'var(--ol-style-card-bg)',
                     borderRadius: 'var(--ol-modal-radius)',
                     padding: 16,
-                    boxShadow: pack.active ? '0 0 0 3px var(--ol-blue-ring)' : 'none',
+                    boxShadow: pack.active ? 'var(--ol-style-card-shadow-active)' : 'var(--ol-style-card-shadow)',
                     cursor: 'default',
                     minHeight: 204,
                   }}
@@ -629,7 +625,7 @@ export function Style() {
                   <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
                     <div style={{ minWidth: 0 }}>
                       <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-                        <div style={{ fontSize: 14, fontWeight: 600, color: isBuiltin && !pack.active ? 'var(--ol-ink-2)' : 'var(--ol-ink)' }}>
+                        <div style={{ fontSize: 14, fontWeight: 600, color: isBuiltin && !pack.active ? 'var(--ol-style-card-ink-2)' : 'var(--ol-style-card-ink)' }}>
                           {pack.name}
                         </div>
                         <Pill tone={isBuiltin ? 'outline' : 'blue'} size="sm">
@@ -646,7 +642,7 @@ export function Style() {
                       <div
                         style={{
                           fontSize: 12.5,
-                          color: 'var(--ol-ink-3)',
+                          color: 'var(--ol-style-card-ink-3)',
                           lineHeight: 1.6,
                           display: '-webkit-box',
                           WebkitBoxOrient: 'vertical',
@@ -665,8 +661,8 @@ export function Style() {
                         style={{
                           width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
                           display: 'grid', placeItems: 'center',
-                          background: pack.active ? 'rgba(37,99,235,0.12)' : 'rgba(15,23,42,0.05)',
-                          color: pack.active ? 'var(--ol-blue)' : 'var(--ol-ink-3)',
+                          background: pack.active ? 'var(--ol-style-card-icon-bg-active)' : 'var(--ol-style-card-icon-bg)',
+                          color: pack.active ? 'var(--ol-blue)' : 'var(--ol-style-card-ink-3)',
                           flexShrink: 0,
                         }}
                       >
@@ -683,8 +679,8 @@ export function Style() {
                           width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
                           display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                           flexShrink: 0,
-                          border: '0.5px solid rgba(239,68,68,0.32)',
-                          background: 'rgba(254,242,242,0.6)',
+                          border: '0.5px solid var(--ol-style-delete-border)',
+                          background: 'var(--ol-style-delete-bg)',
                           color: 'var(--ol-red, #ef4444)',
                           cursor: busy === 'deleting' ? 'wait' : 'pointer',
                           opacity: busy === 'deleting' ? 0.55 : 1,
@@ -755,11 +751,11 @@ export function Style() {
                 justifyContent: 'center',
                 gap: 8,
                 textAlign: 'center',
-                border: '0.5px dashed var(--ol-line-strong)',
+                border: '0.5px dashed var(--ol-style-add-tile-border)',
                 borderRadius: 'var(--ol-modal-radius)',
                 padding: 16,
-                background: 'transparent',
-                color: 'var(--ol-ink-3)',
+                background: 'var(--ol-style-add-tile-bg)',
+                color: 'var(--ol-style-card-ink-3)',
                 cursor: busy === 'creating' ? 'wait' : 'pointer',
                 opacity: busy === 'creating' ? 0.55 : 1,
                 minHeight: 204,
@@ -770,14 +766,14 @@ export function Style() {
                 style={{
                   width: 44, height: 44, borderRadius: 'var(--ol-pill-radius)',
                   display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                  background: 'rgba(15,23,42,0.04)',
-                  color: 'var(--ol-ink-2)',
+                  background: 'var(--ol-style-add-tile-icon-bg)',
+                  color: 'var(--ol-style-card-ink-2)',
                 }}
               >
                 <Icon name="plus" size={22} />
               </div>
-              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ol-ink-2)' }}>{t('style.pack.addPackTileTitle')}</div>
-              <div style={{ fontSize: 12, color: 'var(--ol-ink-4)', lineHeight: 1.55, maxWidth: 220 }}>{t('style.pack.addPackTileHint')}</div>
+              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ol-style-card-ink-2)' }}>{t('style.pack.addPackTileTitle')}</div>
+              <div style={{ fontSize: 12, color: 'var(--ol-style-card-ink-3)', lineHeight: 1.55, maxWidth: 220 }}>{t('style.pack.addPackTileHint')}</div>
             </motion.button>
             </AnimatePresence>
           </div>
@@ -990,8 +986,9 @@ export function Style() {
                   <Card
                     padding={16}
                     style={{
-                      background: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.95))',
-                      border: '0.5px solid rgba(148,163,184,0.24)',
+                      background: 'var(--ol-style-subtle-bg)',
+                      border: '0.5px solid var(--ol-style-subtle-border)',
+                      boxShadow: 'var(--ol-style-subtle-shadow)',
                     }}
                   >
                     <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
@@ -1058,8 +1055,9 @@ export function Style() {
                     style={{
                       padding: 14,
                       borderRadius: 'var(--ol-bubble-radius)',
-                      background: 'linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.95))',
-                      border: '0.5px solid var(--ol-line)',
+                      background: 'var(--ol-style-subtle-bg)',
+                      border: '0.5px solid var(--ol-style-subtle-border)',
+                      boxShadow: 'var(--ol-style-subtle-shadow)',
                     }}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
@@ -1095,7 +1093,9 @@ export function Style() {
                         key={`${draft.id}-example-${index}`}
                         padding={16}
                         style={{
-                          background: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98))',
+                          background: 'var(--ol-style-card-bg)',
+                          border: '0.5px solid var(--ol-style-card-border)',
+                          boxShadow: 'var(--ol-style-card-shadow)',
                         }}
                       >
                         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
@@ -1129,8 +1129,8 @@ export function Style() {
                           <div
                             style={{
                               borderRadius: 'var(--ol-bubble-radius)',
-                              border: '0.5px solid rgba(148,163,184,0.22)',
-                              background: 'rgba(248,250,252,0.9)',
+                              border: '0.5px solid var(--ol-style-subtle-border)',
+                              background: 'var(--ol-style-subtle-bg)',
                               padding: 14,
                             }}
                           >
@@ -1147,8 +1147,8 @@ export function Style() {
                           <div
                             style={{
                               borderRadius: 'var(--ol-bubble-radius)',
-                              border: '0.5px solid rgba(37,99,235,0.16)',
-                              background: 'rgba(239,246,255,0.86)',
+                              border: '0.5px solid var(--ol-style-card-border-active)',
+                              background: 'var(--ol-style-subtle-bg)',
                               padding: 14,
                             }}
                           >
@@ -1181,8 +1181,8 @@ function MetaItem({ label, value }: { label: string; value: string }) {
     <div
       style={{
         borderRadius: 'var(--ol-r-lg)',
-        border: '0.5px solid rgba(148,163,184,0.2)',
-        background: 'var(--ol-glass-bg-strong)',
+        border: '0.5px solid var(--ol-style-subtle-border)',
+        background: 'var(--ol-style-card-bg)',
         padding: '10px 12px',
       }}
     >
@@ -1218,8 +1218,8 @@ function DirectiveRow({
         gap: 12,
         padding: '10px 12px',
         borderRadius: 'var(--ol-r-lg)',
-        border: '0.5px solid rgba(148,163,184,0.2)',
-        background: 'var(--ol-glass-bg-strong)',
+        border: '0.5px solid var(--ol-style-subtle-border)',
+        background: 'var(--ol-style-card-bg)',
       }}
     >
       <div style={{ minWidth: 0 }}>
@@ -1239,8 +1239,9 @@ const inputStyle: CSSProperties = {
   minHeight: 38,
   padding: '9px 11px',
   borderRadius: 'var(--ol-r-md)',
-  border: '0.5px solid var(--ol-line-strong)',
-  background: 'var(--ol-control-solid)',
+  border: '0.5px solid var(--ol-style-input-border)',
+  background: 'var(--ol-style-input-bg)',
+  boxShadow: 'var(--ol-style-input-shadow)',
   color: 'var(--ol-ink)',
   font: 'inherit',
   fontSize: 12.5,
@@ -1251,8 +1252,9 @@ const textareaStyle: CSSProperties = {
   boxSizing: 'border-box',
   padding: '11px 12px',
   borderRadius: 'var(--ol-r-lg)',
-  border: '0.5px solid var(--ol-line-strong)',
-  background: 'var(--ol-control-solid)',
+  border: '0.5px solid var(--ol-style-input-border)',
+  background: 'var(--ol-style-input-bg)',
+  boxShadow: 'var(--ol-style-input-shadow)',
   color: 'var(--ol-ink)',
   font: 'inherit',
   fontSize: 12.5,
diff --git a/openless-all/app/src/styles/tokens.css b/openless-all/app/src/styles/tokens.css
index d822cfec..48ce77e6 100755
--- a/openless-all/app/src/styles/tokens.css
+++ b/openless-all/app/src/styles/tokens.css
@@ -373,11 +373,11 @@
   --ol-style-add-tile-bg: rgba(255,255,255,0.02);
   --ol-style-add-tile-icon-bg: rgba(255,255,255,0.10);
   --ol-style-add-tile-border: rgba(255,255,255,0.10);
-  --ol-style-input-bg: rgba(255,255,255,0.04);
-  --ol-style-input-border: rgba(255,255,255,0.08);
+  --ol-style-input-bg: rgba(255,255,255,0.06);
+  --ol-style-input-border: rgba(255,255,255,0.10);
   --ol-style-input-shadow: none;
-  --ol-style-subtle-bg: rgba(255,255,255,0.03);
-  --ol-style-subtle-border: rgba(255,255,255,0.06);
+  --ol-style-subtle-bg: rgba(255,255,255,0.05);
+  --ol-style-subtle-border: rgba(255,255,255,0.09);
   --ol-style-subtle-shadow: none;
   --ol-style-editor-bg: linear-gradient(180deg, rgba(27,27,30,0.96), rgba(23,23,26,0.94));
   --ol-style-editor-border: rgba(255,255,255,0.07);