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.
Topbar primary is black; modal primary is mostly black, sometimes blue (legacy). Beyond that: text-only secondary, round icon, round send, red destructive — no other variants.
Underline for primary content switches, pill for secondary filters, drawer underline (1px blue) inside right panels. No other tab styles.
460px wide, anchored to the right with a 0.5px hairline divider. No drop shadow — it doesn't float, it docks. Background #f2f4fa so the white cards inside it can pop.
Stat for numbers, Tool for integrations, Highlight banner for plan or permission states. All sit on white, all use radius 12–16, none carry heavy borders.
Nothing to show: a single line-art illustration plus a grey caption. Something loading: shimmer bars approximating the eventual layout. Never spinners.