/* blue-ink-interface 0.1.0 — version matches kit.json and .claude-plugin/plugin.json */ /* ============================================================ BLUE INK INTERFACE — TOKENS Spec-sheet modernism: hairline rules, cobalt ink, technical line drawings and monospace captions on white paper. No third-party marks. Swap these values to reskin the system. ============================================================ */ :root { /* ---- PAPER (opt-in: data-bi-mode="paper") --------------- Three inks on one sheet. The paper is the ground; every surface below is still paper, just a deeper inset of it. */ --bi-paper: #f4f3ef; /* the sheet */ --bi-paper-2: #e9e8e2; /* a grey card / inset */ --bi-paper-3: #dcdbd4; /* a deeper inset (wells, tracks) */ /* ---- INK ------------------------------------------------ */ /* Each surface has a matched foreground. --bi-dim is tuned to pass 4.5:1 on ALL THREE papers so a caption can sit on a card without a second token. --bi-faint is decorative only (the S2 S3 alternates under S1) and passes 3:1 on --bi-paper alone; on a card use --bi-dim. */ --bi-ink: #1a1a1a; /* content ink */ --bi-dim: #5c5c58; /* secondary text (6.05 / 5.47 / 4.84) */ --bi-faint: #8a8983; /* de-emphasized alternates (3.16 on paper) */ --bi-on-paper: var(--bi-ink); --bi-on-paper-2: var(--bi-ink); --bi-on-paper-3: var(--bi-ink); /* ---- STRUCTURAL INK (cobalt) ---------------------------- */ --bi-blue: #2544d4; /* rules, captions, links, the block, drawings */ --bi-blue-2: #1c36ad; /* pressed / hover */ --bi-tint: #c9d1f3; /* 25% blue; a fill that sits behind INK text. Text on tint is always --bi-ink, never --bi-dim. */ --bi-on-blue: #f4f3ef; /* text on the solid block */ --bi-on-blue-dim: #c5cef4; /* secondary text on the block (4.73) */ --bi-on-tint: var(--bi-ink); /* ---- LINES ---------------------------------------------- */ --bi-line: var(--bi-ink); --bi-line-blue: var(--bi-blue); --bi-line-faint: var(--bi-faint); --bi-rule: 1px; /* the ONLY line weight */ /* ---- THE FOURTH INK (fault and destructive only) -------- Vermilion, darkened from the ribbon orange until it passes 4.5:1 on every paper. It never appears for any other reason, and it never sits on the solid block. */ --bi-alert: #ad330b; /* 5.81 / 5.25 / 4.65 */ --bi-on-alert: #f4f3ef; /* ---- SPOT INKS (identity and emphasis, on request) ------ Six extra inks for when a product asks for color: a green play button, a reviewer's violet, a project's tag. Each has a matched foreground and a pale tint (text on a tint is always --bi-ink). A spot ink re-inks one control or one small group through .bi-spot--, never a region, at most two per screen, and never as the only signal of status or of a category. Red is crimson, kept apart from the alert ink. Tuned for 4.5:1 on every paper and spread in lightness for color-blind separation (OKLab ΔE, deutan/protan: min 3.4 on paper, 4.8 on blueprint; closest: green/red, amber/alert). */ --bi-spot-green: #006d46; /* go, play, a live take */ --bi-on-spot-green: #f4f3ef; --bi-spot-green-tint: #cbf1db; --bi-spot-amber: #735600; /* a draft, a mark in time */ --bi-on-spot-amber: #f4f3ef; --bi-spot-amber-tint: #f5e5c1; --bi-spot-red: #b30052; /* crimson; never the alert ink */ --bi-on-spot-red: #f4f3ef; --bi-spot-red-tint: #ffdce2; --bi-spot-violet: #8900c4; /* a person, a reviewer */ --bi-on-spot-violet: #f4f3ef; --bi-spot-violet-tint: #f0deff; --bi-spot-teal: #006161; /* a place, a channel */ --bi-on-spot-teal: #f4f3ef; --bi-spot-teal-tint: #c0f1f0; --bi-spot-magenta: #ae0072; /* a highlight, a pick */ --bi-on-spot-magenta: #f4f3ef; --bi-spot-magenta-tint: #ffdbea; /* ---- TYPE ----------------------------------------------- */ /* Display: a light grotesque, tight. System stack = no licensing, no network request, works offline. SERIF VARIANT — one token away. The references are grotesque, but the same system reads as a spec sheet set in a book face: --bi-face-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --bi-weight-display: 400; (a light serif fills in; keep regular) --bi-track-display: -0.005em; (serifs need almost no tightening) Everything else — captions, rules, the block — is unchanged. */ --bi-face-display: "Helvetica Neue", "Neue Haas Grotesk Text", Inter, "SF Pro Text", Arial, sans-serif; --bi-face-data: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --bi-weight-display: 400; /* light/regular. 500 max. Bold display is a bug. */ --bi-weight-medium: 500; /* the one heavier step, for a selected item */ --bi-track-display: -0.02em; /* display letterspacing */ --bi-track-caption: 0.12em; /* mono captions, stamps, indexes */ /* Small sizes stay fixed — they sit on the accessibility floor and must not shrink. Display sizes are fluid, so type responds systemically and no page needs its own breakpoint for headings. */ --bi-t-xs: 11px; /* captions, mono */ --bi-t-sm: 13px; --bi-t-md: 15px; /* prose */ --bi-t-lg: clamp(17px, 0.9vw + 14px, 20px); /* lede */ --bi-t-xl: clamp(24px, 1.6vw + 18px, 32px); --bi-t-2xl: clamp(36px, 4.4vw + 22px, 72px); /* the headline */ --bi-t-3xl: clamp(48px, 7vw + 26px, 112px); /* the one huge index letter */ /* ---- METRICS -------------------------------------------- */ /* Airy on purpose. Whitespace is structure (rule 2). */ --bi-radius: 0; /* rectangle */ --bi-radius-full: 999px; /* pill / circle — nothing in between */ --bi-gap: 16px; --bi-pad: 24px; --bi-pad-lg: 48px; --bi-row: 40px; /* list row height */ --bi-spine-w: 56px; /* width of a vertical spine */ --bi-mark: 10px; /* status mark diameter */ /* ---- SERIES (categorical — identity, NOT status) --------- Fixed order, never cycled. Series are told apart by INK and LINE STYLE, always with a direct label; hue is secondary. This is the system's answer to color-blind safety: no hue is load-bearing, so nothing needs to be decoded. s4 (tint) and s5 (hatch) are fills — as lines they rely on the hairline outline every bar and area already carries. */ --bi-s1: var(--bi-blue); --bi-s2: var(--bi-ink); --bi-s3: #8c8c86; /* grey (3.05 on paper — glyph floor) */ --bi-s4: var(--bi-tint); --bi-s5: var(--bi-paper); /* paper, carrying --bi-hatch */ --bi-hatch: repeating-linear-gradient(-45deg, var(--bi-line) 0 1px, transparent 1px 5px); --bi-dash-s1: none; /* solid */ --bi-dash-s2: 6 4; /* dashed */ --bi-dash-s3: 1 4; /* dotted */ --bi-dash-s4: none; /* solid, thin (see .bi-plot__line) */ --bi-dash-s5: 8 3 1 3; /* dash-dot */ /* ---- TOUCH ---------------------------------------------- */ /* Minimum hit size. Governed by POINTER, not width — a touchscreen laptop at 1400px needs big targets; a narrow desktop window does not. */ --bi-tap: 32px; /* ---- MOTION --------------------------------------------- */ --bi-draw: 900ms; /* stroke draw-in, rule extend */ --bi-fade: 240ms; /* ink fading in */ --bi-snap: 0ms; /* state changes are instant */ --bi-blink: 1.1s; /* the loading caret */ --bi-stagger: 120ms; /* between the layers of a reveal */ --bi-plotter: cubic-bezier(.4, 0, .2, 1); /* the pen crossing the sheet */ } /* ============================================================ BLUEPRINT — white line on cobalt paper. The inverse, not a theme, and the kit's DEFAULT look (block below the next one). The :root values above are the paper palette, used only with [data-bi-mode="paper"]. The OS colour scheme is never consulted. Structure and content share the white line; the solid block becomes paper-white with cobalt text. Every pair re-verified. ============================================================ */ .bi-blueprint-palette, [data-bi-mode="blueprint"] { --bi-paper: #1f3bc0; --bi-paper-2: #1a33a8; --bi-paper-3: #152b8f; --bi-ink: #f4f3ef; --bi-dim: #c3cbf1; /* 5.37 / 6.31 / 7.40 */ --bi-faint: #8d9de3; /* 3.30 on cobalt */ --bi-blue: #f4f3ef; /* structure is the white line too */ --bi-blue-2: #d9deef; --bi-tint: #3d5be0; /* a lighter cobalt; text on it is ink (white) */ --bi-on-blue: #1f3bc0; /* cobalt text on the paper-white block */ --bi-on-blue-dim: #4a63c9; /* 4.83 on the white block */ --bi-alert: #ffad88; /* lightened until 4.74 on cobalt */ --bi-on-alert: #1a1a1a; /* spot inks, as saturated as 5:1 or more on cobalt allows; text on them is ink */ --bi-spot-green: #00e0a3; --bi-on-spot-green: #1a1a1a; --bi-spot-green-tint: #006548; --bi-spot-amber: #ffb935; --bi-on-spot-amber: #1a1a1a; --bi-spot-amber-tint: #714d00; --bi-spot-red: #ffbab9; --bi-on-spot-red: #1a1a1a; --bi-spot-red-tint: #843b3e; --bi-spot-violet: #c1c0ff; --bi-on-spot-violet: #1a1a1a; --bi-spot-violet-tint: #504c8a; --bi-spot-teal: #00e9e0; --bi-on-spot-teal: #1a1a1a; --bi-spot-teal-tint: #00635f; --bi-spot-magenta: #ffc7f1; --bi-on-spot-magenta: #1a1a1a; --bi-spot-magenta-tint: #763e6b; --bi-s3: #a9b3e6; /* 4.20 on cobalt */ --bi-s2: #c9cbd6; /* light grey — ink and s1 are both white here, so s2 takes a grey and keeps its dash */ } /* Blueprint is the DEFAULT. The kit chooses its look; the OS colour scheme never does. Paper is opt-in with data-bi-mode="paper" on . */ :root:not([data-bi-mode="paper"]) { --bi-paper: #1f3bc0; --bi-paper-2: #1a33a8; --bi-paper-3: #152b8f; --bi-ink: #f4f3ef; --bi-dim: #c3cbf1; --bi-faint: #8d9de3; --bi-blue: #f4f3ef; --bi-blue-2: #d9deef; --bi-tint: #3d5be0; --bi-on-blue: #1f3bc0; --bi-on-blue-dim: #4a63c9; --bi-alert: #ffad88; --bi-on-alert: #1a1a1a; --bi-spot-green: #00e0a3; --bi-on-spot-green: #1a1a1a; --bi-spot-green-tint: #006548; --bi-spot-amber: #ffb935; --bi-on-spot-amber: #1a1a1a; --bi-spot-amber-tint: #714d00; --bi-spot-red: #ffbab9; --bi-on-spot-red: #1a1a1a; --bi-spot-red-tint: #843b3e; --bi-spot-violet: #c1c0ff; --bi-on-spot-violet: #1a1a1a; --bi-spot-violet-tint: #504c8a; --bi-spot-teal: #00e9e0; --bi-on-spot-teal: #1a1a1a; --bi-spot-teal-tint: #00635f; --bi-spot-magenta: #ffc7f1; --bi-on-spot-magenta: #1a1a1a; --bi-spot-magenta-tint: #763e6b; --bi-s3: #a9b3e6; --bi-s2: #c9cbd6; } /* ============================================================ RESPONSE Two independent axes. Do not conflate them: WIDTH governs LAYOUT — how many regions fit side by side POINTER governs ERGONOMICS — how big a thing you have to hit ============================================================ */ /* --- POINTER: coarse input grows every target. Rule 13. The airiness of the system is not an excuse for a 24px link. -- */ @media (pointer: coarse) { :root { --bi-tap: 44px; --bi-row: 44px; --bi-t-xs: 12px; --bi-t-sm: 14px; --bi-t-md: 16px; } } /* --- DENSE: a density scope, not a component. -------------------- Rule 2 (whitespace) is right for a sheet someone reads and wrong for a tool someone operates. Scope this to a dashboard or console and the whole system tightens without any component changing. The opposite pressure to the pointer-coarse block above: same tokens, different direction. Tap size is untouched — the thumb still wins. */ .bi-dense { --bi-gap: 8px; --bi-pad: 12px; --bi-pad-lg: 20px; --bi-row: 28px; --bi-t-2xl: clamp(28px, 2.6vw + 18px, 44px); --bi-t-3xl: clamp(36px, 3.4vw + 24px, 64px); } @media (pointer: coarse) { .bi-dense { --bi-row: 44px; } } /* Display type is fluid (clamp), so no width-based type overrides are needed or wanted — a fixed override here would fight the clamp. */ /* ============================================================ CONTRAST — computed, not eyeballed (WCAG 2.x relative luminance). Text needs 4.5:1; UI glyphs and decorative marks need 3:1. Re-run the check if any value above changes. PAPER ratio need ink on paper 15.67 4.5 PASS dim on paper 6.05 4.5 PASS dim on paper-2 5.47 4.5 PASS dim on paper-3 4.84 4.5 PASS faint on paper 3.16 3.0 PASS (decorative only) blue on paper 6.62 4.5 PASS blue on paper-2 5.99 4.5 PASS blue on paper-3 5.30 4.5 PASS blue-2 on paper 8.67 4.5 PASS alert on paper 5.81 4.5 PASS alert on paper-2 5.25 4.5 PASS alert on paper-3 4.65 4.5 PASS ink on paper-2 14.18 4.5 PASS ink on paper-3 12.54 4.5 PASS ink on tint 11.52 4.5 PASS blue on tint 4.87 3.0 PASS (outline on a tint fill) on-blue on blue 6.62 4.5 PASS on-blue-dim on blue 4.73 4.5 PASS paper on ink 15.67 4.5 PASS (the --ink stamp) s3 on paper 3.05 3.0 PASS (a 1px line) on-alert on alert 5.81 4.5 PASS spot-green on paper 5.77 4.5 PASS spot-green on paper-3 4.62 4.5 PASS on-spot-green on spot-green 5.77 4.5 PASS ink on spot-green-tint 14.21 4.5 PASS spot-amber on paper 6.18 4.5 PASS spot-amber on paper-3 4.94 4.5 PASS on-spot-amber on spot-amber 6.18 4.5 PASS ink on spot-amber-tint 13.97 4.5 PASS spot-red on paper 6.22 4.5 PASS spot-red on paper-3 4.98 4.5 PASS on-spot-red on spot-red 6.22 4.5 PASS ink on spot-red-tint 13.75 4.5 PASS spot-violet on paper 6.61 4.5 PASS spot-violet on paper-3 5.29 4.5 PASS on-spot-violet on spot-violet 6.61 4.5 PASS ink on spot-violet-tint 13.76 4.5 PASS spot-teal on paper 6.56 4.5 PASS spot-teal on paper-3 5.25 4.5 PASS on-spot-teal on spot-teal 6.56 4.5 PASS ink on spot-teal-tint 14.16 4.5 PASS spot-magenta on paper 6.22 4.5 PASS spot-magenta on paper-3 4.97 4.5 PASS on-spot-magenta on spot-magenta 6.22 4.5 PASS ink on spot-magenta-tint 13.74 4.5 PASS BLUEPRINT ink on paper 7.74 4.5 PASS dim on paper 5.37 4.5 PASS dim on paper-2 6.31 4.5 PASS dim on paper-3 7.40 4.5 PASS faint on paper 3.30 3.0 PASS (decorative only) blue on paper 7.74 4.5 PASS blue-2 on paper 6.40 4.5 PASS alert on paper 4.74 4.5 PASS alert on paper-2 5.56 4.5 PASS alert on paper-3 6.53 4.5 PASS ink on paper-2 9.08 4.5 PASS ink on paper-3 10.66 4.5 PASS ink on tint 5.02 4.5 PASS on-blue on blue 7.74 4.5 PASS (cobalt on the white block) on-blue-dim on blue 4.83 4.5 PASS paper on ink 7.74 4.5 PASS s2 on paper 5.32 3.0 PASS s3 on paper 4.20 3.0 PASS on-alert on alert 9.60 4.5 PASS spot-green on paper 4.99 4.5 PASS spot-green on paper-2 5.85 4.5 PASS on-spot-green on spot-green 10.10 4.5 PASS ink on spot-green-tint 6.40 4.5 PASS spot-amber on paper 5.01 4.5 PASS spot-amber on paper-2 5.88 4.5 PASS on-spot-amber on spot-amber 10.15 4.5 PASS ink on spot-amber-tint 6.84 4.5 PASS spot-red on paper 5.31 4.5 PASS spot-red on paper-2 6.23 4.5 PASS on-spot-red on spot-red 10.75 4.5 PASS ink on spot-red-tint 7.07 4.5 PASS spot-violet on paper 5.01 4.5 PASS spot-violet on paper-2 5.88 4.5 PASS on-spot-violet on spot-violet 10.15 4.5 PASS ink on spot-violet-tint 6.90 4.5 PASS spot-teal on paper 5.62 4.5 PASS spot-teal on paper-2 6.59 4.5 PASS on-spot-teal on spot-teal 11.38 4.5 PASS ink on spot-teal-tint 6.41 4.5 PASS spot-magenta on paper 6.01 4.5 PASS spot-magenta on paper-2 7.05 4.5 PASS on-spot-magenta on spot-magenta 12.18 4.5 PASS ink on spot-magenta-tint 7.08 4.5 PASS NOT A PAIR (by rule, never rendered): spot inks on the solid block, or a spot ink on another spot ink. alert next to spot-red as a pair of meanings — red is identity, alert is fault. alert on blue — the fourth ink never sits on the solid block. dim on tint — text on a tint fill is always --bi-ink. faint on paper-2/3 — alternates live on the sheet; on a card use dim. ============================================================ */ /* ============================================================ CANONICAL ROLES — do not use in primitives; for tools and exports (BLUEPRINT §2.3). The same slots in every kit, pointing at this kit's lore names, so audits, cross-kit comparison and DESIGN.md export can read any kit the same way. Not a theme switcher. Roles resolve on :root, so they follow the mode set on , not a mode or density scope set on an inner element. status-ok / warn / fail: omitted on purpose (kit.json "omitted": status is a mark plus a word, rule 9). ============================================================ */ :root { --bi-role-ground: var(--bi-paper); --bi-role-surface: var(--bi-paper-2); --bi-role-ink: var(--bi-ink); --bi-role-ink-dim: var(--bi-dim); --bi-role-line: var(--bi-line); --bi-role-accent: var(--bi-blue); --bi-role-on-accent: var(--bi-on-blue); --bi-role-font-display: var(--bi-face-display); --bi-role-font-data: var(--bi-face-data); --bi-role-gap: var(--bi-gap); --bi-role-pad: var(--bi-pad); --bi-role-radius: var(--bi-radius); --bi-role-tap: var(--bi-tap); --bi-role-series-1: var(--bi-s1); --bi-role-series-2: var(--bi-s2); --bi-role-series-3: var(--bi-s3); --bi-role-series-4: var(--bi-s4); --bi-role-series-5: var(--bi-s5); }