Design System
Foundations · Components

Components.

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.

Buttons

Seven variants, four sizes. Primary (iris) for the single most important action on screen; secondary (coral) is reserved — not a default companion to primary. Outline, ghost, and link cover the long tail.

Variants

Learn more →

Sizes

With icons

States

Inputs & forms

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.

Visible to everyone in the workspace.
akku.so/
Lowercase, no spaces.
Enter a valid email address.

Selection controls

Cards

Three card treatments — resting (default), elevated, and feature (tinted). Interactive cards lift on hover with --shadow-md and an iris border.

TYPE · ENDPOINT

api.akku.so/v2/auth

OAuth 2.0 authorization endpoint with PKCE. Issues short-lived access tokens and refresh tokens.

Updated 2d agoStable
DOC · GUIDE

Migrating from v1

Breaking changes, codemods, and a migration script. About 20 minutes of work for typical apps.

6 min readNew
UPGRADE

Akku Pro — unlimited seats

Everything in Team, plus SSO, audit logs, and priority support. 14-day free trial.

Stats

Active users 12,847 ▲ 8.2% vs. last week
Tokens issued 847K ▲ 12% MoM
Error rate 0.12% ▼ 0.03pp vs. last week
Avg. latency 84ms p95 across all regions

Badges & tags

Badges are non-interactive status. Tags are interactive filters (removable). Soft variants are the default — solid for high-emphasis UI moments only.

Soft · default

Stable Beta Preview Draft Live Review Blocked Info

Solid · high emphasis

PRO NEW v2 INTERNAL Outline

Tags · removable

design-system × iris × coral × needs-review ×

Feedback

Alerts for persistent messages; progress for long-running work. Keep copy terse — the color already tells the user which way to read.

Heads up — v2 tokens are coming. Existing --iris-* names won't change, but --brand-* aliases will be retired.
Tokens published. All 7 ramps and 14 spacing steps are now live in @akku/tokens@1.2.0.
Contrast warning. Coral-300 on coral-50 fails AA for body text. Use coral-700 on coral-50 or coral-300 on ink-900 instead.
Build failed. Token --color-brand-highlight is not defined. Check _shared.css.

Progress

Data display

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.

AM
AM
AM
AM
RK
SJ
+4

On dark surfaces

Components hold up on deep iris-950. Buttons, badges, and alerts read cleanly — just swap neutral borders for iris-800.

Dark · buttons

Dark · badges

PRO NEW Live 12 members