Redesign website with Nimo-inspired aesthetic

meherpanguluri · meherpanguluri · commit 8d8edbf3d822 · 2026-02-20T20:03:17.000-08:00
Warm off-white canvas with grain texture, floating dock pill taskbar,
high-radius glass windows, monochrome color palette, pill-shaped buttons.
diff --git a/website/css/desktop.css b/website/css/desktop.css
@@ -4,12 +4,20 @@
 .desktop {
   position: fixed;
   inset: 0;
-  background: var(--bg-desktop);
-  background-image:
-    radial-gradient(ellipse at 20% 50%, rgba(108, 92, 231, 0.15) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 20%, rgba(0, 184, 148, 0.1) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 80%, rgba(253, 203, 110, 0.08) 0%, transparent 50%);
+  background-color: var(--bg-desktop);
   z-index: var(--z-desktop);
+  overflow: hidden;
+}
+
+/* Grainy texture overlay */
+.desktop::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  opacity: 0.22;
+  pointer-events: none;
+  z-index: 1;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
 /* Icon grid */
@@ -20,7 +28,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  z-index: calc(var(--z-desktop) + 1);
+  z-index: calc(var(--z-desktop) + 2);
 }
 
 .desktop-icon {
@@ -38,27 +46,27 @@
   background: var(--bg-icon-hover);
 }
 .desktop-icon:active {
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .desktop-icon .icon-img {
-  width: 48px;
-  height: 48px;
+  width: 52px;
+  height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  font-size: 36px;
 }
 
 .desktop-icon .icon-label {
-  font-size: 0.6875rem;
-  color: var(--text-desktop);
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #2a2a2a;
   text-align: center;
-  text-shadow: 0 1px 3px var(--text-desktop-shadow);
+  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
   line-height: 1.3;
   word-break: break-word;
-  max-width: 76px;
+  max-width: 80px;
 }
 
 /* Window */
@@ -93,13 +101,13 @@
 .window-header {
   display: flex;
   align-items: center;
-  height: 38px;
-  padding: 0 12px;
+  height: 44px;
+  padding: 0 16px;
   background: var(--bg-window-header);
   border-bottom: 1px solid var(--border-subtle);
   cursor: default;
   flex-shrink: 0;
-  gap: 8px;
+  gap: 10px;
 }
 .window.focused .window-header {
   background: var(--bg-window-header);
@@ -237,42 +245,43 @@
 .resize-handle.se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }
 .resize-handle.sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }
 
-/* Taskbar */
+/* Taskbar — floating dock pill */
 .taskbar {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 48px;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  right: auto;
+  height: auto;
   background: var(--bg-taskbar);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 100px;
   display: flex;
   align-items: center;
-  padding: 0 16px;
+  padding: 8px 10px;
   z-index: var(--z-taskbar);
   box-shadow: var(--shadow-taskbar);
-  gap: 4px;
+  gap: 6px;
+  max-width: 90vw;
 }
 
 .taskbar-brand {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0 12px 0 4px;
+  gap: 6px;
+  padding: 0 10px 0 6px;
   height: 34px;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-  margin-right: 4px;
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+  margin-right: 2px;
   flex-shrink: 0;
 }
 .taskbar-brand .brand-icon {
-  font-size: 18px;
+  font-size: 16px;
 }
 .taskbar-brand .brand-text {
   font-size: 0.8125rem;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-primary);
   letter-spacing: -0.01em;
 }
 
@@ -287,33 +296,34 @@
 .taskbar-item {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
+  gap: 5px;
+  padding: 6px 12px;
   height: 34px;
-  border-radius: 6px;
+  border-radius: 100px;
   font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all var(--transition-fast);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .taskbar-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--text-primary);
 }
 .taskbar-item.active {
-  background: rgba(255, 255, 255, 0.15);
-  color: #fff;
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--text-primary);
+  font-weight: 600;
 }
 .taskbar-item .item-icon {
   font-size: 14px;
 }
 
 .taskbar-clock {
   font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.7);
-  padding: 0 8px;
+  color: var(--text-muted);
+  padding: 0 8px 0 4px;
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
 }
@@ -350,7 +360,8 @@
   }
 
   .taskbar {
-    height: 44px;
+    bottom: 16px;
+    padding: 6px 10px;
   }
   .taskbar-windows {
     display: none;
@@ -381,8 +392,8 @@
   border-bottom: none;
 }
 .comparison-table .highlight {
-  color: var(--accent);
-  font-weight: 600;
+  color: var(--text-primary);
+  font-weight: 700;
 }
 
 /* Welcome window special styling */
@@ -443,9 +454,9 @@
   margin-top: 16px;
 }
 .example-card {
-  background: rgba(0,0,0,0.03);
-  border: 1px solid rgba(0,0,0,0.06);
-  border-radius: 10px;
+  background: #fafaf9;
+  border: 1px solid rgba(0,0,0,0.03);
+  border-radius: 16px;
   padding: 14px 16px;
 }
 .example-header {
@@ -467,12 +478,12 @@
   font-size: 0.95rem;
 }
 .example-size {
-  font-size: 0.75rem;
-  color: var(--accent);
+  font-size: 0.7rem;
+  color: var(--text-primary);
   font-weight: 600;
-  background: rgba(108, 92, 231, 0.08);
-  padding: 2px 8px;
-  border-radius: 4px;
+  background: var(--accent-light);
+  padding: 4px 10px;
+  border-radius: 100px;
 }
 .example-desc {
   font-size: 0.8rem;
diff --git a/website/css/playground.css b/website/css/playground.css
@@ -65,7 +65,7 @@
   color: #fff;
 }
 .example-list li.active {
-  background: rgba(108, 92, 231, 0.2);
+  background: rgba(255, 255, 255, 0.12);
   color: #fff;
 }
 
@@ -105,7 +105,7 @@
   color: white;
 }
 .toolbar-btn.run:hover {
-  background: #5b4bd5;
+  background: #333;
 }
 
 .toolbar-size {
diff --git a/website/css/shared.css b/website/css/shared.css
@@ -1,31 +1,31 @@
 /* shared.css — Typography, colors, resets, responsive */
 
 :root {
-  --bg-desktop: #1a1b2e;
+  --bg-desktop: #f5f4f0;
   --bg-window: #ffffff;
-  --bg-window-header: #f0f0f3;
-  --bg-window-header-inactive: #e8e8eb;
-  --bg-taskbar: rgba(30, 31, 48, 0.92);
-  --bg-icon-hover: rgba(255, 255, 255, 0.08);
-  --bg-tooltip: rgba(20, 20, 30, 0.95);
-
-  --text-primary: #1d1d1f;
-  --text-secondary: #6e6e73;
-  --text-muted: #86868b;
-  --text-desktop: #e0e0e6;
-  --text-desktop-shadow: rgba(0, 0, 0, 0.6);
-  --text-link: #0071e3;
-
-  --border-window: rgba(0, 0, 0, 0.12);
-  --border-subtle: rgba(0, 0, 0, 0.06);
-
-  --shadow-window: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
-  --shadow-window-focused: 0 12px 48px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
-  --shadow-taskbar: 0 -1px 12px rgba(0, 0, 0, 0.2);
-
-  --radius-window: 10px;
-  --radius-btn: 6px;
-  --radius-icon: 8px;
+  --bg-window-header: #fafaf9;
+  --bg-window-header-inactive: #f5f5f3;
+  --bg-taskbar: #ffffff;
+  --bg-icon-hover: rgba(0, 0, 0, 0.04);
+  --bg-tooltip: rgba(30, 30, 30, 0.9);
+
+  --text-primary: #1a1a1a;
+  --text-secondary: #6b6b6b;
+  --text-muted: #999999;
+  --text-desktop: #1a1a1a;
+  --text-desktop-shadow: none;
+  --text-link: #1a1a1a;
+
+  --border-window: rgba(255, 255, 255, 0.7);
+  --border-subtle: rgba(0, 0, 0, 0.03);
+
+  --shadow-window: 0 30px 60px rgba(0, 0, 0, 0.05);
+  --shadow-window-focused: 0 30px 60px rgba(0, 0, 0, 0.08);
+  --shadow-taskbar: 0 15px 40px rgba(0, 0, 0, 0.1);
+
+  --radius-window: 32px;
+  --radius-btn: 14px;
+  --radius-icon: 16px;
 
   --z-desktop: 1;
   --z-window-base: 100;
@@ -42,12 +42,12 @@
   --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono",
                Menlo, Consolas, monospace;
 
-  --accent: #6c5ce7;
-  --accent-light: #a29bfe;
-  --green: #00b894;
-  --yellow: #fdcb6e;
-  --red: #ff6b6b;
-  --orange: #e17055;
+  --accent: #1a1a1a;
+  --accent-light: #f0f0ee;
+  --green: #40916c;
+  --yellow: #dda15e;
+  --red: #e07a5f;
+  --orange: #d4a373;
 }
 
 *, *::before, *::after {
@@ -139,23 +139,29 @@ button {
 .btn-primary {
   background: var(--accent);
   color: white;
+  border-radius: 100px;
+  font-weight: 600;
+  padding: 0.7rem 1.5rem;
 }
 .btn-primary:hover {
-  background: #5b4bd5;
+  background: #333;
   transform: translateY(-1px);
 }
 
 .btn-secondary {
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--accent-light);
   color: var(--text-primary);
+  border-radius: 100px;
+  font-weight: 600;
+  padding: 0.7rem 1.5rem;
 }
 .btn-secondary:hover {
-  background: rgba(0, 0, 0, 0.1);
+  background: #e8e8e5;
 }
 
 /* Mobile responsive */
 @media (max-width: 768px) {
   :root {
-    --radius-window: 12px;
+    --radius-window: 24px;
   }
 }
diff --git a/website/js/desktop.js b/website/js/desktop.js
@@ -16,13 +16,13 @@
 
   // Desktop icon definitions
   const icons = [
-    { id: 'getting-started', label: 'getting-started.md', icon: '\uD83D\uDCC4', action: openGettingStarted },
-    { id: 'examples',        label: 'examples/',          icon: '\uD83D\uDCC1', action: openExamples },
-    { id: 'playground',      label: 'playground.app',     icon: '\uD83D\uDE80', action: openPlayground },
-    { id: 'docs',            label: 'docs/',              icon: '\uD83D\uDCC1', action: () => window.open('https://github.com/meherpanguluri/lightshell', '_blank') },
-    { id: 'benchmarks',      label: 'benchmarks.csv',     icon: '\uD83D\uDCCA', action: openBenchmarks },
-    { id: 'about',           label: 'about.txt',          icon: '\uD83D\uDCC4', action: openAbout },
-    { id: 'github',          label: 'github.link',        icon: '<img src="assets/icons/github.svg" width="32" height="32" alt="GitHub">', action: () => window.open('https://github.com/meherpanguluri/lightshell', '_blank') },
+    { id: 'getting-started', label: 'getting-started.md', icon: '\uD83D\uDCD6', action: openGettingStarted },
+    { id: 'examples',        label: 'examples/',          icon: '\uD83D\uDDC2\uFE0F', action: openExamples },
+    { id: 'playground',      label: 'playground.app',     icon: '\u26A1',       action: openPlayground },
+    { id: 'docs',            label: 'docs/',              icon: '\uD83D\uDCDA', action: () => window.open('https://github.com/meherpanguluri/lightshell', '_blank') },
+    { id: 'benchmarks',      label: 'benchmarks.csv',     icon: '\uD83D\uDCC8', action: openBenchmarks },
+    { id: 'about',           label: 'about.txt',          icon: '\uD83D\uDCA1', action: openAbout },
+    { id: 'github',          label: 'github.link',        icon: '<img src="assets/icons/github.svg" width="36" height="36" alt="GitHub" style="filter: brightness(0.2)">', action: () => window.open('https://github.com/meherpanguluri/lightshell', '_blank') },
   ]
 
   // Render desktop icons
diff --git a/website/js/easter-eggs.js b/website/js/easter-eggs.js
diff --git a/website/js/playground.js b/website/js/playground.js

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@`
`65`	`65`	`color: #fff;`
`66`	`66`	`}`
`67`	`67`	`.example-list li.active {`
`68`		`- background: rgba(108, 92, 231, 0.2);`
	`68`	`+ background: rgba(255, 255, 255, 0.12);`
`69`	`69`	`color: #fff;`
`70`	`70`	`}`
`71`	`71`
`@@ -105,7 +105,7 @@`
`105`	`105`	`color: white;`
`106`	`106`	`}`
`107`	`107`	`.toolbar-btn.run:hover {`
`108`		`- background: #5b4bd5;`
	`108`	`+ background: #333;`
`109`	`109`	`}`
`110`	`110`
`111`	`111`	`.toolbar-size {`