The CityBites
Brand Identity
This document defines the visual language, personality, and communication standards that make CityBites recognizable, trustworthy, and irresistible across every touchpoint — from the app to the streets of Europe.
Mission & Vision
What drives every decision we make.
Mission
To give every professional and traveler in Europe access to a premium, stress-free lunch — at a price that respects their wallet — by connecting them with the best local restaurants in their city, one subscription at a time.
Vision
A world where lunch is the best part of your workday. Where tasting a new restaurant is effortless, affordable, and joyful — and where local restaurants thrive because modern professionals choose them every day.
Core Values
One tap. Done. No decision fatigue.
Honest pricing. No hidden fees. Ever.
We champion neighbourhood gems, not chains.
Better experience for less cost — always.
Brand Personality
CityBites is a brand you'd want to grab lunch with.
Smart, Not Snobby
We know our stuff about food and cities, but we never talk down to our users. We're the well-traveled friend who gives genuine recommendations.
Human & Warm
Behind our sleek UI is a human heart. We celebrate local culture, cheer for small restaurants, and genuinely care about the people we serve.
Confident & Direct
We know our value. We don't hedge. When we say you'll save money and eat better, we mean it — and we can prove it with the savings calculator.
Brand Archetype: The Explorer × The Sage
We push boundaries, discover new restaurants, and encourage curiosity. Every lunchtime is an adventure through the city.
We're the expert. We know which restaurants are worth it, what meals are freshest, and exactly how much you'll save — we guide with knowledge.
Color System
Our palette is inspired by city nights — vibrant neon energy over deep urban darkness.
Primary Palette
Neutral / Background Palette
Gradients
Light Mode Adaptations
Typography
Two typefaces work in tandem — Outfit for impact, Inter for clarity.
Spend Less.
Type Scale
Logo Usage
The CityBites logo combines the city-skyline burger mark with the wordmark. Both elements must remain visually balanced.
Logo Do's and Don'ts
- Always maintain the clear-space = ½ logo height around the mark
- Use on approved dark, gradient, or white backgrounds only
- Scale proportionally — never stretch or squish
- Use the provided PNG/SVG files, never recreate
- Ensure minimum size: 24px mark height on digital
- Don't recolor the logo with unapproved colors
- Don't place it on busy/photographic backgrounds without overlay
- Don't add shadows, outlines, or bevels
- Don't rotate or tilt the logo
- Don't use the wordmark without the mark (burger icon)
Iconography Style
Icons follow a consistent rounded-stroke style at 24dp with 2px strokes. Use mint green for active states, muted for inactive.
Icon library: Material Symbols Rounded — weight 300, optical size 24, grade 0. Active tint: var(--mint). Inactive: var(--text-muted).
Voice & Tone
How we talk matters as much as what we say. CityBites speaks like a smart, local friend — not a corporate app.
We know food. We know cities. We back our claims with data (savings calculator, MRR tracker). We're confident without being condescending.
We celebrate people and places. We're the app that remembers you prefer vegetarian, notices when you've skipped lunch, and genuinely celebrates your savings milestone.
No wishy-washy hedging. We say what we mean. Action-oriented language. Short sentences. Strong verbs.
We can be a little cheeky. Not every message needs to be serious. Micro-copy is a chance to delight. But we know when to be professional.
Writing Principles
Be Concise
Every word earns its place. Cut fluff. If you can say it in 5 words, don't use 10.
Use Active Voice
"Book your meal" beats "A meal can be booked." People do things — make them the subject.
Celebrate Progress
When users hit milestones (10 lunches, €100 saved), acknowledge it. Make them feel good about choosing CityBites.
Localize Authentically
German users get German warmth. French users get French elegance. Translations go beyond words — adapt the voice too.
Never Guilt-Trip
The "Sad Cancellation Screen" should feel understanding, not manipulative. People have lives. We respect that.
Error = Opportunity
Errors are moments to be human, helpful, and fast to resolve. Never blame the user. Always offer a next step.
Taglines & Key Copy
Our core messages, ready to deploy across marketing, App Store listings, and social media.
Brand Assets Gallery
All visual assets created for CityBites, ready for use across platforms.
Logo Mark (City Skyline Burger)
App Icon (iOS / Android)
Design Tokens
Copy-paste ready values for Flutter (app_theme.dart), CSS, and Figma.
Flutter / Dart
// lib/core/theme/app_theme.dart — Brand Color Tokens static const Color mintGreen = Color(0xFF1DE9B6); // Primary static const Color mintDark = Color(0xFF00A77D); // Light mode primary static const Color deepViolet = Color(0xFF5E2CA5); // Secondary static const Color violetBright = Color(0xFF7B45D9); // Hover / Elevation static const Color electricCyan = Color(0xFF00B0FF); // Gradient partner static const Color darkBackground = Color(0xFF0B0717); // BG static const Color surface1 = Color(0xFF12092A); // Surface level 1 static const Color cardBackground = Color(0xFF1E1635); // Cards static const Color textLight = Color(0xFFF3F0FC); // Primary text static const Color textMuted = Color(0xFFA59FB6); // Secondary text static const Color textSubtle = Color(0xFF6B6579); // Tertiary text static const Color errorColor = Color(0xFFFF6B8A); // Error / Cancel // Gradients static const Gradient primaryGradient = LinearGradient( colors: [mintGreen, electricCyan], begin: Alignment.topLeft, end: Alignment.bottomRight, ); static const Gradient brandGradient = LinearGradient( colors: [mintGreen, deepViolet], begin: Alignment.topLeft, end: Alignment.bottomRight, );
CSS Custom Properties
:root { /* Colors */ --mint: #1DE9B6; --mint-dark: #00A77D; --violet: #5E2CA5; --violet-bright: #7B45D9; --cyan: #00B0FF; --dark-bg: #0B0717; --surface-1: #12092A; --card-bg: #1E1635; --text: #F3F0FC; --text-muted: #A59FB6; --text-subtle: #6B6579; --error: #FF6B8A; /* Typography */ --font-display: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'DM Mono', monospace; /* Gradients */ --grad-primary: linear-gradient(135deg, #1DE9B6 0%, #00B0FF 100%); --grad-brand: linear-gradient(135deg, #1DE9B6 0%, #5E2CA5 100%); /* Border radius */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; }