diff --git a/packages/ui/src/components/rail.module.css b/packages/ui/src/components/rail.module.css
new file mode 100644
index 00000000..61fef272
--- /dev/null
+++ b/packages/ui/src/components/rail.module.css
@@ -0,0 +1,7 @@
+.stack {
+  background: var(--color-neutral-canvas-minimal-bg);
+  border-right: 1px solid var(--color-neutral-stroke-default);
+  color: var(--color-neutral-canvas-minimal-fg-default);
+  height: 100%;
+  padding: var(--component-spacing-xl) var(--component-spacing-md) var(--component-spacing-md);
+  }
\ No newline at end of file
diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx
index 61183db0..810e2480 100644
--- a/packages/ui/src/components/rail.tsx
+++ b/packages/ui/src/components/rail.tsx
@@ -17,6 +17,8 @@ import Settings from '@tokens-studio/icons/Settings.js';
 import ShoppingBag from '@tokens-studio/icons/ShoppingBag.js';
 import SunLight from '@tokens-studio/icons/SunLight.js';
 import TokensStudio from '@/assets/svgs/tokensstudio-logo.svg';
+import clsx from 'clsx';
+import styles from './rail.module.css';
 
 interface RailItem {
 	icon: React.ReactNode;
@@ -101,14 +103,10 @@ export const Rail = () => {
 		<Stack
 			justify='between'
 			direction='column'
-			style={{
-				background: 'var(--color-neutral-canvas-minimal-bg)',
-				borderRight: '1px solid var(--color-neutral-stroke-default)',
-				color: 'var(--color-neutral-canvas-minimal-fg-default)',
-				height: '100%',
-				padding:
-					'var(--component-spacing-xl) var(--component-spacing-md) var(--component-spacing-md)'
-			}}
+			className={clsx(styles.stack, 'ts-canvas')}
+			data-appearance='neutral'
+			data-emphasis='minimal'
+
 		>
 			<Stack gap={3} direction='column' align='center'>
 				<Tooltip label={'Tokens Studio'}>