The working layer. Buttons, inputs, cards, badges, and navigation — all wired to the tokens you already have. Every class is prefixed .akku- so you can drop this sheet into any project without name collisions.
Inputs sit on surface, not on the page background — they read as interactive, not decorative. Focus uses an iris halo (3px, 10% opacity) for accessibility without heavy borders.
Selection controls
Three card treatments — resting (default), elevated, and feature (tinted). Interactive cards lift on hover with --shadow-md and an iris border.
OAuth 2.0 authorization endpoint with PKCE. Issues short-lived access tokens and refresh tokens.
Breaking changes, codemods, and a migration script. About 20 minutes of work for typical apps.
Everything in Team, plus SSO, audit logs, and priority support. 14-day free trial.
Stats
Badges are non-interactive status. Tags are interactive filters (removable). Soft variants are the default — solid for high-emphasis UI moments only.
Soft · default
Solid · high emphasis
Tags · removable
Alerts for persistent messages; progress for long-running work. Keep copy terse — the color already tells the user which way to read.
Progress
Avatars, avatar groups, and stacked lists. Avatars use the primary ramp by default — assign individual users to neutral, teal, or coral for color variety without chaos.
Components hold up on deep iris-950. Buttons, badges, and alerts read cleanly — just swap neutral borders for iris-800.
Dark · buttons
Dark · badges