Skip to content

Revamp UI with zen woodleaf theme #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rohan-patnaik merged 1 commit into from
Feb 4, 2026
Merged

Revamp UI with zen woodleaf theme #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 149 additions & 39 deletions apps/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,50 @@
@import "tailwindcss";

:root {
--paper-50: 247 240 229;
--paper-100: 240 229 210;
--paper-200: 227 212 187;
--paper-300: 213 196 166;
--ink-900: 43 39 35;
--ink-700: 77 70 63;
--ink-500: 107 98 88;
--forest-700: 23 55 45;
--forest-600: 31 67 56;
--forest-500: 42 87 71;
--sage-200: 215 228 214;
--paper-50: 248 243 232;
--paper-100: 242 232 214;
--paper-200: 229 213 187;
--paper-300: 214 191 154;
--ink-900: 52 40 30;
--ink-700: 90 72 58;
--ink-500: 119 101 85;
--forest-700: 46 78 55;
--forest-600: 63 98 70;
--forest-500: 83 125 86;
--sage-200: 210 224 206;
--rose-100: 246 235 224;
--gold-200: 230 212 176;
--paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.3'/></svg>");
--gold-200: 229 210 179;
--wood-800: 84 56 36;
--wood-700: 101 68 43;
--wood-600: 123 84 55;
--wood-500: 145 104 71;
--wood-400: 171 130 96;
--leaf-300: 199 214 188;
--leaf-500: 108 149 112;
--leaf-700: 73 111 77;
--paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.25'/></svg>");
--leaf-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23c6d7c0' stroke-width='2' opacity='0.6'><path d='M24 42c18 2 26 12 28 28-16-2-26-12-28-28Z'/><path d='M130 22c-14 7-19 20-16 36 15-7 20-19 16-36Z'/><path d='M98 118c-18 1-27 11-30 29 17-2 27-11 30-29Z'/></g></svg>");
--leaf-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23f2ead6' d='M5 13c5-6 10-7 14-6 0 7-4 11-10 12-2-1-3-3-4-6z'/><path fill='none' stroke='%2383a26a' stroke-width='1.4' d='M7 13c4-4 7-5 11-5-1 6-4 9-9 10'/></svg>");
}

body {
min-height: 100%;
background-color: rgb(var(--paper-50));
background-image: radial-gradient(
background-image:
radial-gradient(
circle at top,
rgb(246 236 224 / 0.8),
rgb(252 246 234 / 0.9),
transparent 55%
),
radial-gradient(
circle at 15% 30%,
rgb(231 217 183 / 0.6),
circle at 12% 25%,
rgb(229 212 186 / 0.55),
transparent 45%
);
),
var(--leaf-pattern);
background-size: auto, auto, 260px 260px;
background-repeat: no-repeat, no-repeat, repeat;
background-attachment: fixed;
color: rgb(var(--ink-900));
font-family: var(--font-body), serif;
position: relative;
Expand All @@ -41,11 +56,29 @@ body::before {
position: fixed;
inset: 0;
background-image: var(--paper-noise);
opacity: 0.18;
opacity: 0.22;
pointer-events: none;
z-index: 0;
}

body::after {
content: "";
position: fixed;
inset: 12px;
border-radius: 26px;
border: 6px solid rgb(var(--wood-500) / 0.35);
box-shadow:
inset 0 0 0 2px rgb(255 255 255 / 0.35),
0 22px 45px -30px rgba(84, 56, 36, 0.65);
pointer-events: none;
z-index: 1;
}

body > * {
position: relative;
z-index: 2;
}

a {
color: inherit;
}
Expand All @@ -60,17 +93,21 @@ h4 {
}

.paper-card {
background: linear-gradient(
145deg,
rgb(var(--paper-50)),
rgb(var(--paper-100))
);
border-radius: 28px;
border: 1px solid rgb(var(--ink-900) / 0.12);
background:
linear-gradient(
165deg,
rgb(var(--paper-50)),
rgb(var(--paper-100))
),
var(--leaf-pattern);
background-size: auto, 220px 220px;
background-repeat: no-repeat, repeat;
border-radius: 26px;
border: 2px solid rgb(var(--wood-400) / 0.55);
box-shadow:
0 22px 45px -34px rgba(34, 26, 18, 0.65),
0 6px 14px -12px rgba(34, 26, 18, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
0 18px 40px -28px rgba(60, 40, 22, 0.65),
0 8px 16px -10px rgba(60, 40, 22, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.paper-stack {
Expand All @@ -79,29 +116,51 @@ h4 {
rgb(var(--paper-100)),
rgb(var(--paper-200))
);
border-radius: 34px;
border: 1px solid rgb(var(--ink-900) / 0.1);
border-radius: 32px;
border: 2px solid rgb(var(--wood-400) / 0.4);
box-shadow:
0 28px 60px -40px rgba(34, 26, 18, 0.6),
0 10px 20px -14px rgba(34, 26, 18, 0.35);
0 28px 60px -40px rgba(60, 40, 22, 0.55),
0 10px 22px -16px rgba(60, 40, 22, 0.3);
}

.paper-button {
background: rgb(var(--forest-600));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
background: linear-gradient(
180deg,
rgb(var(--forest-500)),
rgb(var(--forest-700))
);
color: rgb(var(--paper-50));
border-radius: 999px;
padding: 0.7rem 1.6rem;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow:
0 12px 24px -18px rgba(31, 67, 56, 0.8),
0 12px 24px -18px rgba(40, 62, 38, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease,
background 0.2s ease;
}

.paper-button::before {
content: "";
width: 16px;
height: 16px;
background-image: var(--leaf-icon);
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
}

.paper-button:hover {
background: rgb(var(--forest-500));
background: linear-gradient(
180deg,
rgb(var(--forest-500)),
rgb(var(--forest-600))
);
transform: translateY(-1px);
}

Expand All @@ -110,8 +169,10 @@ h4 {
color: rgb(var(--ink-700));
border-radius: 999px;
padding: 0.55rem 1.3rem;
border: 1px solid rgb(var(--ink-900) / 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
border: 2px solid rgb(var(--wood-400) / 0.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 8px 16px -12px rgba(60, 40, 22, 0.35);
transition: background 0.2s ease, color 0.2s ease;
}

Expand All @@ -132,11 +193,60 @@ h4 {
background: linear-gradient(
90deg,
rgb(var(--ink-900) / 0),
rgb(var(--ink-900) / 0.2),
rgb(var(--wood-600) / 0.35),
rgb(var(--ink-900) / 0)
);
}

.wood-nav {
background:
linear-gradient(
180deg,
rgb(var(--wood-500)),
rgb(var(--wood-700))
);
border-radius: 999px;
border: 2px solid rgb(var(--wood-800) / 0.6);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 14px 24px -18px rgba(60, 40, 22, 0.6);
padding: 0.65rem 1.25rem;
}

.wood-nav a,
.wood-nav button {
color: rgb(var(--paper-50));
}

.wood-nav .paper-button--ghost {
background: rgb(var(--paper-50) / 0.16);
color: rgb(var(--paper-50));
border-color: rgb(255 255 255 / 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.wood-nav .paper-button {
background: linear-gradient(
180deg,
rgb(var(--leaf-500)),
rgb(var(--leaf-700))
);
}

.tool-card {
background:
linear-gradient(
160deg,
rgb(var(--paper-50)),
rgb(var(--paper-100))
),
var(--leaf-pattern);
border: 2px solid rgb(var(--wood-400) / 0.65);
box-shadow:
0 16px 28px -22px rgba(60, 40, 22, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.fade-up {
animation: fade-up 0.75s ease both;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/tools/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,7 +843,7 @@ export default function ToolsPage() {
type="button"
onClick={() => selectTool(item.id)}
aria-pressed={item.id === activeTool}
className={`paper-card w-full p-4 text-left transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forest-500/40 hover:shadow-paper-lift active:translate-y-0.5 active:shadow-paper ${
className={`paper-card tool-card w-full p-4 text-left transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forest-500/40 hover:shadow-paper-lift active:translate-y-0.5 active:shadow-paper ${
item.id === activeTool
? "border-forest-600/60 ring-2 ring-forest-600/20"
: "hover:border-forest-600/30 hover:ring-1 hover:ring-forest-600/10"
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/SiteHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function SiteHeader() {

return (
<header className="relative z-20">
<div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-6">
<div className="wood-nav mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
<Link href="/" className="flex items-center gap-3">
<div className="flex h-11 w-11 items-center justify-center rounded-[18px] border border-ink-900/15 bg-paper-100 text-lg font-display text-ink-900 shadow-paper">
Z
Expand Down