Skip to content

A design system in black & white

MONOCHROME

Strip away color and what remains is the design itself: typography, spacing, and proportion. MONO is design on hard mode — if it works in black and white, it will work anywhere.

Browse components Open customizer

01 — Index

  1. 01 COMPONENTS Buttons, forms, tables, tabs, dialogs, toasts — every element styled, accessible, and copy-paste ready.
  2. 02 TYPOGRAPHY A specimen book: six monospace faces, a modular scale, and the rules of measure, weight, and rhythm.
  3. 03 LAYOUT The twelve-column grid as a spec sheet, plus asymmetry and editorial composition in practice.
  4. 04 GALLERY Typographic compositions, each one built from the system's own tokens.
  5. 05 CUSTOMIZER Tune the font, scale, weight, and rhythm live — then copy your theme as tokens you can take home.
  6. 06 EXAMPLES Real pages built with the system: a login screen, an article, a dashboard, a pricing table.
  7. 07 ABOUT The manifesto: why constraint is the whole point.

02 — Principles

Four R's, no hex codes.

i.REDUCTION

Strip away the non-essential. Color, decoration, complexity — gone.

ii.REFINEMENT

Perfect what remains: typography, spacing, and proportion.

iii.RHYTHM

Create patterns and relationships with limited elements.

iv.REACTION

Test how readers respond. Does it communicate? Does it connect?

03 — In the wild

layogtima.com
Amit's portfolio — UI/UX design, hardware consulting, and flow artistry.
PORTFOLIO
sm0.dev
Shreshth's corner of the internet — web development, visualizations, and philosophy.
PORTFOLIO
seeds.layogtima.com
A guide to growing food in Bengaluru. Plant what thrives now, harvest what you love.
WEBAPP
india.xonotic.au
India's Xonotic server — low ping, arena shooters, community.
COMMUNITY
layogtima.com/drums
An interactive drum set. Drop a beat.
MUSIC

Built something with MONO? Open a pull request and list it here.