Warm, confident,
quietly animated.
Every RotaryHub surface is built from these tokens and primitives — a deep Rotary blue, a spark of gold, warm neutrals, and motion that feels effortless. Nothing here is a shadcn default.
01 · Color
OKLCH palette
Brand blue for action, gold as a spice, warm sand neutrals. Dark mode is tinted, never black.
02 · Typography
Space Grotesk + Inter
Characterful headings, calm body. Big and confident, never system default.
Service above self
Rotary Club of Kampala Ssese
Weekly fellowship, every Thursday
Body text is Inter at 15px with relaxed line height. It stays out of the way so the content — members, events, impact — can lead. Numerals in stats are tabular: 1,248,300
Caption / overline · uppercase · tracked
03 · Controls
Buttons, inputs, selection
Spring press on every button. Focus rings everywhere. All states designed.
Buttons
Press one — it springs.
Form controls
40px height, warm borders, brand focus ring.
That doesn't look like an email address.
Show on public site
Feature this member on the leadership page
04 · Data display
Stat cards & animated charts
Numbers count up. Bars grow. Lines draw in. A bento grid, not a boring 4-up row.
Active members
42
+8%vs last month
Attendance rate
86%
+4%vs last month
Raised this year
USh 13,200,000
+12%vs last month
Dues outstanding
7
-18%invoices overdue
Attendance trend
Weekly meeting attendance, last 7 months
Donations
USD equivalent
05 · Structure
Tabs, tables, skeletons
Sliding tab indicator, staggered row entrance, shimmer skeletons that crossfade to content.
Lake Victoria Clean-up
Sat 26 Jul
July Fellowship Dinner
Thu 31 Jul
06 · Overlays & feedback
Dialogs, sheets, toasts
Spring-based enter and exit, blurred brand backdrop, toasts that glide in from the corner.
07 · Identity
Avatars, badges, navigation
Branded initials, soft-tinted badges, and a sidebar whose active pill glides between items.
Avatars & badges
Sidebar navigation
Click items — the pill springs across.
This is the bar for every screen.
If a page ships without motion, without designed states, or with colors that aren't in this system — it doesn't ship.
100%
token coverage