Web Tanka, distilled. One-source design tokens, components, and patterns lifted from web.tanka.ai.
Every primitive lifted straight from production.
# Design.md — Web Tanka, distilled (2026-05-14) name: Web Tanka source: web.tanka.ai description: Soft #006dff palette. Asymmetric chat bubbles. colors: brand: "#006dff" brandHover: "#3289fe" brandDeep: "#0f294d" text: "#020617" secondary: "#8794a6" surface: "#fdfefe" bgPage: "#deebff" danger: "#ef4444" warning: "#ffbb20" success: "#0ec46c" typography: stack: "Helvetica Neue, PingFang SC" body: { size: 16, lh: 1.4 } title: { size: 24, weight: 700 } largeTitle: { size: 32 } detail: { size: 12 } radii: [6, 8, 12, 16, 20, 24, 999] spacing: [2, 6, 9, 12, 14, 18, 24] layout: leftRail: 65 sidePanel: 342 drawer: 460 maxWidth: 1792 rules: - Primary CTA defaults to BLACK pill (36h) - Modal Save may be black or blue — prefer black - Only one blue: #006dff. No new variants. - Cards: 0.5px hairline border or none - Empty state = line art + grey caption, no CTA - Toast: bottom-left, dark pill, white-stroke ✓ (no green)
Tanka ships both colours of primary Save. Edit Name (legacy) is blue; Rename (newer) is black with a clear-button affordance. Pick black for new screens.
Dark pill, white text, single-stroke check (no green fill). Anchored 12-24px from the left edge, auto-dismisses in 1.5–2s. Tanka never positions toasts top-right or centre — that real estate belongs to drawers and dialogs.
watch the bottom-left corner
Other's bubble: corner radius 0 / 12 / 12 / 12. Yours: 12 / 0 / 12 / 12. The flat corner points at the sender — a tiny convention that does a lot of heavy lifting on a dense screen.