chore(qa): move Ethos design kit out of frontend/ into tracked design-system/

The kit (SKILL.md, ethos.tokens.css, ethos-icons.svg, .oxlintrc.json) lived inside frontend/ — the exact dir freestyle runs scaffold into. vite refuses a non-empty target, so every session improvised a stash-aside (frontend_backup/, frontend_temp/) and left scratch dirs behind. Move the kit to a sibling design-system/ so frontend/ starts clean, and deliver it via the L0 conventions channel (project.toml) rather than seeding files in the scaffold target: copy the token/icon assets in (don't read them), SKILL.md for rules only. Un-ignore frontend/ so scaffolded output is tracked going forward. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HMbPmZZjcXhR2crU82zZ8S
2026-07-21 21:11:42 +04:00
parent ac4601562a
commit cf9eecc895
6 changed files with 343 additions and 3 deletions
@@ -0,0 +1,122 @@
+/* ═══════════════════════════════════════════════════════════════
+   ETHOS — tokens
+   Shared design language for the kvmx.ru apps.
+
+   The neutral system (ramp, type, motion, radii, shadow) is shared by
+   every app and does not change. The only per-app difference is the
+   accent (one hue) and the motif (one geometric signature).
+
+   NEW APP: do not invent the accent silently. Ask the operator for the
+   accent name + hex and the motif, then add one [data-app] block at the
+   bottom using the TEMPLATE. Fonts are self-hosted (subset + woff2,
+   immutable caching) — no font CDN.
+   ═══════════════════════════════════════════════════════════════ */
+
+@font-face {
+  font-family: 'Geist';
+  src: url('/fonts/Geist-Variable.woff2') format('woff2');
+  font-weight: 100 900; font-display: swap;
+}
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900; font-display: swap;
+}
+
+:root {
+  /* ── neutral ramp — warm, brown-tinted (dark, default) ── */
+  --bg-0: #14110D;   /* deepest room */
+  --bg-1: #1B1712;   /* surface */
+  --bg-2: #221D17;   /* raised */
+  --bg-3: #2C261D;   /* hover / raised */
+  --bg-4: #372F24;   /* pressed / high */
+
+  --line:    rgba(244, 234, 220, 0.09);   /* hairline */
+  --line-hi: rgba(244, 234, 220, 0.16);   /* hairline emphasized */
+
+  --text-hi:      #F4EEE4;   /* human primary   (sans) */
+  --text-mid:     #B4AA98;   /* human secondary (sans) */
+  --text-lo:      #756C5C;   /* human tertiary / idle   */
+  --text-machine: #9C917D;   /* machine default (mono)  */
+
+  /* ── type ── */
+  --sans: 'Geist', -apple-system, system-ui, sans-serif;
+  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* mono numerics: apply on any element using --mono */
+  /* font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; */
+
+  /* ── motion — mechanical, no bounce ── */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --fast: 130ms;
+  --med:  170ms;
+
+  /* ── radii ── */
+  --r-sm: 8px;
+  --r-md: 12px;
+  --r-lg: 18px;
+  --r-xl: 24px;
+
+  /* ── elevation: depth from light, never blur ── */
+  --shadow-soft: 0 2px 8px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.28);
+  --shadow-lift: 0 4px 14px rgba(0,0,0,0.40), 0 20px 48px rgba(0,0,0,0.34);
+
+  /* ── accent slot ──
+     Neutral fallback so an app with no [data-app] is never unstyled.
+     Real values come from the per-app block below. Accent is a SIGNAL
+     (active state, focus ring, primary action, one lit detail) — never a
+     fill-everything wash. */
+  --accent:       var(--text-mid);
+  --accent-hi:    var(--text-hi);
+  --accent-dim:   rgba(244, 234, 220, 0.10);
+  --accent-line:  rgba(244, 234, 220, 0.24);
+  --accent-glow:  rgba(244, 234, 220, 0.14);
+}
+
+/* ── light theme — warm, off-white (kept off cream to dodge the AI-cream tell) ── */
+[data-theme="light"] {
+  --bg-0: #F1ECE3;
+  --bg-1: #EAE4D8;
+  --bg-2: #E2DACB;
+  --bg-3: #D7CDBB;
+  --bg-4: #C9BDA7;
+
+  --line:    rgba(28, 22, 14, 0.10);
+  --line-hi: rgba(28, 22, 14, 0.18);
+
+  --text-hi:      #1B1712;
+  --text-mid:     #544C3E;
+  --text-lo:      #877E6C;
+  --text-machine: #6B6252;
+
+  --shadow-soft: 0 2px 8px rgba(60,45,25,0.10), 0 12px 32px rgba(60,45,25,0.08);
+  --shadow-lift: 0 4px 14px rgba(60,45,25,0.12), 0 20px 48px rgba(60,45,25,0.10);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PER-APP OVERRIDES — one small block each. Accent + optional motif
+   hooks only; never touch the neutral ramp.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* muzick — reference app · honey amber · waveform */
+[data-app="muzick"] {
+  --accent:      #EDA24E;
+  --accent-hi:   #F5B667;
+  --accent-dim:  rgba(237, 162, 78, 0.14);
+  --accent-line: rgba(237, 162, 78, 0.32);
+  --accent-glow: rgba(237, 162, 78, 0.22);
+
+  /* motif hook: cool content-art gradient so art carries color, amber stays signal */
+  --np-art: radial-gradient(120% 120% at 22% 14%, #7FB3BC 0%, #2F6E7A 42%, #1C4552 78%, #14262E 100%);
+}
+
+/* ── TEMPLATE — copy for a new app AFTER intake with the operator ──
+[data-app="APPNAME"] {
+  --accent:      #RRGGBB;                     // the operator's chosen hue
+  --accent-hi:   #RRGGBB;                     // ~ +10–14% lightness
+  --accent-dim:  rgba(R, G, B, 0.14);         // active-state backgrounds
+  --accent-line: rgba(R, G, B, 0.32);         // accent hairlines
+  --accent-glow: rgba(R, G, B, 0.22);         // restrained ambient pool
+  // optional motif hooks (gradients / seeds) go here, app-specific
+}
+*/