@muibook/components 8.0.2 → 9.1.0

package/dist/esm/css/mui-brand.css

@@ -0,0 +1,179 @@
+
+/* ================================================================================================== */
+/*  Don't edit directly • Generated on Thu, 08 Jan 2026 02:39:52 GMT • muibook.com                                        */
+/* ================================================================================================== */
+
+/* ================================================================================================== */
+/*  Typography on the Web • Orchestrating Vertical Rhythm                                             */
+/* ================================================================================================== */
+/*  An introduction to baseline grids and vertical rhythm in web typography.                          */
+/*  The video below explores the history of type through letterpress and how these                    */
+/*  traditional principles can guide modern decisions.                                                */
+/* ================================================================================================== */
+/*  Watch: https://youtu.be/FFGSy0EfA9Y by Michael Trilford                                           */
+/* ================================================================================================== */
+
+/* ================================================================================================== */
+/*                                         Type Scale                                                 */
+/* -------------------------------------------------------------------------------------------------- */
+/*   6px |  7px |  8px |  9px | 10px |  11px |  12px |  14px |  16px |  18px |  21px |  24px |  36px  */
+/*  48px | 60px | 72px | 84px | 96px | 108px | 120px | 132px | 144px | 156px | 168px | 180px | 192px  */
+/* ================================================================================================== */
+
+/* ================================================================================================= */
+/*                                           Leading Scale                                           */
+/* ------------------------------------------------------------------------------------------------- */
+/* ======================================= 18 / 11  =  1.636 ======================================= */
+/* ======================================= 18 / 12  =  1.500 ======================================= */
+/* ======================================= 21 / 14  =  1.500 ======================================= */
+/* ======================================= 24 / 16  =  1.500 ======================================= */
+/* ======================================= 24 / 18  =  1.333 ======================================= */
+/* ======================================= 24 / 21  =  1.143 ======================================= */
+/* ======================================= 36 / 24  =  1.500 ======================================= */
+/* ======================================= 48 / 36  =  1.333 ======================================= */
+/* ======================================= 60 / 48  =  1.250 ======================================= */
+/* ======================================= 72 / 60  =  1.200 ======================================= */
+/* ======================================= 84 / 72  =  1.167 ======================================= */
+/* ======================================= 96 / 84  =  1.143 ======================================= */
+/* ====================================== 108 / 96  =  1.125 ======================================= */
+/* ================================================================================================= */
+
+:where(html) {
+  --font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-size-15: 1.1rem;
+  --font-size-25: 1.2rem;
+  --font-size-50: 1.4rem;
+  --font-size-100: 1.6rem;
+  --font-size-200: 1.8rem;
+  --font-size-300: 2.1rem;
+  --font-size-400: 2.4rem;
+  --font-size-500: 3.6rem;
+  --font-size-600: 4.8rem;
+  --font-size-700: 6rem;
+  --font-size-800: 7.2rem;
+  --font-size-900: 8.4rem;
+  --font-size-1000: 9.6rem;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --line-height-15: 1.63636364;
+  --line-height-25: 1.5;
+  --line-height-50: 1.5;
+  --line-height-100: 1.5;
+  --line-height-200: 1.33333333;
+  --line-height-300: 1.14285714;
+  --line-height-400: 1.5;
+  --line-height-500: 1.33333333;
+  --line-height-600: 1.25;
+  --line-height-700: 1.2;
+  --line-height-800: 1.16666667;
+  --line-height-900: 1.14285714;
+  --line-height-1000: 1.125;
+  --black: black;
+  --black-opacity-0: oklch(0% 0 0 / 0);
+  --black-opacity-10: oklch(0% 0 0 / 0.1);
+  --black-opacity-20: oklch(0% 0 0 / 0.2);
+  --black-opacity-30: oklch(0% 0 0 / 0.3);
+  --black-opacity-40: oklch(0% 0 0 / 0.4);
+  --black-opacity-50: oklch(0% 0 0 / 0.5);
+  --black-opacity-60: oklch(0% 0 0 / 0.6);
+  --black-opacity-70: oklch(0% 0 0 / 0.7);
+  --black-opacity-80: oklch(0% 0 0 / 0.8);
+  --black-opacity-90: oklch(0% 0 0 / 0.9);
+  --black-opacity-100: oklch(0% 0 0);
+  --white: #ffffff;
+  --white-opacity-0: oklch(100% 0.00011 271.152 / 0);
+  --white-opacity-10: oklch(100% 0.00011 271.152 / 0.1);
+  --white-opacity-20: oklch(100% 0.00011 271.152 / 0.2);
+  --white-opacity-30: oklch(100% 0.00011 271.152 / 0.3);
+  --white-opacity-40: oklch(100% 0.00011 271.152 / 0.4);
+  --white-opacity-50: oklch(100% 0.00011 271.152 / 0.5);
+  --white-opacity-60: oklch(100% 0.00011 271.152 / 0.6);
+  --white-opacity-70: oklch(100% 0.00011 271.152 / 0.7);
+  --white-opacity-80: oklch(100% 0.00011 271.152 / 0.8);
+  --white-opacity-90: oklch(100% 0.00011 271.152 / 0.9);
+  --white-opacity-100: oklch(100% 0.00011 271.152);
+  --grey-100: oklch(97.015% 0.00011 271.152);
+  --grey-200: oklch(92.191% 0.0001 271.152);
+  --grey-300: oklch(84.522% 0.0001 271.152);
+  --grey-400: oklch(73.802% 0.00008 271.152);
+  --grey-500: oklch(62.675% 0.00007 271.152);
+  --grey-600: oklch(51.028% 0.00006 271.152);
+  --grey-700: oklch(44.953% 0.00005 271.152);
+  --grey-800: oklch(38.666% 0.00004 271.152);
+  --grey-900: oklch(32.109% 0.00004 271.152);
+  --grey-1000: oklch(25.197% 0.00003 271.152);
+  --grey-1100: oklch(17.764% 0.00002 271.152);
+  --grey-1200: oklch(11.492% 0.00001 271.152);
+  --red-100: oklch(98% 0.03 25.0);
+  --red-200: oklch(95% 0.10 25.0);
+  --red-300: oklch(82% 0.14 25.0);
+  --red-400: oklch(72% 0.17 25.0);
+  --red-500: oklch(62% 0.19 25.0);
+  --red-600: oklch(52% 0.19 25.0);
+  --red-700: oklch(46% 0.19 25.0);
+  --red-800: oklch(40% 0.19 25.0);
+  --red-900: oklch(34% 0.19 25.0);
+  --red-1000: oklch(28% 0.19 25.0);
+  --orange-100: oklch(98% 0.03 71);
+  --orange-200: oklch(94% 0.07 71);
+  --orange-300: oklch(90% 0.11 71);
+  --orange-400: oklch(85% 0.14 71);
+  --orange-500: oklch(78% 0.16 71);
+  --orange-600: oklch(70% 0.16 71);
+  --orange-700: oklch(64% 0.16 71);
+  --orange-800: oklch(57% 0.16 71);
+  --orange-900: oklch(51% 0.16 71);
+  --orange-1000: oklch(45% 0.16 71);
+  --green-100: oklch(96.2% 0.034 145);
+  --green-200: oklch(92% 0.075 145);
+  --green-300: oklch(88% 0.120 145);
+  --green-400: oklch(84.5% 0.160 145);
+  --green-500: oklch(70% 0.220 145);
+  --green-600: oklch(63% 0.200 145);
+  --green-700: oklch(57% 0.180 145);
+  --green-800: oklch(52% 0.160 145);
+  --green-900: oklch(46% 0.140 145);
+  --green-1000: oklch(42% 0.120 145);
+  --blue-100: oklch(95.6% 0.022 250);
+  --blue-200: oklch(91% 0.045 250);
+  --blue-300: oklch(82% 0.091 250);
+  --blue-400: oklch(78.8% 0.105 250);
+  --blue-500: oklch(73% 0.130 245);
+  --blue-600: oklch(67% 0.150 249);
+  --blue-700: oklch(63% 0.155 249);
+  --blue-800: oklch(57% 0.167 251);
+  --blue-900: oklch(52% 0.178 253);
+  --blue-1000: oklch(48% 0.151 253);
+  --radius-100: 4px;
+  --radius-150: 6px;
+  --radius-200: 8px;
+  --radius-300: 16px;
+  --radius-400: 24px;
+  --radius-500: 36px;
+  --radius-600: 48px;
+  --radius-000: 0;
+  --space-100: 0.6rem;
+  --space-200: 0.8rem;
+  --space-300: 1.2rem;
+  --space-400: 1.6rem;
+  --space-500: 2.4rem;
+  --space-600: 3.6rem;
+  --space-700: 4.8rem;
+  --space-800: 6rem;
+  --space-000: 0;
+  --space-025: 0.2rem;
+  --space-050: 0.4rem;
+  --stroke-size-100: 1px;
+  --stroke-size-200: 2px;
+  --stroke-size-300: 3px;
+  --stroke-size-400: 4px;
+  --stroke-size-500: 5px;
+  --stroke-solid: solid;
+  --stroke-outset: outset;
+  --speed-100: 0.1s;
+  --speed-200: 0.2s;
+  --speed-300: 0.3s;
+  --speed-400: 0.4s;
+}

package/dist/esm/css/mui-tokens.css

@@ -9,228 +9,38 @@
 /* ==================== */
 
 /* ==================================================================================================== */
-/* 1. BRAND PRIMITIVES                                                                                  */
+/* 1. BRAND PRIMITIVES  ------> ./mui-brand.css                                                         */
 /* ==================================================================================================== */
 :where(html) {
-  /* Font-family */
-  --font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-
-  /* ================================================================================================== */
-  /*  Typography on the Web • Orchestrating Vertical Rhythm                                             */
-  /* ================================================================================================== */
-  /*  An introduction to baseline grids and vertical rhythm in web typography.                          */
-  /*  The video below explores the history of type through letterpress and how these                    */
-  /*  traditional principles can guide modern decisions.                                                */
-  /* ================================================================================================== */
-  /*  Watch: https://youtu.be/FFGSy0EfA9Y by Michael Trilford                                           */
-  /* ================================================================================================== */
-
-  /* ================================================================================================== */
-  /*                                         Type Scale                                                 */
-  /* -------------------------------------------------------------------------------------------------- */
-  /*   6px |  7px |  8px |  9px | 10px |  11px |  12px |  14px |  16px |  18px |  21px |  24px |  36px  */
-  /*  48px | 60px | 72px | 84px | 96px | 108px | 120px | 132px | 144px | 156px | 168px | 180px | 192px  */
-  /* ================================================================================================== */
-
-  /* Font-size */
-  --font-size-15: 1.1rem;
-  --font-size-25: 1.2rem;
-  --font-size-50: 1.4rem;
-  --font-size-100: 1.6rem;
-  --font-size-200: 1.8rem;
-  --font-size-300: 2.1rem;
-  --font-size-400: 2.4rem;
-  --font-size-500: 3.6rem;
-  --font-size-600: 4.8rem;
-  --font-size-700: 6rem;
-  --font-size-800: 7.2rem;
-  --font-size-900: 8.4rem;
-  --font-size-1000: 9.6rem;
-
-  /* ================================================================================================= */
-  /*                                           Leading Scale                                           */
-  /* ------------------------------------------------------------------------------------------------- */
-  /* ======================================= 18 / 11  =  1.636 ======================================= */
-  /* ======================================= 18 / 12  =  1.500 ======================================= */
-  /* ======================================= 21 / 14  =  1.500 ======================================= */
-  /* ======================================= 24 / 16  =  1.500 ======================================= */
-  /* ======================================= 24 / 18  =  1.333 ======================================= */
-  /* ======================================= 24 / 21  =  1.143 ======================================= */
-  /* ======================================= 36 / 24  =  1.500 ======================================= */
-  /* ======================================= 48 / 36  =  1.333 ======================================= */
-  /* ======================================= 60 / 48  =  1.250 ======================================= */
-  /* ======================================= 72 / 60  =  1.200 ======================================= */
-  /* ======================================= 84 / 72  =  1.167 ======================================= */
-  /* ======================================= 96 / 84  =  1.143 ======================================= */
-  /* ====================================== 108 / 96  =  1.125 ======================================= */
-  /* ================================================================================================= */
-
-  /* Line-height */
-  --line-height-15: 1.63636364;
-  --line-height-25: 1.5;
-  --line-height-50: 1.5;
-  --line-height-100: 1.5;
-  --line-height-200: 1.33333333;
-  --line-height-300: 1.14285714;
-  --line-height-400: 1.5;
-  --line-height-500: 1.33333333;
-  --line-height-600: 1.25;
-  --line-height-700: 1.2;
-  --line-height-800: 1.16666667;
-  --line-height-900: 1.14285714;
-  --line-height-1000: 1.125;
-  /* Font Weight */
-  --font-weight-400: 400;
-  --font-weight-500: 500;
-  --font-weight-600: 600;
-  --font-weight-700: 700;
-  /* Black */
-  --black: black;
-  --black-opacity-0: hsla(0, 0%, 0%, 0);
-  --black-opacity-10: hsla(0, 0%, 0%, 0.1);
-  --black-opacity-20: hsla(0, 0%, 0%, 0.2);
-  --black-opacity-30: hsla(0, 0%, 0%, 0.3);
-  --black-opacity-40: hsla(0, 0%, 0%, 0.4);
-  --black-opacity-50: hsla(0, 0%, 0%, 0.5);
-  --black-opacity-60: hsla(0, 0%, 0%, 0.6);
-  --black-opacity-70: hsla(0, 0%, 0%, 0.7);
-  --black-opacity-80: hsla(0, 0%, 0%, 0.8);
-  --black-opacity-90: hsla(0, 0%, 0%, 0.9);
-  --black-opacity-100: hsla(0, 0%, 0%, 1);
-  /* White */
-  --white: #ffffff;
-  --white-opacity-0: hsla(0, 0%, 100%, 0);
-  --white-opacity-10: hsla(0, 0%, 100%, 0.1);
-  --white-opacity-20: hsla(0, 0%, 100%, 0.2);
-  --white-opacity-30: hsla(0, 0%, 100%, 0.3);
-  --white-opacity-40: hsla(0, 0%, 100%, 0.4);
-  --white-opacity-50: hsla(0, 0%, 100%, 0.5);
-  --white-opacity-60: hsla(0, 0%, 100%, 0.6);
-  --white-opacity-70: hsla(0, 0%, 100%, 0.7);
-  --white-opacity-80: hsla(0, 0%, 100%, 0.8);
-  --white-opacity-90: hsla(0, 0%, 100%, 0.9);
-  --white-opacity-100: hsla(0, 0%, 100%, 1);
-  /* Grey scale */
-  --grey-100: #f5f5f5;
-  --grey-200: #e5e5e5;
-  --grey-300: #ccc;
-  --grey-400: #aaa;
-  --grey-500: #888;
-  --grey-600: #666;
-  --grey-700: #555;
-  --grey-800: #444;
-  --grey-900: #333;
-  --grey-1000: #222;
-  --grey-1100: #111;
-  --grey-1200: #050505;
-  /* Red scale */
-  --red-100: #ffe5e5;
-  --red-200: #fbbcbc;
-  --red-300: #f79494;
-  --red-400: #f36b6b;
-  --red-500: #f74e4e;
-  --red-600: #e04343;
-  --red-700: #c23c3c;
-  --red-800: #a43535;
-  --red-900: #862e2e;
-  --red-1000: #6a2323;
-  /* Orange scale */
-  --orange-100: #fff2cc;
-  --orange-200: #ffe0a3;
-  --orange-300: #ffcc80;
-  --orange-400: #ffb84d;
-  --orange-500: #ffa500;
-  --orange-600: #e59400;
-  --orange-700: #cc8300;
-  --orange-800: #b37300;
-  --orange-900: #996200;
-  --orange-1000: #805100;
-  /* Green scale */
-  --green-100: #e5f9e5;
-  --green-200: #c6f3c6;
-  --green-300: #a6eda6;
-  --green-400: #86e786;
-  --green-500: #00bd00;
-  --green-600: #00a800;
-  --green-700: #009400;
-  --green-800: #007f00;
-  --green-900: #006b00;
-  --green-1000: #005700;
-  /* Blue scale */
-  --blue-100: #e6f2ff;
-  --blue-200: #cce4ff;
-  --blue-300: #99caff;
-  --blue-400: #85bffb;
-  --blue-500: #62b7fb;
-  --blue-600: #338fe0;
-  --blue-700: #3396eb;
-  --blue-800: #1a86e3;
-  --blue-900: #0076db;
-  --blue-1000: #005fb1;
-  /* Radius */
-  --radius-000: 0;
-  --radius-100: 4px;
-  --radius-150: 6px;
-  --radius-200: 8px;
-  --radius-300: 16px;
-  --radius-400: 24px;
-  --radius-500: 36px;
-  --radius-600: 48px;
-  /* Spacing */
-  --space-000: 0;
-  --space-025: 0.2rem;
-  --space-050: 0.4rem;
-  --space-100: 0.6rem;
-  --space-200: 0.8rem;
-  --space-300: 1.2rem;
-  --space-400: 1.6rem;
-  --space-500: 2.4rem;
-  --space-600: 3.6rem;
-  --space-700: 4.8rem;
-  --space-800: 6rem;
-  /* Stroke */
-  --stroke-size-100: 1px;
-  --stroke-size-200: 2px;
-  --stroke-size-300: 3px;
-  --stroke-size-400: 4px;
-  --stroke-size-500: 5px;
-  --stroke-solid: solid;
-  --stroke-outset: outset;
-  /* Animation */
-  --speed-100: 0.1s;
-  --speed-200: 0.2s;
-  --speed-300: 0.3s;
-  --speed-400: 0.4s;
-
   /* Avatar Colors */
-  --avatar-purple-200: hsl(270, 55%, 70%);
-  --avatar-purple-800: hsl(270, 55%, 35%);
-  --avatar-violet-200: hsl(255, 50%, 70%);
-  --avatar-violet-800: hsl(255, 50%, 35%);
-  --avatar-pink-200: hsl(330, 65%, 73%);
-  --avatar-pink-800: hsl(330, 65%, 40%);
-  --avatar-magenta-200: hsl(295, 60%, 70%);
-  --avatar-magenta-800: hsl(295, 60%, 35%);
-  --avatar-red-200: hsl(0, 65%, 68%);
-  --avatar-red-800: hsl(0, 65%, 35%);
-  --avatar-orange-200: hsl(25, 80%, 70%);
-  --avatar-orange-800: hsl(25, 80%, 35%);
-  --avatar-amber-200: hsl(45, 85%, 72%);
-  --avatar-amber-800: hsl(45, 85%, 38%);
-  --avatar-yellow-200: hsl(55, 80%, 75%);
-  --avatar-yellow-800: hsl(55, 80%, 40%);
-  --avatar-lime-200: hsl(90, 55%, 70%);
-  --avatar-lime-800: hsl(90, 55%, 35%);
-  --avatar-green-200: hsl(140, 50%, 70%);
-  --avatar-green-800: hsl(140, 50%, 35%);
-  --avatar-teal-200: hsl(170, 55%, 70%);
-  --avatar-teal-800: hsl(170, 55%, 35%);
-  --avatar-cyan-200: hsl(190, 60%, 70%);
-  --avatar-cyan-800: hsl(190, 60%, 35%);
-  --avatar-blue-200: hsl(210, 70%, 70%);
-  --avatar-blue-800: hsl(210, 70%, 35%);
-  --avatar-indigo-200: hsl(230, 55%, 70%);
-  --avatar-indigo-800: hsl(230, 55%, 35%);
+  --avatar-purple-200: oklch(69.998% 0.12881 306.598);
+  --avatar-purple-800: oklch(39.825% 0.15525 302.768);
+  --avatar-violet-200: oklch(68.7% 0.11278 294.579);
+  --avatar-violet-800: oklch(37.751% 0.1414 289.195);
+  --avatar-pink-200: oklch(75% 0.12171 349.037);
+  --avatar-pink-800: oklch(49.567% 0.17587 355.522);
+  --avatar-magenta-200: oklch(73.607% 0.1553 324.203);
+  --avatar-magenta-800: oklch(46.026% 0.18151 324.267);
+  --avatar-red-200: oklch(69.219% 0.13185 21.008);
+  --avatar-red-800: oklch(43.588% 0.15193 26.224);
+  --avatar-orange-200: oklch(78.978% 0.10803 55.747);
+  --avatar-orange-800: oklch(51.737% 0.12922 49.443);
+  --avatar-amber-200: oklch(88.238% 0.11573 91.663);
+  --avatar-amber-800: oklch(65.465% 0.13065 86.837);
+  --avatar-yellow-200: oklch(92.328% 0.116 104.198);
+  --avatar-yellow-800: oklch(72.736% 0.14925 103.38);
+  --avatar-lime-200: oklch(84.773% 0.11998 130.068);
+  --avatar-lime-800: oklch(57.802% 0.13829 132.375);
+  --avatar-green-200: oklch(82.146% 0.10519 154.481);
+  --avatar-green-800: oklch(55.196% 0.1248 150.768);
+  --avatar-teal-200: oklch(83.949% 0.08537 182.617);
+  --avatar-teal-800: oklch(57.358% 0.092 179.632);
+  --avatar-cyan-200: oklch(81.649% 0.07802 211.528);
+  --avatar-cyan-800: oklch(54.656% 0.08505 214.39);
+  --avatar-blue-200: oklch(74.949% 0.09578 248.783);
+  --avatar-blue-800: oklch(45.925% 0.11981 252.499);
+  --avatar-indigo-200: oklch(69.039% 0.10593 274.775);
+  --avatar-indigo-800: oklch(38.197% 0.13614 269.807);
 }
 
 /* ==================================================================================================== */
@@ -359,7 +169,7 @@ html[data-theme="light"] {
   --text-color-success: var(--green-600);
   --text-color-warning: var(--orange-600);
   --text-color-error: var(--red-600);
-  --text-color-optional: var(--grey-600);
+  --text-color-optional: var(--grey-500);
   /* Overlay */
   --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */
@@ -616,7 +426,7 @@ html[data-theme="dark"] {
   --text-color-success: var(--green-400);
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
-  --text-color-optional: var(--grey-300);
+  --text-color-optional: var(--grey-400);
   /* Overlay */
   --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */

package/dist/esm/css/readme.md

@@ -0,0 +1,129 @@
+# Michael UI System — CSS Architecture
+
+## ⚡ Usage Notes
+
+⛔ Don't use brand primitives directly in components.  
+✅ Use semantic tokens only.
+
+### Theming Ethos
+
+- Themes should override semantic tokens, not brand primitives.
+- Advanced users can also craft or extend the token file,
+- For example: Adding a yellow warning alert instead of orange.
+
+### Why Brand is External
+
+- Brand primitives are defined in a separate brand-<name>.css file to keep them independent from semantic tokens.
+- This separation aligns with Design Token Module specifications.
+- The system can use a JSON source of truth for brand primitives, which is then transformed into CSS via a tool.
+- This allows multiple brands to share the same token structure and theme mappings without collisions.
+
+### Brand file
+
+- Use `brand-<name>.css` to define new brands.
+- Each brand file should have a unique name
+- For example: `brand-coke.css` to avoid collisions when defining brand primitives.
+
+### Tokens file
+
+- Use `tokens.css` to define light/dark or other theme mappings.
+- Advanced users can add a `token-<name>.css` file to extend semantic tokens
+- For example: New alert colors, without modifying brand primitives.
+
+### Brand vs Semantic Tokens vs Themes
+
+- Brand primitives (`let`) — immutable, define brand identity.
+- Semantic tokens (`var`) — map to brand primitives, consumed by components.
+- Themes — override semantic tokens only to change appearance without touching brand identity.
+
+### How Overrides Work
+
+- Components read semantic tokens (`var(--token-name)`).
+- Changing a theme (light/dark) updates semantic tokens only.
+- Brand primitives (`let`) remain constant; they are never changed by themes.
+
+This repository defines the CSS foundation for Michael UI System, including resets, base styles, brand primitives, and semantic tokens. It is designed to support multiple brands and themes (light/dark) while keeping components brand-agnostic.
+
+## FILE OVERVIEW
+
+## 1. Reset (`mui-reset.css`)
+
+- Resets default browser styles.
+- Normalizes spacing, font inheritance, list styles, and box-sizing.
+- **Goal:** Provide a clean slate for all themes and components.
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  line-height: 1.5;
+  font-family: var(--font-family);
+}
+```
+
+### 2. Foundation `mui-base.css`
+
+- Defines global layout and typography defaults.
+- Sets defaults for body, headings, links, buttons, and form elements.
+- Includes utility classes if needed.
+- **Goal:** Establish foundational design system behavior.
+
+```css
+body {
+  font-size: var(--font-size-100);
+  color: var(--text-color);
+  background: var(--color-bg);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+```
+
+### 3. Brand Primitives: `mui-brand.css`
+
+- Contains raw brand primitives for a specific brand.
+- Includes colors, font scales, radii, spacing, and strokes.
+- Uses OKLCH values for perceptual accuracy.
+- **Goal:** Define immutable brand identity.
+
+```css
+html[data-brand="insert-your-brand"] {
+  --font-family: system-ui;
+  /* GREY */
+  --grey-800: oklch(38.666% 0.00004 271.152);
+  /* RED */
+  --red-400: oklch(69.42% 0.16807 22.436);
+  /* BLUE */
+  --blue-500: oklch(75.415% 0.12865 244.876);
+}
+```
+
+### 4. Semantic & Theme Layer: `mui-tokens.css`
+
+- Maps semantic purposes to brand primitives.
+- Handles themes (light/dark) without altering brand primitives.
+- Components consume only semantic tokens.
+- **Goal:** Separate brand identity from functional usage.
+
+```css
+:where(html) {
+  --color-bg: var(--white);
+  --text-color: var(--grey-900);
+  --text-color-error: var(--red-400);
+  --surface-elevated: var(--grey-100);
+}
+
+html[data-theme="dark"] {
+  --color-bg: var(--grey-900);
+  --text-color: var(--grey-100);
+  --text-color-error: var(--red-200);
+}
+```