Nov
20
KwaZulu-Natal
KZN networking breakfast
Fri 07:00Umhlanga
@tbw/ui · @tbw/tokens
TBW design system
The tokens, components and patterns every TBW screen is built from. Source in packages/ui and packages/tokens; guidance in docs/design-system.md.
Principles
What 'user friendly' means here, concretely. Check new screens against these.
- 1One clear next stepEvery screen leads with the single action that moves the person forward, as a primary or call-to-action button. Everything else is secondary.
- 2Plain languageWrite like a helpful person at the chapter office. Say what happened and what to do next. No jargon, no blame, no apologies for the system.
- 3Forgiving formsLabels above fields, hints before errors, and nothing typed is ever lost. Optional fields say so; required ones are few.
- 4Status in words and colourA status is always spelled out as well as coloured, so it reads in black and white and to screen readers.
- 5Thumb-sized and keyboard-readyControls are at least 44px tall. Every interactive element shows a gold focus ring.
- 6Brand with restraintNavy carries the interface. Heritage red is kept for the main call to action on public pages; gold marks what's featured.
Colour
Raw scales come from the TBW website's theme. Components use the semantic names below, never the raw scales.
navyTBW blue: primary actions, navigation
50
100
200
300
400
500
600
700
800
900
redHeritage red: brand calls to action
50
100
200
300
400
500
600
700
800
900
goldHighlights, featured, focus ring
50
100
200
300
400
500
600
700
800
900
greenDeep green: success
50
100
200
300
400
500
600
700
800
900
inkNeutrals, from off-white to charcoal
0
25
50
100
200
300
400
500
600
700
800
900
950
canvasPage backgroundsurfaceCards, panels, inputsborderDividers and outlinesfgBody textfg-mutedSecondary textprimaryMain action, links, selectedctaBrand call to actionhighlightFeatured, focussuccessDone, paid, activewarningNeeds attention soondangerErrors, irreversibleinverseDark brand sectionsType
Montserrat for headings, labels and buttons, as on the TBW website. Source Sans 3 for reading. JetBrains Mono for references and member numbers.
Display · text-5xlStrength in numbers
Page title · text-3xlMembership & card
Section · text-xlPayments
Card title · text-baseYour details
Body · text-baseYour chapter reviews your application once payment is through.
Secondary · text-smUp to 2 MB. PNG, JPG, WebP or SVG.
Label · text-xsMember directory
Reference · monoTBW26-00042 · TBW-KZN-01007
Forms
Wrap every control in Field: it wires up the label, hint and error for screen readers. Use useServerForm so input survives a failed submit.
As people know your business.
Optional
Use the CIPC format, for example 2017/123456/07
Optional
Feedback
Alerts say what happened and what to do next. Badges always carry words, never colour alone.
Fees are charged in South African rand
PayFast accepts international cards.
Listing saved
Changes show in the directory straight away.
Your membership ends in 12 days
Renew before 30 Nov 2026 to keep your listing live.
The upload didn't go through
Please try again, or use a file under 5 MB.
membership status
Awaiting paymentUnder reviewActiveRenewal dueLapsedDeclinedCancelled
badge tones
NeutralPrimarySuccessWarningDangerFeaturedRecommended
loading
dialog (native <dialog>)
Data display
Applications to review
4
Paid and waiting for approval
Active members
128
Renewals due in 30 days
9
Details
DescriptionList for label/value pairs
Active
- Member number
- TBW-KZN-01007
- Chapter
- KwaZulu-Natal
- Member since
- 1 Nov 2026
- Renews on
- 1 Nov 2027
| Reference | Method | Amount | Status |
|---|---|---|---|
| TBW26-00042 | Bank transfer | R 1 000 | Paid |
No listings yet
Empty states say what will appear here and how to add the first one.
TBW patterns
Compositions specific to TBW. Reuse these rather than rebuilding them per screen.
Tamil Business Warriors
Business member
Sample Member
Sample Consulting (Pty) Ltd
Member no.
TBW-WC-01012
Valid until
11/27
Western Cape chapter