# The tab home Hero-led or index-led, and how to tell which one this tab is. > Part of the [Konjo design language](../konjo-design-language.md). The laws in the spine apply here unless this chapter contradicts them. Five of them (Train, Teach, Events, Learn, Social). **One hero, then a little.** ``` ┌──────────────────────────────────┐ │ Title ⌕ ◎ ⬤ │ display 34/800, one row of controls ├──────────────────────────────────┤ │ ▓▓▓▓ THE ONE LOUD THING ▓▓▓▓▓▓▓ │ full-bleed ink hero — or nothing │ ▓▓▓▓ 46/900 condensed caps ▓▓▓▓ │ eyebrow · statement · meta · 1 red CTA ├──────────────────────────────────┤ │ Quiet row → │ 16/600 + 13 caption, 1px inset hairline │ Quiet row → │ │ │ ← 24pt │ ░ tonal tile ░░░░░░░░░░░░░░░░░░ │ at most one └──────────────────────────────────┘ ``` Rules: the hero is the only inverted surface. The CTA inside it is the screen's one red role. Everything below is quiet rows and at most one tonal tile. **Nothing else.** If a sixth section wants onto the screen, it belongs one tap away. ("Section", not element — the header alone is several elements.) ### When a tab home has a hero at all The loud block is **1, or none**, and which one is a real decision: | The tab home is | When | Shape | |---|---|---| | **Hero-led** | There is usually one obviously-next thing for this person right now | Hero, then quiet rows | | **Index-led** | They came to *choose among many* | Section header, then the list itself — no inverted block | Train and Teach are hero-led: your next class, the class you are running. Social and Learn are index-led: a feed and a library are what the user came for, and wrapping them in a hero buries them. **Events is conditional**, and this is the useful case. When the member is enrolled in something soon, that is the obviously-next thing and it gets the hero. When they are not, there is no next thing to shout about, the hero is dropped, and the screen becomes the index it should have been — because a browse tab whose browsing lives one tap away is a browse tab that does not browse. Applying the hero formula mechanically to every tab home is the most likely way to misuse this document. ## The tab home, index-led Social, Learn, and Events-without-an-enrolment. The user came to find something, so the finding aids come first and the content starts as high on the screen as it can. ``` ┌──────────────────────────────────────────────┐ │ Learn ◎ ⬤ │ display 34/800 · pad 20h, 8 above / 16 below │ │ │ ┌──────────────────────────┐ Filters │ input h44, radius.input, border.control │ │ ⌕ Search techniques │ │ "Filters" = label, sentence case, ink, min 44 │ └──────────────────────────┘ │ │ ( Kata ×) ( Green stripe ×) Clear all │ chips h32, pad-h 12, radius.pill, │ │ surface.card fill + border.control │ ┌──────────────────────────────────────────┐ │ ← 24 │ │ FOR YOU │ │ eyebrow, text.secondary, inside the card │ │ ● One Green Stripe › │ │ at most ONE card above the index │ │ 43 requirements for your next belt │ │ │ └──────────────────────────────────────────┘ │ │ │ ← 24 │ BROWSE │ eyebrow, text.secondary, on the page │ ┌──────────────────────────────────────────┐ │ ← 8 │ │ Kata 4 › │ │ rowTitle + caption/tertiary, min-h 64 │ │ ──────────────────────────────────────── │ │ border.hairline, inset to the text edge │ │ Hand techniques 16 › │ │ │ └──────────────────────────────────────────┘ │ └──────────────────────────────────────────────┘ scroll inset = insets.bottom + 80 ``` Rules: - **No inverted block.** The index is the point; a hero above it is a wall in front of the door. - **Search, if the collection is bigger than a screenful, is the first thing under the title.** - **At most one card above the index**, and only if it is genuinely personal to this user ("your next belt", "7 cards due"). Two cards and you have rebuilt a dashboard. - **The index itself is one white card of hairline-separated rows.** ≤5 rows get no hairlines at all — just 12pt between groups. - **Section labels are `eyebrow` in `text.secondary`**, sitting on the page, 8pt above their content. - **Budgets:** an index screen usually spends **zero** of the loud, red, and filled-primary budgets, and that is correct. If one personal action deserves a filled primary, it goes in the card above the index, never in the list. - **Empty search ≠ empty screen.** "No matches for 'shuto uke'" keeps the search field and the filters on screen so the user can fix it; an empty *collection* replaces the index entirely. The hero is an **ink block carrying type — never a photograph.** It has to work on day one for a dojo that has never uploaded an image.