Gate
D14
Boards
4.20PM
Seat
24B
Date
Sep.25.2026
Class
Standard
Design system
Muthirai
முத்திரை
Tamil for a seal or stamp, and the mark you leave.
Build every screen like a label.
Hard 1px rules, square corners, uppercase codes and one signal colour. Four palettes in light and dark, for people and coding agents alike.
Palettes / Themes04 / 08
Components19
Glyphs24
00See it
Built from the kit
Live components, recoloured by the palette and mode you pick at the top.
Departs
4.20PM
Load72%
01Install
Copy the kit
One stylesheet and three font files. React components, a Tailwind v4 theme and an agent skill if you want them.
index.html
<!-- kit/muthirai.css, with kit/fonts/ beside it -->
<link rel="stylesheet" href="styles/muthirai/muthirai.css">
<!-- A palette; light or dark follows the OS -->
<html data-palette="lab">
<!-- Or pin one of the eight themes -->
<html data-theme="dither-dark">app.css
@import "tailwindcss";
@import "./muthirai/muthirai.css" layer(components);
@import "./muthirai/tailwind.css";
/* Tokens become utilities that follow the theme:
bg-surface, text-ink-muted, text-display-l, rounded-s */App.jsx
import { Button, theme } from './muthirai';
// Once at start-up: a palette, light or dark from the OS
theme.apply({ palette: 'lab', mode: 'system' });
<Button variant="accent" trail="chevrons">Dispatch</Button>Terminal
# Claude Code: add the skill for every project
cp -r muthirai/skills/muthirai ~/.claude/skills/
# Then ask in plain words:
> Build the settings screen with Muthirai, Lab palette.02Themes
Four palettes, eight themes
Every palette has a light and a dark theme. Pick one to apply it; Auto in the top bar follows your system.
Brutalist. One loud accent on grey.
Instrument panel. Duotone lime.
Minimal print. Cool and quiet.
Stationery. Warm and soft.
// Three tokens build a screen
Now showing CONCRETE-LIGHT
ground#d8d8d4
surface#ededea
surface-sunken#c9c9c4
ink#111111
ink-muted#45453f
accent#ff4d12
03Type
Two faces
Roboto Mono for nearly everything. Roboto for the one stamped word. Both Apache 2.0.
Roboto MonoText / figures / controls
4.20 PM
RobotoStamped words only
D14
display-mRoboto 700 · 40/0.95
Method system build
titleMono 500 · 16/22
Departure gate
bodyMono 400 · 14/22
Handle under controlled conditions.
labelMono 500 · 11/14 · +0.08em
[ Delivery systems ]
04Components
Nineteen parts
Square, uppercase and ruled. Hover inverts, press shifts 1px, focus is a 2px ring.
Button
Tag
ClearedHoldFault
Segmented
Field
F-01
Over the 32 kg limit.
Meter
Load72%
Glyph
05Principles
Engineered, never decorated
Futuristic in its codes, brutalist in its rules, minimal on the ground.
01Write like a labelShort noun phrases and codes. Uppercase for labels, sentence case for text.
02One signalGround, surface and ink carry the screen. The accent is one fill per view.
03One big thingOne display word or figure per view. Everything else stays small.
04Flat by ruleSquare corners and 1px rules. No shadows, gradients or blur.
06FAQ
What does it ship?
One stylesheet with all eight themes, 19 React components, a Tailwind v4 theme, three page templates and an agent skill.
Can a product use one palette?
Yes. Call theme.apply({ palette: 'lab' }) once at start-up and leave the switcher out.
Why these font files?
Roboto Mono 3.000 and Roboto 3.004 are the last Apache 2.0 releases; later ones moved to the SIL Open Font License.
Where are the full rules?
The README in the kit covers voice, themes, colour, type, layout and building labels.