Skip to content

Instantly share code, notes, and snippets.

@Wolfr

Wolfr/gist:f41dd59361c02f89c55911df42a6acdd

Created November 29, 2025 23:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Wolfr/f41dd59361c02f89c55911df42a6acdd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Wolfr/f41dd59361c02f89c55911df42a6acdd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Brand Theme Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--radius: 0.5rem;
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.041 264.695);
--card: oklch(1 0 0);
--card-foreground: oklch(0.129 0.041 264.695);
--popover: oklch(0 0 0);
--popover-foreground: oklch(1 0 0);
--primary: oklch(0.208 0.04 265.755);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896);
--secondary-foreground: oklch(0.208 0.04 265.755);
--muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.041 257.417);
--accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.04 265.755);
--destructive: oklch(0.577 0.215 27.325);
--border: oklch(0.929 0.013 255.508);
--input: oklch(1 0 0);
--chart-1: oklch(0.549 0.124 244.603);
--chart-2: oklch(0.731 0.185 51.884);
--chart-3: oklch(0.619 0.184 142.95);
--chart-4: oklch(0.567 0.209 26.918);
--chart-5: oklch(0.596 0.134 306.904);
--sidebar: oklch(0.968 0.007 247.896);
--sidebar-foreground: oklch(0.372 0.039 257.287);
--sidebar-primary: oklch(0.208 0.04 265.755);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.929 0.013 255.508);
--sidebar-accent-foreground: oklch(0.372 0.039 257.287);
--sidebar-border: oklch(0.929 0.013 255.508);
--sidebar-ring: oklch(0.869 0.02 252.894);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: Menlo, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: Inter, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--spacing: 0.25rem;
--shadow-2xs: 0px 1px 0px 0px rgb(0 0 0 / 0.05);
--shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.05);
--shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.10), 0px 1px 2px -1px rgb(0 0 0 / 0.10);
--shadow-md: 0px 4px 6px -1px rgb(0 0 0 / 0.10), 0px 2px 4px -2px rgb(0 0 0 / 0.10);
--shadow-lg: 0px 10px 15px -3px rgb(0 0 0 / 0.10), 0px 4px 6px -4px rgb(0 0 0 / 0.10);
--shadow-xl: 0px 20px 25px -5px rgb(0 0 0 / 0.10), 0px 8px -6px 10px rgb(0 0 0 / 0.10);
--shadow-2xl: 0px 25px 50px 12px rgb(0 0 0 / 0.25);
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
background: 'var(--background)',
foreground: 'var(--foreground)',
card: { DEFAULT: 'var(--card)', foreground: 'var(--card-foreground)' },
popover: { DEFAULT: 'var(--popover)', foreground: 'var(--popover-foreground)' },
primary: { DEFAULT: 'var(--primary)', foreground: 'var(--primary-foreground)' },
secondary: { DEFAULT: 'var(--secondary)', foreground: 'var(--secondary-foreground)' },
muted: { DEFAULT: 'var(--muted)', foreground: 'var(--muted-foreground)' },
accent: { DEFAULT: 'var(--accent)', foreground: 'var(--accent-foreground)' },
destructive: { DEFAULT: 'var(--destructive)', foreground: 'var(--destructive-foreground)' },
border: 'var(--border)',
input: 'var(--input)',
ring: 'var(--ring)',
chart: {
1: 'var(--chart-1)',
2: 'var(--chart-2)',
3: 'var(--chart-3)',
4: 'var(--chart-4)',
5: 'var(--chart-5)',
},
sidebar: {
DEFAULT: 'var(--sidebar)',
foreground: 'var(--sidebar-foreground)',
primary: 'var(--sidebar-primary)',
'primary-foreground': 'var(--sidebar-primary-foreground)',
accent: 'var(--sidebar-accent)',
'accent-foreground': 'var(--sidebar-accent-foreground)',
border: 'var(--sidebar-border)',
ring: 'var(--sidebar-ring)',
},
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
mono: ['Menlo', 'ui-monospace', 'monospace'],
},
},
},
}
</script>
</head>
<body class="bg-background text-foreground min-h-screen">
<div class="max-w-5xl mx-auto p-8 space-y-10">
<!-- Header -->
<header class="text-center space-y-2">
<h1 class="text-4xl font-bold font-sans">Your Brand Theme</h1>
<p class="text-muted-foreground">Visual test of your Figma → Tailwind CSS export</p>
</header>
<!-- Color Palette -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Color Palette</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
<!-- Primary -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-primary flex items-end p-2">
<span class="text-primary-foreground text-xs font-medium">Primary</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--primary</p>
</div>
<!-- Secondary -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-secondary border border-border flex items-end p-2">
<span class="text-secondary-foreground text-xs font-medium">Secondary</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--secondary</p>
</div>
<!-- Muted -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-muted flex items-end p-2">
<span class="text-muted-foreground text-xs font-medium">Muted</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--muted</p>
</div>
<!-- Accent -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-accent border border-border flex items-end p-2">
<span class="text-accent-foreground text-xs font-medium">Accent</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--accent</p>
</div>
<!-- Destructive -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-destructive flex items-end p-2">
<span class="text-destructive-foreground text-xs font-medium">Destructive</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--destructive</p>
</div>
<!-- Card -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-card border border-border flex items-end p-2">
<span class="text-card-foreground text-xs font-medium">Card</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--card</p>
</div>
<!-- Popover -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-popover border border-border flex items-end p-2">
<span class="text-popover-foreground text-xs font-medium">Popover</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--popover</p>
</div>
<!-- Background -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-background border border-border flex items-end p-2">
<span class="text-foreground text-xs font-medium">Background</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--background</p>
</div>
<!-- Border -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-border flex items-end p-2">
<span class="text-foreground text-xs font-medium">Border</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--border</p>
</div>
<!-- Input -->
<div class="space-y-2">
<div class="h-20 rounded-lg bg-input border border-border flex items-end p-2">
<span class="text-foreground text-xs font-medium">Input</span>
</div>
<p class="text-xs text-muted-foreground font-mono">--input</p>
</div>
</div>
<!-- Chart Colors -->
<h3 class="text-lg font-medium mt-8 mb-3">Chart Colors</h3>
<div class="flex gap-3">
<div class="flex-1 h-16 rounded-lg bg-chart-1 flex items-center justify-center">
<span class="text-white text-xs font-medium drop-shadow">1</span>
</div>
<div class="flex-1 h-16 rounded-lg bg-chart-2 flex items-center justify-center">
<span class="text-white text-xs font-medium drop-shadow">2</span>
</div>
<div class="flex-1 h-16 rounded-lg bg-chart-3 flex items-center justify-center">
<span class="text-white text-xs font-medium drop-shadow">3</span>
</div>
<div class="flex-1 h-16 rounded-lg bg-chart-4 flex items-center justify-center">
<span class="text-white text-xs font-medium drop-shadow">4</span>
</div>
<div class="flex-1 h-16 rounded-lg bg-chart-5 flex items-center justify-center">
<span class="text-white text-xs font-medium drop-shadow">5</span>
</div>
</div>
</section>
<!-- Sidebar Demo -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Sidebar Colors</h2>
<div class="flex gap-4">
<div class="w-64 bg-sidebar rounded-lg border border-sidebar-border p-4 space-y-4">
<div class="text-sidebar-foreground font-medium">Sidebar Navigation</div>
<nav class="space-y-1">
<a href="#" class="block px-3 py-2 rounded-md bg-sidebar-primary text-sidebar-primary-foreground text-sm">
Dashboard
</a>
<a href="#" class="block px-3 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sidebar-foreground text-sm">
Projects
</a>
<a href="#" class="block px-3 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sidebar-foreground text-sm">
Settings
</a>
</nav>
</div>
<div class="flex-1 bg-card rounded-lg border border-border p-4">
<p class="text-muted-foreground text-sm">Main content area</p>
</div>
</div>
</section>
<!-- Buttons -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Buttons</h2>
<div class="flex flex-wrap gap-3">
<button class="px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:opacity-90 transition">
Primary
</button>
<button class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg font-medium hover:opacity-90 transition">
Secondary
</button>
<button class="px-4 py-2 bg-destructive text-destructive-foreground rounded-lg font-medium hover:opacity-90 transition">
Destructive
</button>
<button class="px-4 py-2 bg-muted text-muted-foreground rounded-lg font-medium hover:opacity-90 transition">
Muted
</button>
<button class="px-4 py-2 border border-border bg-background text-foreground rounded-lg font-medium hover:bg-accent hover:text-accent-foreground transition">
Outline
</button>
<button class="px-4 py-2 text-primary hover:underline font-medium">
Link
</button>
</div>
</section>
<!-- Cards -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Cards</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-card rounded-lg border border-border p-5 space-y-3">
<h3 class="font-semibold text-card-foreground">Basic Card</h3>
<p class="text-sm text-muted-foreground">A simple card with border styling.</p>
<button class="text-sm text-primary hover:underline">Learn more →</button>
</div>
<div class="bg-card rounded-lg border border-border p-5 space-y-3 shadow-md">
<h3 class="font-semibold text-card-foreground">Card with Shadow</h3>
<p class="text-sm text-muted-foreground">This card has shadow-md applied.</p>
<button class="text-sm text-primary hover:underline">Learn more →</button>
</div>
<div class="bg-primary rounded-lg p-5 space-y-3">
<h3 class="font-semibold text-primary-foreground">Primary Card</h3>
<p class="text-sm text-primary-foreground/80">A card with primary background.</p>
<button class="text-sm text-primary-foreground hover:underline">Learn more →</button>
</div>
</div>
</section>
<!-- Form Elements -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Form Elements</h2>
<div class="max-w-md space-y-4">
<div>
<label class="block text-sm font-medium mb-1.5">Email</label>
<input type="email" placeholder="[email protected]"
class="w-full px-3 py-2 bg-input border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition">
</div>
<div>
<label class="block text-sm font-medium mb-1.5">Message</label>
<textarea placeholder="Type your message..." rows="3"
class="w-full px-3 py-2 bg-input border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition resize-none"></textarea>
</div>
<div class="flex gap-3">
<button class="px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium">
Submit
</button>
<button class="px-4 py-2 border border-border rounded-lg font-medium hover:bg-muted transition">
Cancel
</button>
</div>
</div>
</section>
<!-- Typography -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Typography</h2>
<div class="space-y-4">
<div>
<span class="text-xs text-muted-foreground font-mono">font-sans (Inter)</span>
<p class="text-2xl font-sans">The quick brown fox jumps over the lazy dog</p>
</div>
<div>
<span class="text-xs text-muted-foreground font-mono">font-mono (Menlo)</span>
<p class="text-lg font-mono">const greeting = "Hello, World!";</p>
</div>
</div>
</section>
<!-- Border Radius -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Border Radius</h2>
<div class="flex flex-wrap gap-4">
<div class="w-16 h-16 bg-primary rounded-sm flex items-center justify-center text-primary-foreground text-xs font-medium">sm</div>
<div class="w-16 h-16 bg-primary rounded-md flex items-center justify-center text-primary-foreground text-xs font-medium">md</div>
<div class="w-16 h-16 bg-primary rounded-lg flex items-center justify-center text-primary-foreground text-xs font-medium">lg</div>
<div class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center text-primary-foreground text-xs font-medium">xl</div>
<div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-primary-foreground text-xs font-medium">2xl</div>
<div class="w-16 h-16 bg-primary rounded-3xl flex items-center justify-center text-primary-foreground text-xs font-medium">3xl</div>
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-primary-foreground text-xs font-medium">full</div>
</div>
</section>
<!-- Shadows -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Shadows</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-6 py-6">
<div class="bg-card p-4 rounded-lg shadow-sm border border-border/50">
<span class="text-xs text-muted-foreground">sm</span>
</div>
<div class="bg-card p-4 rounded-lg shadow border border-border/50">
<span class="text-xs text-muted-foreground">default</span>
</div>
<div class="bg-card p-4 rounded-lg shadow-md border border-border/50">
<span class="text-xs text-muted-foreground">md</span>
</div>
<div class="bg-card p-4 rounded-lg shadow-lg border border-border/50">
<span class="text-xs text-muted-foreground">lg</span>
</div>
<div class="bg-card p-4 rounded-lg shadow-xl border border-border/50">
<span class="text-xs text-muted-foreground">xl</span>
</div>
<div class="bg-card p-4 rounded-lg shadow-2xl border border-border/50">
<span class="text-xs text-muted-foreground">2xl</span>
</div>
<div class="bg-card p-4 rounded-lg shadow-none border border-border">
<span class="text-xs text-muted-foreground">none</span>
</div>
</div>
</section>
<!-- Spacing -->
<section class="space-y-4">
<h2 class="text-2xl font-semibold border-b border-border pb-2">Spacing Scale</h2>
<p class="text-sm text-muted-foreground">Based on --spacing: 0.25rem (4px base unit)</p>
<div class="flex items-end gap-1 h-40">
<div class="bg-primary w-8 h-1 rounded" title="1 = 4px"></div>
<div class="bg-primary w-8 h-2 rounded" title="2 = 8px"></div>
<div class="bg-primary w-8 h-3 rounded" title="3 = 12px"></div>
<div class="bg-primary w-8 h-4 rounded" title="4 = 16px"></div>
<div class="bg-primary w-8 h-5 rounded" title="5 = 20px"></div>
<div class="bg-primary w-8 h-6 rounded" title="6 = 24px"></div>
<div class="bg-primary w-8 h-8 rounded" title="8 = 32px"></div>
<div class="bg-primary w-8 h-10 rounded" title="10 = 40px"></div>
<div class="bg-primary w-8 h-12 rounded" title="12 = 48px"></div>
<div class="bg-primary w-8 h-16 rounded" title="16 = 64px"></div>
<div class="bg-primary w-8 h-20 rounded" title="20 = 80px"></div>
<div class="bg-primary w-8 h-24 rounded" title="24 = 96px"></div>
</div>
<div class="flex gap-1 text-xs text-muted-foreground font-mono">
<span class="w-8 text-center">1</span>
<span class="w-8 text-center">2</span>
<span class="w-8 text-center">3</span>
<span class="w-8 text-center">4</span>
<span class="w-8 text-center">5</span>
<span class="w-8 text-center">6</span>
<span class="w-8 text-center">8</span>
<span class="w-8 text-center">10</span>
<span class="w-8 text-center">12</span>
<span class="w-8 text-center">16</span>
<span class="w-8 text-center">20</span>
<span class="w-8 text-center">24</span>
</div>
</section>
<!-- Footer -->
<footer class="text-center py-8 border-t border-border">
<p class="text-sm text-muted-foreground">
Theme exported from Figma using Variables to Tailwind Plugin
</p>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment