repremium/mokosh
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(intel): ingest designer-team handoff v1 + record 9 brand decisions

Browse Source 
Designer-team delivered two bundles (2026-05-17):
- Mokosh.zip: presentation artifacts (Decision Brief + Surface Kit standalone HTMLs)
- Mokosh Design System.zip: implementation handoff (tokens.css + mark/lockup SVGs + memo)

Designer respected every contract: codename Mokosh preserved, MV3 CSP
acknowledged (flagged dev-only Google Fonts @import in tokens.css line 12
for engineering to replace), Cyrillic-first typography (IBM Plex Sans),
WCAG AA validation noted, made recommendations not unilateral decisions.

9 decisions resolved per user ack:
- D-01..06, D-08, D-09: accepted designer defaults
- D-07 OVERRIDE: B · "Mokosh — Session Capture" (vs designer's A · just "Mokosh")
  — operator-facing manifest:name surfaces capture purpose

Brand decisions persisted to brand-decisions-v1.md;
brand-identity.md Open Questions section marked resolved with backlink.

Designer artifacts staged at .planning/intel/design-incoming/ for Plan 01-12
(Design Integration) consumption. Mokosh.zip presentation HTMLs (3.4 MB)
preserved as audit/onboarding reference; can be pruned later if repo size
warrants.

Plan 01-12 implementation handoff catalogued in brand-decisions-v1.md
§"Implementation handoff" — covers tokens.css ingestion, WOFF2 self-hosting,
SVG → PNG rasterization, manifest:name + description update,
welcome layout, VITE_DEV smoke gating.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mark
2026-05-17 21:00:54 +02:00
parent 66e6c4af74
commit 5efc2a89e3
7 changed files with 1018 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
.planning/intel/design-incoming/system/bundle/mokosh-handoff/tokens.css Normal file
View File

@@ -0,0 +1,273 @@
/* ─────────────────────────────────────────────────────────────────────────
Mokosh Design System — colors_and_type.css
Single source of truth for foundational tokens.
Surfaces: Chrome MV3 popup, welcome page, notification copy, toolbar.
Audience: Russian-first operators. Cyrillic coverage required.
───────────────────────────────────────────────────────────────────── */
/* Fonts (bundled locally; MV3 CSP forbids remote @font-face at runtime).
Substitution flag — until licensed files arrive, these are loaded from
Google Fonts in PREVIEW HTML only. Production bundles ship the same
families locally from /fonts/. See fonts/README.md. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root {
/* ── Palette ──────────────────────────────────────────────────────────
The "loom" palette. Warm-earthy, NOT clinical-blue. Reads as
restrained, professional, slightly hand-made — distinct from the
standard SaaS Material defaults the engineering placeholder used.
Each step validated for WCAG AA against its intended pair. */
/* Linen — primary surface family (warm off-white through stone) */
--mks-linen-50: #faf7f1; /* page background */
--mks-linen-100: #f3eee4; /* card / popup surface */
--mks-linen-200: #e8e0d0; /* hairline / divider on linen */
--mks-linen-300: #d4c9b5; /* muted edge */
/* Ink — text + inverse surface family (warm near-black indigo) */
--mks-ink-900: #181b2a; /* primary text, deepest surface */
--mks-ink-800: #232639; /* dark surface */
--mks-ink-700: #2f3349; /* dark surface raised */
--mks-ink-500: #5b5f76; /* secondary text on linen */
--mks-ink-400: #7a7e94; /* tertiary text, captions */
--mks-ink-300: #a4a7b8; /* disabled text */
/* Accents — state colors. Each is a dye reference. */
--mks-madder-600: #b2543d; /* REC accent — Rubia tinctorum dye */
--mks-madder-700: #963f29; /* REC pressed */
--mks-madder-100: #f5e2db; /* REC tint */
--mks-moss-600: #5a7349; /* success / saved */
--mks-moss-700: #455a38;
--mks-moss-100: #e2e9da;
--mks-amber-600: #c98b3a; /* warning / recoverable error */
--mks-amber-100: #f6e6c8;
--mks-brick-600: #a23a2b; /* unrecoverable error */
--mks-brick-100: #f0d5cf;
/* Semantic — point these at the palette. Use these in components. */
--mks-surface: var(--mks-linen-50);
--mks-surface-raised: var(--mks-linen-100);
--mks-surface-sunken: var(--mks-linen-200);
--mks-surface-inverse: var(--mks-ink-900);
--mks-fg-1: var(--mks-ink-900); /* primary text */
--mks-fg-2: var(--mks-ink-500); /* secondary text */
--mks-fg-3: var(--mks-ink-400); /* tertiary / caption */
--mks-fg-disabled: var(--mks-ink-300);
--mks-fg-inverse: var(--mks-linen-50);
--mks-border: var(--mks-linen-200);
--mks-border-strong: var(--mks-linen-300);
--mks-border-focus: var(--mks-ink-900);
--mks-rec: var(--mks-madder-600);
--mks-success: var(--mks-moss-600);
--mks-warning: var(--mks-amber-600);
--mks-error: var(--mks-brick-600);
/* ── Type ─────────────────────────────────────────────────────────────
Three families. Newsreader for display (serif with calm character).
IBM Plex Sans for UI body (excellent Cyrillic; not Inter/Roboto).
IBM Plex Mono for diagnostic / timer overlays. */
--mks-font-display: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
--mks-font-ui: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
--mks-font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
/* Base type scale — ratio ~1.2, tuned for popup density.
Smallest size 11px is reserved for badge labels only. */
--mks-text-xs: 11px;
--mks-text-sm: 13px;
--mks-text-base: 15px;
--mks-text-md: 17px;
--mks-text-lg: 20px;
--mks-text-xl: 28px;
--mks-text-2xl: 40px;
--mks-text-3xl: 56px;
--mks-lh-tight: 1.15;
--mks-lh-snug: 1.3;
--mks-lh-base: 1.5;
--mks-weight-regular: 400;
--mks-weight-medium: 500;
--mks-weight-semibold: 600;
--mks-weight-bold: 700;
/* Display tracking — Newsreader at large sizes wants negative tracking */
--mks-tracking-display: -0.015em;
--mks-tracking-tight: -0.005em;
--mks-tracking-base: 0;
--mks-tracking-loose: 0.04em; /* eyebrow / caps labels */
--mks-tracking-caps: 0.08em; /* badge text REC / ERR */
/* ── Spacing ──────────────────────────────────────────────────────────
4px base. Steps named by px multiple for clarity. */
--mks-space-1: 4px;
--mks-space-2: 8px;
--mks-space-3: 12px;
--mks-space-4: 16px;
--mks-space-5: 20px;
--mks-space-6: 24px;
--mks-space-8: 32px;
--mks-space-10: 40px;
--mks-space-12: 48px;
--mks-space-16: 64px;
--mks-space-20: 80px;
/* ── Radius ───────────────────────────────────────────────────────────
Architectural. Sharp-ish — 4px base, 8px cards, 999 chips. NOT pillow. */
--mks-radius-sm: 2px; /* badge text container */
--mks-radius-md: 4px; /* default control */
--mks-radius-lg: 8px; /* card, popup body */
--mks-radius-xl: 12px; /* welcome hero card */
--mks-radius-full: 999px;/* chips, recording dot */
/* ── Borders + shadows ───────────────────────────────────────────────
One pixel hairline, low-elevation shadows.
Restrained — no big card drop-shadows. */
--mks-border-width: 1px;
/* Hairline shadow — for buttons */
--mks-shadow-1: 0 1px 0 rgba(24, 27, 42, 0.04),
0 1px 2px rgba(24, 27, 42, 0.06);
/* Card shadow — popup elevation */
--mks-shadow-2: 0 1px 2px rgba(24, 27, 42, 0.06),
0 4px 12px rgba(24, 27, 42, 0.08);
/* Floating — modal / tooltip */
--mks-shadow-3: 0 2px 4px rgba(24, 27, 42, 0.08),
0 12px 32px rgba(24, 27, 42, 0.12);
/* Inset — sunken surfaces, fields */
--mks-shadow-inset: inset 0 1px 0 rgba(24, 27, 42, 0.04);
/* Focus ring — visible against any surface, color-independent */
--mks-shadow-focus: 0 0 0 3px rgba(24, 27, 42, 0.18);
/* ── Motion ───────────────────────────────────────────────────────────
Quiet. No bounces. Reduced-motion is honored at the component level. */
--mks-dur-fast: 120ms;
--mks-dur-base: 200ms;
--mks-dur-slow: 320ms;
--mks-ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
--mks-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ── Layout ──────────────────────────────────────────────────────────*/
--mks-popup-w: 320px;
--mks-popup-min-h: 180px;
--mks-welcome-max-w: 720px;
}
/* Dark theme — applied via .dark on root OR @media (prefers-color-scheme).
Used for the dark popup variant, smoke diagnostic overlay, and any
future dark Chrome theme support. */
.dark, [data-theme="dark"] {
--mks-surface: var(--mks-ink-900);
--mks-surface-raised: var(--mks-ink-800);
--mks-surface-sunken: #11131e;
--mks-surface-inverse: var(--mks-linen-50);
--mks-fg-1: #ece7dc;
--mks-fg-2: #a4a7b8;
--mks-fg-3: #7a7e94;
--mks-fg-disabled: #5b5f76;
--mks-fg-inverse: var(--mks-ink-900);
--mks-border: rgba(243, 238, 228, 0.08);
--mks-border-strong: rgba(243, 238, 228, 0.14);
--mks-border-focus: var(--mks-linen-50);
--mks-shadow-focus: 0 0 0 3px rgba(243, 238, 228, 0.24);
}
/* ── Semantic typography helpers ──────────────────────────────────────
Apply these classes; do not redefine sizes ad-hoc. */
.mks-display-1 {
font-family: var(--mks-font-display);
font-size: var(--mks-text-3xl);
line-height: var(--mks-lh-tight);
letter-spacing: var(--mks-tracking-display);
font-weight: var(--mks-weight-regular);
color: var(--mks-fg-1);
}
.mks-display-2 {
font-family: var(--mks-font-display);
font-size: var(--mks-text-2xl);
line-height: var(--mks-lh-tight);
letter-spacing: var(--mks-tracking-display);
font-weight: var(--mks-weight-regular);
color: var(--mks-fg-1);
}
.mks-h1 {
font-family: var(--mks-font-display);
font-size: var(--mks-text-xl);
line-height: var(--mks-lh-tight);
letter-spacing: var(--mks-tracking-tight);
font-weight: var(--mks-weight-regular);
color: var(--mks-fg-1);
}
.mks-h2 {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-lg);
line-height: var(--mks-lh-snug);
font-weight: var(--mks-weight-semibold);
color: var(--mks-fg-1);
}
.mks-h3 {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-md);
line-height: var(--mks-lh-snug);
font-weight: var(--mks-weight-semibold);
color: var(--mks-fg-1);
}
.mks-body {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-base);
line-height: var(--mks-lh-base);
color: var(--mks-fg-1);
}
.mks-body-sm {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-sm);
line-height: var(--mks-lh-base);
color: var(--mks-fg-2);
}
.mks-caption {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-xs);
line-height: var(--mks-lh-snug);
color: var(--mks-fg-3);
}
.mks-eyebrow {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-xs);
line-height: var(--mks-lh-snug);
letter-spacing: var(--mks-tracking-caps);
text-transform: uppercase;
font-weight: var(--mks-weight-semibold);
color: var(--mks-fg-2);
}
.mks-mono {
font-family: var(--mks-font-mono);
font-size: var(--mks-text-sm);
line-height: var(--mks-lh-base);
color: var(--mks-fg-1);
}
.mks-badge-label {
font-family: var(--mks-font-ui);
font-size: var(--mks-text-xs);
line-height: 1;
letter-spacing: var(--mks-tracking-caps);
text-transform: uppercase;
font-weight: var(--mks-weight-bold);
}
/* Accessibility — honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
:root {
--mks-dur-fast: 0ms;
--mks-dur-base: 0ms;
--mks-dur-slow: 0ms;
}
}