Mark
5efc2a89e3
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>
274 lines
11 KiB
CSS
274 lines
11 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
|
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;
|
|
}
|
|
}
|