Skip to content

Kasane

Design system, v0.1.0

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

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

React or plain HTML

Package

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

Root layout

Import the CSS once. Inline the theme script in the head. It sets the theme before paint. The system never styles html or body.

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

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
        <style>{'html { scroll-padding-top: 96px; }'}</style>
      </head>
      <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

Every commit

10Contrast contexts
218Colour 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