A neighborhood palette01
Cobalt leads on white. Blue Mist adds a soft accent, while deep blue anchors the words.
Tap a color to copy its hex.
Around Town / Visual identity / Concept 01
Good company.
A little more local.
A fresh identity for an urban cycling community. For gentle weekend rides, hands-on repair classes, and routes worth sharing with a friend.
aroundtown
Take the scenic route.
Two wheels. A whole town. ↗
An open invitation to get out and go.Community first. Always.
01 / The ingredients
Built for getting together.
Two connected loops become wheels, a shared route, and a little symbol of belonging. Simple enough to go anywhere.
Type with a friendly rhythm02
Aa BbMeet you outside.
Nimbus Sans for clear, easygoing words. A little Palladio italic for the human touch.
A voice that invites you in03
Less hurry.
More hello.
More hello.
Warm, curious, and never competitive. Talk like a friend with a favorite route.
“Come along. We'll find the way.”
Color roles: cobalt #2454DB on white #FFFFFF for the identity, controls, routes, and ordinary confirmations. Green #1A7545 appears only after successful signup. Errors use clay red #943E2B on a warm blush background, with words and an exclamation mark.
02 / Follow the friendly line
A route, with room to wander.
Rounded lines and familiar little icons make the community feel easy to join, whether you're riding, learning, or sharing.
Routes that feel like an invitation
Main routeLittle detour
StartFinishRest stop
4 px main line · 2 px dashed detour · round caps and turns.
Markers differ by shape and symbol, so color is never the only cue.
Small signs of good company
Weekend rides
Repair classes
Shared routes
Coffee stops
One 32 px grid. A 1.8 px stroke. Rounded ends, open shapes, and no racing stripes.
Small-size check
16 px minimum for route markers. Use the simplified pause symbol for rest stops at 16–20 px; the coffee detail is for 24 px and above. Shapes stay distinct in monochrome.
16 px
20 px
24 px
32 px
Nimbus Sans — bold titles, regular body, 1.5× reading line-height.Palladio italic — short, human moments. Never essential details.Terracotta #E7AD91 — a warm accent for gatherings and stops.
03 / Made for the community
Come for a ride. Stay for the people.
The identity in everyday use: an event to join, a route to explore, and a friendly invitation on your phone.
around town
Fictional event / design example
The Sunday
slow loop.
A gentle ride, a riverside pause, and coffee with new friends. All bikes and all paces welcome.
Sunday · 10am8 km · Easygoing
01 — An event cardRide / repair
Routes from the community
A little river.
A little roaming.
A quiet loop with a waterside stretch and an optional coffee detour. Shared by the Around Town crew.
StartFinishRest stop
8 km · Mostly flatTake your time
02 — A route introductionShared, then saved
9:41••• ▰
around town
Your town.
Your people.
Gentle rides, useful little skills, and routes to pass along. There's room for you here.
All bikes. All paces. Always welcome.
03 — A mobile signup button48 px touch target
All events and routes shown are fictional design examples. Try the event tabs, save the route on this device, or preview signup. Signup is a local demo; no information is sent.
04 / Component showcase
Small details. A warmer welcome.
A practical set of components, with clear actions, helpful feedback, and space to breathe.
01 / Buttons with a clear purpose
Primary: cobalt fill, white text. Use for the main action.
Secondary: cobalt outline, transparent fill. Use for supporting actions.
48 px minimum height · 20 px horizontal padding · pill corners.
Hover darkens the primary and adds Blue Mist to the secondary. Keyboard focus gets a 2 px outline; disabled actions use muted Cloud.
02 / Fields that help you along
48 px minimum height · 12 px padding · 8 px corners.
Keep labels visible. Put helper text below the field. Focus uses a cobalt ring; errors add a warm red border and a specific correction.
03 / Feedback, in plain language
Signup preview complete.You're in! This fictional demo sends no information.
Check your email address.Use a format like you@example.com.
Successful signup: green + a check. Other confirmations: cobalt + a check. Error: clay red (#943E2B) + an exclamation. Always include words, a clear next step, and an icon; color alone is never the message. Inline feedback stays visible until corrected.
04 / Spacing & corners
4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px
Use a 4 px rhythm: 8 px from label to field, 12 px within controls, 16 px between related items, 24 px card padding, 32 px between groups, and 64 px between desktop sections (48 px on mobile).
8 px / Fields & messages
12 px / Cards & dialogs
Pill / Buttons
05 / Out and about
At home on your streets.
A few ways the identity can show up.
On a noticeboard, in your pocket, over your shoulder.
around town
Somewhere
to go.
Someone
to go with.
Fictional event · The Sunday wander
10am · All bikes. All paces.
Around Town cycling community
10am · All bikes. All paces.
Around Town cycling community
↗
01 — The neighborhood poster↗
around town
The long
way home.
A riverside loop, a good coffee,
and a few new favorite corners.
8 km · EasygoingTake your time ↗
02 — The pocket route card↗
around
townGOOD COMPANY. A LITTLE MORE LOCAL.
townGOOD COMPANY. A LITTLE MORE LOCAL.
03 — The everyday carry↗
06 / Ready to use
One system. A useful little kit.
Version 1.0 · SVGs are self-contained. Logo lettering is outlined, so it travels without a font installation.
01 / Design assets
Marks & icons ↓
12 SVG files: cobalt and white marks and logos, four icons, and four route markers. Includes CSS tokens and a usage readme.
Download ZIP02 / The referenceThe system guide ↓
A six-page PDF covering the identity, color roles, type, route markers, components, and fictional applications.
Download PDF03 / Try the systemComponent showcase ↗
Live buttons, field validation, signup feedback, spacing, and corners. Use the CSS file as your starting point.
Explore components
A small mark. Lots of possibilities.
Take the identity for a spin with an editable SVG logo sheet.