miche · design system

Midori Paper Pad

Cool slate paper, ink hierarchy, restrained slate-blue accent, Japanese serif + Source Code Pro numerals. The tokens and primitives below are the only building blocks the app should use — anything not documented here is a candidate for extraction.

Tokens

@miche/design/styles.css :root

surface

--paper-grid#e8eaed

--paper-edge#d3d6db

--paper-white#eff1f4

--grid-line#b8bdc6

--grid-accent#b8bdc6

ink

--ink-black#1f242c

--ink-gray#4d5462

--ink-light#8c93a0

accent

--accent#4a5d75

--accent-soft#6e7e98

shadow

--shadow-softrgba(80, 60, 20, 0.05)

--shadow-mediumrgba(80, 60, 20, 0.07)

--shadow-deeprgba(80, 60, 20, 0.13)

--shadow-accentrgba(138, 106, 58, 0.18)

Typography

Noto Serif · Noto Sans · Source Code Pro

serif

The loaf is a ritual.

Section heading

sans

Body copy sits in Noto Sans JP. Use for paragraphs, hints, and anything that isn't a number or a heading.

Secondary ink color for subordinate copy.

mono · scale

xs0123456789 · baker's %

sm0123456789 · baker's %

base0123456789 · baker's %

lg0123456789 · baker's %

xl0123456789 · baker's %

Button

The primary variant is reserved for one hero action per screen. Hover transitions to a fill; press nudges 1px down.

NumberInput

default

with unit

disabled (read-only)

Underline is invisible until hover; focus turns it accent with a warm tint.

EditableText

onInput · live updates (recipe title)

current value: Country Loaf

onCommit · rename on blur

Enter or blur commits trimmed; empty / unchanged reverts.

current value: Bread Flour

Mono + ValueWithUnit

inline number pairings

value1080g75.4%2loaves

DragHandleIcon at default size

…at 20px

PickerItem · PickerSection

dropdown rows

Recipes

Pre-ferments

selectedCountry Loafhighlighted persists hover wash for keyboard-navigated lists. Wrap in a Card padding="sm" elevation="overlay" when floating above body cards.

Icons

XIcon · 12

XIcon · 20

DragHandleIcon

Both icons inherit currentColor, so wrap in a span with the desired ink token to retint.

Composition

real-world example

Levain Build

220g

IngredientBaker's %

Grams

Bread Flour

Water

Starter

Hydration100%