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

View File

@ -18,16 +18,16 @@
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Paper texture — very subtle noise, 2% opacity */
/* Paper grain — fibrous noise, warm brown tint, multiply */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
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;
opacity: 0.35;
opacity: 0.6;
}
#root {
position: relative;
@ -47,9 +47,9 @@
.mono {
font-family: "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;
}
/* Selection: signal on quiet paper */
/* Selection: modern blue ink on paper */
::selection {
background: #7a2320;
background: #1d4ed8;
color: #f5f0e6;
}
}

View File

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