Repository mirai/design-system
MirAI Design System
Version 2.0.0
Status Approved
2026-05-21

The MirAI
Design System.

Tokens, brand marks, type, and reference components for the ASK orchestration platform. One source of truth, multiple export targets — Figma, shadcn/ui, Tailwind, Storybook, plain CSS.

MirAI
Tri-color · Brutalist · Tabular ●
01
Quickstart
Three adoption paths
shadcn / TailwindReact
Drop the token CSS into your global stylesheet and wire the Tailwind preset. Generated `shadcn add` components inherit the tri-color palette automatically.
# 1. Copy tokens
cp -r tokens ./src/styles/mirai

# 2. Import the CSS layer
@import "./src/styles/mirai/shadcn.css";

# 3. tailwind.config.js
presets: [require(
  "./src/styles/mirai/tailwind.preset"
)]
Figma · Tokens StudioDesigners
Install the Tokens Studio plugin and import the multi-set JSON. Apply mirai/core and mirai/semantic. Push changes back to JSON.
# In Figma:
Plugins → Tokens Studio
Tools → Import → Single file
# Select:
tokens/figma.tokens.json
StorybookAll
Run the docs locally. Foundations live as MDX, components as `.stories.tsx`. Theme toggle wired to the shadcn CSS layer.
# Install & run
npm install
npm run storybook
# → http://localhost:6006
02
Repository structure
What lives where
mirai/design-systemv2.0.0
.
├── README.md                  → start here
├── CHANGELOG.md
├── LICENSE                     → confidential
├── package.json
├── colors_and_type.css          → CSS foundations
│
├── tokens/                       → source of truth
│   ├── README.md
│   ├── tokens.json              W3C DTCG
│   ├── figma.tokens.json        Tokens Studio
│   ├── shadcn.css               CSS vars (HSL)
│   ├── tailwind.preset.js
│   └── style-dictionary.config.js
│
├── assets/                       → brand marks
│   ├── mirai-logo-light.svg/.png
│   ├── mirai-logo-white.svg/.png
│   ├── mirai-icon-light.svg/.png
│   └── mirai-icon-white.svg/.png
│
├── fonts/
│   └── SpaceGrotesk-VariableFont_wght.ttf
│
├── .storybook/                   → docs config
│   ├── main.ts
│   ├── preview.ts
│   └── preview-head.html
│
├── stories/                      → runnable docs
│   ├── README.md
│   ├── Introduction.mdx
│   ├── Foundations/
│   │   ├── Colors.mdx
│   │   ├── Typography.mdx
│   │   ├── Spacing.mdx
│   │   └── Logo.mdx
│   └── Components/
│       ├── Button.stories.tsx
│       └── Badge.stories.tsx
│
├── preview/                      → design-system cards
│   ├── brand-sheet.html          ★ identity overview
│   ├── logo-system.html          ★ exportable marks
│   ├── colors-primary.html · colors-alpha.html
│   ├── type-headings.html · type-body.html
│   ├── buttons · inputs · badges · cards
│   └── shadows · radii · spacing-scale
│
├── ui_kits/ask/                  → reference components
│   ├── index.html                click-thru proto
│   └── *.jsx
│
└── uploads/                      → raw source · do not edit
    ├── MirAI - Guidelines - Design System.pdf
    └── original brand marks
03
Token export targets
One JSON → five formats
tokens.json
The Design Tokens Community Group specification. $value / $type structure. Compatible with Style Dictionary, Specify, Cobalt, Terrazzo.
Open file →
figma.tokens.json
Tokens Studio for Figma — multi-set with mirai/core and mirai/semantic. References resolve via {...} syntax.
Open file →
shadcn.css
CSS variables as HSL triplets — the convention shadcn/ui expects. Composes with Tailwind's alpha modifiers via hsl(var(--x) / 50%).
Open file →
tailwind.preset.js
Drop-in theme preset. Maps every shadcn slot plus the raw mirai.blue escape hatch. Overrides Tailwind's default spacing scale to enforce 4-pt rhythm.
Open file →
04
Key documents
Open in preview
One-pager
Brand sheet
Marks, color, type, spacing, voice, don'ts — entire identity on a single A3.
Asset page
Logo system
Four marks, eight files. Download SVG + PNG for every colorway.
Prototype
ASK reference UI
Click-through of the orchestration platform. Every surface follows the system.
# MirAI Design
System
> AI Governance.
Document
README
Full spec — content fundamentals, visual foundations, iconography, sources, caveats.
05
Non-negotiables
Don't deviate without a system change
01
Tri-color palette
#FFFFFF · #000000 · #556DD7. All grays are alpha of pure black. No new hues.
02
One typeface
Space Grotesk, all weights, variable axis. No fallbacks as design decisions.
03
Brutalist shadows
Solid, unblurred geometric offsets only. No glass, no blur, no backdrop-filter.
04
Radius duality
Static surfaces 0 / 4 px. Interactive surfaces 8 px. The human-machine boundary is visible.
05
No emoji
Anywhere. Ever. Lucide for iconography, currentColor for fills.