diff --git a/web/src/design/tokens.ts b/web/src/design/tokens.ts index c78791c..ab7921d 100644 --- a/web/src/design/tokens.ts +++ b/web/src/design/tokens.ts @@ -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", diff --git a/web/src/index.css b/web/src/index.css index 887b3ce..ef8e2e8 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -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,"); + background-image: url("data:image/svg+xml;utf8,"); 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; } } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 3f47fb7..5f9c475 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -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",