diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index a85dc33..93bd9b8 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -1,3 +1,83 @@
-<section>
-	<h2>Playground</h2>
-</section>
+<script lang="ts">
+	import { typography } from '../../styles/tailwind/typography';
+
+	const typographyVariants: Array<
+		| 'heading1'
+		| 'heading2'
+		| 'heading3'
+		| 'heading4'
+		| 'body-large'
+		| 'body-medium'
+		| 'body-normal'
+		| 'body-small'
+		| 'body-very-small'
+	> = [
+		'heading1',
+		'heading2',
+		'heading3',
+		'heading4',
+		'body-large',
+		'body-medium',
+		'body-normal',
+		'body-small',
+		'body-very-small'
+	];
+
+	const grayClasses = ['bg-sucu-gray-dark', 'bg-sucu-gray', 'bg-sucu-gray-light'];
+
+	const pinkClasses = [
+		'bg-sucu-pink-01',
+		'bg-sucu-pink-02',
+		'bg-sucu-pink-03',
+		'bg-sucu-pink-04',
+		'bg-sucu-pink-05'
+	];
+</script>
+
+<div>
+	<!-- Typography Section -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Typography Variants</h2>
+		{#each typographyVariants as variant}
+			<div class={typography({ variant })}>
+				{variant}
+			</div>
+		{/each}
+	</section>
+
+	<!-- Color Scheme Section - Gray -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Gray Color Scheme</h2>
+		{#each grayClasses as grayClass}
+			<div class="flex items-center space-x-2">
+				<div class={`color-box ${grayClass}`}></div>
+				<span>{grayClass}</span>
+			</div>
+		{/each}
+	</section>
+
+	<!-- Color Scheme Section - Pink -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Pink Color Scheme</h2>
+		{#each pinkClasses as pinkClass}
+			<div class="flex items-center space-x-2">
+				<div class={`color-box ${pinkClass}`}></div>
+				<span>{pinkClass}</span>
+			</div>
+		{/each}
+	</section>
+</div>
+
+<style>
+	.section {
+		padding: 2rem;
+		border-bottom: 1px solid #ccc;
+	}
+	.color-box {
+		width: 100px;
+		height: 100px;
+		display: inline-block;
+		margin-right: 10px;
+		margin-bottom: 10px;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e511e0..04af337 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import '../app.css';
+	import '../styles/app.css';
 </script>
 
 <slot />
diff --git a/src/app.css b/src/styles/app.css
similarity index 100%
rename from src/app.css
rename to src/styles/app.css
diff --git a/src/styles/tailwind/color.ts b/src/styles/tailwind/color.ts
new file mode 100644
index 0000000..c2a4c7d
--- /dev/null
+++ b/src/styles/tailwind/color.ts
@@ -0,0 +1,16 @@
+export const colorScheme = {
+	sucu: {
+		gray: {
+			dark: '#3F3A3A',
+			DEFAULT: '#9D9D9D',
+			light: '#D5D5D5'
+		},
+		pink: {
+			'01': '#FF82A9',
+			'02': '#FFA1B3',
+			'03': '#FFC0BE',
+			'04': '#FFD5D3',
+			'05': '#FFEBE7'
+		}
+	}
+};
diff --git a/src/styles/tailwind/typography.ts b/src/styles/tailwind/typography.ts
new file mode 100644
index 0000000..2721828
--- /dev/null
+++ b/src/styles/tailwind/typography.ts
@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+
+export const typography = tv({
+	variants: {
+		variant: {
+			heading1: 'font-bold text-[64px]',
+			heading2: 'font-bold text-5xl',
+			heading3: 'font-bold text-3xl',
+			heading4: 'font-bold text-2xl',
+			'body-large': 'text-2xl',
+			'body-medium': 'text-xl',
+			'body-normal': 'text-base',
+			'body-small': 'text-xs',
+			'body-very-small': 'text-[8px]'
+		}
+	},
+	defaultVariants: {
+		variant: 'body-large'
+	}
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index bfe0bc2..d1d9a7c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,12 @@
 /** @type {import('tailwindcss').Config} */
+import { colorScheme } from './src/styles/tailwind/color';
+
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			colors: colorScheme
+		}
 	},
 	plugins: []
 };