Milestone v1 (v2.0.0): Mokosh — Session Capture #1
22
src/shared/brand/mokosh-lockup.svg
Normal file
22
src/shared/brand/mokosh-lockup.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 56" fill="none">
|
||||
|
||||
|
||||
<g transform="translate(0, 12)" stroke="#181b2a" stroke-width="2.25" stroke-linecap="square">
|
||||
<rect x="2.5" y="2.5" width="27" height="27" rx="3.5" ry="3.5"></rect>
|
||||
<line x1="12" y1="2.5" x2="12" y2="11.5"></line>
|
||||
<line x1="12" y1="14.5" x2="12" y2="17.5"></line>
|
||||
<line x1="12" y1="20.5" x2="12" y2="29.5"></line>
|
||||
<line x1="20" y1="2.5" x2="20" y2="11.5"></line>
|
||||
<line x1="20" y1="14.5" x2="20" y2="17.5"></line>
|
||||
<line x1="20" y1="20.5" x2="20" y2="29.5"></line>
|
||||
<line x1="2.5" y1="13" x2="10.5" y2="13"></line>
|
||||
<line x1="13.5" y1="13" x2="18.5" y2="13"></line>
|
||||
<line x1="21.5" y1="13" x2="29.5" y2="13"></line>
|
||||
<line x1="2.5" y1="19" x2="10.5" y2="19"></line>
|
||||
<line x1="13.5" y1="19" x2="18.5" y2="19"></line>
|
||||
<line x1="21.5" y1="19" x2="29.5" y2="19"></line>
|
||||
</g>
|
||||
|
||||
<text x="48" y="40" class="mks-word">Mokosh</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 961 B |
25
src/shared/brand/mokosh-mark.svg
Normal file
25
src/shared/brand/mokosh-mark.svg
Normal file
@@ -0,0 +1,25 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="#181b2a" stroke-width="2.25" stroke-linecap="square" stroke-linejoin="miter">
|
||||
|
||||
<rect x="2.5" y="2.5" width="27" height="27" rx="3.5" ry="3.5"></rect>
|
||||
|
||||
|
||||
<line x1="12" y1="2.5" x2="12" y2="11.5"></line>
|
||||
<line x1="12" y1="14.5" x2="12" y2="17.5"></line>
|
||||
<line x1="12" y1="20.5" x2="12" y2="29.5"></line>
|
||||
|
||||
<line x1="20" y1="2.5" x2="20" y2="11.5"></line>
|
||||
<line x1="20" y1="14.5" x2="20" y2="17.5"></line>
|
||||
<line x1="20" y1="20.5" x2="20" y2="29.5"></line>
|
||||
|
||||
|
||||
|
||||
<line x1="2.5" y1="13" x2="10.5" y2="13"></line>
|
||||
<line x1="13.5" y1="13" x2="18.5" y2="13"></line>
|
||||
<line x1="21.5" y1="13" x2="29.5" y2="13"></line>
|
||||
|
||||
|
||||
<line x1="2.5" y1="19" x2="10.5" y2="19"></line>
|
||||
<line x1="13.5" y1="19" x2="18.5" y2="19"></line>
|
||||
<line x1="21.5" y1="19" x2="29.5" y2="19"></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 877 B |
354
src/shared/tokens.css
Normal file
354
src/shared/tokens.css
Normal file
@@ -0,0 +1,354 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
Mokosh Design System — tokens.css
|
||||
Single source of truth for foundational tokens.
|
||||
Surfaces: Chrome MV3 popup, welcome page, notification copy, toolbar.
|
||||
Audience: Russian-first operators. Cyrillic coverage required.
|
||||
|
||||
This file is the engineering working copy of the designer handoff at
|
||||
.planning/intel/design-incoming/system/bundle/mokosh-handoff/tokens.css.
|
||||
Three surgical edits applied for the engineering working copy (Plan
|
||||
01-12 Wave 1 Task 2):
|
||||
1. The handoff's PREVIEW-ONLY Google Fonts @import (handoff line 12)
|
||||
is REPLACED with the seven local @font-face rules below — MV3
|
||||
CSP requires self-hosting (style-src 'self' + font-src 'self').
|
||||
2. --mks-font-display value REPLACED from the handoff's serif
|
||||
family to "Lora" per R2 designer reply 2026-05-19 (full Cyrillic
|
||||
coverage via Cyreal foundry; see
|
||||
.planning/intel/brand-decisions-v1-followup-display-font.md).
|
||||
3. .mks-word class added at end-of-file per mokosh-lockup.svg line
|
||||
21 + RESEARCH §8.
|
||||
───────────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* ── Self-hosted fonts (MV3 CSP) ──
|
||||
Faces per D-05 with R2 substitution applied (designer reply
|
||||
2026-05-19; see brand-decisions-v1-followup-display-font.md).
|
||||
Subsetting: all faces are Latin (U+0020-007E + U+00A0-00FF)
|
||||
+ Cyrillic basic (U+0400-045F + supplemental code points per
|
||||
scripts/subset-fonts.sh recipe). All OFL-1.1 (LICENSE-Lora.txt +
|
||||
LICENSE-IBM-Plex.txt next to this directory). */
|
||||
|
||||
/* Lora variable — display family with full Cyrillic (R2 substitute, see brand-decisions-v1-followup) */
|
||||
@font-face {
|
||||
font-family: "Lora";
|
||||
src: url("./fonts/Lora-VariableFont.woff2") format("woff2-variations"),
|
||||
url("./fonts/Lora-VariableFont.woff2") format("woff2");
|
||||
font-weight: 400 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Lora";
|
||||
src: url("./fonts/Lora-Italic-VariableFont.woff2") format("woff2-variations"),
|
||||
url("./fonts/Lora-Italic-VariableFont.woff2") format("woff2");
|
||||
font-weight: 400 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* IBM Plex Sans — UI body family with full Cyrillic */
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("./fonts/IBMPlexSans-Regular.woff2") format("woff2");
|
||||
font-weight: 400; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("./fonts/IBMPlexSans-Medium.woff2") format("woff2");
|
||||
font-weight: 500; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("./fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
|
||||
font-weight: 600; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("./fonts/IBMPlexSans-Bold.woff2") format("woff2");
|
||||
font-weight: 700; font-style: normal; font-display: swap;
|
||||
}
|
||||
|
||||
/* IBM Plex Mono — diagnostic / timer family with full Cyrillic */
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2");
|
||||
font-weight: 400; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("./fonts/IBMPlexMono-Medium.woff2") format("woff2");
|
||||
font-weight: 500; font-style: normal; font-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. Lora for display (Cyreal foundry; R2 substitute per
|
||||
designer reply 2026-05-19; full Cyrillic coverage).
|
||||
IBM Plex Sans for UI body (excellent Cyrillic; not Inter/Roboto).
|
||||
IBM Plex Mono for diagnostic / timer overlays. */
|
||||
|
||||
--mks-font-display: "Lora", "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 — Lora 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Lockup wordmark — referenced by mokosh-lockup.svg line 21 ──
|
||||
The SVG inlines class="mks-word" on its <text> element so the engineering
|
||||
wordmark renders with the Lora display family. Per RESEARCH §8 + Plan
|
||||
01-12 interfaces block. */
|
||||
.mks-word {
|
||||
font-family: var(--mks-font-display);
|
||||
font-size: 32px;
|
||||
font-weight: var(--mks-weight-regular);
|
||||
letter-spacing: var(--mks-tracking-display);
|
||||
fill: var(--mks-ink-900);
|
||||
}
|
||||
Reference in New Issue
Block a user