feat(design): modern blue ink accent + stronger paper grain
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 39s

Shift signal from oxblood (#7A2320) to modern blue (#1D4ED8),
signal-quiet from warm rose to pale blue wash. Bump body grain
opacity 0.35 → 0.6 so the paper texture actually reads.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ordinarthur 2026-04-20 12:53:32 +02:00
parent 2452f2642a
commit f1e0c4e3b4
3 changed files with 12 additions and 12 deletions

View File

@ -1,9 +1,9 @@
/** /**
* AnyDrop design tokens Paper & Envelope direction. * AnyDrop design tokens Paper & Ink direction.
* *
* Principles: * Principles:
* - Paper-warm neutrals + ink black, never slate/grey-blue. * - Paper-warm neutrals + ink black; visible paper grain via body::before.
* - ONE signature accent (oxblood). Use sparingly accent earns its rarity. * - ONE signature accent (modern blue, like fountain-pen ink on paper).
* - Serif display + neutral sans body. Type does the heavy lifting, not color. * - Serif display + neutral sans body. Type does the heavy lifting, not color.
* - Shadows are textural, not dramatic. Radii stay sharp (26px). * - Shadows are textural, not dramatic. Radii stay sharp (26px).
* - Motion curves favor paper physics (ease-out-expo), never bounce. * - Motion curves favor paper physics (ease-out-expo), never bounce.
@ -16,8 +16,8 @@ export const color = {
inkMuted: "#6B635A", inkMuted: "#6B635A",
inkFaint: "#A89F93", inkFaint: "#A89F93",
signal: "#7A2320", signal: "#1D4ED8",
signalQuiet: "#F3E2E0", signalQuiet: "#E3EAF5",
ok: "#3E6B4A", ok: "#3E6B4A",
warn: "#8B6914", warn: "#8B6914",

View File

@ -18,16 +18,16 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
/* Paper texture — very subtle noise, 2% opacity */ /* Paper grain — fibrous noise, warm brown tint, multiply */
body::before { body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.32'/></svg>");
mix-blend-mode: multiply; mix-blend-mode: multiply;
opacity: 0.35; opacity: 0.6;
} }
#root { #root {
position: relative; position: relative;
@ -47,9 +47,9 @@
.mono { .mono {
font-family: "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace; font-family: "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;
} }
/* Selection: signal on quiet paper */ /* Selection: modern blue ink on paper */
::selection { ::selection {
background: #7a2320; background: #1d4ed8;
color: #f5f0e6; color: #f5f0e6;
} }
} }

View File

@ -10,8 +10,8 @@ export default {
ink: "#1A1714", ink: "#1A1714",
"ink-muted": "#6B635A", "ink-muted": "#6B635A",
"ink-faint": "#A89F93", "ink-faint": "#A89F93",
signal: "#7A2320", signal: "#1D4ED8",
"signal-quiet": "#F3E2E0", "signal-quiet": "#E3EAF5",
ok: "#3E6B4A", ok: "#3E6B4A",
warn: "#8B6914", warn: "#8B6914",
fail: "#8A3324", fail: "#8A3324",