Kanso

Kanso (簡素) is the Japanese aesthetic principle of simplicity: leave out what isn’t needed, so what remains is clear. It is the design system behind Makado, with the colors, type, components and rules for every screen, in light and dark.

78components
86color tokens
7color themes
120icons

Get started

Load the tokens and the component styles once, then use the components from window.Makado (React 18), or the CSS variables on their own.

<link rel="stylesheet" href="https://makado.app/kanso/tokens/tokens.css">
<link rel="stylesheet" href="https://makado.app/kanso/components/bundle.css">
<script src="https://makado.app/kanso/components/bundle.js"></script>

<html data-theme="dark">  <!-- or "light" -->

Every value is a token: var(--accent), var(--spacing-300), var(--radius-default), var(--shadow-elevated). Never a hard-coded hex color, font, pixel spacing, radius or shadow. The theme is set with data-theme on <html>, and a color theme with data-backdrop.

Explore

Brand bookVoice, logo, color, type, layout and accessibility, with the rules every screen follows. Color86 tokens in light and dark: surfaces, text, accent, status and stages. TypographyFigtree for the interface, Source Code Pro for codes, on one type scale. Color themesSeven themes from the Makado mark, each recoloring the accent and the backdrop. IconsThe Spectrum 2 workflow set, 120 icons, searchable. Components78 components with live previews, props and guidelines.

Principles

Calm, plain words

Warm and specific, never scolding: "2 things are overdue. Everything else is on track this week." Sentence case, no exclamation points.

Status is never color alone

Every stage and state comes with a word, an icon or a shaped mark, and text holds 4.5:1 in both themes.

Glass for navigation only

The side navigation, toolbars, menus and drawers float in glass. Content sits on solid surfaces.

One selected style

The current nav item, segment, tab and theme are all one raised thumb with bold text. Calls to action are black.