AROUND TOWN / VERSION 1.0
All event and route examples are fictional. Signup is a local preview.

START HERE
Use around-town-logo.svg on white. The mark and all lettering are vector paths.
White variants belong on cobalt backgrounds. Do not recolor the brand green.
Leave at least half a loop-height of clear space around the logo.
Use the mark alone below a 120 px logo width; mark minimum width is 24 px.

COLOR
Cobalt #2454DB; white #FFFFFF; ink #142754; mist #E7EDFF; cloud #F0F3FA.
Green #1A7545 and pale green #EAF5ED: successful signup only.
Errors #943E2B on #F9E8DF. Rest-stop accent #E7AD91.
Other confirmations use cobalt, never green. Include text and an icon.

TYPE
Nimbus Sans: 32/36 bold titles, 14/21 body, 14/20 buttons, 12/18 labels.
Palladio italic: short optional accent phrases only.
Fonts are bundled in the preview and included in this kit with license notices.

ROUTES
4 px solid main route, 2 px detour with 5/7 dash spacing; round joins and caps.
Start: ring and dot. Finish: checked square. Rest: warm diamond.
At 16–20 px use marker-rest-small.svg, with pause bars; use coffee variant at 24+.
Never render markers below 16 px. Keep a white halo against dense map details.
For 24+ markers retain the shape and symbol when converting to monochrome.
Always show the start/finish/rest legend near route maps.

COMPONENTS
around-town-system.css provides --at-* tokens and .at-* component classes.
48 px buttons and fields; 20 px button side padding; 12 px field padding.
Primary: .at-button.at-button--primary. Secondary: .at-button.at-button--secondary.
Use real buttons, visible labels, aria-invalid and linked correction text.
Messages: .at-message plus --signup-success or --error modifier.
Green signup success is a state, not an alternative brand color.

SPACING / CORNERS
4,8,12,16,24,32,48,64 px scale. 24 px card padding and 16 px grid gap.
Field and message radius 8 px; card/dialog 12 px; button 999 px.

EXAMPLE
<button class="at-button at-button--primary">Count me in <span>↗</span></button>
<label for="email">Email address</label>
<input class="at-field" id="email" type="email" required>
