Precise parts.
Organic possibilities.
An off-white canvas, neutral grays, and a single mauve accent. Every corner is square. Small cells bring movement and character to the controls themselves.
Zero radius, soft movement
Buttons, fields, cards and overlays share sharp corners. Softness comes from how they respond: an immediate press, followed by a gentle settle. No tinted panels or decorative side stripes.
Typography
Manrope for text and controls. DM Mono for code, identifiers and shortcuts. Both are bundled locally; no external font requests.
The detail makes the difference.
A project, a team, a next step.
COAL-0042 · ⌘ K · 0123456789
import "@chlohal/coal-ui/styles.css";
import "@chlohal/coal-ui/fonts.css"; // optional
// body { font-family: var(--coal-font-sans); }Body text: 16px. Controls: 14px. Supporting text: at least 12px. Weights: 400, 500 and 600. Tabular figures keep numeric values aligned.
Neutral surfaces. One accent.
Surfaces and text use neutral grays. Mauve marks an action, selection or keyboard focus. Statuses use explicit labels and distinct symbols on neutral backgrounds; meaning never depends on color alone.
Motion at your fingertips
Squares, put to work
A precise grid. An organic silhouette.
Cells form a check, move with a switch, and track progress. The same square becomes a working part of each component.
Meaning through shape and words
Soft, settled movement
Comfortable, compact when needed
Notifications that respect your attention
Motion rules
| Interaction | Behavior |
|---|---|
| Hover | Color and detail · 180ms |
| Press | Immediate press · 90ms, gentle return · 320ms |
| Focus | Immediate, visible outline |
| Switch, tabs, disclosure | Continuous movement · 320ms |
| Filtering and sorting | Move from the current position · 380ms |
| Floating content | 6px and opacity · 300ms |
| Dialog | 12px and opacity · 380ms |
| Sheet | From the edge · 440ms |
| Dismissal | 220ms |
| Reduced motion | No transitions; static loading indicator |
Accessibility is part of the design
- Visible labels, keyboard navigation and clear focus indicators.
- Text contrast of at least 4.5:1; essential control boundaries at least 3:1.
- Validation next to the field. Preserve input when an action fails.
- Warning and error notifications persist by default. Set timeout to 0 to keep any notification visible.
- Respect reduced motion and forced colors. Decorative cells stay out of the accessibility tree.
- Controls use 40px height, or 32px in compact mode. Small targets remain at least 24px.
The components provide shared behavior. Your application supplies meaningful labels, descriptions, validation and content.