kata

kata is the design system of sakuzu's drawing tools: a numeric scale derived from the golden ratio, CSS tokens and Svelte components for drawing applications on the web. Start with the Principles and the Scale, then use the Components and the parts of the Workbench.

Read the chapters in order; each one builds on the ones before it.

1. Principles. The six rules behind every value and component.
2. Scale. The single root φ, the steps, the seven sizes and the type roles, with their formulas and values.
3. Tokens. The CSS custom properties for spacing, type, color and the rest, and the base CSS.
4. Measuring. Where a distance starts and ends: the visible edge, the ink of text, padding and gaps.
5. Layout. Containers, stacks and rows, gaps, the three widths, and how a page is composed.
6. Components. How to use the Svelte components, then one page per component: its props, its height, padding and states, and a live example.
7. Workbench. One page per part of a drawing application: its boundary with the application, and a live example.
8. Patterns. The shapes of screen that come back: a modal with a form, a menu, a list, a panel, a settings page and the workbench.
9. Checks. What the automated checks of the components measure and what they reject.