Be direct.
Say what people can do and where the action goes. Cleverness comes after clarity.
Quest brand system · Lagos
Quest,
by design.
A living system for helping people find somewhere worth going. Warm, direct, lively—and always grounded in real places and real people.
Voice
Simple words. Real invitations.
Visuals
Real Lagos over invented worlds.
Motion
Purposeful movement, never theatre.
01 · Foundations
A small palette with a clear job.
Neutral surfaces carry the experience. Orange marks action. Amber adds a spark—not another competing button color.
Ink
--quest-ink
#1A1512
Paper
--quest-paper
#FBF7EF
Canvas
--quest-canvas
#F1EADD
Action
--quest-action
#C94A1F
Spark
--quest-spark
#F0A03B
Soft ink
--quest-ink-soft
#554B43
Typography
DM Sans carries every role. Hierarchy comes from scale, weight, spacing, and contrast—not from mixing typefaces.
Display · 700 / 90%
Go somewhere.
Title · 700 / 96%
Pick what feels fun.
Heading · 700
There is always something worth doing.
Body · 400 / 160%
Find fun activities nearby, join people who are in, or start your own plan. The copy stays plain enough to understand on the first read.
Spacing
A 4px base keeps product layouts precise while preserving generous editorial rhythm.
14px
28px
312px
416px
624px
832px
1248px
1872px
2496px
02 · Components
Actions should look like actions.
Controls use familiar shapes, visible states, and honest labels. Expressive styling never obscures what happens next.
Buttons
QuestButtonOne primary action per view. The hard shadow belongs to the main action—not every surface.
Labels and status
QuestTagNear youThis weekendHappening nowPlan locked
Section eyebrow
Useful context, not decoration.
Form fields
QuestFieldUse an area, landmark, or neighbourhood.
Enter a complete email address.
Feedback
System signalsSaved to your list
You can come back to it anytime.
Plans can change
Confirm with the venue before you go.
Could not save this
Check your connection and try again.
03 · Photography
Show the city people can actually enter.
Use specific, recognisable places and human moments. Avoid synthetic scenes, empty lifestyle gloss, and images that could be any city.
Real place
Real settingChoose
Specific Lagos places
Landmarks, venue texture, recognisable streets, water, food, art, and people in motion.
Crop
Close enough to feel present
Keep the activity legible. Avoid distant, empty scenes and cluttered collages.
Treat
Sharp editorial frames
No soft card radii. Reserve the offset shadow for featured imagery.
04 · Principles
A system with an opinion, not a costume.
Feel local.
Use Lagos with specificity and respect. Real places beat generic lifestyle imagery.
Make room.
Editorial marketing can be loud. Product screens should quieten down and help people choose.
Do
- Use one obvious primary action.
- Write short labels people understand instantly.
- Let photography carry the sense of place.
- Use edges, dividers, and spacing to make hierarchy.
Avoid
- Generic rounded cards on every surface.
- Gradients, purple accents, and decorative 3D blobs.
- Multiple orange buttons competing in one view.
- Making every product screen look like a campaign.
The standard