www: @System folder refactor

Author: tipiirai

packages/www/@system/data/features.yaml

@@ -31,8 +31,8 @@ features:
     - Universal HMR
     - SPA development
     - SVG development
-    - Instant startup
-    - Zero config
+    - Near-instant startup
+    - Minimal config
 
   Backend layer:
     - CloudFlare compatibiliity

packages/www/@system/design/README.md

@@ -1,8 +1,8 @@
 
-# Basic rules
-
-- **Native HTML for 90% of things** custom components (with class names) for missing elements in the HTML spec.
+## Whitespace
 
 - **Page structure (rems)**. Page margins, section gaps, grid spacing, major layout breaks. These relate to the overall document scale and should respond to user font size preferences consistently.
 
-- **Elements/components (ems)**. Button padding, input margins, card spacing, typography margins. These relate to the element's own content and should scale with that specific text size.
+- **Elements/components (ems)**. Button padding, input margins, card spacing, typography margins. These relate to the element's own content and should scale with that specific text size.
+
+- **grid.css** for flex, grid, and columned layouts

packages/www/@system/design/dark.css

@@ -0,0 +1,17 @@
+@layer modifier {
+
+  .dark {
+    background-color: #111;
+
+    .logo {
+      filter: invert(100);
+    }
+
+    h1, h2, h3 {
+      color: white;
+    }
+    p, a, li {
+      color: var(--base-400);
+    }
+  }
+}

packages/www/@system/design/ui/grid.css packages/www/@system/design/grid.csspackages/www/@system/design/ui/grid.css renamed to packages/www/@system/design/grid.css

@@ -1,21 +1,6 @@
 
 @layer modifier {
 
-  .dark {
-    background-color: #111;
-
-    .logo {
-      filter: invert(100);
-    }
-
-    h1, h2, h3 {
-      color: white;
-    }
-    p, a, li {
-      color: var(--base-400);
-    }
-  }
-
   .heroic article {
     h1 {
       font-size: 4.5em;