Foundation

Kalaanba — UI Kit

An isolated foundation built strictly from the brand palette. Soft surfaces, generous radii, quiet icons that animate on intent. Light & dark.

Topbar

Pill search · theme · notification with live dot · avatar

Richard Somda

Palette

Only what's in the brand. No extras.

Primary
#f55694
Accent
#56b7f5
Card 2
var(--kx-card-2)
Foreground
var(--kx-fg)
Muted
var(--kx-fg-muted)

Composition

Recreating the Player Profile + score tile from the design language.

Player Profile

Richard Somda

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

VerifiedForwardTamale Premier
0.0
Match Rating

Buttons

Subtle icon nudge on hover · soft scale on press · pink shadow.

Adds a new fixture

Badges & avatars

Status, identity, signal. Quiet by default.

Badges
LiveNewVerifiedDraft
Avatars
RSKMAYSalisu

Inputs

Soft surface that wakes up on focus. Custom selects, calendars, and more.

Text fields · icon placement & sizes
No icon
Left icon
Right icon
Both sides
Pill style
Large size
Club name
Shown on fixtures and the league table.
Disabled
Tones · default · success · warning · danger
Default
Plain hint, no fuss.
Success
Looks great — ready to go.
Warning
This could be stronger.
Danger
Phone number must start with 02.
Password & textarea
Password
Use a passphrase, not a password.
Player bio
Keep it short. Two sentences max.
74/240
Custom select & calendar
Country
Position
Drives recommended drills and stat groupings.
Match date
Tap a day. Use Today to jump back.
Player age
yrs
One-time code & file upload
Verification code
We sent a 6-digit code to your phone.
Club crest
Drop a file or click to upload
Accepts image/*
PNG or SVG up to 2MB.
Selection · checkbox · radio · slider
Skill rating
72

Controls

Tabs · switch · progress · toast.

Tabs
Showing overview
Switch
Progress
64%
Toast

Cards

Surface · subtle · outline. All hoverable.

Surface

Match Centre

Live, upcoming, finished — one tap each.

Subtle

Player career

Verified record across every season they played.

62 Apps38 Goals
Outline

Loading state

Stat tiles

Numbers count up when they enter view.

0.0
Match Rating
0
Goals
0.0
Form Index

Alerts

Side-rail accent + soft tinted wash. Dismissible.

Squad list locked at 18:00
You can still mark availability up to kickoff.
Goal verified — Derek Osei (62')
Two referees and the rival captain confirmed within 4 minutes.
Pitch booking ends in 25 minutes
Extend now to keep the slot. After that it's first come, first kick.
Roster mismatch detected
Two players on the sheet aren't cleared for this competition.

Chips · Pagination

Filter chips with counts and a pill paginator.

Filter by status
Page 3 of 12

Menu · Modal

Anchored kebab menu and a focused dialog.

Dropdown menu
Bantama Boys
12 players · last updated 2h ago
Modal

Blurred backdrop, gradient hairline at the top, sticky footer.

Fixture cards

Brand piece — one card, three states.

Sat · 19:30Soon
Bantama Boys
Home
Sagnarigu Stars
Away
Baba Yara StadiumGreater Accra League
Live · 67'Live
Cape Coast XI
Home
2–1
Tamale United
Away
Cape Coast Sports StadiumFriendly
Sun · 15:00FT
Hearts Academy
Home
0–3
Liberty FC
Away
Madina AstroCup R16

Fixture cards · vertical

Sidebar / mobile carousel format. Three states.

Greater AccraSoon
Bantama Boys
vs
Sagnarigu Stars
Sat · 19:30Baba Yara
FriendlyLive
Cape Coast XI
2–1
Tamale United
Live · 67'Cape Coast
Cup R16FT
Hearts Academy
0–3
Liberty FC
Sun · 15:00Madina Astro

Fixture cards · compact

Single-row, dense. Use in 'all fixtures' lists and rails.

19:30Soon
Bantama Boys
vs
Sagnarigu Stars
GAL
67'Live
Cape Coast XI
2–1
Tamale United
FRN
FTFT
Hearts Academy
0–3
Liberty FC
CUP
21:00Soon
Kotoko Babies
vs
Asante Eleven
GPL

Leaderboard table

Sticky header · sortable · row hover plate.

Top scorers — Greater Accra League · MD 14
#
1
DO
Derek Osei
Bantama Boys
14189.4
2
KM
Kwesi Mensah
Sagnarigu Stars
14159.1
3
YB
Yaw Boateng
Cape Coast XI
13128.8
4
KA
Kojo Asare
Tamale United
14118.6
5
NL
Nii Lartey
Hearts Academy
12108.5
6
AI
Abdul Issah
Liberty FC
1498.3

Living surfaces · vet first

Three options for the 'alive' feel. Pick what fits before we adopt anywhere.

Option A
Soft tinted wash

Static single-tone gradient from one corner. Calm, premium. Cheapest. Reads well on both modes.

Option B
Drifting aurora

Two blurred blobs slowly drift. Subtle motion, not jittery. Best for hero / featured surfaces.

Option C
Morphing mesh

Multi-stop radial mesh whose stops shift over 22s. Rich and atmospheric. Use sparingly.

Kalaanba · UI Foundation v0

Score picker

The control organisers tap to enter a final score.

Two-up stepper for home / away goals
Bantama Boys
2
Full time—
Sagnarigu Stars
1

Tap + to add a goal, then publish the result — it propagates into the league table.

Form pills
Bantama Boys
WWDLW
Sagnarigu
LDWLW
Cape Coast
WWWDW

Stat tile · with sparkline

Number + trend + last-N sparkline.

Match Rating
10
12
Goals
24goals
3
Form Index
5
4

Skeletons

Loading placeholders for fixtures, table rows, and stat tiles.

Tabs · sliding underline

Same thumb pattern as pagination, applied to tab triggers.

Showing all

Drawer & command palette

Right-side sheet (filters / bet slip) + ⌘K palette.

Empty state

Calm tinted-wash surface for zero-state moments.

No live matches right now

Saturday's slate kicks off at 15:00. We'll surface the first one here.

No results

Try a different team, player, or fixture name.

Ticker

Pause-on-hover marquee. Edge-faded.

LIVE · CCX 2 – 1 TAMFT · HRT 0 – 3 LBTSat 19:30 · BTM vs SAGSun 15:00 · KOT vs ASEBoost: Over 2.5 · 1.75 → 1.92

Odometer

Per-digit flip when value changes. Smooth, satisfying.

Toast queue

Stack of auto-dismissing toasts with progress bar. Hover to pause.

Momentum bar

Live attacking pressure strip. Drag the slider to feel it shift.

BTM+32%SAG
Kalaanba · Track 1–3

League table

Standings with promotion / playoff / drop tints.

Tamale Premier League — Matchweek 12
PromotionPlayoffDrop
#TeamPWDLGFGAGDPts
1
Bantama Boys
12921289+1929
2
Sagnarigu Stars
128222411+1326
3
Cape Coast XI
127322213+924
4
Northern United
126331914+521
5
Tamale Lions
125431714+319
6
Dagbon FC
124441515016
7
Ridge Boys
123451218-613
8
Accra City
12237922-139
9
Greater Sahara
12129626-205

Match event timeline

Goals · cards · subs against the match clock.

  1. Kick off0'

  2. Derek Osei

    assist · R. Somda

    12'
  3. 28'

    I. Issah

    tactical foul

  4. 41'

    Yaw Boateng

    from a corner

  5. Half time45'

  6. M. Awal

    in for J. Tetteh

    58'

  7. Derek Osei

    penalty

    67'
  8. 78'

    K. Adjei

    second yellow

  9. Full time90'
Notes

Home events sit on the left, away events on the right, with the match clock running down the middle. Phase markers (kick off, half time, full time) span the full row.

Player card

The verified player tile — the long-term product.

9

Derek Osei

ForwardTamale

Bantama Boys

18

Apps

14

Goals

6

Assists

8

Richard Somda

MidfielderSagnarigu

Sagnarigu Stars

17

Apps

4

Goals

11

Assists

1

Kwame Mensah

GoalkeeperCape Coast

Cape Coast XI

18

Apps

0

Goals

1

Assists

Club crest & avatar stack

Initials fallback when there is no uploaded crest.

Crests · pink, blue, neutral · sm/md/lg
Avatar stack with overflow
Squad
+3
Attendees
Sm
+2

Stepper

Multi-step wizard header (create competition, register club).

  3. 3
  4. 4
  5. 5

Step 3 of 5 active · two complete · two upcoming. Bubble + label + connector all reflect status.

Fixture row

Compact list-row variant of a fixture (the dense view).

Tamale Lions
3–0
Dagbon FC
Accra City
10:46 AM
Ridge Boys

Stat delta

Tiny ±change pill for player & team stats.

+3goals this week-2ranking0form+12%possession-5conceded+1-1

invert flips the polarity for stats where lower is better (goals conceded, ranking position).