huddlie design system

Brand v1: colours, the mark and the logotype come from the huddlie logo (see ../brand/BRANDING.md). Fonts and the icon set are still provisional. Everything below is generated from src/tokens.json and src/icons.mjs: change those, run node build.mjs, and every screen follows.

Brand

The mark (two people huddling, an H; two speech bubbles each), the lockup, and the iOS app icon. The mark file is brand/huddlie-mark.svg; the icon set is generated from it by ../brand/build-app-icon.mjs.

Lockup: mark over the logotype (Fraunces 600, brand plum)

huddlie

On the brand bar: colour mark, white logotype

TipA quick tip or benefit, said by the mark.

Tip: the speech bubble's sharp corner points at the mark

Player avatars

Six drawn headshots, a third way to give a player a picture (Add a photo → Choose an avatar). Built from the mark: rounded and teardrop forms, flat colour, the mark's palette for the gear, a soft brand tint behind each, cropped to a circle. SVG, 200 x 200, in brand/avatars/; source ../brand/avatars/build-avatars.py.

Swimmer
swimmer.svg

Hockey
hockey.svg

Dancer
dancer.svg

Karate
karate.svg

Soccer
soccer.svg

Pianist
pianist.svg

Animated logo: the brand reveal

Plays on the launch screen, then holds on the lockup. Each drop is born as a small circle that loops in and grows its tail; the arms reach into the hug; the speech bubbles travel out from their tail tips. About 3.3 s at 60 fps, transparent, mark only (the logotype stays live text). Lottie file: brand/huddlie-reveal.json, plays in lottie-ios, lottie-android and lottie-web. Rebuilt from the prototype's splash by ../brand/build-mark.mjs.

On paper

On the brand night plum

iOS app icon

1024 x 1024 masters, square (iOS rounds the corners), no transparency on the default. Drop store/ios/AppIcon.appiconset into the Xcode asset catalogue as is: it carries the default, dark and tinted appearances (iOS 18+).

huddlie app icon, default — Default
AppIcon-1024.png

huddlie app icon, dark — Dark (mark on transparent)
AppIcon-1024-dark.png

huddlie app icon, tinted — Tinted (greyscale, iOS tints it)
AppIcon-1024-tinted.png

huddlie app icon, night option — Night (option, not in the set)
AppIcon-night-1024.png

huddlie app icon at 60pt — Home screen size (60pt)
AppIcon-180.png (apple-touch-icon)

Colour

Each swatch shows light, then dark. From the mark: lilac-white paper, plum ink and logotype, magenta (the hug) as the one accent, blue for the second person, violet for the speech bubbles, a warm gradient for the primary action.

--c-paper#F9F6FA / #15111DApp background: lilac-white paper.

--c-surface#FFFFFF / #211B2CCards, list groups, inputs.

--c-surface-sunk#F0EBF4 / #0E0B14Segmented tracks, search fields, info lines.

--c-ink#2B2438 / #F4EFF8Primary text and icons (plum-black).

--c-ink-2#625A70 / #BDB3CBSecondary text. 6:1 on paper, safe for body copy.

--c-ink-3#8C849A / #8E8599Tertiary text and inactive icons. Large text or non-essential only.

--c-line#E8E2EE / #2E2739Hairlines and row dividers.

--c-line-strong#D8D0E2 / #3F364DCard and input borders.

--c-brand#3B2D5C / #EDE4F8Plum: the logotype colour. Logotype and screen titles.

--c-brand-bar#2A1F45 / #261C3CThe dark brand bar (hub header) behind the colour logo.

--c-on-brand-bar#FFFFFF / #FFFFFFText and icons on the brand bar.

--c-actionlinear-gradient(115deg,#F2562B 0%,#E03599 52%,#A24FE0 100%) / linear-gradient(115deg,#F2562B 0%,#E03599 52%,#A24FE0 100%)Primary action fill: warm gradient from the mark (coral, the hug magenta, bubble violet).

--c-on-action#FFFFFF / #FFFFFFText on the action gradient.

--c-accent#E03599 / #F05BAEThe hug magenta: toggles, steps, focus, the one highlight.

--c-accent-pressed#C92C88 / #F77DC0Accent, pressed.

--c-accent-soft#FBE4F1 / #3A1830Selected chips, badges, soft highlights.

--c-accent-ink#B8287A / #F58CC8Accent used as TEXT (links, nav actions). 5.3:1 on paper.

--c-on-accent#FFFFFF / #FFFFFFText on an accent fill.

--c-calm#2D7FF9 / #6FA3FFBlue, the second person: practice colour, info.

--c-calm-soft#E6EEFD / #17233D

--c-calm-ink#1C47BC / #9DBEFFCalm used as text.

--c-tip#F1E9FF / #2A2140Speech-bubble tip background (the mark's bubbles).

--c-tip-ink#3B2D5C / #EDE6F8Tip text.

--c-tip-label#6D42D6 / #B79BFFTip label (small caps).

--c-danger#C23B24 / #F08A70Destructive text and borders.

--c-danger-soft#F8E1DC / #3A1E19

--c-success#2E8A6A / #5FC19APresent / dressing states.

--c-scrimrgba(26,18,40,.46) / rgba(0,0,0,.6)Behind sheets and alerts.

--c-toastrgba(42,31,69,.95) / rgba(244,239,248,.96)Toast and banner background.

--c-on-toast#FFFFFF / #15111D

--c-event-game#E03599 / #F05BAEEvent type ring: game.

--c-event-practice#2D7FF9 / #6FA3FFEvent type ring: practice.

--c-event-tournament#8B5CF6 / #A98BFAEvent type ring: tournament.

--c-event-personal#F2562B / #F7825EEvent type ring: personal (non-team) event.

Type

Display serif (Fraunces) for the logotype, names, dates and a moment's caption: the keepsake voice. Team names, event titles and scores use Instrument Sans at 85% width (--f-team). Inter for everything you operate. Sizes in points.

Ava's season

displaydisplay · 34/37 · 600Celebration beats, splash.

Ava's season

title-1display · 28/31 · 600Screen identity: the player's name, the event.

Ava's season

title-2display · 22/26 · 600Month chapters, section heroes.

Ava's season

title-3display · 19/23 · 600Lens name in the hub bar, sheet titles.

Keep and relive every moment

headlinetext · 16/22 · 600Row titles that lead, event titles.

Keep and relive every moment

bodytext · 16/24 · 400Reading text.

Keep and relive every moment

callouttext · 15/22 · 500Row titles, buttons, inputs.

Keep and relive every moment

subheadtext · 14/21 · 400Explanations, callout body.

Keep and relive every moment

footnotetext · 13/19 · 400Row subtitles, footers.

Keep and relive every moment

captiontext · 12/16 · 500Meta lines, badges.

Keep and relive every moment

microtext · 10.5/13 · 600Tab bar labels only.

Her first goal!

caption-serifdisplay · 17/24 · 400A moment's caption, set like a photo-book caption.

Space and radius

A 4pt grid. Screen gutter is 20. Radius steps up with the size of the surface.

--s-00px

--s-14px

--s-28px

--s-312px

--s-416px

--s-520px

--s-624px

--s-732px

--s-840px

--s-956px

--s-gutter20px

--r-sm8px

--r-md12px

--r-lg16px

--r-xl22px

--r-pill999px

--r-photo10px

Icons

Provisional 24pt line set, 1.75 stroke. Each is a named slot: the final icon set replaces the drawing, never the name. Individual SVGs are in assets/icons/.

scheduleTab: Schedule hub

seasonTab: Season hub (the keepsake timeline)

teamTab: Team hub

gearSettings (hub bar)

chevron-leftBack

chevron-rightRow disclosure

chevron-downLens switcher

closeDismiss, remove media

checkSelected, done

plusAdd

searchSearch field

moreOverflow / manage

playerA player (the child)

huddleThe huddle: family and friends who follow

coparentCo-parent (equal owner)

inviteInvite someone

gameEvent type: game (a pennant, deliberately not sport-specific)

practiceEvent type: practice

tournamentEvent type: tournament

personalEvent type: personal (non-team) milestone

milestoneA milestone (rationed celebration)

calendarDate field

clockTime field

pinArena / place (opens maps)

liveHappening now

scoreScore entry

momentA moment (the keepsake unit)

photoAdd photo

videoAdd video

playPlay video

notePrivate note / text moment

tagTag a moment to an event

privateScope: private

scope-huddleScope: the huddle

scope-teamScope: the team

hiddenHidden from the timeline

visibleUnhide

editEdit

trashDelete

linkCopy invite link

shareShare

refreshRefresh a subscribed schedule

bellNotifications

bell-offMuted

mailEmail field

lockPassword field

infoInformation callout

alertError / warning

offlineNo connection

cameraCamera roll access

sparkleCelebration mark (rationed)

Components

Every screen is built from these. Class names in assets/kit.css.

Buttons

One primary per screen. Secondary for supporting actions, quiet for the way out, danger outlined, never filled.

List group

Moments

NNanaGrandmotherInvited

Fields

Jersey number (optional)

Jersey 10 is already taken on this team.

Segmented and switches

Event cards

The left stripe is the event type token.

Moment, the signature print

A photo mounted on a paper mat, the caption set like a photo-book caption.

Team huddle before the final.

Silver Stick · Jan 17 Team

Moment, text only

Asked to stay late for extra shooting drills tonight. First time asking on their own.

Practice · Nov 6 Huddle

Callouts

Before you follow

huddlie will fetch West Hill Golden Hawks U11 A's public schedule from gthlcanada.com on your behalf.

Your huddle is empty, so Huddle and Private are the same until you invite someone.

Season runs Sep 8 to Mar 15 · schedule shows games to Nov 30

Badges

Managed by youInvitedRoster onlyCancelledWin

Toast

You're all set

Following West Hill Golden Hawks. More games land as GTHL posts them.

Step dots

Onboarding only: name, team, schedule.

Avatars

Calm tint for players you own, warm for players you follow, numbered for roster entries. Real photos replace the letter.

AAM10A