# misoto22 design > A monochrome design system for software, writing and photography: > portable CSS tokens and accessible React primitives. Paper ground, > near-black mark, and status is the only chroma in the file. Install: `npm install @misoto22/design`. Styles: `import '@misoto22/design/styles.css'`. Every component is a client-safe React 19 component; the token layer is plain CSS and works without React at all. ## The laws 1. **The ground is paper.** White, not off-white, and the same white on every surface. There is no card colour, no elevated panel tint, and no "subtle background" that quietly becomes a second ground. Rules out: A card that separates itself from the page by being a different shade of white. 2. **A shadow is never blurred.** The system has no light source, so it has no elevation ramp. Depth is a hairline, a change of ground, or a hard ink offset with no blur radius. Rules out: box-shadow: 0 2px 8px rgba(0,0,0,.08) — and the whole scale it belongs to. 3. **The rule does the work colour would.** Three weights, and each is chosen by what it separates: hairline between rows, edge between blocks, hard under a masthead. A monochrome page has nothing else to divide with. Rules out: Five hand-tuned greys, picked per component, that nobody can tell apart. 4. **There are two text steps and nothing lighter.** The floor clears AA on white at 6.7:1. Every step above it is darker. A third, lighter grey is not a design decision available here. Rules out: #999 on white, for "secondary" text that half the readers cannot see. 5. **Chroma is bound to state.** Green, amber and red mean succeeded, needs attention, and failed. They are never decorative, and the meaning is always doubled — by an icon, by the words, or by both. Rules out: A blue badge because the row needed some colour. 6. **One ladder, and the page owns the top of it.** Five heading steps, fluid between a phone and the full page, and nothing sits above the page title. Two headings that nest must skip a step, or the hierarchy is not readable as one. Rules out: A card title on one page that is larger than another page’s own h1. 7. **The accent is ink.** In a monochrome system the single editorial pointer collapses onto the mark. What used to be carried by hue is carried by weight, by an underline, by a filled pill, or by reversal. Rules out: A brand hue reintroduced through a link colour or a hover state. 8. **Dark mode is a value swap, not a second palette.** The same token names, different values. That is why a component reads a semantic alias and never a primitive: the alias re-resolves on its own when the mode flips. The two exceptions — type over a photograph, and a foreign brand mark — are documented where they are defined, because their ground is not the theme. Rules out: A .dark block in a component’s own stylesheet, freezing one side of the swap. ## Theming Six attributes on the root re-point tokens the package already defines. No component reads any of them, and none of them introduces a token. - `data-mode`: light | dark - `data-surface`: paper | warm | cool - `data-radius`: sharp | soft | round - `data-rules`: quiet | hairline | firm - `data-type`: editorial | grotesk | bookish - `data-motion`: still | calm | snappy - `data-density`: comfortable | compact Plus `data-accent`, which re-points the single token every chosen state reads. An unset attribute is the default; nothing is anchored to `:root`, so an axis set on any element applies to the subtree below it. ## Components - [Button](https://ui.misoto22.com/components/button/llms.txt): The system’s action, as a pill that does not move on hover. - [FloatingIconButton](https://ui.misoto22.com/components/floating-icon-button/llms.txt): A round action pinned to a screen corner. - [Badge](https://ui.misoto22.com/components/badge/llms.txt): A count or a state, set in mono so it reads as metadata. - [Tag](https://ui.misoto22.com/components/tag/llms.txt): A subject label — a topic, a technology, a filter facet. - [Kbd](https://ui.misoto22.com/components/kbd/llms.txt): A key on a keyboard, set as one. - [Avatar](https://ui.misoto22.com/components/avatar/llms.txt): A person, as a circle, with initials until the image lands. - [StatusDot](https://ui.misoto22.com/components/status-dot/llms.txt): The dot beside a status word. - [StatusPill](https://ui.misoto22.com/components/status-pill/llms.txt): A live state, named: a dot plus an uppercase mono label. - [LinkArrow](https://ui.misoto22.com/components/link-arrow/llms.txt): The mark on a link that leaves the page. - [Separator](https://ui.misoto22.com/components/separator/llms.txt): A rule, in the three weights a monochrome page needs. - [FigureBand](https://ui.misoto22.com/components/figure-band/llms.txt): A row of counted facts, divided by hairlines and nothing else. - [Spinner](https://ui.misoto22.com/components/spinner/llms.txt): The one “working” indicator — a ring, never a shimmer. - [Skeleton](https://ui.misoto22.com/components/skeleton/llms.txt): The shape of the page, before the page. - [Progress](https://ui.misoto22.com/components/progress/llms.txt): A bar that fills, or sweeps when the end is unknown. - [Alert](https://ui.misoto22.com/components/alert/llms.txt): A message about the page, in place. - [EmptyState](https://ui.misoto22.com/components/empty-state/llms.txt): A collection with nothing in it — yet. - [ErrorState](https://ui.misoto22.com/components/error-state/llms.txt): A page that could not be shown. - [Toast](https://ui.misoto22.com/components/toast/llms.txt): A transient confirmation, mounted once near the app root. - [Field](https://ui.misoto22.com/components/field/llms.txt): A labelled form row: label, control, and the one message below it. - [Input](https://ui.misoto22.com/components/input/llms.txt): A single line of text entry. - [Textarea](https://ui.misoto22.com/components/textarea/llms.txt): Multi-line text entry, resizable vertically only. - [Select](https://ui.misoto22.com/components/select/llms.txt): A choice from a list, styled the whole way down. - [NativeSelect](https://ui.misoto22.com/components/native-select/llms.txt): The platform’s own picker, restyled where it can be. - [Checkbox](https://ui.misoto22.com/components/checkbox/llms.txt): A choice that takes effect when the form is submitted. - [RadioGroup](https://ui.misoto22.com/components/radio-group/llms.txt): A set of mutually exclusive choices. - [Switch](https://ui.misoto22.com/components/switch/llms.txt): A setting that takes effect immediately. - [Dialog](https://ui.misoto22.com/components/dialog/llms.txt): A modal surface: portal, scrim, centred panel. - [DropdownMenu](https://ui.misoto22.com/components/dropdown-menu/llms.txt): A menu of actions. - [Tooltip](https://ui.misoto22.com/components/tooltip/llms.txt): A short label on hover and on focus. - [Tabs](https://ui.misoto22.com/components/tabs/llms.txt): One strip, several panels. - [Accordion](https://ui.misoto22.com/components/accordion/llms.txt): Disclosure rows that open in place. - [Breadcrumb](https://ui.misoto22.com/components/breadcrumb/llms.txt): Where you are, as a path. - [Pagination](https://ui.misoto22.com/components/pagination/llms.txt): Numbered pages, with the middle elided. - [NavItem](https://ui.misoto22.com/components/nav-item/llms.txt): A row in a sidebar. - [Card](https://ui.misoto22.com/components/card/llms.txt): A bounded surface, with no shadow under it. - [Table](https://ui.misoto22.com/components/table/llms.txt): A ruled data table — alignment, sorting and rules all per column. - [AppShell](https://ui.misoto22.com/components/app-shell/llms.txt): Two columns on a desktop, a drawer on a phone. - [Combobox](https://ui.misoto22.com/components/combobox/llms.txt): A select you can type into. - [DatePicker](https://ui.misoto22.com/components/date-picker/llms.txt): A date — or a span of them — chosen from a calendar. - [Slider](https://ui.misoto22.com/components/slider/llms.txt): A value chosen along a range. - [ToggleGroup](https://ui.misoto22.com/components/toggle-group/llms.txt): A segmented control: several options, one strip. - [Popover](https://ui.misoto22.com/components/popover/llms.txt): A panel anchored to a control, holding content you can interact with. - [Sheet](https://ui.misoto22.com/components/sheet/llms.txt): A panel docked to an edge of the viewport. - [ContextMenu](https://ui.misoto22.com/components/context-menu/llms.txt): The menu a right-click opens. - [SearchableMenu](https://ui.misoto22.com/components/searchable-menu/llms.txt): A menu of actions you can type into. - [Command](https://ui.misoto22.com/components/command/llms.txt): A filterable list of actions — the ⌘K surface. - [Collapsible](https://ui.misoto22.com/components/collapsible/llms.txt): One thing that opens, on its own. - [Calendar](https://ui.misoto22.com/components/calendar/llms.txt): A month, as a grid of days. - [ScrollArea](https://ui.misoto22.com/components/scroll-area/llms.txt): A box that scrolls, with a scrollbar that looks the same everywhere. ## Foundations - [Colour](https://ui.misoto22.com/foundations/colour/): A white ground, a near-black mark, three rule weights, and status. - [Typography](https://ui.misoto22.com/foundations/typography/): Three faces, one heading ladder, and nothing above the page title. - [Space & shape](https://ui.misoto22.com/foundations/space/): The page gutter, the measures, and the four radii. - [Motion](https://ui.misoto22.com/foundations/motion/): One curve, three durations, and a reduced-motion rule that is not optional. ## Templates - [Dashboard](https://ui.misoto22.com/templates/dashboard/): A console: a sidebar, a figure band, tabs, a filterable table and two job cards. - [Landing page](https://ui.misoto22.com/templates/landing/): A marketing page: a hero, a figure band, three pillars, a reversed pricing plate and an FAQ. ## Optional - [Everything, inline](https://ui.misoto22.com/llms-full.txt) — every component in one file. - [Themes](https://ui.misoto22.com/themes/) — the five presets, rendered. - [Changelog](https://ui.misoto22.com/changelog/)