Paper
CSS token
Page background
Identity / version 01 / coaching example
Side Street,
in use.
A curious, casual, welcoming identity for small discoveries with friends. These are the storefront’s live tokens, type, logo and components, shown together.
00 / Direction
Small discoveries.
A simple base for small discoveries with friends. Audience needs remain hypotheses, not customer research.
Chosen direction / coached simulation
Audience
Class → café
For a student meeting friends after class: casual, but put together. Leave room for a second visitor’s colorful jacket.
Archetype
Explorer
The brand invites new cafés with friends, rather than big adventures. It does not classify its customers.
Visual direction
Clear + bold
Direction A’s grid and bold sans-serif keep the headline easy to read on a phone. See both studies.
01 / Logo
A name.
A name.
A small turn.
The original wordmark pairs bold lettering with a small turn cue. The same SVG appears on the storefront.
Desktop navigation · 156px wide
Phone navigation · 140px wide
Reviewed stress case · 112px wide
One ink · same single-color SVG
The learner kept this wordmark in the coached simulation after
reading it at 112px and finding the turn cue secondary to the name.
All artwork uses one solid #213B32 fill on a transparent background;
the one-color view uses the actual SVG, with no grayscale filter.
Shared source: assets/wordmark.svg.
View the reviewed size study. Side
Street is fictional; no trademark clearance is claimed.
02 / Color
Color has
Color has
a job to do.
Warm paper, deep-green ink and a soft golden accent. These swatches read the storefront’s shared CSS tokens.
Ink
CSS token
Text and primary action
Accent
CSS token
Small highlights and the diagonal image field
Soft
CSS token
Image and example surfaces
Muted
CSS token
Supporting text
Give each color a role. Check contrast for the actual text, backgrounds, focus indicators, and button states you use.
03 / Typography
A clear
A clear
hierarchy.
Arial with Helvetica and sans-serif fallbacks keeps the chosen direction direct and self-contained. These samples use the actual storefront headline and supporting-copy classes.
Display / shared .brand-headline
Take the side street.
Support / shared .product-intro
A white tee for plans you find along the way.
Class done. Café next? Start simple; make the rest your own.
Label / system monospace
One tee. Your route.
04 / Spacing
Room to read.
Shared spacing tokens create a repeatable rhythm. Adapt the scale to your direction.
Space 1
CSS token
Space 2
CSS token
Space 3
CSS token
Space 4
CSS token
Space 5
CSS token
Space 6
CSS token
Use smaller gaps for related information and larger gaps between sections. Check the rhythm at phone and desktop widths.
06 / Voice
Words are
Words are
design, too.
Curious, casual, welcoming. Familiar everyday plans invite a connection; useful styling help stays freely available.
Curious + casual
“Class done. Café next?”
Familiar after-class plans express the Explorer character in everyday terms. Liking is a design hypothesis, not a claim of customer approval.
Welcoming + useful
“Try your white tee with jeans and an open overshirt for a café stop with friends.”
The optional free outfit idea offers help before any action: a reciprocity application. No signup or purchase is required, and no product property or conversion result is claimed.