Mobile app · Website · Brand
Run where the lights are.
We built KAGE23 as a complete night-running product: strategy, a brand that lives in the dark, an iOS app that scores every route for light, and the website that introduces it.
Recording
Canal & back
Pace · min / km
5:42
On pace · 4s ahead
4.37
Distance
24:54
Time
152
Heart
Unlit stretch in 400 m. Headlamp reminder on.
- Client
- KAGE23
- Sector
- Sport · night running
- Year
- 2026
- Scope
- Product strategy
- Brand identity
- iOS app
- Website
- Design system
[01]Project overview
After sunset,every streetis a decision.
KAGE23 is a night-running product for people who train when the day is over: after work, before dawn, in the months when the sun sets at five.
Ibrandify defined the product, built the identity, designed the iPhone app and the website that introduces it, and wrote the design system that keeps all three consistent.
- 01Product strategy
- Core loop, principles and information architecture
- 02Brand identity
- Mark, wordmark, colour, type, photography and iconography
- 03iOS app
- Welcome, Tonight, Routes, live Run, Crew and Log
- 04Website
- Responsive marketing site from desktop to phone
- 05Design system
- Tokens and components shared by app and web
- 06Motion language
- Three principles: pulse, trace, dim
[02]Market challenge
Run trackers measurethe run, not the dark.
Running apps are capable. What they rarely model is the thing that changes most at night: how much you can see, and who can see you.
- 01
Dark is a guess
Routes are drawn for distance and elevation. Whether a stretch is lit is something runners learn by being on it.
- 02
Safety is a separate app
Sharing a live location means leaving the run tracker, opening another tool and remembering to switch it off.
- 03
Dashboards built for daylight
Dense charts and small grey type are fine on a desk. At 5:40 a kilometre, in the dark, they are unreadable.
- 04
Group runs are hard to trust
Meeting strangers after sunset needs a public start point and a reason to believe the plan. Most feeds offer neither.
The opportunity
Make light a first-class piece of data, and put safety inside the run itself.
[03]Product strategy
One loop,four rules.
The feature list was long. We reduced it to a single evening loop and let four principles decide what earns a place on screen.
01
Light is the first filter
Every route, suggestion and alert starts from how well-lit the street is. It is data, not a footnote.
02
Pace is the loudest thing
On a run, one number is large and everything else is quiet. If it cannot be read in a glance, it moves to the summary.
03
Safety is built in, never bolted on
Safe-share lives inside the run, is opt-in per run, and ends the moment the run ends.
04
Quiet by default
No streak guilt, no confetti mid-run. The app speaks when something changes: an unlit stretch ahead, a crew member finishing.
User journey · one evening
01
Dusk
Opens Tonight
One suggested loop, scored for light, timed from sunset.
02
Warm-up
Checks the route
Sees unlit stretches and crossings before leaving the door.
03
Run
Pace on screen
Large pace, a calm alert ahead of any dark section.
04
Cool-down
Ends the run
Safe-share stops automatically. A short breathing prompt.
05
Review
Reads the summary
Splits, lit percentage and one observation about the run.
Information architecture · five tabs
Home
Tonight
A single suggested loop and the week at a glance
Browse
Routes
Discovery by light, quiet, surface and crew
Core
Run
Live pace, alerts and controls
Social
Crew
Safe-share contacts and group runs
Review
Log
History, splits and personal bests
[04]Brand identity
Kage meansshadow.
A brand for people who run in the shade of the day. Quiet, exact and a little cinematic: confident without shouting. Voice: short, concrete, never motivational.
The mark · a loop, cut by the end of the light
Treatment rules
- The slash is always the one sodium element on the mark.
- Clear space equals the stroke width of the ring, on all sides.
- Never place the mark on a photograph without a void scrim.
- Minimum size is 16px for the mark, 72px for the wordmark.
Colour · one signal
Void
#08090B
Canvas · app and web default
Asphalt
#121418
Cards, sheets, tab bar
Concrete
#1D2026
Inputs, dividers, inactive
Lunar
#ECEAE4
Text on dark · day surfaces
Sodium
#FF6A1A
The one signal · pace, go, selected
Go
#3DDC97
Completed, safe, confirmed
Typography · condensed for numbers, Inter for reading
Numeral
Big Shoulders 900 · 120/100 · −2%
Display
Big Shoulders 800 · 56/52 · uppercase
Title
Big Shoulders 700 · 28/30 · uppercase
Body
Inter 400 · 16/24
Data label
Plex Mono 500 · 11/14 · +8%
Photography & iconography
Photography: one light source, no faces in the glare.
Iconography · 2px stroke, square caps
- Tonight
- Routes
- Run
- Crew
- Log
- Safe-share
- Unlit
- Cool-down
[05]iOS app
Built to be readat pace.
Seven screens carry the whole evening. Use the prototype below, then scroll the rail for the full set.
Thu · Sunset 18:42
Lit routeTonight’s
loop
Canal & back
5.2 km · 96% lit · 2 crossings
5:42
This week
21.4KM
Try it · tap a tab
One decision, not ten
Tonight shows a single suggested loop, chosen from sunset time, your usual distance and how well it is lit. Starting it is one tap.
Key design decisions
Information architecture
Five tabs named for the evening, not the feature set. Settings and billing live under the profile sheet, out of the run path.
Onboarding
Two screens and no account wall. The first suggested loop is visible before sign-in; an account is requested when there is a run worth saving.
Live run
Pace is set at 9em against 2em for everything else. Controls sit in the lower third, reachable one-handed with gloves.
Safety
Safe-share is a per-run switch with a plain-language summary of who can see what. Unexpected stops notify contacts only if the runner has enabled it.
Colour
One signal, sodium orange, is reserved for pace, the primary action and the selected state. Green is only ever ‘done’ or ‘lit’.
Web
The site leads with the same promise as the app’s welcome screen and uses the same route trace as its visual spine.
[06]Website
The same promise,on a bigger screen.
The site opens with the app’s own promise, then answers the three questions a runner asks before downloading: how it finds light, how it keeps me safe, who runs with me.
Night running · iOS
Run where the lights are.
Every route rated for light, quiet and crossings.
Small screens: one column, a thumb-reach download button, and the route trace as the hero image.
[07]Design system
One kit forapp and web.
Components are live. Press, type and toggle to see states: default, hover, focus, loading, success, error and disabled.
Buttons · variants
Button · states (press it)
Input · validation
Try typing letters to see the error state.
Segmented control
Toggle · badges
Modal · confirm
Spacing · 4px base
Radius · sharp by default
Elevation · light, not shadow
[08]Motion & interaction
Movement thatmeans something.
Three principles keep motion useful: it confirms, it explains order, and it directs attention. All of it respects reduced-motion settings.
Pulse
Feedback in one beat
Taps answer with a 120ms scale and a ring that expands once. Nothing loops.
Trace
Routes draw themselves
Paths are revealed along their length, at the pace of a steady run, so a route is read in order.
Dim
The lamp follows focus
Inactive content drops to 40% so the active element is the brightest thing on screen.
[09]Final outcome
Brand,app, web,one system.
Product
A single evening loop
Brand
Shadow, light and one signal
Mobile
Seven screens, pace first
Website
Same promise, wider canvas
System
Tokens and live components
Next project
CareerForge: AI-Powered Career Blueprint