Westside Youth Hoops

Why it looks this way.

Typography

Bebas Neue is set in caps with almost no tracking, the way gym banners and jersey backs are lettered, and it carries every heading and the giant footer wordmark. Body copy is Geologica, a plain geometric sans that holds up at small sizes on old phones. Times and figures use Overpass Mono, which comes from Highway Gothic road signs and gives the schedule the look of a scorer's book.

• Bebas Neue headlines
• Geologica body text
• Overpass Mono labels

Color

The green is the deep oak green of Oakland's city tree, and the orange is the pebbled leather of a game ball. The site opens dark, like a gym at seven o'clock under the lights, with a muted court green rather than a neon one. The light theme is tinted toward Bay fog instead of white so it doesn't glare at Saturday-morning games.

• Page #ECEFE9
• Cards #F8FAF6
• Text #101A15
• Brand #0D6145
• Accent #D9601F

Layout

Six pages sit in a dock at the bottom of the screen, where a thumb already is. Most visits happen on a phone between work and practice, so every page is one tap away and the dock never scrolls away. On a laptop the dock stays put and the header carries only the logo and the sign-up button.

Pages: This week, Sign up, Gyms, Coach, Sponsor, Story

Hero

The home page opens on this week's schedule, day by day, with the next session counting down. The most common call to the office is "which gym is it tonight?", and this answers it before anything else. Sunday shows as a rest day because the gym really is closed.

Calls to action

The header button says "Sign up a player" because getting a kid onto a team is the whole point. The other actions are just as literal: "Coach a team", "Save a seat on the van", "Sponsor a team". Nothing asks a family for money; the sponsor page is written for neighbors and businesses.

Photography

Photos are of kids actually playing, mostly on outdoor courts, and the captions say so: they are labeled as summer league on the 10th Street court instead of pretending to be the winter gym. Adults appear only where they are coaching or volunteering. There are no crowd shots, because a Minis game draws about forty people.

Accessibility

Body text is 17px and every color pair passes WCAG AA in both themes. Dock buttons have full-height tap targets with text labels under each icon. Copy is written at about a sixth-grade reading level for parents reading in a second language, and the gym list notes step-free entrances and Wheels Night.