Kasane

Design system, v0.15.1

Kasane provides tokens, CSS, a React layer, and a plain-JS runtime for kurobeni.jp.

Components See a page

Pages

Reference

Components

Lists every component's props with a live example.

Reference

Tokens

Lists every token with its variable and value, plus the contrast report.

Page

Demo

A whole page, including the app shell, a table, forms, long-form text, and the sheet.

Install

Package

"@kasane/design": "git+https://git.konpeki.co.uk/jacob/kurobeni.git#v0.15.1"

Root layout

Import the CSS once and wrap the page in the root. The root sets the theme before paint; without a theme the CSS follows the OS. Set the scroll padding for the fixed bar in your own stylesheet. The system does not style html or body.

import '@kasane/design/css';
import { Kasane, ToastProvider } from '@kasane/design/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body style={{ margin: 0 }}>
        <Kasane>
          <ToastProvider>{children}</ToastProvider>
        </Kasane>
      </body>
    </html>
  );
}

Without React

<link rel="stylesheet" href="https://cdn.kurobeni.jp/kasane/kasane.css" />
<script src="https://cdn.kurobeni.jp/kasane/head.js"></script>
<script src="https://cdn.kurobeni.jp/kasane/kasane.js" defer></script>

The markup is the same class names the React layer emits. kasane.js adds the theme switch, the dropdown, tabs, pressed groups, scrollable tables, dialogs and toasts to plain markup.

Fonts

Not shipped. Load IBM Plex Sans, IBM Plex Sans JP and IBM Plex Mono from Google Fonts.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+JP:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" />

Rules

Bands

A page is a stack of full-bleed bands, each holding one 1200px column. The four tones are the page, tone (deeper paper, for tiles), deep (the kurobeni stripe), and beni (the accent as a ground). A panel on the deep band takes the light theme.

One radius

24px on every box and control. A 32, 40 or 48px control is a pill. Radios are circles.

Theme

data-theme is always set on html: the head script reads ?theme= once, then local storage, then the OS. There is no prefers-color-scheme in the CSS.

Status is a word

A status is coloured text with no badge or dot.

Controls are drawn

Checkbox, radio, switch and the dropdown are drawn by the CSS. The switch says On or Off.

Type

IBM Plex Sans, sizes 12 to 72. Nothing under 12px. Code in Plex Mono.

Checks

10Contrast contexts

288Colour pairs measured

3.01:1Lowest in use

What runsThe checks run Prettier, variable and breakpoint checks, stylelint, vitest (tokens, contrast, deviations, React markup against the CSS), and Playwright (focus, tap targets, reflow, theme, axe, behaviours) on the harness and on this site.

Contrast report