Skip to content
GitHub

misoto22 design

The White Reset

A pure-white monochrome design system for software, writing and photography. The ground is paper-white, the mark is near-black, and the only chroma left in the file is status — which is bound to state and never to brand.

Browse componentsRead the principles36 components
Components
36
Tokens
122
light and dark
Radius steps
4
and there is no fifth
Blurred shadows
0
depth is a hairline

Install

pnpm add @misoto22/design

Four runtime dependencies — Radix for the behaviour nobody should re-implement, lucide for icons, sonner for toasts, and clsx + tailwind-merge to resolve a class conflict in the caller’s favour. No router, no state library, no CSS-in-JS.

// Once, at your app root — the compiled stylesheet carries the tokens,
// the utilities the components use, and the vendored faces.
import '@misoto22/design/styles.css'

import { Button, Field, Input } from '@misoto22/design'

export function SignIn() {
  return (
    <form className="flex flex-col gap-4">
      <Field label="Email" required>
        <Input type="email" />
      </Field>
      <Button type="submit">Continue</Button>
    </form>
  )
}

Foundations

ColourA white ground, a near-black mark, three rule weights, and status.TypographyThree faces, one heading ladder, and nothing above the page title.Space & shapeThe page gutter, the measures, and the four radii.MotionOne curve, three durations, and a reduced-motion rule that is not optional.

Components

Actions

ButtonFloatingIconButton

Display

AvatarBadgeFigureBandKbdLinkArrowSeparatorStatusDotStatusPillTag

Feedback

AlertEmptyStateErrorStateProgressSkeletonSpinnerToast

Forms

CheckboxFieldInputRadioGroupSelectSwitchTextarea

Overlays

DialogDropdownMenuTooltip

Navigation

AccordionBreadcrumbNavItemPaginationTabs

Surfaces

AppShellCardTable

Already using Tailwind?

Take the portable token layers on their own and skip the second copy of the utilities. The mode is an attribute on <html>, so it can be written before the first paint and never flashes the wrong theme.

/* An app that already compiles Tailwind takes the token layers only, and
   skips a second copy of the utilities. */
@import 'tailwindcss';
@import '@misoto22/design/tokens.css';
@import '@misoto22/design/semantic.css';
@import '@misoto22/design/keyframes.css';

/* Generate the utilities the library's own components use. */
@source '../node_modules/@misoto22/design/dist';

@custom-variant dark (&:is([data-mode='dark'] *));
<!-- The mode is an attribute on <html>, so it can be written before first
     paint and never flashes the wrong theme. -->
<html data-mode="dark">
// Every component merges your className LAST, through tailwind-merge — so a
// conflicting utility replaces the built-in one instead of racing it in the
// stylesheet.
<Button className="px-2">Tight</Button>
// → px-2 wins; the base px-6 is dropped, not emitted alongside it.