feat: some styling

packages/website-ue/src/layouts/BaseLayout.astro

@@ -1,16 +1,73 @@
+---
+import "@fontsource-variable/inter";
+---
+
 <html>
   <head>
     <meta charset="utf-8" />
 
-    <style>
+    <style is:global>
+      @import "@radix-ui/colors/mauve-dark.css";
+      @import "@radix-ui/colors/mauve-alpha.css";
+
       body {
-        background-color: black;
-        filter: invert(1) hue-rotate(180deg);
+        --gray-1: var(--mauve-1);
+        --gray-2: var(--mauve-2);
+        --gray-3: var(--mauve-3);
+        --gray-4: var(--mauve-4);
+        --gray-5: var(--mauve-5);
+        --gray-6: var(--mauve-6);
+        --gray-7: var(--mauve-7);
+        --gray-8: var(--mauve-8);
+        --gray-9: var(--mauve-9);
+        --gray-10: var(--mauve-10);
+        --gray-11: var(--mauve-11);
+        --gray-12: var(--mauve-12);
+
+        --gray-a1: var(--mauve-a1);
+        --gray-a2: var(--mauve-a2);
+        --gray-a3: var(--mauve-a3);
+        --gray-a4: var(--mauve-a4);
+        --gray-a5: var(--mauve-a5);
+        --gray-a6: var(--mauve-a6);
+        --gray-a7: var(--mauve-a7);
+        --gray-a8: var(--mauve-a8);
+        --gray-a9: var(--mauve-a9);
+        --gray-a10: var(--mauve-a10);
+        --gray-a11: var(--mauve-a11);
+        --gray-a12: var(--mauve-a12);
+
+        --space-1: 0.25rem;
+        --space-2: 0.5rem;
+        --space-3: 0.75rem;
+        --space-4: 1rem;
+        --space-5: 1.5rem;
+        --space-6: 2rem;
+        --space-7: 2.5rem;
+        --space-8: 3rem;
+        --space-9: 4rem;
+
+        background-color: var(--gray-1);
+        color: var(--gray-12);
+        font-family: "Inter Variable", sans-serif;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      body,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 0;
       }
     </style>
   </head>
 
-  <body>
+  <body class="dark">
     <slot />
   </body>
 </html>