Tokens, type and devices

The theme already ships its palette as CSS custom properties; the kit keeps their names. Switch palettes with the control in the corner: the blues move, purple actions stay.

Colour

--dark-blue#0060af. Lead lines, UI lines.
--mid-blue#0089d0. Main headings, icons.
--light-blue#00aeef. Highlight states.
--mid-purple#92278f. Buttons, notches.
--dark-purple#5c2e91. Breadcrumbs, alerts.
--gray#484848. Body text.

Type

Cachet on the source (the YMCA's licensed brand face), Signika in the kit: the closest free face, rounded terminals and a similar width.

Signika 700 headline

Signika 400 body copy, the theme's own sizes.

Buttons

Assets

ycva-9050-170th-anniversary-logo-update-rgb-black.png

logo-purple-blue-y.png

mobile-hero.jpg

image-1-5.jpg

benefits-scaled-e1728690805813.jpg

aquatics-1-scaled.jpg

downtown-ymca.jpg

healthy-living.jpg

swim-lessons-image-10.jpg

kids.jpg

diagonal-bg.png

mark-chevrons.png