# Benchmark — Nike's Podium, Apple's HIG, and the best brand guides **Date:** 2026-09-29 · **Feeds:** [the Kata founder interview](../2026-09-29-kata-founder-interview.md) 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](../2026-08-22-design-calibration.md): 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](https://www.instrument.com/work/nike-digital-design-system) 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.