Style guide

The visual system behind kmceagles.com. Every value here is a CSS custom property in tokens.css; components are plain HTML and CSS with no framework. Corners are square throughout.

Colour

Brand colours are fixed; surface and text colours switch with the theme (device setting, or the toggle in the header).

Eagles Navy--brand-navy#0A2342

Eagles Red--brand-red#C8102E

Ice Blue--brand-ice#93C5FD

Goalie Gold--brand-gold#FBBF24

Theme tokens

Background--bg

Surface--surface

Text--text

Muted text--muted

Primary--primary

Accent--accent

Link--link

Border--border

Subtle border--border-subtle

Error--error

Type

Headings: Barlow Condensed 600/700, uppercase at level one. Body: the system font stack. Major-third scale from 0.8rem to a clamped 3.052rem. Body line height 1.6, headings 1.15. Rosters use tabular numerals.

Heading one — 3.052rem

Heading two — 1.953rem

Heading three — 1.563rem

Lead paragraph — 1.25rem. Ice hockey for the Kaiserslautern Military Community.

Body — 1rem. The KMC Eagles are a volunteer-run amateur ice hockey club serving Ramstein, Kaiserslautern, Landstuhl, Baumholder and Zweibrücken.

Small — 0.8rem. Used for metadata, captions and legal lines.

19 · 27 · 77 · 88 tabular numerals

Spacing and layout

4px base: 4, 8, 12, 16, 24, 32, 48, 64. Containers 42rem, 72rem and 90rem. Breakpoints at 40rem and 64rem add columns and spacing only. Minimum tap target 44px; primary actions 48px.

Buttons

Primary Navy Secondary Ghost Chip Chip, selected

Badges

Home Away Cancelled Goalie needed practice C A

Event rows

Player rows

Cards

DPL Division I

Eagles I

The club's top team. Competitive league hockey against the strongest DPL sides, and the Eagles' entry at the Armed…

20 players 2 seasons

DPL Division III

Eagles II

Developing and recreational players with a full league schedule in a lower DPL division. New arrivals start here;…

22 players 2 seasons

Plain card

Surface background, square corners, subtle shadow.

Next on the ice

Sun27 Sep

Practice

Sun 27 Sep 2026, 08:00Zweibrücken Ice Rink

Notices and forms

Standard notice with the primary left border.

Error notice.

Gold notice for attention without alarm.

Icons

Lucide, 2px stroke, inlined as an SVG sprite. Brand marks from Simple Icons.

calendarcalendar-plusmap-pinmapclockusersshirtshieldtrophymailsearchlanguagesmenuxcheckcopydownloadexternal-linkrsslockinfotriangle-alertchevron-rightarrow-rightsunmoonshare-2id-cardnavigationimagecamerazoom-inzoom-outmaximize-2facebookyoutubewhatsapp