Redesign web UI with editorial benchmark theme

Author: biru-codeastromer

web/app/globals.css

@@ -3,19 +3,23 @@
 @tailwind utilities;
 
 :root {
-  --page: #f3ede5;
-  --paper: #fcf8f2;
-  --paper-strong: #fffdfa;
-  --sand: #efe7dc;
-  --line: #dfd3c7;
-  --line-strong: #cab8a3;
-  --ink: #161412;
-  --muted: #6d655d;
-  --dark: #181715;
-  --dark-soft: #242220;
-  --accent: #b89972;
-  --accent-soft: #d6c3aa;
-  --shadow: 0 24px 60px rgba(36, 28, 18, 0.08);
+  --page: #faf7fc;
+  --page-soft: #f4eef4;
+  --paper: #fffdfc;
+  --paper-strong: #ffffff;
+  --paper-muted: #f7f1eb;
+  --sand: #f1e7de;
+  --line: #ddd4de;
+  --line-strong: #b9aec3;
+  --ink: #1d1a24;
+  --muted: #6a6472;
+  --dark: #17151d;
+  --dark-soft: #25232d;
+  --accent: #3d68dc;
+  --accent-soft: #dce5ff;
+  --peach: #f4d8ca;
+  --sage: #dfe8d5;
+  --shadow: 0 24px 70px rgba(33, 24, 43, 0.08);
 }
 
 * {
@@ -30,8 +34,8 @@ body {
   margin: 0;
   color: var(--ink);
   background:
-    linear-gradient(to right, transparent 88px, rgba(202, 184, 163, 0.58) 88px, rgba(202, 184, 163, 0.58) 89px, transparent 89px, transparent calc(100% - 89px), rgba(202, 184, 163, 0.58) calc(100% - 89px), rgba(202, 184, 163, 0.58) calc(100% - 88px), transparent calc(100% - 88px)),
-    linear-gradient(180deg, var(--paper) 0%, var(--page) 100%);
+    linear-gradient(to right, transparent 80px, rgba(185, 174, 195, 0.45) 80px, rgba(185, 174, 195, 0.45) 81px, transparent 81px, transparent calc(100% - 81px), rgba(185, 174, 195, 0.45) calc(100% - 81px), rgba(185, 174, 195, 0.45) calc(100% - 80px), transparent calc(100% - 80px)),
+    linear-gradient(180deg, var(--page) 0%, var(--page-soft) 48%, #f8f2ea 100%);
   min-height: 100vh;
   position: relative;
 }
@@ -41,10 +45,13 @@ body::before {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  background-image: radial-gradient(rgba(110, 98, 86, 0.16) 1px, transparent 1px);
-  background-size: 14px 14px;
-  opacity: 0.42;
-  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 76%);
+  background:
+    radial-gradient(circle at top left, rgba(61, 104, 220, 0.08), transparent 24%),
+    radial-gradient(circle at top right, rgba(244, 216, 202, 0.3), transparent 28%),
+    radial-gradient(rgba(110, 98, 114, 0.14) 0.8px, transparent 0.8px);
+  background-size: auto, auto, 16px 16px;
+  opacity: 0.38;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 78%);
 }
 
 ::selection {
@@ -59,19 +66,19 @@ a {
 .site-shell {
   margin: 0 auto;
   width: 100%;
-  max-width: 1360px;
-  padding: 0 24px 88px;
+  max-width: 1260px;
+  padding: 0 28px 88px;
 }
 
 .site-panel {
-  border: 1px solid var(--line);
-  background: rgba(255, 253, 250, 0.92);
+  border: 1px solid rgba(185, 174, 195, 0.46);
+  background: rgba(255, 253, 252, 0.78);
   box-shadow: var(--shadow);
 }
 
 .site-soft-panel {
-  border: 1px solid var(--line);
-  background: rgba(239, 231, 220, 0.86);
+  border: 1px solid rgba(185, 174, 195, 0.42);
+  background: rgba(247, 241, 235, 0.86);
 }
 
 .site-dark-panel {
@@ -94,73 +101,131 @@ a {
 .section-kicker {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
+  gap: 10px;
+  font-family: var(--font-serif);
+  font-size: 18px;
+  font-style: italic;
+  font-weight: 500;
+  letter-spacing: 0.01em;
   color: var(--muted);
 }
 
 .section-kicker::before {
   content: "";
   display: inline-block;
-  height: 14px;
-  width: 3px;
+  height: 1px;
+  width: 30px;
   border-radius: 999px;
-  background: var(--line-strong);
+  background: rgba(106, 100, 114, 0.5);
 }
 
 .brand-accent {
   font-family: var(--font-serif);
   font-style: italic;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .button-primary {
-  border-radius: 14px;
-  background: var(--ink);
+  border-radius: 999px;
+  background: var(--accent);
   color: #fffdfa;
-  transition: transform 160ms ease, opacity 160ms ease;
+  box-shadow: 0 12px 24px rgba(61, 104, 220, 0.18);
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
 }
 
 .button-primary:hover,
 .button-secondary:hover {
   transform: translateY(-1px);
 }
 
+.button-primary:hover {
+  box-shadow: 0 16px 28px rgba(61, 104, 220, 0.24);
+}
+
 .button-secondary {
-  border-radius: 14px;
+  border-radius: 999px;
   border: 1px solid var(--line-strong);
-  background: rgba(255, 253, 250, 0.88);
+  background: rgba(255, 255, 255, 0.74);
   color: var(--ink);
   transition: transform 160ms ease, border-color 160ms ease;
 }
 
 .eyebrow-tab {
-  border-right: 1px solid var(--line);
-  border-top: 1px solid var(--line);
-  padding: 18px 20px;
+  border-bottom: 1px solid rgba(185, 174, 195, 0.5);
+  padding: 16px 12px;
   text-align: center;
   font-size: 14px;
   font-weight: 600;
   color: var(--muted);
+  transition: color 160ms ease, border-color 160ms ease;
 }
 
-.eyebrow-tab:first-child {
-  border-left: 1px solid var(--line);
+.eyebrow-tab.is-active {
+  border-bottom-color: var(--accent);
+  color: var(--ink);
 }
 
-.eyebrow-tab.is-active {
-  background: rgba(255, 255, 255, 0.74);
+.eyebrow-tab:hover {
+  color: var(--ink);
+}
+
+.editorial-link {
+  color: var(--muted);
+  text-decoration: underline;
+  text-decoration-color: rgba(106, 100, 114, 0.45);
+  text-underline-offset: 5px;
+  transition: color 160ms ease, text-decoration-color 160ms ease;
+}
+
+.editorial-link:hover {
   color: var(--ink);
+  text-decoration-color: rgba(29, 26, 36, 0.65);
+}
+
+.image-frame {
+  overflow: hidden;
+  border: 1px solid rgba(185, 174, 195, 0.46);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: var(--shadow);
+}
+
+.image-frame img {
+  display: block;
+}
+
+.stat-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(185, 174, 195, 0.5);
+  background: rgba(255, 255, 255, 0.74);
+  padding: 10px 16px;
+  font-size: 13px;
+  color: var(--muted);
 }
 
 .footer-link {
   color: var(--muted);
-  transition: color 160ms ease;
+  text-decoration: underline;
+  text-decoration-color: rgba(106, 100, 114, 0.34);
+  text-underline-offset: 4px;
+  transition: color 160ms ease, text-decoration-color 160ms ease;
 }
 
 .footer-link:hover {
   color: var(--ink);
+  text-decoration-color: rgba(29, 26, 36, 0.55);
+}
+
+@media (max-width: 768px) {
+  body {
+    background:
+      linear-gradient(180deg, var(--page) 0%, var(--page-soft) 52%, #f8f2ea 100%);
+  }
+
+  .site-shell {
+    padding: 0 18px 72px;
+  }
 }

web/app/layout.tsx

@@ -10,7 +10,7 @@ const manrope = Manrope({ subsets: ["latin"], variable: "--font-sans" });
 const cormorant = Cormorant_Garamond({
   subsets: ["latin"],
   variable: "--font-serif",
-  weight: ["600", "700"]
+  weight: ["400", "500", "600", "700"]
 });
 const plexMono = IBM_Plex_Mono({ subsets: ["latin"], variable: "--font-mono", weight: ["400", "500"] });
 
@@ -52,7 +52,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${manrope.variable} ${cormorant.variable} ${plexMono.variable}`}>
-      <body className="font-[var(--font-sans)]">
+      <body className="font-[var(--font-sans)] text-[var(--ink)]">
         <Providers>
           <Nav />
           <main className="site-shell pt-8">{children}</main>