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.
Why this file exists: the founder asked for a design system and brand guide as complete as
Apple's Human Interface Guidelines and Nike's Podium, and chose to reopen every earlier
decision rather than build on top of them. This records the fourteen interview rounds that
followed, so the rebuild has one brief and nobody has to re-ask. Where an answer changes an
August decision, the old round is named. The research behind the questions is in
research/2026-09-29-nike-apple-benchmark.md.
Method: fourteen rounds, four questions each, asked in plain language with concrete options
and tradeoffs. Questions that only an engineer or designer should answer were left out.
Purely visual choices (fonts, radii, ninja drawing, motion) are not decided here. Each one
goes to a rendered side-by-side round, which is listed at the end.
The deliverable
| Decision |
Answer |
| What happens to the existing system |
Reopen everything. All sixteen August rounds are open; each is kept or changed below. |
| Who it is for |
AI agents building screens, a future human team, and the public. |
| Where it lives |
The repo (the source of truth, still generated and checked in CI), Figma (a full library: tokens as variables in both themes, every component with variants, screen templates, brand assets, linked to the React components with Code Connect), and getkonjo.com/design (public, generated from the repo). |
| Name |
Kata: a form practised until it is right. Nike's system is Podium. |
| Public launch |
A LinkedIn update in the founder's voice, with three pieces: an Instrument-style case-study page, the post itself, and a carousel. The take to lead with: martial arts deserve better software. |
| Build order |
Brand core first (mark, colour, type, tokens), then components, then patterns, then the public site and LinkedIn pieces. |
| Rollout |
Everything can change now. The Unity pilot is small, so the shipped icon, fonts, colours and screens change as Kata lands, not at a later release. |
Strategy and story
| Decision |
Answer |
August round |
| Why Konjo exists |
Martial arts deserve great software. Runners get Strava; martial artists get software that looks like a tax form. Craft is the point. |
new |
| The hero of the brand |
The student. Dojos pay, but the brand is the student's companion first. |
new |
| Overall feel |
Athletic and dojo together. Nike-grade energy at the big moments (promotions, events, marketing); dojo calm, discipline and precision in daily use. |
R1 changed (was "bold athletic" throughout) |
| North stars |
Nike Run Club / the Nike App, and Strava. |
refines R1 |
| Combat edge |
Sparring yes, violence no. Real training, sweat and contact are shown; no blood, no fight-poster clichés, no "destroy your opponent" copy. |
new |
Name and mark
| Decision |
Answer |
Previously |
| The name |
Konjo is settled. |
— |
| The wordmark |
Bebas Neue KONJO is settled. |
unchanged |
| The logo mark |
The ninja is the mark. A simplified ninja head for small sizes (app icon, favicon, notification icon, embroidery), the full ninja for large ones. The founder accepted the tradeoff that a ninja reads as one specific art to a taekwondo or BJJ school. |
changed. brand/identity.md said the icon is "a shape or a letterform" and kept the mascot to pre-account screens, but the shipped icon, splash and favicon were already the ninja |
| Who draws it |
Claude redraws it as clean SVG vectors (head mark, pose set, animation-ready layers) from the current art; the founder judges side by side. A hired illustrator only if that is not good enough. |
new |
| The ninja's belt |
Black belt, always. |
settles a conflict: the README said black, the image prompts said red |
| Does the ninja talk |
No. It is silent: poses and expressions only, never speech bubbles or first-person lines. |
new |
| The ninja's name |
Named with the community: the Unity pilot or early users name it. |
new |
| Where the mascot appears |
Onboarding and sign-in; marketing, emails and social; empty states and errors; celebrations and milestones. |
R8 changed (the mascot was rejected for the product and confined to pre-account screens) |
Colour
| Decision |
Answer |
August round |
| The red |
#D62828 exactly. |
unchanged |
| Red's job |
Red is the action colour: primary buttons, links, selected and active states. The Strava model. |
R12 changed. The "one red role per screen" budget (law L4) is retired. |
| Light and dark |
Equal parity: neither theme is the hero, and both are designed deliberately. Everywhere: app, Studio (currently light-only), the marketing site and emails. |
R2 changed (was light-first) |
| Dojo colours |
None. A dojo brings its name, logo and cover photo; Konjo's colours are used everywhere. |
new |
Consequences, recorded so the colour chapter resolves them rather than rediscovering them:
- White on #D62828 is 5.01:1, so a red button with white text passes in both themes.
- #D62828 as text is 4.48:1 on the light page (a rounding-level failure, which is why
accent.red #C42020 exists) and 3.85:1 on the dark page. Red links and red selected
labels need their own per-theme text tokens.
- With red as the action colour, errors and destructive actions can no longer share it
casually. Kata must give "tap here", "this failed" and "this deletes something" three
distinguishable treatments.
Type
| Decision |
Answer |
August round |
| Headlines and hero numbers |
A condensed family with weights and lowercase, used for headlines, stats and belt names. Bebas stays the wordmark. |
R4 kept in spirit (heavy condensed display), implementation changed |
| Everyday UI and reading text |
One brand text face across app, Studio, site and email, so Konjo looks the same everywhere. |
changed (foundations/type.md used the platform font and banned webfonts) |
| Font budget |
Free and open-source only (Google Fonts, OFL). Every face must embed in the app, the web and email. |
new |
| Languages |
English only for now. No font choice is constrained by other scripts yet. |
new |
Imagery
| Decision |
Answer |
August round |
| Photography |
Type-led. No photography in app chrome; photos appear where people put them (dojo covers, event covers, posts). |
R8 kept for photography |
| A cover with no photo |
A typographic cover: big condensed type ("SPRING CAMP", "3RD KYU") on ink or a tint. |
unasked round, now answered |
| Children |
Same as adults. No special treatment beyond the dojo's own privacy settings. |
new. The rule of no kids on camera in founder social content is separate and unchanged |
How screens feel
| Decision |
Answer |
August round |
| "Loudness is a budget" |
Kept as guidance, not a hard count. One clear focus per screen is the spirit; it is judged by the reviewer, not counted by a script. |
changed (was a four-item hard count) |
| Separation |
Flat and tonal. White cards on a tinted page; no shadows, blur or gradients. |
R3 kept |
| Shape language |
Pill buttons and soft cards. Fully rounded buttons and chips, gently rounded cards. |
new |
| Student progress |
Streaks and badges; belts are the highest tier of badge. No guilt or loss-aversion mechanics. |
R7, R9 kept |
| Tab-home density |
Not re-asked; one clear focus as guidance (above) applies. |
R6 folded into guidance |
Voice
| Decision |
Answer |
August round |
| The app |
Plain and direct. "You're checked in." States facts, no exclamation marks. |
R11 kept |
| Marketing |
Plain, plus one line of energy per piece (a headline, a hook). |
new |
| Defining moments |
Full celebration: a promotion, a first class or a year of training is big and emotional. |
changed (August held these to plain facts and "no confetti") |
| The AI assistant |
"Ask Konjo": Konjo speaks, in the product's plain voice. |
new |
| The word "dojo" |
Default "dojo", renameable per school (dojang, academy, gym). |
new |
Dojo co-branding
| Decision |
Answer |
| How much a dojo may brand its surfaces |
Name, logo and cover photo only. |
| Where "Powered by Konjo" appears |
Public web pages only (the dojo's public page and sign-up funnel). Emails, receipts and certificates carry no Konjo credit. |
| Who a dojo's email or text is from |
The dojo only ("Unity Dojo"), with no Konjo mention beyond the legally required unsubscribe footer. Replaces today's "Konjo Support". |
| A promotion certificate |
The dojo's marks only. Konjo is invisible on the certificate. |
Celebration and shareables
| Decision |
Answer |
August round |
| A belt promotion |
All four: a ninja animation, a confetti burst in the new belt's colour, a certificate reveal naming the promoting instructor, and a share card. |
R13 changed (was a certificate only, no burst) |
| Shareable moments |
Promotion card, yearly recap, streak milestones, event results. |
new |
| Founder social content |
No template system. Founder reels and posts stay raw and personal. |
new |
| Decision |
Answer |
| Sensory identity |
A haptic vocabulary (check-in, success, warning, promotion), signature sounds (a check-in chime, a promotion sound; always optional) and a motion signature used at key moments. |
| Tablets |
Every screen has a designed tablet layout and rotates. |
| Print and physical |
Certificates, dojo signage and posters, merch and apparel (Konjo merch plus specs for dojo merch through the Printify shop), and cards and flyers. |
| Accessibility |
WCAG 2.2 AA plus real dojo conditions: glare, sweaty one-handed use, reading at arm's length mid-class. |
Judging screens
| Decision |
Answer |
| How a screen is judged |
A pass/fail checklist plus a scored rubric. Hard checks (contrast, tokens, states, touch targets) and a scored rubric (hierarchy, clarity, brand feel, voice) with a bar to pass. |
| Who judges |
An agent reviewer on every UI PR. Every UI PR also attaches screenshots or a video of every affected screen. There is no standing founder review gate. |
| How visual choices get made |
Rendered side-by-sides. Two to four variants per question, built on real Konjo screens, and the founder picks. |
Still open — the visual rounds
Decided by rendered comparison, not by description:
| # |
Question |
Constraint from this interview |
| V1 |
The condensed display family |
Decided 2026-09-30: Archivo at its narrowest width (wdth 62, weight ~850). Chosen over Barlow Condensed, Big Shoulders Display and Sofia Sans Extra Condensed |
| V2 |
The brand text face |
Decided 2026-09-30: Archivo at normal width. With V1, Kata runs on one variable family (Archivo, OFL): only the width changes between display and text. Chosen over Inter, Geist and Hanken Grotesk |
| V3 |
Neutrals |
Decided 2026-09-30: cool grey, today's palette (page #F2F2F3 / #0E0E10, card #FFFFFF / #1C1C22). Red link text is #C42020 in light and a lighter red in dark. Destructive actions use an ink outline, never red. Chosen over warm stone and pure neutral |
| V4 |
Radii |
Decided 2026-09-30: 16px cards, fully round buttons and chips. Chosen over 8, 12 and 24 |
| V5 |
The ninja head mark and pose set |
Head mark decided 2026-09-30: "Determined" — ink hood, a band tilted −6°, focused angled eyes, and the hood's knot tails flying behind, on brand red. Chosen over a cleaned-up copy of today's head, a minimal head, and the same head on white. The pose set follows from it |
| V5b |
The full-body pose set |
Method decided 2026-09-30. Hand-coded SVG was rejected as too crude for a character. The founder generates the art in ChatGPT from the prompt pack; Claude vectorizes and cleans the picks in Figma with rig-ready layers. Animation runs in Rive. The logo head gets a human illustrator's final pass before the public launch |
| V6 |
The motion signature |
Used at key moments; reduce-motion replaces it with a cross-fade |
| V7 |
The typographic cover |
Condensed type on ink or a tint |
| V8 |
The promotion choreography |
Ninja, burst in belt colour, certificate reveal, share card |
| V9 |
Haptic and sound vocabulary |
Optional sounds; a named haptic set |