feat(design): modern blue ink accent + stronger paper grain
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 39s
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:
parent
2452f2642a
commit
f1e0c4e3b4
@ -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 (2–6px).
|
||||
* - 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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user