Browse all of Kata

Benchmark — Nike's Podium, Apple's HIG, and the best brand guides

Source docs/design/research/2026-09-29-nike-apple-benchmark.mdMarkdown

On this page

Date: 2026-09-29 · Feeds: the Kata founder interview

The research behind Kata. Four questions: how Nike runs its digital design system, how complete Apple's Human Interface Guidelines really are, what a complete brand identity guide contains, and where Konjo's existing system stands against all three. Six researchers, a synthesis pass that crosswalked 194 topics, and an adversarial completeness critic.

Evidence rules carry over from the August calibration: nothing here is a Konjo token value, and every figure below is either counted from a primary source (Apple's DocC JSON, nike.com's live stylesheet, Instrument's own page) or labelled as secondary.

1. Nike — Podium

What it is. The design system behind Nike.com, the Nike App, SNKRS, Nike Run Club and Nike Training Club, internally named Podium (Podium DS, launched 2020). Instrument, Nike's product agency for 15+ years, co-created, documented and implemented it with Nike's in-house team; Kurppa Hosk later rebuilt its foundations as Podium Core. The Instrument case study itself is short (about 250 words, four images, six video loops): "Create a unifying digital design system that enables consistency at scale… Accessible across platforms and intended to evolve." Results: UNIFIED · FLEXIBLE · PREMIUM.

How it is organised — a system of systems.

Layer Holds
Podium Core Tokens and foundations: colour, type, grids, spacing, radii, ratios, iconography, motion, "environments" (focus without heavy elevation), data viz, accessibility, globalisation
Consumer 22 shared components (avatars, badges, buttons, carousels, content cards, filters, navigation, lists, loaders, modals, product cards, search, stories, tags, video player…) and UI patterns
Enterprise / internal tools Partnered with, not owned by, the core team
Sub-brand expression NRC, SNKRS and campaigns add their own expressive layer on top of Core: "unity, not uniformity"

Around it: a documentation site (Foundation · Consumer · Internal Tools · Articles · Resources; every page opens with a one-line definition and View in Library / Design Guideline / Download All, an "Updated" date and HTML/iOS/Android code tabs), a Figma library, and about 349 --podium-cds-* tokens live in nike.com's stylesheet today. Those tokens are primitive, then semantic (with on-light, on-dark and inverse variants), then component, and each layer falls back to the one below.

The ethos came a year late. Podium shipped in 2020 without principles, and "teams using the design system really didn't know what it stood for." A three-day workshop in 2021 produced Play Together (unity, not uniformity), Play Fair (equity for all athletes) and Play Smart (contextually aware), each with three written behaviours.

The visual language — restraint plus rationed energy.

  • Product UI is aggressively monochrome: white, grey-100 #F5F5F5, ink #111111, grey-500 secondary text. Primary buttons are black pills. Brand colours (Nike Orange, SNKRS red) are named brand tokens, not action colours; red in the UI means critical.
  • The brand face is display-only. Nike Futura (condensed extra-bold caps) appears in four fixed sizes per breakpoint band at line-height 0.9; Helvetica Now carries nearly all reading text. Type is organised by role: Statement, Information, Conversation, Oversize.
  • Space: a 4px grid inside components, plus a coarser set of vertical intervals (120/84/60/48/36/24/12) for stacking components.
  • Shape: pill buttons (heights 34/46/58), radii by role (0 full-bleed, 4 small cards, 8 large cards).
  • Ratios by role: 16:9 visual nav, 4:5 product cards, 9:16 stories only.
  • Motion: two curves (functional, expressive), durations of 150–400ms, delay tokens, and three principles: Perform, Guide, Express.
  • Environments: focus is steered by colour, scrim and one light shadow, "without overly strong elevations".
  • Brand graphics come from the mark's geometry: Swoosh-angle line fields, "the cross", "the dot".

The hero formula. A sentence-case eyebrow, then a two-line condensed caps headline, then one filled pill and at most one outlined pill. Below it, everything drops into sentence-case Helvetica with two-tone headings ("Picked for You / Gear to keep you moving").

Transferable to Konjo:

  1. Write the ethos: principles with testable behaviours, above the rules.
  2. Ration the brand face by role and fixed sizes.
  3. Name semantic tokens by role, with per-context variants.
  4. Separate a small spacing grid from the between-block rhythm.
  5. Give focus an environment system rather than shadows.
  6. Derive graphic devices from the mark.
  7. Fix ratios and radii by role.
  8. Brand the system itself (Podium → Kata) and publish visual release notes.
  9. Grow it from shipped product, not a spec drawn up front.

2. Apple — the Human Interface Guidelines

Size. Crawled 2026-09-29 through Apple's DocC JSON: 173 URLs — the root, 6 section indexes, 8 component-group indexes and 158 guideline pages, with no orphans. That is about 220,500 words (roughly 15 hours of reading), with about 1,470 images, 61 videos and 294 tables. Every page is also published in Chinese, Japanese and Korean.

Section Pages What it holds
Getting started 9 8 design principles; one "Designing for <platform>" primer per device
Foundations 18 Accessibility, app icons, branding, colour, dark mode, icons, images, inclusion, layout, materials, motion, privacy, RTL, SF Symbols, typography, writing… (~38,500 words)
Patterns 25 Onboarding, loading, feedback, entering data, modality, searching, settings, accounts, notifications, undo, workouts, haptics, charting…
Components 64 in 8 groups Content · Layout and organisation · Menus and actions · Navigation and search · Presentation · Selection and input · Status · System experiences (widgets, Live Activities, notifications)
Inputs 13 Gestures, keyboards, pointers, focus and selection, Pencil, Digital Crown…
Technologies 29 Apple Pay, Sign in with Apple, Wallet, HealthKit, VoiceOver, generative AI… (often with brand and legal rules)

Every page has the same anatomy:

  1. A one-sentence definition ("A button initiates an instantaneous action.").
  2. Hero art.
  3. A short intro.
  4. Best practices (129 of 158 pages).
  5. Topic sections as needed: Anatomy, Content, Specifications.
  6. Platform considerations (148 of 158), which always accounts for every platform, even as "No additional considerations for tvOS."
  7. Resources (Related, Developer documentation, Videos).
  8. A dated Change log (115 pages, 296 entries since 2022).

The rule form is the reason it works. About 2,380 bold one-sentence rules, about 15 per page, each followed by its rationale and often an example. Rule strength is carried by the verb:

  • Always / Don't for hard rules.
  • Avoid for strong defaults.
  • Prefer / In general for defaults.
  • Consider for options.

"Should" appears five times in 220,000 words. The writing is about "people" (3,596 uses), not "users" (34).

What makes it thorough rather than long:

  • Coverage: every component, however small, has its own page, even at 100 words.
  • One template: readers always know where to look.
  • Checkable rules: one rule per sentence, so a screen can be audited rule by rule.
  • Reasons: every rule explains itself.
  • Numbers where they matter: 44pt targets, colour values for four appearance variants, Dynamic Type tables.
  • Explicit scope: silence is never ambiguous.
  • Guidance tied to code: 1,083 links to the exact API.
  • Accessibility inside every page, not only in one chapter.
  • A principles layer that breaks ties.
  • Visible maintenance: per-page change logs, update banners and a site-wide "What's new" feed.
  • Tools that make the compliant way the easy way: Figma and Sketch kits, SF Symbols, templates and bezels.

3. Brand identity guides

Studied: Uber, Spotify, Mailchimp, Slack, Duolingo, Atlassian, Shopify, Strava, WHOOP, GOV.UK, Material 3, Apple Branding, Formula 1, Nike Empower, Airbnb, Discord and WRKOUT.

The best guides converge on four parts: Foundation (why and who), Identity (marks, colour, type, voice, imagery), Applications (every real touchpoint) and Governance (who approves, how it changes). The complete taxonomy, which Kata's brand book follows:

# Section Holds
0 How to use this guide Reading paths per audience; must / should / may; status tags
1 Foundation Origin story, the name (根性, "guts"; also "beautiful" in Amharic), purpose, audiences, positioning
2 Values and personality "X, never Y" pairs; a personality benchmark; brand tensions
3 Architecture and naming Masterbrand plus descriptors (Konjo, Konjo Studio); how to write the name
4 Verbal identity Voice pillars; a tone map by moment; messaging hierarchy and boilerplate; words to avoid
5 Logo system Mark, wordmark, lockups, clear space from a unit inside the mark, minimum sizes in px and mm (incl. embroidery), colourways, misuse
6 Co-branding and tenant identity Relationship tiers; tenant inputs vs platform-guaranteed outputs
7 Colour Palette with print, Pantone and thread equivalents; roles; proportions; an accessible pairings matrix
8 Typography Faces and licences; type by role (F1's Impact vs Inform; WHOOP's words vs numbers)
9 Layout and composition Grids per format (social, story, poster, email, slides); safe areas
10 Graphic devices Signature shapes and patterns; badges; retired devices and why
11 Photography and video Principles; a martial-arts accuracy checklist; casting and consent
12 Illustration and mascot Construction, pose set, expression range, speech rule (Mailchimp's Freddie "does not talk")
13 Iconography Product set; custom martial-arts glyphs; emoji policy
14 Motion, sonic and haptic Principles and tokens; logo animation; celebration choreography; haptic set; sounds
15 Data identity Protected metric names; number formatting; data colour kept apart from brand colour
16 Accessibility and inclusion Contrast for print and signage too; plain language; inclusive casting
17 Applications: digital App, Studio, public pages, site, email, push and SMS, store listing, social
18 Applications: physical Print, certificates, merch and apparel, signage, event kits
19 Campaigns and moments Rituals like Strava's Year in Sport or Spotify Wrapped
20 Templates and assets Asset library; Figma templates; a dojo kit
21 Legal Marks, usage terms, releases
22 Governance and quality Decision rights, contribution, status lifecycle, change log, review rubric
23 Contact —

Multi-tenant platforms share one pattern. The tenant supplies a few inputs (name, logo, cover image, sometimes a colour). The platform keeps layout, behaviour, system and semantic colour, payment and trust UI, and accessibility, and generates everything else. Airbnb and Slack both say it outright: tenants bring their own identity, never the platform's. The founder's answer (a dojo brings name, logo and cover photo; nothing else) is the strictest version of this.

4. Konjo against all three

The crosswalk mapped 194 topics from HIG, the brand taxonomy and Podium onto Konjo's existing system:

Status Topics
Covered 31
Partial 79
Missing 78
Not applicable (visionOS, CarPlay, tvOS…) 6

Where Konjo was already ahead: generated token tables with every contrast ratio recomputed; design:check failing CI when prose and code disagree; a written founder calibration; per-persona "user we lose" framing; a Studio dialect; an anti-pattern catalogue. Nike and Apple document their tooling less rigorously than this.

Where it was thin or missing (the ten P0 gaps):

  1. No logo system. The shipped icon, splash and favicon are the ninja, which contradicts the written "shape or letterform" rule.
  2. No small mark for favicon, avatar, embroidery or the notification icon.
  3. App icons: no dark, tinted or clear variants.
  4. The Android adaptive foreground is cropped by the circle mask, and the notification icon is a full-colour PNG.
  5. Six taglines ship.
  6. The hero block is not live on three of four tab homes.
  7. Studio's shadcn layer runs a parallel palette that design:check cannot see.
  8. The shipped promotion screens contradict the written rule.
  9. No email design system: hardcoded hex values, no dark mode, and a footer at 3.54:1.
  10. No screen-review scorecard.

Structurally missing:

  • Per-component pages at HIG depth (Konjo has patterns and a generated inventory, but not one page per component).
  • "Designing for each surface" primers.
  • A principles or ethos layer.
  • The whole brand book: foundation, logo system, mascot canon, photography, motion, sonic and haptic identity, co-branding, and applications from email to embroidery.
  • Figma.
  • A public home.

5. The shape Kata takes

Apple's six sections, plus a brand book, arranged as Nike's system of systems. Four layers:

Layer Covers
Kata Core Tokens and principles, shared by everything
App dialect React Native mobile, tablet and RN-web
Studio dialect The owner's desk
Public dialect Dojo storefront, getkonjo.com, email, print

Every page uses one template, merged from HIG and Podium:

  1. A one-sentence definition.
  2. When to use and when not to.
  3. Best practices as bold rules with rationale and a real Konjo example, strength carried by the verb.
  4. Anatomy and states in both themes.
  5. Surface considerations, one line per surface, never silent.
  6. Accessibility.
  7. Specifications generated from tokens.ts.
  8. The implementation path.
  9. Related pages.
  10. A status (trial, stable, deprecated) and a dated change log.

Sections: Start here (principles, how to read a rule, one primer per surface, the screen-review scorecard) · Brand · Foundations · Components · Patterns · Inputs and senses (gestures, keyboard, haptics, sound) · Technologies (Stripe, Mux, push, Wallet, the AI assistant) · Applications · Governance.

The research artefacts (per-page HIG CSV, downloaded Instrument frames, brand-guide captures) were working files and are not committed; every figure above cites its primary source.