# Kata — the Konjo design system > Kata is how Konjo, software for martial arts schools, looks, reads and behaves on iOS, Android, web and the > Studio desktop dashboard. Every page below is plain Markdown. If you are an AI agent building a Konjo > screen, read "The design skill" first: it routes you to the chapter for what you are building. Everything in one file: https://getkonjo.com/design/llms-full.txt ## Start here - [About these documents](https://getkonjo.com/design/md/start/overview.md): Building a screen? Don't start here — start with the design skill. It is the operational form of everything in this directory and it routes to the right chapter. - [The design language](https://getkonjo.com/design/md/start/language.md): The definitive reference for how Konjo looks and behaves, on both surfaces. Supersedes the visual sections of 2026-06-11-design-refresh-dark-mode-design.md and folds in the Studio brief. Built from a 46-app /… ## Brand - [Identity](https://getkonjo.com/design/md/brand/identity.md): The wordmark, the two colours, the icon, the splash, and the store. - [The ninja](https://getkonjo.com/design/md/brand/ninja-prompt-pack.md): Status: in use (2026-09-30). Supersedes onboarding-mascot-image-prompts.md, whose canon (red belt, gold #FFD60A, "Mojo") is retired. - [Mascot prompts (retired)](https://getkonjo.com/design/md/brand/mascot-image-prompts.md): Superseded 2026-09-30 by brand/ninja-prompt-pack.md. The canon below (red belt, gold #FFD60A, "Mojo") is retired; kept only as history. ## Foundations - [Colour](https://getkonjo.com/design/md/foundations/colour.md): The palette, why the hero inverts, and the two traps that keep recurring. - [Type](https://getkonjo.com/design/md/foundations/type.md): The scale, what each entry is for, and the two-sizes-per-screen rule. - [Space](https://getkonjo.com/design/md/foundations/space.md): The ramp, the legal half-steps, and grouping with space instead of lines. - [Radius and borders](https://getkonjo.com/design/md/foundations/borders.md): Two border tokens with two jobs, and the five radii. - [Elevation](https://getkonjo.com/design/md/foundations/elevation.md): Why the app is flat, and what separates a floating surface instead. - [The small metrics](https://getkonjo.com/design/md/foundations/metrics.md): Control heights, glyph sizes, avatars, chips, insets — the numbers that are never invented. - [Motion](https://getkonjo.com/design/md/foundations/motion.md): What moves, how far, how fast, and who opts out. - [Iconography](https://getkonjo.com/design/md/foundations/iconography.md): Weight, size, colour, and when a glyph may stand alone. - [Imagery](https://getkonjo.com/design/md/foundations/imagery.md): Photos, avatars, thumbnails, the mascot — and what each looks like when it fails. - [Rank](https://getkonjo.com/design/md/foundations/rank.md): Belts as data. The one foundation that is Konjo's and nobody else's. - [Content format](https://getkonjo.com/design/md/foundations/content-format.md): Dates, numbers, names, counts, and what happens when something does not fit. - [Accessibility](https://getkonjo.com/design/md/foundations/accessibility.md): Everything past contrast: screen readers, text scaling, reduced motion, and focus. ## Patterns - [Buttons](https://getkonjo.com/design/md/patterns/buttons.md): Primary, secondary, link — and the one-filled-primary budget. - [The tab home](https://getkonjo.com/design/md/patterns/tab-home.md): Hero-led or index-led, and how to tell which one this tab is. - [The list screen](https://getkonjo.com/design/md/patterns/index-list.md): The row anatomy, and where hairlines go. - [The tile grid](https://getkonjo.com/design/md/patterns/tile-grid.md): Triage plus one tap per person: attendance, check-in, a queue. - [The detail screen](https://getkonjo.com/design/md/patterns/detail.md): One record, in full. The second most common shape in the app, after the list. - [Navigation](https://getkonjo.com/design/md/patterns/navigation.md): Where a screen sits, how you get back, and what is allowed to be a modal. - [Forms](https://getkonjo.com/design/md/patterns/form.md): Fields, validation timing, error presentation, submit states. - [Pickers, selects, and sheets](https://getkonjo.com/design/md/patterns/sheet-picker.md): Chips, sheets, and the native picker — chosen by option count. - [Search and filter](https://getkonjo.com/design/md/patterns/search-filter.md): Finding one thing among many, and narrowing a list you are already looking at. - [Serious and consequential actions](https://getkonjo.com/design/md/patterns/destructive.md): Legal records, alerts, money, and anything that cannot be undone. - [Direct manipulation](https://getkonjo.com/design/md/patterns/direct-manipulation.md): Drag, drop, reorder — and the keyboard equivalent that is not optional. - [Boards](https://getkonjo.com/design/md/patterns/board.md): Columns of cards, one column per stage, where moving the card is the edit. - [Empty, loading, error](https://getkonjo.com/design/md/patterns/states.md): The three states every screen owes the person looking at it. - [Notifications and messages to the person](https://getkonjo.com/design/md/patterns/notifications.md): Push, in-app banners, toasts, and badges — everything the app says without being asked. - [Progress](https://getkonjo.com/design/md/patterns/progress.md): Streaks, badges, belts — Duolingo's mechanics in Konjo's voice. - [Celebration — the promotion certificate](https://getkonjo.com/design/md/patterns/celebration.md): The one moment the app is allowed to be loud about a person. ## Voice - [Voice](https://getkonjo.com/design/md/voice/voice.md): Plain and direct: the words the app uses, and the ones it never does. ## Studio - [Studio — the desktop dialect](https://getkonjo.com/design/md/studio/dialect.md): One foundation, two surfaces: where Studio deliberately differs. - [Studio metrics](https://getkonjo.com/design/md/studio/metrics.md): The numbers a desktop screen is made of. Mobile has had these since the start; Studio had four adjectives. - [Dashboards and snapshot cards](https://getkonjo.com/design/md/studio/dashboard.md): Studio's landing shape. A grid of cards that answer one question — what needs me today? — and hand off to the section that can do something about it. - [Tables](https://getkonjo.com/design/md/studio/tables.md): Studio's first-class layout. Rows an owner scans, sorts, filters and acts on in bulk. - [Overlays](https://getkonjo.com/design/md/studio/overlays.md): Studio's floating surfaces: the drawer, the menu, the dropdown, the transient confirmation. - [Charts](https://getkonjo.com/design/md/studio/charts.md): Konjo Studio's data visualisation: what to draw, and the palette that survived validation. - [Public surfaces — the session-less dialect](https://getkonjo.com/design/md/studio/public-surfaces.md): The pages a stranger sees. One foundation, three surfaces. - [Studio — information architecture and screen inventory](https://getkonjo.com/design/md/studio/ia-and-inventory.md): What Studio is, how it is organised, and every screen it ships. ## Tokens & components - [Konjo tokens — the complete tables](https://getkonjo.com/design/md/reference/tokens.md): Every number and every ratio below is read straight out of packages/design-tokens/tokens.ts and recomputed on each run. If a value here disagrees with the code, the generator is stale — run npm run design:sync. Never… - [Shared UI components](https://getkonjo.com/design/md/reference/components.md): 35 components are exported from src/components/ui/index.ts. Check this list before you build anything. If something close already exists, extend it — a second implementation of a row, a sheet or an empty state is the… - [Reference screens](https://getkonjo.com/design/md/reference/reference-screens.md): Forty screens from the 46-app, 315-screenshot study behind the design language. Every file is a publicly published App Store marketing screenshot, kept here as internal design reference and credited to its publisher… ## For agents - [The design skill](https://getkonjo.com/design/md/agents/skill.md): This skill bundles references/. SKILL.md carries the laws, the budgets and the formulas; §0 routes to the chapter for whatever you are actually building, and the generated references carry every value and every… - [Anti-patterns](https://getkonjo.com/design/md/agents/anti-patterns.md): Each is a named mechanism observed in a real product. "It looks dated" is not a diagnosis; these are. ## Process - [Governance](https://getkonjo.com/design/md/process/governance.md): How a token is added, how a chapter changes, and who decides. - [Kata migration — bringing every screen onto the new look](https://getkonjo.com/design/md/process/kata-migration.md): Status: in progress (2026-10-01) · Brief: the Kata interview · Brand core: galenjauss/Konjo#179 - [The design-completeness test](https://getkonjo.com/design/md/process/design-completeness.md): The standing gate. This is the one that can come back green. - [Where this came from](https://getkonjo.com/design/md/process/provenance.md): The research, the calibration rounds, and what was rejected. ## The story - [Kata — the founder interview](https://getkonjo.com/design/md/story/kata-interview.md): Date: 2026-09-29 · Status: decided; the brief for rebuilding Konjo's design system as Kata · Supersedes: the rounds of the 2026-08-22 calibration that are marked changed below. - [Benchmark — Nike's Podium, Apple's HIG, and the best brand guides](https://getkonjo.com/design/md/story/nike-apple-benchmark.md): Date: 2026-09-29 · Feeds: the Kata founder interview - [Design calibration — how the design language was decided](https://getkonjo.com/design/md/story/calibration.md): Date: 2026-08-22 · Status: decided; feeds konjo-design-language.md - [Product facts](https://getkonjo.com/design/md/story/product-facts.md): The business decisions a design document can never hold, answered once. - [Claude Design briefing — Konjo Studio (superseded)](https://getkonjo.com/design/md/story/studio-brief.md): This document has moved and its visual-identity section has been deleted. - [Claude Design brief — the Konjo Teach tab](https://getkonjo.com/design/md/story/teach-tab-brief.md): Generated 2026-09-03 from the shipped code — src/features/teach/screens/TeachHomeScreen.tsx, src/navigation/AppNavigator.tsx (the TeachStack function) and the screens they mount — plus a founder interview held the same… - [Teach card handoff](https://getkonjo.com/design/md/story/teach-card-handoff.md): Paste the Prompt for Claude Code section into Claude Code from the Konjo repo root (galenjauss/Konjo, branch master). The rest of this file is the spec it references. Keep this folder next to the repo (e.g.…