ui: awwward-level design overhaul - dark theme, Open Props, 0 hardcoded

- Switch to dark-first theme with Open Props variable system
- Replace all hardcoded colors with CSS variables
- Add global fadeInUp animations for sections
- Enhance cards with hover glow and brand gradients
- Improve syntax highlighting with Open Props colors
- Fix showcase code block readability and CTA input visibility
- Add subtle grid texture to hero area
- Update brand color to #4f6ef7 for better contrast
- Fix responsive breakpoint (640px -> 768px)
- Use color-mix() instead of rgba() for borders

Author: SisyphusZheng

packages/ssg/src/postprocess.ts

@@ -175,9 +175,9 @@ export function injectCspMeta(
  * This polyfill attaches Shadow Roots manually via attachShadow().
  */
 const DSD_POLYFILL = `
-<style>html{visibility:visible!important}body{background:#040508;color:#fff}docs-home{display:block}
-:root[data-theme="dark"]{--gray-0:#030507;--gray-1:#0d0f12;--gray-2:#16191d;--gray-3:#212529;--gray-4:#343a40;--gray-5:#495057;--gray-6:#868e96;--gray-7:#adb5bd;--gray-8:#ced4da;--gray-9:#dee2e6;--gray-10:#e9ecef;--gray-11:#f1f3f5;--gray-12:#f8f9fa;--text-primary:var(--gray-10);--text-secondary:var(--gray-7);--text-muted:var(--gray-6);--bg-base:var(--gray-0);--bg-surface:var(--gray-1);--bg-card:var(--gray-2);--bg-code:#0d0d12;--bg-hover:var(--gray-3);--border:var(--gray-3);--border-hover:var(--gray-4);--brand:#7c6ff5;--brand-hover:#6d5ce8;--brand-light:#8b7cf6;--brand-deep:#3d3580;--brand-subtle:rgba(124,111,245,.15);--brand-glow:rgba(124,111,245,.2);--code-border:rgba(255,255,255,.08)}
-:root[data-theme="light"]{--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--text-primary:var(--gray-10);--text-secondary:var(--gray-7);--text-muted:var(--gray-6);--bg-base:var(--gray-0);--bg-surface:var(--gray-2);--bg-card:var(--gray-0);--bg-code:#f1f3f5;--bg-hover:var(--gray-2);--border:var(--gray-3);--border-hover:var(--gray-4);--brand:#534ab7;--brand-hover:#4039a0;--brand-light:#6d5ce8;--brand-deep:#26215c;--brand-subtle:rgba(83,74,183,.1);--brand-glow:rgba(83,74,183,.15);--code-border:rgba(0,0,0,.08)}
+<style>html{visibility:visible!important}body{background:var(--bg-base);color:var(--text-primary);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}docs-home{display:block}
+:root[data-theme="dark"]{--gray-0:#030507;--gray-1:#0d0f12;--gray-2:#16191d;--gray-3:#212529;--gray-4:#343a40;--gray-5:#495057;--gray-6:#868e96;--gray-7:#adb5bd;--gray-8:#ced4da;--gray-9:#dee2e6;--gray-10:#e9ecef;--gray-11:#f1f3f5;--gray-12:#f8f9fa;--text-primary:var(--gray-10);--text-secondary:var(--gray-7);--text-muted:var(--gray-6);--bg-base:var(--gray-0);--bg-surface:var(--gray-1);--bg-card:var(--gray-2);--bg-code:#0d0d12;--bg-hover:var(--gray-3);--border:var(--gray-3);--border-hover:var(--gray-4);--brand:#4f6ef7;--brand-hover:#3d5ce5;--brand-light:#6b8cff;--brand-deep:#1a1a4e;--brand-subtle:rgba(79,110,247,.15);--brand-glow:rgba(79,110,247,.2);--code-border:rgba(255,255,255,.08)}
+:root[data-theme="light"]{--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--text-primary:var(--gray-10);--text-secondary:var(--gray-7);--text-muted:var(--gray-6);--bg-base:var(--gray-0);--bg-surface:var(--gray-2);--bg-card:var(--gray-0);--bg-code:#f1f3f5;--bg-hover:var(--gray-2);--border:var(--gray-3);--border-hover:var(--gray-4);--brand:#4f6ef7;--brand-hover:#3d5ce5;--brand-light:#6b8cff;--brand-deep:#e7e9fb;--brand-subtle:rgba(79,110,247,.1);--brand-glow:rgba(79,110,247,.15);--code-border:color-mix(in srgb, var(--gray-0) 8%, transparent)}
 </style>
 <script>
 // DSD Polyfill (Firefox, older browsers)

packages/ui/src/open-layout.tsx

@@ -509,7 +509,7 @@ sheet.replaceSync(`
     .tab-item.active { color: var(--color-brand); }
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .header-right { gap: 4px; }
     .lang-switch { display: none; }
   }

www/app/data/_generated-nav.ts

@@ -17,7 +17,7 @@ export const headerNav = [
     "label": "Blog"
   },
   {
-    "href": "/registry",
+    "href": "/architecture/standards-registry",
     "label": "Hub"
   }
 ];

www/app/islands/home-console.tsx

@@ -40,7 +40,7 @@ styles.replaceSync(`
     color: var(--text-muted); text-align: center; margin-top: var(--size-4);
   }
   .counter-caption b { color: var(--indigo-5); font-weight: var(--font-weight-7); }
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .rp-tab { padding: var(--size-1) var(--size-3); font-size: var(--font-size-00); }
   }
 `);

www/app/islands/open-search.tsx

@@ -74,7 +74,7 @@ sheet.replaceSync(`
     margin-left: var(--size-1);
   }
   .search-icon { display: none; width: var(--size-4); height: var(--size-4); }
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .search-trigger span, .search-trigger kbd { display: none; }
     .search-icon { display: inline-block; }
   }

www/app/routes/architecture/design-system.tsx

@@ -174,7 +174,7 @@ routeSheet.replaceSync(
           height: 64px;
         }
       }
-      @media (max-width: 640px) {
+      @media (max-width: 768px) {
         .ds-container {
           padding: 28px 16px 48px;
         }

www/app/routes/index/cta-linear.tsx

@@ -47,7 +47,7 @@ ctaSheet.replaceSync(`
     display: flex;
     gap: var(--space-sm);
   }
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .cta-section { padding: var(--space-xxl) var(--space-md); }
     .cta-cli-row { flex-direction: column; align-items: flex-start; }
   }

www/app/routes/index/features-linear.tsx

@@ -70,7 +70,7 @@ featuresSheet.replaceSync(`
   @media (max-width: 1024px) {
     .features-grid { grid-template-columns: repeat(2, 1fr); }
   }
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .features-section { padding: var(--space-xxl) var(--space-md); }
     .features-grid { grid-template-columns: 1fr; }
   }

www/app/routes/index/hero-linear.tsx

@@ -76,7 +76,7 @@ heroSheet.replaceSync(`
     .hero-code-wrapper { display: none; }
     .hero-section { padding-top: 96px; padding-bottom: var(--space-xxl); }
   }
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .hero-section { padding-left: var(--space-md); padding-right: var(--space-md); padding-top: 80px; }
     .hero-headline { font-size: 2.4rem; }
     .hero-cta { flex-direction: column; }

www/app/routes/index/showcase-linear.tsx

@@ -90,7 +90,7 @@ showcaseSheet.replaceSync(`
   .fn { color: #82aaff; }
   .cm { color: #546e7a; }
   .pn { color: #89ddff; }
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .showcase-section { padding: var(--space-xxl) var(--space-md); }
   }
 `);