Claude Design handoff: Handler mobile app design

2026-09-21 18:16:23 +00:00 · 2026-07-20 18:34:27 +00:00
commit f143959b52
15 changed files with 5905 additions and 0 deletions
@@ -0,0 +1,74 @@
+/* Leeworks color system — bright white base, ink-led near-monochrome. */
+:root{
+  /* Base scale (warm-neutral ink ramp) */
+  --white:#ffffff;
+  --ink-0:#fcfcfb;
+  --ink-1:#f6f6f4;
+  --ink-2:#ececea;
+  --ink-3:#dcdcd8;
+  --ink-4:#b8b8b3;
+  --ink-5:#8b8b86;
+  --ink-6:#62625e;
+  --ink-7:#3d3d3a;
+  --ink-8:#232321;
+  --ink-9:#141413;
+
+  /* Signal (the one non-neutral: a deep leaf green used sparingly) */
+  --signal:#1d6b45;
+  --signal-strong:#155236;
+  --signal-tint:#e8f2ec;
+
+  /* Semantic status (muted, low-saturation) */
+  --positive:#1d6b45;
+  --positive-tint:#e8f2ec;
+  --warning:#8a6116;
+  --warning-tint:#f7efdd;
+  --danger:#a33a2f;
+  --danger-tint:#f9e9e6;
+
+  /* Semantic aliases — light */
+  --surface-page:var(--white);
+  --surface-raised:var(--white);
+  --surface-sunken:var(--ink-1);
+  --surface-card:var(--white);
+  --surface-inverse:var(--ink-9);
+  --text-heading:var(--ink-9);
+  --text-body:var(--ink-7);
+  --text-muted:var(--ink-5);
+  --text-inverse:var(--ink-0);
+  --text-link:var(--ink-9);
+  --border-subtle:var(--ink-2);
+  --border-default:var(--ink-3);
+  --border-strong:var(--ink-9);
+  --interactive:var(--ink-9);
+  --interactive-hover:var(--ink-7);
+  --interactive-press:#000000;
+  --focus-ring:rgba(20,20,19,.28);
+}
+[data-theme="dark"]{
+  --surface-page:#161615;
+  --surface-raised:#1e1e1d;
+  --surface-sunken:#111110;
+  --surface-card:#1e1e1d;
+  --surface-inverse:var(--ink-0);
+  --text-heading:#f4f4f2;
+  --text-body:#c9c9c4;
+  --text-muted:#8b8b86;
+  --text-inverse:var(--ink-9);
+  --text-link:#f4f4f2;
+  --border-subtle:#2b2b29;
+  --border-default:#3a3a37;
+  --border-strong:#f4f4f2;
+  --interactive:#f4f4f2;
+  --interactive-hover:#d8d8d4;
+  --interactive-press:#ffffff;
+  --focus-ring:rgba(244,244,242,.35);
+  --signal:#4fa377;
+  --signal-tint:#1d2f26;
+  --positive:#4fa377;
+  --positive-tint:#1d2f26;
+  --warning:#c99a3f;
+  --warning-tint:#2f2818;
+  --danger:#d0685c;
+  --danger-tint:#331e1b;
+}
@@ -0,0 +1,19 @@
+/* Leeworks effects — soft rounding, hairline borders, restrained shadows. */
+:root{
+  --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:16px; --radius-pill:999px;
+
+  --shadow-card:0 1px 2px rgba(20,20,19,.05);
+  --shadow-raised:0 2px 8px rgba(20,20,19,.07),0 1px 2px rgba(20,20,19,.05);
+  --shadow-overlay:0 12px 40px rgba(20,20,19,.14),0 2px 8px rgba(20,20,19,.06);
+  --shadow-focus:0 0 0 3px var(--focus-ring);
+
+  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
+  --dur-fast:120ms; /* @kind other */
+  --dur-base:180ms; /* @kind other */
+  --dur-slow:280ms; /* @kind other */
+}
+[data-theme="dark"]{
+  --shadow-card:0 1px 2px rgba(0,0,0,.4);
+  --shadow-raised:0 2px 8px rgba(0,0,0,.5);
+  --shadow-overlay:0 12px 40px rgba(0,0,0,.6);
+}
@@ -0,0 +1,2 @@
+/* Leeworks webfonts — served from Google Fonts (no local binaries provided). */
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap");
@@ -0,0 +1,11 @@
+/* Leeworks spacing — 4px base, comfortable (not dense) rhythm. */
+:root{
+  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
+  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
+  --space-9:56px; --space-10:80px; --space-11:120px;
+
+  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;
+  --control-pad-x-sm:12px; --control-pad-x-md:16px; --control-pad-x-lg:20px;
+
+  --page-max:1200px; --content-max:720px; --gutter:24px;
+}
@@ -0,0 +1,27 @@
+/* Leeworks typography — Outfit (display), Figtree (body), Spline Sans Mono (data/code). */
+:root{
+  --font-display:"Outfit",system-ui,sans-serif;
+  --font-body:"Figtree",system-ui,sans-serif;
+  --font-mono:"Spline Sans Mono",ui-monospace,monospace;
+
+  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
+  --text-lg:20px; --text-xl:24px; --text-2xl:32px; --text-3xl:44px; --text-4xl:60px;
+
+  --leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.55;
+  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.08em;
+
+  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-heavy:800;
+
+  /* Composite styles */
+  --type-display:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
+  --type-h1:var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
+  --type-h2:var(--weight-semibold) var(--text-2xl)/1.2 var(--font-display);
+  --type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
+  --type-h4:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-display);
+  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
+  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
+  --type-label:var(--weight-semibold) var(--text-sm)/1.2 var(--font-body);
+  --type-caption:var(--weight-medium) var(--text-xs)/1.4 var(--font-body);
+  --type-overline:var(--weight-semibold) var(--text-xs)/1.2 var(--font-display);
+  --type-mono:var(--weight-regular) var(--text-sm)/1.5 var(--font-mono);
+}