diff --git a/packages/layerchart/src/lib/components/Highlight.svelte b/packages/layerchart/src/lib/components/Highlight.svelte
index b977c802e..e88f84752 100644
--- a/packages/layerchart/src/lib/components/Highlight.svelte
+++ b/packages/layerchart/src/lib/components/Highlight.svelte
@@ -216,7 +216,7 @@
         strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
         radius={typeof bar === 'object' ? bar.radius : null}
         bar={$tooltip.data}
-        class={cls(!bar.fill && 'fill-accent-500', typeof bar === 'object' ? bar.class : null)}
+        class={cls(!bar.fill && 'fill-primary', typeof bar === 'object' ? bar.class : null)}
         on:click
       />
     </slot>
@@ -255,7 +255,7 @@
           {...typeof points === 'object' ? points : null}
           class={cls(
             'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
-            !fill && 'fill-accent-500',
+            !fill && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
         />
diff --git a/packages/layerchart/src/lib/components/Link.svelte b/packages/layerchart/src/lib/components/Link.svelte
index 088c30cc6..852e02551 100644
--- a/packages/layerchart/src/lib/components/Link.svelte
+++ b/packages/layerchart/src/lib/components/Link.svelte
@@ -31,8 +31,8 @@
 
   /** Convenient property to swap x/y accessor logic */
   export let orientation: 'vertical' | 'horizontal' = sankey ? 'horizontal' : 'vertical';
-  export let x = sankey ? (d) => d[0] : (d) => (orientation === 'horizontal' ? d.y : d.x);
-  export let y = sankey ? (d) => d[1] : (d) => (orientation === 'horizontal' ? d.x : d.y);
+  export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
+  export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
   export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
diff --git a/packages/layerchart/src/lib/components/Points.svelte b/packages/layerchart/src/lib/components/Points.svelte
index b2618fe3b..f2fd09609 100644
--- a/packages/layerchart/src/lib/components/Points.svelte
+++ b/packages/layerchart/src/lib/components/Points.svelte
@@ -83,11 +83,11 @@
       const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
       return {
         source: {
-          x: xMin + getOffset(xMin, offsetX, $xScale),
+          x: xMin + getOffset(xMin, offsetX, $xScale) + r,
           y,
         },
         target: {
-          x: xMax + getOffset(xMax, offsetX, $xScale),
+          x: xMax + getOffset(xMax, offsetX, $xScale) - r,
           y: y,
         },
       };
@@ -116,7 +116,11 @@
   {#if links}
     <g class="link-group">
       {#each _links as link}
-        <Link data={link} stroke="black" {...typeof links === 'object' ? links : null} />
+        <Link
+          data={link}
+          class="stroke-surface-content/50"
+          {...typeof links === 'object' ? links : null}
+        />
       {/each}
     </g>
   {/if}
diff --git a/packages/layerchart/src/lib/docs/Link.svelte b/packages/layerchart/src/lib/docs/Link.svelte
index 5b1769bb6..78cbf6910 100644
--- a/packages/layerchart/src/lib/docs/Link.svelte
+++ b/packages/layerchart/src/lib/docs/Link.svelte
@@ -2,6 +2,6 @@
   // console.log($$props, $$slots);
 </script>
 
-<a class="text-accent-500 font-medium" {...$$restProps}>
+<a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
index 242ffd780..3f04d4886 100644
--- a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -60,7 +60,7 @@
       <Svg>
         <Group center>
           {#key spring}
-            <LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 50%)']} vertical let:url>
+            <LinearGradient class="from-secondary to-primary" vertical let:url>
               <Arc
                 {value}
                 {domain}
@@ -74,7 +74,7 @@
                 let:value
                 let:boundingBox
                 fill={url}
-                track={{ fill: 'hsl(0 0% 0% / 6% )' }}
+                track={{ class: 'fill-surface-content/5' }}
               >
                 <Text
                   value={Math.round(value)}
diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
index 0f0acac41..25a3cf648 100644
--- a/packages/layerchart/src/routes/docs/components/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -58,9 +58,9 @@
         <Axis placement="bottom" rule />
         <Area
           {curve}
-          line={showLine && { class: 'stroke-accent-500 stroke-2' }}
+          line={showLine && { class: 'stroke-primary stroke-2' }}
           {tweened}
-          class="fill-accent-500/30"
+          class="fill-primary/30"
         />
         {#if showPoints}
           <Points {tweened} />
diff --git a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
index cb8682911..04aea22c8 100644
--- a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
@@ -15,8 +15,8 @@
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Circle cx={100} cy={100} r={20} />
-        <Circle cx={200} cy={200} r={20} class="fill-accent-500" />
-        <Circle cx={300} cy={150} r={20} class="stroke-2 stroke-accent-500 fill-accent-100" />
+        <Circle cx={200} cy={200} r={20} class="fill-primary" />
+        <Circle cx={300} cy={150} r={20} class="stroke-2 stroke-primary fill-primary/10" />
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
index ca6312149..f91e38d55 100644
--- a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
@@ -144,7 +144,11 @@
     data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
     r="name"
     rScale={scaleOrdinal()}
-    rRange={['var(--color-blue-500)', 'var(--color-green-500)', 'var(--color-purple-500)']}
+    rRange={[
+      'oklch(var(--color-success))',
+      'oklch(var(--color-warning))',
+      'oklch(var(--color-error))',
+    ]}
   >
     <Legend title="I am Legend" />
   </Chart>
@@ -158,7 +162,11 @@
       data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
       r="name"
       rScale={scaleOrdinal()}
-      rRange={['var(--color-blue-500)', 'var(--color-green-500)', 'var(--color-purple-500)']}
+      rRange={[
+        'oklch(var(--color-success))',
+        'oklch(var(--color-warning))',
+        'oklch(var(--color-error))',
+      ]}
     >
       <Legend title="top-left" placement="top-left" />
       <Legend title="top" placement="top" />
diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.svelte b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
index d4668c307..eaed7673a 100644
--- a/packages/layerchart/src/routes/docs/components/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
@@ -14,8 +14,8 @@
       <Svg>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
-        <Line x1={100} y1={100} x2={200} y2={200} class="stroke-2 stroke-blue-500" />
-        <Line x1={50} y1={150} x2={400} y2={150} class="stroke-2 stroke-red-500" />
+        <Line x1={100} y1={100} x2={200} y2={200} class="stroke-2 stroke-primary" />
+        <Line x1={50} y1={150} x2={400} y2={150} class="stroke-2 stroke-secondary" />
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/Point/+page.svelte b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
index 6a9747907..38c071e0a 100644
--- a/packages/layerchart/src/routes/docs/components/Point/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
@@ -24,7 +24,7 @@
           <circle cx={x} cy={y} r={10} />
         </Point>
         <Point d={{ x: 20, y: 20 }} let:x let:y>
-          <circle cx={x} cy={y} r={15} class="fill-accent-500" />
+          <circle cx={x} cy={y} r={15} class="fill-primary" />
         </Point>
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
index 68e14566b..890934871 100644
--- a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
@@ -15,8 +15,8 @@
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Rect x={50} y={50} width={100} height={150} />
-        <Rect x={90} y={80} width={200} height={100} class="fill-accent-500" />
-        <Rect x={125} y={40} width={200} height={100} class="stroke-accent-500 fill-none" />
+        <Rect x={90} y={80} width={200} height={100} class="fill-primary" />
+        <Rect x={125} y={40} width={200} height={100} class="stroke-primary fill-none" />
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
index 8014f17e2..9e2007753 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -69,7 +69,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
-        <Spline {curve} {tweened} {draw} class="stroke-accent-500 stroke-2" />
+        <Spline {curve} {tweened} {draw} class="stroke-primary stroke-2" />
         {#if showPoints}
           <Points {tweened} />
         {/if}
@@ -99,7 +99,7 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} draw class="stroke-accent-500 stroke-2" />
+            <Spline {curve} draw class="stroke-primary stroke-2" />
           {/if}
         </Svg>
       </Chart>
@@ -126,7 +126,7 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} tweened class="stroke-accent-500 stroke-2" />
+            <Spline {curve} tweened class="stroke-primary stroke-2" />
           {/if}
         </Svg>
       </Chart>
@@ -153,9 +153,9 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} class="stroke-accent-500 stroke-2">
-              <circle slot="start" r={5} class="fill-accent-500" />
-              <circle slot="end" r={5} class="fill-accent-500" />
+            <Spline {curve} class="stroke-primary stroke-2">
+              <circle slot="start" r={5} class="fill-primary" />
+              <circle slot="end" r={5} class="fill-primary" />
             </Spline>
           {/if}
         </Svg>
@@ -183,14 +183,14 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} class="stroke-accent-500 stroke-2">
+            <Spline {curve} class="stroke-primary stroke-2">
               <svelte:fragment slot="start">
-                <circle r={5} class="fill-accent-500" />
+                <circle r={5} class="fill-primary" />
                 <Text value="start" textAnchor="end" verticalAnchor="middle" dx={-8} />
               </svelte:fragment>
 
               <svelte:fragment slot="end">
-                <circle r={5} class="fill-accent-500" />
+                <circle r={5} class="fill-primary" />
                 <Text value="end" verticalAnchor="middle" dx={8} />
               </svelte:fragment>
             </Spline>
@@ -220,8 +220,8 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} draw={{ duration: 3000 }} class="stroke-accent-500 stroke-2">
-              <circle slot="end" r={5} class="fill-accent-500" />
+            <Spline {curve} draw={{ duration: 3000 }} class="stroke-primary stroke-2">
+              <circle slot="end" r={5} class="fill-primary" />
             </Spline>
           {/if}
         </Svg>
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
index aaf8c7c77..5908fe444 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -164,7 +164,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -191,7 +191,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip variant="light" let:data>
@@ -222,7 +222,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -249,7 +249,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip y="data" x="data" header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -278,7 +278,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines axis="both" />
       </Svg>
 
@@ -288,7 +288,7 @@
         anchor="right"
         contained={false}
         variant="none"
-        class="text-[10px] font-semibold text-accent-700 bg-accent-50 mt-[2px] px-1 py-[2px] border border-accent-500 rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
         let:data
       >
         {data.value}
@@ -299,7 +299,7 @@
         y={height}
         anchor="top"
         variant="none"
-        class="text-[10px] font-semibold text-accent-700 bg-accent-50 mt-[2px] px-2 py-[2px] border border-accent-500 rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
         let:data
       >
         {formatDate(data.date, PeriodType.Day)}
@@ -358,7 +358,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip
@@ -402,7 +402,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight
           points={charts.area.highlight.includes('points')}
           lines={charts.area.highlight.includes('lines')}
@@ -440,7 +440,11 @@
       r="key"
       rScale={scaleOrdinal()}
       rDomain={keys}
-      rRange={['var(--color-red-500)', 'var(--color-green-500)', 'var(--color-blue-500)']}
+      rRange={[
+        'oklch(var(--color-info))',
+        'oklch(var(--color-success))',
+        'oklch(var(--color-warning))',
+      ]}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{
         mode: charts.areaStack.mode,
@@ -496,7 +500,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-500 stroke-accent-800" />
+        <Points class="fill-primary/10 stroke-primary" />
         <Highlight
           points={charts.dateTime.highlight.includes('points')}
           lines={charts.dateTime.highlight.includes('lines')}
@@ -542,7 +546,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-500 stroke-accent-800" links />
+        <Points class="fill-primary/10 stroke-primary" links />
         <Highlight
           points={charts.duration.highlight.includes('points')}
           lines={charts.duration.highlight.includes('lines')}
@@ -592,7 +596,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-500 stroke-accent-800" links />
+        <Points class="fill-primary/10 stroke-primary" links />
         <Highlight
           points={charts.multiDuration.highlight.includes('points')}
           lines={charts.multiDuration.highlight.includes('lines')}
@@ -643,14 +647,12 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight
           points={charts.bars.highlight.includes('points')}
           lines={charts.bars.highlight.includes('lines')}
           area={charts.bars.highlight.includes('area')}
-          bar={charts.bars.highlight.includes('bar')
-            ? { radius: 4, class: 'fill-accent-800' }
-            : false}
+          bar={charts.bars.highlight.includes('bar') ? { radius: 4, class: 'fill-primary' } : false}
           axis={charts.bars.axis}
         />
       </Svg>
@@ -693,8 +695,8 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars y="baseline" radius={4} strokeWidth={1} class="fill-gray-200" />
-        <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-accent-500" />
+        <Bars y="baseline" radius={4} strokeWidth={1} class="fill-surface-content/10" />
+        <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-primary" />
         <Highlight
           points={charts.multiBars.highlight.includes('points')}
           lines={charts.multiBars.highlight.includes('lines')}
@@ -706,7 +708,7 @@
         />
         <Highlight
           bar={charts.multiBars.highlight.includes('bar')
-            ? { y: 'value', radius: 4, padding: 16, strokeWidth: 1, class: 'fill-accent-800' }
+            ? { y: 'value', radius: 4, padding: 16, strokeWidth: 1, class: 'fill-primary' }
             : false}
         />
       </Svg>
@@ -744,7 +746,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" grid rule />
-        <Points class="fill-accent-500 stroke-accent-800" />
+        <Points class="fill-primary stroke-primary" />
         <Highlight
           points={charts.scatter.highlight.includes('points')}
           lines={charts.scatter.highlight.includes('lines')}
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index 8909b6648..e94a607d6 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -61,7 +61,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
-        <Area line={{ class: 'stroke-2 stroke-accent-500' }} class="fill-accent-500/30" />
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
       </Svg>
     </Chart>
   </div>
@@ -84,7 +84,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
-        <Area line={{ class: 'stroke-2 stroke-accent-500' }} class="fill-accent-500/30" />
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => formatDate(data.date, 'eee, MMMM do')} let:data>
@@ -110,7 +110,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
-        <Area line={{ class: 'stroke-2 stroke-accent-500' }} class="fill-accent-500/30" />
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
         <Labels format="integer" />
       </Svg>
     </Chart>
@@ -133,8 +133,8 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
-        <LinearGradient class="from-accent-500/50 to-accent-500/0" vertical let:url>
-          <Area line={{ class: 'stroke-2 stroke-accent-500' }} fill={url} />
+        <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
         </LinearGradient>
       </Svg>
     </Chart>
@@ -318,7 +318,7 @@
               initialWidth={0}
               tweened={{ width: { duration: 1000, easing: cubicInOut } }}
             >
-              <Area line={{ class: 'stroke-2 stroke-accent-500' }} class="fill-accent-500/30" />
+              <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
             </ChartClipPath>
           {/if}
         </Svg>
@@ -349,12 +349,12 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
           {#if show}
-            <Spline draw={{ easing: cubicInOut, delay: 700 }} class="stroke-2 stroke-accent-500" />
+            <Spline draw={{ easing: cubicInOut, delay: 700 }} class="stroke-2 stroke-primary" />
             <ChartClipPath
               initialWidth={0}
               tweened={{ width: { duration: 1000, easing: cubicInOut } }}
             >
-              <Area class="fill-accent-500/30" />
+              <Area class="fill-primary/30" />
             </ChartClipPath>
           {/if}
         </Svg>
@@ -385,7 +385,7 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
           {#if show}
-            <Spline draw={{ easing: cubicInOut }} class="stroke-2 stroke-accent-500" />
+            <Spline draw={{ easing: cubicInOut }} class="stroke-2 stroke-primary" />
             <ChartClipPath
               initialY={300}
               initialHeight={0}
@@ -394,7 +394,7 @@
                 height: { duration: 1000, easing: cubicInOut, delay: 500 },
               }}
             >
-              <Area class="fill-accent-500/30" />
+              <Area class="fill-primary/30" />
             </ChartClipPath>
           {/if}
         </Svg>
@@ -422,13 +422,13 @@
       let:tooltip
     >
       <Svg>
-        <LinearGradient class="from-accent-500/50 to-accent-500/0" vertical let:url>
-          <Area line={{ class: 'stroke-2 stroke-accent-500 opacity-20' }} fill={url} />
+        <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+          <Area line={{ class: 'stroke-2 stroke-primary opacity-20' }} fill={url} />
           <RectClipPath x={0} y={0} width={tooltip.data ? tooltip.x : width} {height} spring>
-            <Area line={{ class: 'stroke-2 stroke-accent-500' }} fill={url} />
+            <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
           </RectClipPath>
         </LinearGradient>
-        <Highlight points lines={{ class: 'stroke-accent-500 [stroke-dasharray:unset]' }} />
+        <Highlight points lines={{ class: 'stroke-primary [stroke-dasharray:unset]' }} />
         <Axis placement="bottom" />
       </Svg>
 
@@ -436,7 +436,7 @@
         y={48}
         xOffset={4}
         variant="none"
-        class="text-sm font-semibold text-accent-700 leading-3"
+        class="text-sm font-semibold text-primary leading-3"
         let:data
       >
         {format(data.value, 'currency')}
@@ -451,7 +451,7 @@
         y={height + padding.top + 2}
         anchor="top"
         variant="none"
-        class="text-sm font-semibold bg-accent-500 text-white leading-3 px-2 py-1 rounded whitespace-nowrap"
+        class="text-sm font-semibold bg-primary text-primary-content leading-3 px-2 py-1 rounded whitespace-nowrap"
         let:data
       >
         {format(data.date, PeriodType.Day)}
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
index 5d5918f91..fb84ebcaf 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -74,19 +74,19 @@
           stackBy: undefined,
         }
       : transitionChartMode === 'stack'
-      ? {
-          groupBy: undefined,
-          stackBy: 'fruit',
-        }
-      : transitionChartMode === 'groupStack'
-      ? {
-          groupBy: 'basket',
-          stackBy: 'fruit',
-        }
-      : {
-          groupBy: undefined,
-          stackBy: undefined,
-        };
+        ? {
+            groupBy: undefined,
+            stackBy: 'fruit',
+          }
+        : transitionChartMode === 'groupStack'
+          ? {
+              groupBy: 'basket',
+              stackBy: 'fruit',
+            }
+          : {
+              groupBy: undefined,
+              stackBy: undefined,
+            };
   $: transitionData = createStackData(longData, {
     xKey: 'year',
     groupBy: transitionChart.groupBy,
@@ -113,7 +113,7 @@
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
       </Svg>
     </Chart>
   </div>
@@ -136,7 +136,7 @@
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -166,9 +166,9 @@
         <Bars
           radius={4}
           strokeWidth={1}
-          class="fill-accent-500 group-hover:fill-gray-300 transition-colors"
+          class="fill-primary group-hover:fill-gray-300 transition-colors"
         />
-        <Highlight area bar={{ class: 'fill-accent-500', strokeWidth: 1, radius: 4 }} />
+        <Highlight area bar={{ class: 'fill-primary', strokeWidth: 1, radius: 4 }} />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
         <TooltipItem label="value" value={data.value} />
@@ -197,12 +197,12 @@
         <Bars
           radius={4}
           strokeWidth={1}
-          class="fill-accent-500 group-hover:fill-gray-300 transition-colors"
+          class="fill-primary group-hover:fill-gray-300 transition-colors"
         />
         <Highlight area>
           <svelte:fragment slot="area" let:area>
             <RectClipPath x={area.x} y={area.y} width={area.width} height={area.height} spring>
-              <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+              <Bars radius={4} strokeWidth={1} class="fill-primary" />
             </RectClipPath>
           </svelte:fragment>
         </Highlight>
@@ -230,7 +230,7 @@
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
         <Rule x={0} />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Labels format="integer" />
       </Svg>
     </Chart>
@@ -277,7 +277,7 @@
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Rule
           x={median(data, (d) => d.value)}
           class="stroke-2 stroke-red-400 [stroke-dasharray:4] [stroke-linecap:round] "
@@ -301,7 +301,7 @@
       padding={{ left: 16, bottom: 24 }}
     >
       <Svg>
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Axis placement="bottom" grid={{ class: 'stroke-white' }} rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
       </Svg>
@@ -323,7 +323,7 @@
       padding={{ left: 16, bottom: 24 }}
     >
       <Svg>
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Axis placement="bottom" grid={{ class: 'mix-blend-multiply' }} rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
       </Svg>
@@ -349,7 +349,7 @@
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
         <Bars x="baseline" radius={4} strokeWidth={1} class="fill-gray-200" />
-        <Bars x="value" radius={4} strokeWidth={1} inset={16} class="fill-accent-500" />
+        <Bars x="value" radius={4} strokeWidth={1} inset={16} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -393,7 +393,7 @@
               }}
               radius={4}
               strokeWidth={1}
-              class="fill-accent-500"
+              class="fill-primary"
             />
           {/if}
         </Svg>
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
index 20f0996f1..d88892899 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -75,19 +75,19 @@
           stackBy: undefined,
         }
       : transitionChartMode === 'stack'
-      ? {
-          groupBy: undefined,
-          stackBy: 'fruit',
-        }
-      : transitionChartMode === 'groupStack'
-      ? {
-          groupBy: 'basket',
-          stackBy: 'fruit',
-        }
-      : {
-          groupBy: undefined,
-          stackBy: undefined,
-        };
+        ? {
+            groupBy: undefined,
+            stackBy: 'fruit',
+          }
+        : transitionChartMode === 'groupStack'
+          ? {
+              groupBy: 'basket',
+              stackBy: 'fruit',
+            }
+          : {
+              groupBy: undefined,
+              stackBy: undefined,
+            };
   $: transitionData = createStackData(longData, {
     xKey: 'year',
     groupBy: transitionChart.groupBy,
@@ -114,7 +114,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
       </Svg>
     </Chart>
   </div>
@@ -137,7 +137,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -167,9 +167,9 @@
         <Bars
           radius={4}
           strokeWidth={1}
-          class="fill-accent-500 group-hover:fill-gray-300 transition-colors"
+          class="fill-primary group-hover:fill-gray-300 transition-colors"
         />
-        <Highlight area bar={{ class: 'fill-accent-500', strokeWidth: 1, radius: 4 }} />
+        <Highlight area bar={{ class: 'fill-primary', strokeWidth: 1, radius: 4 }} />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
         <TooltipItem label="value" value={data.value} />
@@ -198,12 +198,12 @@
         <Bars
           radius={4}
           strokeWidth={1}
-          class="fill-accent-500 group-hover:fill-gray-300 transition-colors"
+          class="fill-primary group-hover:fill-gray-300 transition-colors"
         />
         <Highlight area>
           <svelte:fragment slot="area" let:area>
             <RectClipPath x={area.x} y={area.y} width={area.width} height={area.height} spring>
-              <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+              <Bars radius={4} strokeWidth={1} class="fill-primary" />
             </RectClipPath>
           </svelte:fragment>
         </Highlight>
@@ -232,7 +232,7 @@
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
         <Rule y={0} />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Labels format="integer" />
       </Svg>
     </Chart>
@@ -279,7 +279,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Rule
           y={median(data, (d) => d.value)}
           class="stroke-2 stroke-red-400 [stroke-dasharray:4] [stroke-linecap:round] "
@@ -303,7 +303,7 @@
       padding={{ left: 16, bottom: 24 }}
     >
       <Svg>
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Axis placement="left" grid={{ class: 'stroke-white' }} rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
       </Svg>
@@ -325,7 +325,7 @@
       padding={{ left: 16, bottom: 24 }}
     >
       <Svg>
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Axis placement="left" grid={{ class: 'mix-blend-multiply' }} rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
       </Svg>
@@ -351,7 +351,7 @@
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
         <Bars y="baseline" radius={4} strokeWidth={1} class="fill-gray-200" />
-        <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-accent-500" />
+        <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -395,7 +395,7 @@
               }}
               radius={4}
               strokeWidth={1}
-              class="fill-accent-500"
+              class="fill-primary"
             />
           {/if}
         </Svg>
diff --git a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
index ae65a619f..b343887e6 100644
--- a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
@@ -51,7 +51,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-400 stroke-accent-800" links={{ class: 'stroke-accent-800' }} />
+        <Points class="fill-primary/10 stroke-primary" links={{ class: 'stroke-primary' }} />
         <Highlight area />
         <Highlight points lines axis="x" />
       </Svg>
diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
index 53d498d93..42502f240 100644
--- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
@@ -78,7 +78,7 @@
       <Svg>
         <Axis placement="left" grid rule format="metric" />
         <Axis placement="bottom" rule ticks={4} />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => data.x0 + ' - ' + (data.x1 - 1)} let:data>
@@ -113,7 +113,7 @@
       <Svg>
         <Axis placement="left" rule />
         <Axis placement="bottom" grid rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => data.x0 + ' - ' + (data.x1 - 1)} let:data>
@@ -205,7 +205,7 @@
       <Svg>
         <Axis placement="left" grid rule format="metric" />
         <Axis placement="bottom" rule ticks={4} />
-        <Bars radius={4} strokeWidth={1} tweened class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} tweened class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip header={(data) => data.x0 + ' - ' + (data.x1 - 0.01)} let:data>
@@ -251,7 +251,7 @@
           format={(d) => dateDisplay(d, { format: 'M/d/yy' })}
           labelProps={{ rotate: 315, textAnchor: 'end', verticalAnchor: 'middle', dy: 8 }}
         />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
       <Tooltip
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index 2886907e9..a34a80ec2 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -64,7 +64,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Spline class="stroke-2 stroke-accent-500" />
+        <Spline class="stroke-2 stroke-primary" />
       </Svg>
     </Chart>
   </div>
@@ -87,7 +87,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Spline class="stroke-2 stroke-accent-500" />
+        <Spline class="stroke-2 stroke-primary" />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -113,7 +113,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Spline class="stroke-2 stroke-accent-500" />
+        <Spline class="stroke-2 stroke-primary" />
         <Labels format="integer" />
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
index e4e9ee73f..dc4d741ac 100644
--- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
@@ -58,7 +58,7 @@
               cx={point.x}
               cy={point.y}
               r={rScale(point.data.value)}
-              class="fill-accent-400 stroke-accent-600"
+              class="fill-primary/10 stroke-primary"
             />
           {/each}
         </Points>
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
index 3bad4ea3c..3899b5a6e 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
@@ -81,7 +81,7 @@
             {@const nodeWidth = node.x1 - node.x0}
             {@const nodeHeight = node.y1 - node.y0}
             <Group x={node.x0} y={node.y0}>
-              <Rect width={nodeWidth} height={nodeHeight} class="fill-accent-500" />
+              <Rect width={nodeWidth} height={nodeHeight} class="fill-primary" />
               <Text
                 value={node.id}
                 x={node.height === 0 ? -4 : nodeWidth + 4}
@@ -123,7 +123,7 @@
               <Rect
                 width={nodeWidth}
                 height={nodeHeight}
-                class="fill-accent-500"
+                class="fill-primary"
                 on:mousemove={(e) => tooltip.show(e, { node })}
                 on:mouseleave={tooltip.hide}
               />
@@ -209,7 +209,7 @@
               <Rect
                 width={nodeWidth}
                 height={nodeHeight}
-                class="fill-accent-500 hover:fill-accent-400 hover:cursor-pointer"
+                class="fill-primary hover:fill-primary/90 hover:cursor-pointer"
                 tweened
               />
               <Text
diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
index 5d4ec15c4..3355c1532 100644
--- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
@@ -35,7 +35,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Points class="fill-accent-400 stroke-accent-800" />
+        <Points class="fill-primary/10 stroke-primary" />
       </Svg>
     </Chart>
   </div>
@@ -58,7 +58,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Points class="fill-accent-400 stroke-accent-800" />
+        <Points class="fill-primary/10 stroke-primary" />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -84,7 +84,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Points class="fill-accent-400 stroke-accent-800" />
+        <Points class="fill-primary/10 stroke-primary" />
         <Labels format="integer" verticalAnchor="bottom" />
       </Svg>
     </Chart>
@@ -107,7 +107,11 @@
       r="value"
       rScale={scaleThreshold()}
       rDomain={[50, 90]}
-      rRange={['var(--color-red-500)', 'var(--color-yellow-500)', 'var(--color-green-500)']}
+      rRange={[
+        'oklch(var(--color-error))',
+        'oklch(var(--color-warning))',
+        'oklch(var(--color-success))',
+      ]}
       padding={{ left: 16, bottom: 24 }}
     >
       <Svg>
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
index 5571afd23..f89ef2349 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
@@ -23,7 +23,7 @@
     <div class="w-[125px] h-[18px]">
       <Chart {data} x="date" xScale={scaleTime()} y="value">
         <Svg>
-          <Spline class="stroke-1 stroke-accent-500" />
+          <Spline class="stroke-1 stroke-primary" />
         </Svg>
       </Chart>
     </div>
@@ -39,7 +39,7 @@
       <span class="w-[125px] h-[18px] inline-block">
         <Chart {data} x="date" xScale={scaleTime()} y="value">
           <Svg>
-            <Spline class="stroke-1 stroke-accent-500" />
+            <Spline class="stroke-1 stroke-primary" />
           </Svg>
         </Chart>
       </span> Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis
@@ -53,7 +53,7 @@
   <div class="w-[125px] h-[20px] inline-block">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, null]}>
       <Svg>
-        <Spline class="stroke-1 stroke-accent-500" />
+        <Spline class="stroke-1 stroke-primary" />
       </Svg>
     </Chart>
   </div>
@@ -64,7 +64,7 @@
   <div class="w-[125px] h-[25px]">
     <Chart {data} x="date" xScale={scaleTime()} y="value" tooltip>
       <Svg>
-        <Spline class="stroke-1 stroke-accent-500" />
+        <Spline class="stroke-1 stroke-primary" />
         <Highlight points={{ r: 3, class: 'stroke-none' }} />
       </Svg>
       <Tooltip
@@ -84,7 +84,7 @@
   <div class="w-[125px] h-[25px]">
     <Chart {data} x="date" xScale={scaleTime()} y="value" tooltip let:containerWidth>
       <Svg>
-        <Spline class="stroke-1 stroke-accent-500" />
+        <Spline class="stroke-1 stroke-primary" />
         <Highlight points={{ r: 3, class: 'stroke-none' }} />
       </Svg>
 
@@ -116,7 +116,7 @@
       <span class="w-[125px] h-[18px] inline-block">
         <Chart {data} x="date" xScale={scaleTime()} y="value" tooltip let:containerHeight>
           <Svg>
-            <Spline class="stroke-1 stroke-accent-500" />
+            <Spline class="stroke-1 stroke-primary" />
             <Highlight points lines />
           </Svg>
           <Tooltip
diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
index c29088a10..3ffa224c1 100644
--- a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
@@ -96,7 +96,7 @@
         <Zoom bind:this={zoom} tweened={{ duration: 800, easing: cubicOut }}>
           <Tree let:nodes let:links {orientation} nodeSize={layout === 'node' ? nodeSize : null}>
             {#each links as link (getNodeKey(link.source) + '_' + getNodeKey(link.target))}
-              <Link data={link} {orientation} {curve} tweened class="stroke-gray-300" />
+              <Link data={link} {orientation} {curve} tweened class="stroke-surface-content/30" />
             {/each}
             {#each nodes as node (getNodeKey(node))}
               <Group
@@ -113,10 +113,12 @@
                 }}
                 class={node.data.children ? 'cursor-pointer' : ''}
               >
+                <!-- Solid background to hide link -->
+                <!-- <Rect width={nodeWidth} height={nodeHeight} class="fill-surface-100" rx={10} /> -->
                 <Rect
                   width={nodeWidth}
                   height={nodeHeight}
-                  class="fill-accent-50 stroke-accent-400"
+                  class="fill-primary/5 stroke-primary"
                   stroke-width={node.data.children ? 2 : 1}
                   rx={10}
                 />
@@ -127,7 +129,7 @@
                   dy={-2}
                   textAnchor="middle"
                   verticalAnchor="middle"
-                  class="text-xs fill-accent-500"
+                  class="text-xs fill-primary"
                 />
               </Group>
             {/each}
diff --git a/packages/layerchart/tailwind.config.cjs b/packages/layerchart/tailwind.config.cjs
index b0cfbb368..07e166b27 100644
--- a/packages/layerchart/tailwind.config.cjs
+++ b/packages/layerchart/tailwind.config.cjs
@@ -4,13 +4,6 @@ const plugin = require('tailwindcss/plugin');
 module.exports = {
   content: ['./src/**/*.{html,svelte,md}', './node_modules/svelte-ux/**/*.{svelte,js,md}'],
   theme: {
-    extend: {
-      colors: {
-        accent: colors.indigo,
-      },
-    },
-  },
-  variants: {
     extend: {},
   },
   plugins: [