-
Notifications
You must be signed in to change notification settings - Fork 0
Visual Identity
Felines — neutral, tech-forward, plural suggests community, and works in English without translation.
Names considered and discarded: Meow Map (too childish), Miau Mapa (Portuguese-only), Felimap (less clear), Vizinhos Felinos ("Cat Neighbors" — too long). See Behind the Scenes for the Gatopolis story.
All colors were derived from the logo cat — specifically the two most common street-cat colorings in Brazil, caramel and tabby.
| Token | Hex | Use |
|---|---|---|
| Primary | #B66119 |
Buttons, links, logo, highlights |
| Primary hover | #8F4C14 |
Hover states |
| Accent | #F2994B |
Secondary highlights |
| Soft | #F2AE72 |
Secondary text on dark sections |
| Golden | #DA8433 |
Warning/attention states |
| Background | #F2F2F2 |
Page background |
| Surface | #FFFFFF |
Cards and surfaces |
| Dark bg | #2D1810 |
Dark sections |
| Dark card | #3D2318 |
Cards inside dark sections |
| Text primary | #2D2D2D |
Main text |
| Text secondary | #6B6B6B |
Secondary text |
| Border | #E8E4DF |
Borders and dividers |
| Success | #6B8F6A |
Progress, neutered |
| Emergency | #C0392B |
Emergencies only |
Font: Inter (Google Fonts)
| Level | Size | Weight |
|---|---|---|
| Display | 56–64px | Bold 700 |
| H1 | 48px | Bold 700 |
| H2 | 36px | Bold 700 |
| H3 | 28px | Semibold 600 |
| H4 | 22px | Semibold 600 |
| Body large | 18px | Regular 400 |
| Body | 16px | Regular 400 |
| Small | 14px | Regular 400 |
| Caption | 12px | Regular 400 |
Friendly professional — accessible without being childish, light without losing credibility.
References: Duolingo (light gamification), Citymapper (urban utility), iNaturalist (citizen science), Meow Metrics (editorial with alternating dark sections).
Direction B+C: Belonging + Discovery. The user explores, learns, and gradually feels part of something bigger.
Friendly and informative — like a knowledgeable friend explaining something important.
- Short, direct sentences — no unexplained jargon
- Always second person: "you", "your street"
- Information before emotional appeal
- Light humor when appropriate — never in emergencies
- Never explicitly takes sides
- No specific geographic references baked into the UI (the product is designed to be portable beyond Natal)
- Collaboration, never competition
- Education as a layer, not a destination
- Action before commitment
- No dead ends
- Animal safety as a design decision
- The product never takes sides
- Everyone's own pace
- Every feature must earn its place
- Code as product