J4M5 Design System

01

Five principles

Every decision in the system traces back to one of these five rules. If a design breaks one, it should be on purpose.

Risograph builds depth

Surfaces are told apart the way a riso print separates inks: a halftone second color sits slightly off register behind each plane. Depth comes from ink and offset, not blur-heavy drop shadows.

Matte versus acrylic

Content is printed on matte paper. Chrome that floats, like nav, tab bars, popovers and dialogs, is clear acrylic. The contrast between the two materials is the signature, so never mix them on one surface.

Muted minerals, rich gems

About 90% of any view is muted neutral: low-chroma tones drawn from every hue, never pure white. The last 10% is gem-tone, saturated and deep, used for action, status and delight.

Figtree first

Figtree sets the UI, the body and most headings. Fraunces, a soft serif, is the display voice for heroes and editorial moments. Zilla Slab stamps small labels. If you're unsure which to use, use Figtree.

Organic over rigid

Corners differ from one another, blobs replace circles, and stickers sit a few degrees off. The layout grid still holds, so edges stay loose while baselines and gutters stay true.

The short version

Matte paper for content. Clear acrylic for chrome. Muted minerals everywhere, one gem at a time, set in Figtree, with no perfectly straight edges.

02

Color

Two families. Minerals are muted neutrals of every hue at four tints, and they make up the paper, the surfaces and the ink. Gems are six rich accents, each with a light wash, a base, a deep and a glow for dark mode.

Minerals: muted neutrals

100#e9e8e4

300#c6c4bf

500#94928d

700#57554f

Chalk true neutral

100#ede7df

300#cbc3b9

500#9a9187

700#5e5347

Stone warm grey

100#f7e3dc

300#d7beb5

500#a68b82

700#6c4d42

Clay terracotta

100#f5e2e5

300#d5bdc0

500#a48b8e

700#694c50

Rose dusty pink

100#efe7d6

300#cdc3ae

500#9c917a

700#615438

Sand ochre

100#e5ebd9

300#c1c7b1

500#8f967e

700#52593c

Moss olive

100#ddece3

300#b6cabe

500#83988c

700#425c4e

Sage green-grey

100#dcebf0

300#b5c8ce

500#82969d

700#415a62

Fog sea grey

100#e0e8f6

300#bbc5d6

500#8893a5

700#49566b

Slate blue-grey

100#ece4f3

300#c9c0d2

500#988da0

700#5c4f66

Heather violet-grey

Use 100 for surfaces and washes, 300 for secondary fills and illustration, 500 for disabled and hairline art, and 700 for text and dark fills. Never use #FFFFFF. The lightest surface in the system is Paper, #efeee9.

Gems: rich accents

Sapphire (Medium Blue)

Primary, links, focus

light: #98b2e0
base: #2151af
deep: #06296f
glow: #5483dc

Ruby (Crimson)

Destructive, hot, love

light: #f2b0b4
base: #b52f48
deep: #770f27
glow: #e66b79

Emerald (Green)

Success, publish

light: #aad3bb
base: #008053
deep: #005032
glow: #58b084

Topaz (Sunflower)

Warning, highlight, stickers

light: #f9d8b1
base: #e19b34
deep: #7d5000
glow: #ffc57b

Amethyst (Purple)

New, premium, creative

light: #c4b0de
base: #7544a3
deep: #472268
glow: #a278d1

Tourmaline (Teal)

Info, calm data

light: #a0cbca
base: #007575
deep: #004747
glow: #46a7a6

Each gem maps loosely to a real Riso drum ink (in parentheses) so that printed collateral can match the screen. Use only one dominant gem per view. A second gem may appear only as an overprint or a small sticker.

Sample palettes

Harbor

Action

Harbor at Dusk

Product UI, docs

Paper#efeee9
Fog 300#b5c8ce
Slate 700#49566b
Sapphire#2151af
Topaz#e19b34

Orchard

Action

Orchard

Kids, learning, outdoors

Sand 100#efe7d6
Moss 300#c1c7b1
Moss 700#52593c
Emerald#008053
Ruby#b52f48

Clay

Action

Clay Studio

Portfolio, editorial

Stone 100#ede7df
Clay 300#d7beb5
Clay 700#6c4d42
Tourmaline#007575
Topaz light#f9d8b1

Field

Action

Field Notes

Dashboards, tools

Chalk 100#e9e8e4
Sage 300#b6cabe
Ink#1d222b
Tourmaline#007575
Topaz#e19b34

Gallery

Action

Gallery Night

Dark mode, media

Carbon#12151a
Heather 700#5c4f66
Bone#eae8e2
Amethyst glow#a278d1
Topaz glow#ffc57b

Velvet

Action

Velvet Arcade

Games, dark

Carbon 2#1d2027
Slate 700#49566b
Ruby glow#e66b79
Sapphire glow#5483dc
Emerald glow#58b084

Semantic tokens (shadcn/ui)

Token	Role	Light	Dark
`--background`	Page paper	`oklch(0.948 0.006 90)`	`oklch(0.195 0.012 265)`
`--foreground`	Ink text	`oklch(0.25 0.02 265)`	`oklch(0.93 0.008 90)`
`--card`	Matte print surface	`oklch(0.918 0.01 84)`	`oklch(0.235 0.014 265)`
`--primary`	Primary action	`oklch(0.46 0.16 262)`	`oklch(0.7 0.12 262)`
`--secondary`	Secondary fill	`oklch(0.885 0.014 80)`	`oklch(0.29 0.015 265)`
`--muted`	Wells, quiet fills	`oklch(0.905 0.01 85)`	`oklch(0.27 0.014 265)`
`--muted-foreground`	Secondary text	`oklch(0.47 0.018 265)`	`oklch(0.72 0.012 265)`
`--accent`	Hover / selected wash	`oklch(0.9 0.028 262)`	`oklch(0.32 0.045 262)`
`--destructive`	Danger	`oklch(0.52 0.17 15)`	`oklch(0.68 0.153 15)`
`--border`	Hairlines	`oklch(0.25 0.02 265 / 0.14)`	`oklch(0.93 0.008 90 / 0.12)`
`--ring`	Focus ring	`oklch(0.62 0.144 262)`	`oklch(0.7 0.12 262)`
`--overprint`	Second-ink offset	`oklch(0.76 0.072 262)`	`oklch(0.31 0.128 262)`
`--glass`	Acrylic fill	`oklch(0.98 0.004 90 / 0.58)`	`oklch(0.3 0.016 265 / 0.5)`

03

Typography

Figtree is always the predominant face. Fraunces adds a soft, slightly wonky serif for display, and Zilla Slab stamps labels the way a rubber stamp would.

Primary · UI, body, headings

Aa

Figtree

RegularMediumSemiboldBoldExtrabold

A geometric sans with friendly, open curves. Use it for anything someone has to read, scan or tap.

Display · heroes, pull quotes

Aa

Fraunces

“Soft serifs for loud moments.”

Set the SOFT axis to 100 and WONK to 0. Use sizes of 32px and up, at most once or twice per screen, and never for UI controls.

Slab accent · stamps, tickets

Aa

Zilla Slab

Sold outBeta

Set it uppercase with +0.08em tracking at 11 to 15px, for eyebrows, stickers, ticket stubs and data labels.

Type scale

display-xl
Fraunces 600 · 72/72Open studio

display
Fraunces 600 · 48/52Games, motion, interfaces

h1
Figtree 800 · 40/44 · −0.025emProject settings

h2
Figtree 750 · 28/34 · −0.015emRecent builds

h3
Figtree 700 · 20/28Shipping checklist

body-lg
Figtree 400 · 18/28Lead paragraphs and onboarding copy get a little more room.

body
Figtree 400 · 16/26Default for paragraphs, table cells and form values.

small
Figtree 500 · 14/20Helper text, metadata, secondary buttons.

label
Zilla Slab 600 · 13 · caps +0.08emEyebrow · Ticket No. 0042

Keep running text to 60–70 characters per line. Use tabular numbers for data. Give display lines a 1.5–2px misregistered shadow in the overprint ink with .riso-misreg.

04

Shape

No two corners match. Radii are elliptical and asymmetric, so containers feel cut by hand. Big shapes are seeded blobs, and the same seed always draws the same shape.

card

rounded-cardCards, sheets, dialogs

tile

rounded-tileAlerts, list rows, thumbnails

control

rounded-controlInputs, selects, code

pill

rounded-pillButtons, badges, nav, tabs

pebble

rounded-pebbleIcon buttons, avatars, thumbs

river

rounded-riverImage masks, hero art

seed

rounded-seedStickers, stamps

<Blob seed={44} />Backgrounds, art, emphasis

Blob wobble

0.08 · near-round

0.20 · pebble

0.32 · default

0.45 · lively

0.60 · splash

DoVary radius per corner. Tilt stickers ±2–3°. Overlap blobs and let the inks mix. Keep text inside a calm rectangle within the organic shape.

Don'tUse perfect circles for containers, use the same 8px radius everywhere, rotate body text, or let organic edges break the alignment of the grid.

05

Depth & material

Elevation is shown by material, not by bigger shadows. There are five layers, and each one has a single job.

0
PaperThe page itself. Mineral paper with fine grain. Pure white is never used.
1
PrintMatte content surfaces: cards, sheets, inputs, rows. Flat fill plus grain, with a halftone second-ink offset on primary cards.
2
OverprintGem ink layered with multiply (light mode) or screen (dark mode). Where two inks cross, a third color appears. Used for illustration and emphasis.
3
AcrylicTranslucent, blurred glass for floating chrome: nav pills, tab bars, popovers, dialogs, toasts. There must always be print under it. Never put glass on glass.
4
GemSmall, solid, saturated pieces: primary buttons, active dots, stickers. These are the only things allowed to shout.

1 · PrintMatte cardGrain + halftone offset

3 · AcrylicGlass sheetBlur, sheen, hairline edge

4 · Gem 0 · Paper 2 · Overprint

06

Riso texture

Four print effects, each a single utility class. Use them with restraint. Texture should be felt more than noticed.

Grain

GrainFractal noise baked into every matte surface. It's built into riso-flat and riso-print.

.riso-flat {
  background: var(--grain),
    var(--surface);
}

Halftone

HalftoneDot screens stand in for tints, shadows and image placeholders.

.riso-halftone {
  --dot: var(--gem-sapphire);
}

Misreg

MisregistrationA second-ink shadow sits about 0.05em off register. Use it on display type only.

.riso-misreg {
  --misreg: var(--gem-ruby-glow);
}

OverprintInks multiply where they overlap, so topaz over tourmaline becomes moss.

.overprint {
  mix-blend-mode:
    var(--overprint-blend);
}

07

Components

These are shadcn/ui components restyled for J4M5, plus four new ones: Glass Panel, Riso Surface, Blob and Sticker. Everything below matches what npx shadcn add installs.

Button

Pressing a button closes the offset, like paper meeting the drum. Use one primary button per view.

Badge & Sticker

DefaultSecondaryOutlineGlass

SapphireRubyEmeraldTopazAmethystTourmaline

NewSold outTicket 0042

Gem badges print the deep shade on the light wash of the same gem, which passes AA. Stickers are the only components that are rotated.

Form

Project name

EmailWe only email about builds.

URL slugUse lowercase letters and hyphens, like little-planets.

Notes

Public

Dark preview

Tabs, Alert, Toast

Build publishedVersion 1.4 is live on ui.j4m5.com.

Large texturesThree images are over 2 MB. Compress them before you ship.

Upload failedThe server timed out. Check your connection and try again.

Palette copied to clipboard

Card variants

print

Default

Primary content

flat

Dense

Lists, nesting

glass

Floating

Over print only

Use print by default, flat inside lists or nested cards, and glass only when the card overlaps other content. The offset color comes from ink="ruby" and the other gems.

Dialog

08

Examples

The system applied to four common surfaces: a landing page, a mobile app, a poster, and a working dashboard.

J4M5 Studio

Design · Motion · Games

Small studio, loud ideas.

We design and build interactive work that feels handmade, from playful browser games to calm, careful product UI.

9:41●●● 5G

Library

Play

Thwack!Arcade · 12 levels

New

Bouncy!Match-3 · Daily

72%

Dumpling DashPuzzle · 3 stars

Play

Zen TouchAmbient · 20 min

Play

Free · All ages

Open Studio Night

Fri · Dec 126–9 PM

Play unreleased games, watch a live riso print, take a poster home.

Dashboard

Weekly plays

▲ 18%

48,210Sessions

6:42Avg. minutes

M

T

W

T

F

S

Auto-publish builds

Weekly email

This chart follows the gem rule: the peak day is the only bar in a gem color, and every other bar is mineral.

09

Install

J4M5 is a shadcn/ui registry, which needs Tailwind CSS v4 and a project that has already run shadcn init.

Everything: theme, fonts and all components

npx shadcn@latest add https://ui.j4m5.com/r/j4m5-kit.json

Theme and fonts only

npx shadcn@latest add https://ui.j4m5.com/r/j4m5.json

One component

npx shadcn@latest add https://ui.j4m5.com/r/button.json

Optional namespace in components.json

"registries": { "@j4m5": "https://ui.j4m5.com/r/{name}.json" }

After adding the namespace, run npx shadcn add @j4m5/card. The J4M5 Button, Card, Badge, Input, Textarea, Label, Switch, Tabs, Dialog and Alert replace the stock shadcn files with the same names.

Item	What it adds
`j4m5`	Tokens (light + dark), gem and mineral colors, organic radii, riso and glass utilities
`font-*`	Figtree, Fraunces, Zilla Slab (next/font or Fontsource)
`organic`	`blobPath()`, `seeded()`, `inkStyle()`
`button` `card` `badge`	Restyled, with gem, glass and print variants
`input` `textarea` `label` `switch`	Matte wells and an acrylic switch bead
`tabs` `dialog` `alert`	Acrylic rail and sheet, gem-wash alerts
`glass-panel` `riso-surface`	The two materials as primitives
`blob` `sticker`	Organic shapes and slab-serif stamps

For AI coding tools, point the model at ui.j4m5.com/llms.txt (or j4m5-design-system.md) before asking it to build UI.

Paper	`#efeee9`	Light background (never #FFF)
Ink	`#1d222b`	Light text
Carbon	`#12151a`	Dark background
Bone	`#eae8e2`	Dark text

0 Paper	Page. Mineral + grain.
1 Print	Cards, inputs, rows. `riso-print` / `riso-flat`
2 Overprint	Gem inks, multiply (light) / screen (dark). `overprint`
3 Acrylic	Nav, tab bar, popover, dialog, toast. `glass` / `glass-strong`
4 Gem	Primary button, active dot, sticker.

Button	default · secondary · gem · glass · outline · ghost · destructive · link
Card	print (default) · flat · glass; `ink="ruby"` re-inks the offset
Badge	default · secondary · outline · glass · 6 gem tones
Form	Input, Textarea = matte wells; Switch = matte track + glass bead
Overlay	Tabs rail, Dialog, Toast = acrylic
New	GlassPanel · RisoSurface · Blob · Sticker

`riso-print`	Matte fill + grain + halftone offset. Set `--surface`, `--overprint`. Don't use overflow:hidden.
`riso-flat`	Matte fill + grain, no offset.
`riso-halftone`	Dot screen in `--dot` (default overprint).
`riso-misreg`	0.045em second-ink text shadow, display type only.
`overprint`	mix-blend multiply (light) / screen (dark).
`glass` · `glass-strong`	Acrylic: blur 18px, sheen, hairline, soft shadow. Solid under reduced transparency.
`tilt-l` · `tilt-r`	−2.5° / +2° for stickers only.

Paper	`#efeee9` → Carbon `#12151a`
Ink	`#1d222b` → Bone `#eae8e2`
Primary	Sapphire → Sapphire glow
Minerals	Steps keep their role and invert: 100 = quiet wash, 700 = strong text
Gem washes	`-light` becomes a dark wash; `-deep` becomes light text
Overprint	Sapphire light, multiply → sapphire deep, screen
On-gem text	`--on-gem` (all gems except topaz) · `--on-bright` (topaz)

Five principles

Risograph builds depth

Matte versus acrylic

Muted minerals, rich gems

Figtree first

Organic over rigid

Color

Minerals: muted neutrals

Gems: rich accents

Sapphire (Medium Blue)

Ruby (Crimson)

Emerald (Green)

Topaz (Sunflower)

Amethyst (Purple)

Tourmaline (Teal)

Sample palettes

Harbor at Dusk

Orchard

Clay Studio

Field Notes

Gallery Night

Velvet Arcade

Semantic tokens (shadcn/ui)

Typography

Figtree

Fraunces

Zilla Slab

Type scale

Shape

Blob wobble

Depth & material

Riso texture

Components

Button

Badge & Sticker

Form

Tabs, Alert, Toast

Card variants

Default

Dense

Floating

Dialog

Examples

Small studio, loud ideas.

Play

Open Studio Night

Weekly plays

Install

Sources