theme/
├── root.css semantic scales
├── fonts.css Google Fonts + stacks
├── base.css html / body / links
├── typography.css fluid type
├── markdown.css quotes / tables / code
├── layout.css breakout grid
├── tw-bridge.css @theme bridge
└── index.css imports all
/* root.css — live */
:root {
/* Base · anchor slate-50 */
--base: #f8fafc;
--base-50: #f8fafc;
--base-100: #e9e9e9;
--base-200: #d6d6d6;
--base-300: #bcbcbc;
--base-400: #a0a0a0;
--base-500: #868686;
--base-600: #707070;
--base-700: #5c5c5c;
--base-800: #4a4a4a;
--base-900: #3c3c3c;
--base-950: #2a2a2a;
/* Alt · anchor slate-100 */
--alt: #f1f5f9;
--alt-50: #f7f7f7;
--alt-100: #f1f5f9;
--alt-200: #d6d6d6;
--alt-300: #bcbcbc;
--alt-400: #a0a0a0;
--alt-500: #868686;
--alt-600: #707070;
--alt-700: #5c5c5c;
--alt-800: #4a4a4a;
--alt-900: #3c3c3c;
--alt-950: #2a2a2a;
/* Prose · anchor slate-900 */
--prose: #0f172a;
--prose-50: #f5f7fa;
--prose-100: #e8e9ed;
--prose-200: #d4d6d9;
--prose-300: #bbbcbf;
--prose-400: #9ea0a3;
--prose-500: #83868c;
--prose-600: #6c707a;
--prose-700: #565c69;
--prose-800: #434a5a;
--prose-900: #0f172a;
--prose-950: #242a37;
/* Muted · anchor slate-500 */
--muted: #64748b;
--muted-50: #f4f7fc;
--muted-100: #e6eaef;
--muted-200: #d0d6e0;
--muted-300: #b2bdcd;
--muted-400: #93a1b5;
--muted-500: #64748b;
--muted-600: #60718b;
--muted-700: #4f5d72;
--muted-800: #3f4b5d;
--muted-900: #343c49;
--muted-950: #252a32;
/* Accent · anchor blue-600 */
--accent: #2563eb;
--accent-50: #eef7ff;
--accent-100: #deeaff;
--accent-200: #c0d7ff;
--accent-300: #94bcff;
--accent-400: #6a9dff;
--accent-500: #427efb;
--accent-600: #2563eb;
--accent-700: #184fc9;
--accent-800: #1240a4;
--accent-900: #17377a;
--accent-950: #15284f;
/* Pop · anchor fuchsia-500 */
--pop: #d946ef;
--pop-50: #ffebff;
--pop-100: #ffdcff;
--pop-200: #fbbbff;
--pop-300: #f789ff;
--pop-400: #e557fa;
--pop-500: #d946ef;
--pop-600: #a535b5;
--pop-700: #863093;
--pop-800: #6b2b74;
--pop-900: #512a57;
--pop-950: #352238;
/* Inverse · anchor slate-50 */
--inverse: #f8fafc;
--inverse-50: #f8fafc;
--inverse-100: #e9e9e9;
--inverse-200: #d6d6d6;
--inverse-300: #bcbcbc;
--inverse-400: #a0a0a0;
--inverse-500: #868686;
--inverse-600: #707070;
--inverse-700: #5c5c5c;
--inverse-800: #4a4a4a;
--inverse-900: #3c3c3c;
--inverse-950: #2a2a2a;
}
/* typography.css — fluid, no breakpoints */
.markdown h1 {
font-family: var(--font-h1);
font-size: clamp(2.125rem, 1.3913rem + 3.2609vi, 4rem);
} /* tw-bridge.css — utilities read your system */
@import "tailwindcss";
@theme inline {
--color-base-50: var(--base-50);
--color-prose-800: var(--prose-800);
--color-twist-light: var(--pop-twist-light);
--font-primary: var(--font-primary);
} <!-- use it -->
<div class="bg-base-50 text-prose-800 font-primary">
Ships with your system
</div>
