MIZ OKI 3.5 — Design System

Verifiable Autonomous Decision Intelligence Platform The operating system for enterprise decisions — SENSE → REASON → PLAN → VALIDATE → DECIDE → ACT → LEARN.

This folder is the canonical design system for MIZ OKI 3.5 marketing and product surfaces. It pairs a high-contrast Enterprise look (slate + blue, for board-ready marketing pages) with an adjacent Intelligence look (deep navy + cyan, for product diagrams, the decision engine, and thought-leadership content).

Sources

This system was distilled from the production marketing repository:

GitHub: mediaintelligence/mizoki-website (private, default branch main)
Production site: https://mizoki3.com
Key files mirrored into source/ for reference: base.css, index.html, platform.html, pricing.html, case-studies.html, investor.html, login.html
Runtime narrative & product context: CLAUDE.md, README.md in the upstream repo
Related repos (same brand, not imported): MIZOKICloudRun, mizoki-3-5-website, Miz-Oki-3.0-Web-Pages

Everything below is a synthesis — nothing is hallucinated from screenshots, and every color / size / font token traces back to the upstream CSS.

Product context

MIZ OKI (pronounced miz-OH-kee, from MIedia Intelligence + Z era) builds the Decision Control Plane (DCP) — a governed engine that takes raw signals from ERP, CRM, cloud stacks and knowledge graphs, and turns them into autonomous actions that have already been verified against policy before they execute. The headline claims: 50–75× faster decisions, 18–35% revenue leakage prevented, 89% automation coverage, 3.2 month payback.

Two surfaces are represented in this design system:

Surface	When to use	Theme	Vibe
Enterprise marketing	Homepage, platform, pricing, investor, case studies	`theme-dark` (default) + `theme-light` for inner pages	Board-ready SaaS. Slate + electric blue. Cabinet Grotesk + Inter.
Intelligence / product	Blog articles, SRPVDAL pipeline diagrams, interactive product demos, decision audit views	`theme-intel`	Data-lab cyberpunk. Deep navy + cyan + emerald. Glow, grids, terminal-like.

Both surfaces share the same SRPVDAL stage-color palette, typography families, and spacing/radius scale — they diverge only in background + accent.

File index

.
├── README.md                    ← you are here
├── SKILL.md                     ← agent skill contract (Claude Code compatible)
├── colors_and_type.css          ← all design tokens in one file
├── source/                      ← untouched production HTML/CSS for reference
├── assets/                      ← logos, hero imagery, diagrams, SVGs, fonts
│   ├── fonts/                   ← Cabinet Grotesk woff2 (400/500/700/800), bundled locally
│   ├── svg/favicon.svg          ← primary mark (cyan radial, spark line)
│   ├── svg/cognitive-loop.svg   ← the signature SENSE→LEARN orbit diagram
│   ├── img/mosaic-hero-*.png    ← AI-generated hero composites (board slides / landing art)
│   └── img/relu-article/        ← thought-leadership diagram SVGs
├── preview/                     ← Design System tab cards
├── reworked-site/               ← "nervous system" homepage rework (index.html + site.css/js)
├── ui_kits/
│   └── marketing-site/          ← click-thru recreation of the public site
└── slides/                      ← (none — no sample decks were provided)

CONTENT FUNDAMENTALS

MIZ OKI copy is enterprise-technical with an edge of swagger. The brand believes autonomous decisioning is a new category and writes like it — never apologetic, rarely cute, and always quantitative.

Voice

Second-person imperative for CTAs: "Book Demo", "Get Started", "Explore the Platform", "Estimate Your ROI".
Third-person authoritative for capability claims: "MIZ OKI transforms fragmented signals into governed, autonomous actions."
Almost never first-person "we" in product copy — the system is the protagonist, not the team.

Casing & punctuation

Product wordmark: MIZ OKI 3.5 — all caps, space between words, dot + digit for the version. Never "MizOki", "Mizoki3" outside URLs.
Sentence case for headlines (Enterprise Decisions at the Speed of Data.) — not title case.
Title Case for nav items, CTAs, section tags, card titles (Book Demo, How It Works, Case Studies).
Section eyebrows are SHORT ALL CAPS with tight letter-spacing when styled as badges.
Em dashes — used liberally for punch in taglines (Not just another copilot.).
Final period on hero headlines (…Speed of Data.). Makes the claim feel closed, not aspirational.

Tone moves

Contrarian openers: "Stop relying on slow analytics and black-box AI."
Earned specificity: always prefer a number to an adjective. "75× faster" beats "much faster". "18–35% revenue leakage prevented" beats "significant revenue recovered".
Taxonomy as rhythm: the 7-stage pipeline (SENSE → REASON → PLAN → VALIDATE → DECIDE → ACT → LEARN) appears repeatedly, rendered as arrow-joined uppercase. It's a brand device, not just architecture.
Governance as selling point: words like verifiable, governed, deterministic, audit-ready, counterfactual, adversarial review do heavy lifting. Safety is a feature, never a disclaimer.
Metric density: hero pages lead with 4 stats in a grid ("50–75× Faster Decisions · 18–35% Revenue Leakage Prevented · 3.2mo Avg Payback · 89% Automation Coverage"). Keep this rhythm.

What the brand does not do

No emoji. Anywhere. Not in marketing copy, not in UI chrome, not in buttons. Icons are line SVGs.
No cutesy metaphors ("your AI co-pilot", "magical", "effortless"). Replace with mechanical language — engine, pipeline, overlay, runtime.
No unqualified AI boasts. Every claim is paired with a governance hedge ("autonomous actions, with your board in complete control").
No filler adjectives (cutting-edge, next-generation, revolutionary).

Sample copy blocks (from production)

Hero H1: "Enterprise Decisions at the Speed of Data."
Hero sub: "MIZ OKI transforms fragmented signals into governed, autonomous actions—cutting decision latency by 75x while keeping your board in complete control."
Lead-in: "Not just another copilot. MIZ OKI is an execution engine. It doesn't just suggest actions—it verifies them against your policies and executes them safely in your existing systems."
Platform H1: "The SRPVDAL Engine" / "A deterministic, 7-stage pipeline ensuring that every autonomous action is reasoned, planned, and verified before execution."
Integrations frame: "Zero Rip-and-Replace. MIZ OKI acts as a cognitive overlay."

VISUAL FOUNDATIONS

Two palettes, one system

Enterprise (default marketing surface) - Base: #020617 (slate-950) at the top of the page, transitioning to #0f172a (slate-900) cards. - Accent: #2563eb (blue-600) with #3b82f6 hover and #60a5fa highlight. Accent glow rgba(37,99,235,0.30). - Text: pure white on dark; #0f172a on light; muted slate scale (#cbd5e1 → #475569). - Gradients: used sparingly — two hero "glow" blobs (rgba(37,99,235,0.2) + rgba(79,70,229,0.2)) filtered 120px blur behind hero copy. Text gradient on the word "Speed of Data." runs #60a5fa → #818cf8.

Intelligence (product / blog surface) - Base: #050A12 → #0B1C2D radial layered on linear-gradient(180deg, #0B1C2D, #050A12), with two accent radial washes — cyan top-left, emerald top-right — both at 7–10% opacity. - Accent: #19F5FF cyan with #00C2D1 secondary and #00FF9A emerald highlight. - Text: #EAFBFF (warm off-white), #A7EAF0 muted, #7CB9C0 deep muted. - Borders: rgba(25,245,255,0.18) — always cyan-tinted, never neutral gray.

SRPVDAL stage colors (used for icon backgrounds, pipeline chips, stage cards): - Sense #f59e0b · Reason #a855f7 · Plan #4f8fff · Validate #10b981 · Decide #19F5FF · Act #ef4444 · Learn #f472b6

Typography

Display / headlines: Cabinet Grotesk 800, letter-spacing -0.02em, line-height 1.15. Bundled locally as woff2 in assets/fonts/ (weights 400 / 500 / 700 / 800) via @font-face in colors_and_type.css — no remote font CDN dependency.
Body: Inter 400–800, line-height 1.6.
Mono: system monospace stack (ui-monospace → SFMono → Menlo → Consolas). Used in .formulaBox and code samples.
Scale is a loose modular scale anchored at 1rem body and 4.5rem hero. See colors_and_type.css.
H1 size in practice: hero uses ~4.5rem display; inner page H1s drop to 3.25rem (5xl).
No underline on links; hover shifts color only.

Spacing, radius, layout

4px base unit. Section padding is --space-24 (6rem / 96px) vertical, --space-6 (24px) horizontal on mobile.
Containers cap at --max-width: 1280px, centered, padding: 0 var(--space-6).
Radius ladder: 8 (sm) · 12 (md) · 16 (lg) · 24 (xl) · 9999 (full / badge). Cards almost always use --radius-xl (24px) on marketing, --radius-lg on product.
Grid gap defaults to 18–24px. Hero grids are 1.15fr / 0.85fr on desktop, stack to single-col below 980px.

Backgrounds & imagery

Full-bleed photography is rare. Most pages use a solid dark slate + two large soft radial glows. Imagery, when present, is AI-composited mosaic boards (assets/img/mosaic-hero-*.png) that mix a hero KPI, a diagram, and a UI screenshot. Treat these as editorial illustrations, not lifestyle.
Pipeline diagrams (e.g. assets/svg/cognitive-loop.svg) are the brand's signature illustration device — glowing cyan orbits, rotating pulses, center-anchored wordmark. Reuse; do not reinvent.
No hand-drawn illustrations. No stock photography. No people. The brand visualizes systems, not users.
No repeating patterns or textures beyond occasional 1px dot grids in diagrams.

Motion

Easing: cubic-bezier(0.16, 1, 0.3, 1) (ease-out) and cubic-bezier(0.2, 0.8, 0.2, 1) (snappy). Never linear.
Durations: 150 / 300 / 500 ms. Most transitions are 300ms.
Reveal on scroll is the signature entrance: opacity 0 → 1, translateY(30px) → 0 over 700ms, staggered in 0.1s increments via .delay-1 / -2 / -3 / -4 classes.
Pulse dot (animating opacity 1 → 0.5 → 1 over 2s) is used on live-status badges and on the orbiting dot in the cognitive-loop diagram.
Never bounce. No spring physics. No overshoot.

Hover & press

Primary buttons: lift translateY(-1px) + strengthen glow shadow from --shadow-glow-blue to --shadow-glow-blue-strong.
Secondary buttons: swap background from transparent to var(--bg-800) and text to white.
Cards: background brightens (#0f172a → #162032), shadow deepens, translateY(-2px). No scale.
Links: color shift only, no underline.
Press states: the upstream CSS does not define explicit :active states — use a translateY(0) and slightly dimmed background (~8% darker) as convention.

Borders, shadows, elevation

Card borders are always visible, not implied — 1px solid --border-card (slate-800) on enterprise, 1px solid rgba(25,245,255,0.14) on intel.
Shadows form a ladder: sm for base cards → md on hover → lg/xl for modals and lifted heroes. Intelligence surface adds a signature --shadow-deep (0 16px 48px rgba(0,0,0,0.45)) for the hero card.
Glow shadows are reserved for the primary CTA only and for pipeline stages on hover. Don't glow every card — it breaks the hierarchy.

Transparency & blur

Sticky nav is always glass: background: rgba(5,10,18,0.66) (intel) or rgba(255,255,255,0.85) (light), with backdrop-filter: blur(12–14px) and a 1px bottom border.
Hero glow blobs use filter: blur(120px) — this is the single biggest visual signature on the enterprise dark theme.
Card backgrounds on intel are rgba(11,18,32,0.72) over the gradient base — never fully opaque.

Capsules vs protection gradients

Badges/eyebrows are capsules (border-radius: 9999px, 1px border, --bg-800 fill). Never use a faded protection gradient behind type — the brand prefers hard capsule boundaries.

Layout rules

Nav is fixed, 80px tall (--nav-height), with scroll-padding-top matching so anchor links don't hide content.
Footer is full-width, dark, with a 1.2fr / 0.8fr / 0.8fr three-column grid on desktop.
Hero heights are content-driven — never forced viewport-fill.
Maximum text measure for paragraph copy: ~720px (--max-prose). Hero sub-copy can go wider.

Don'ts

No bluish-purple gradient walls (the brand does allow a small --accent-light → #818cf8 text gradient on a single hero word; wider use reads AI-slop).
No emoji in any surface.
No cards with colored left-border accents on marketing — those belong exclusively to SRPVDAL stage cards on intel/pipeline pages, where each color maps 1:1 to a named stage.
No rounded-corner + solid-color feature icons. Icons are always thin-stroke line SVGs on transparent backgrounds.

ICONOGRAPHY

MIZ OKI uses Lucide-style outline icons drawn inline as SVG in the production HTML. They are:

Stroke-based, stroke-width: 2, stroke-linecap: round, stroke-linejoin: round.
Currentcolor-driven — icons inherit color from their parent, letting a single SVG serve both themes.
24×24 viewBox, typically rendered at 20px (inline nav), 24px (footer), or 32px (stage cards).
Never filled, never multi-color. The visual "color" of an icon comes from the container's accent, not from the path itself.

What's in `assets/`

assets/svg/favicon.svg — primary mark. 128×128 rounded-square with a radial cyan→navy gradient and a white "spark line" zig-zag — reads as both a logo and a metaphor for signals-to-decisions.
assets/svg/cognitive-loop.svg — 1200×1200 hero diagram. The SENSE→REASON→DECIDE→ACT→LEARN orbit with a pulsing animated dot. Reuse this for product explainers; do not redraw.
assets/img/relu-article/*.svg — diagram illustrations from the ReLU Lens thought-leadership piece. Flat, annotated, use the cyan/emerald palette. Good reference for future explainer art.
assets/img/mosaic-hero-*.png — composited hero boards (1536×1024) mixing hero copy, diagrams, and screenshots. Use when you need a single dense marketing hero image.

Usage rules

If you need a general-purpose icon, reference Lucide from the CDN: https://unpkg.com/lucide-static@latest/icons/<name>.svg — it's a visual match for the hand-rolled icons already in production and keeps stroke-weight consistent.
No emoji, no Unicode glyphs as icons, no icon fonts. The production codebase has no icon font installed — don't add one.
Don't reinvent the logo. Use favicon.svg at small sizes and let the "MIZ OKI" wordmark (Cabinet Grotesk 800, MIZ + smaller OKI) do the heavy lifting at larger ones.

Index

colors_and_type.css — all design tokens. Import this on any new HTML artifact.
preview/ — individual design-system cards (colors, type, components, brand) — these populate the Design System tab.
ui_kits/marketing-site/ — high-fidelity click-thru of the public site, with reusable JSX components (Nav, Hero, MetricsStrip, StageCard, Card, Button, Footer).
reworked-site/ — the reworked "A nervous system for your business" homepage (live concept), built on the system tokens: neural hero canvas, live telemetry panel, SRPVDAL reflex-arc stepper, eligibility gauge, divisions graph.
assets/ — logos, diagrams, hero imagery, and locally bundled Cabinet Grotesk fonts (assets/fonts/).
source/ — untouched production HTML/CSS, for cross-reference when building new surfaces.
SKILL.md — the Claude-skill contract for this design system.