LobbyBob Brand Identity
Meet Bob the Capybara, our ultimate Zen Clerk mascot. Discover the colors, typography, and design principles that transition customer waiting from anxious delay to calm certainty.
Mascot States & Usage
Bob is the human face of our queue system. We render him in specific emotional states depending on the contextual user feedback.
Svelte Component Integration
<script lang="ts"> import Bob from "$lib/components/bob.svelte"; </script> <Bob state="default" class="w-24 h-24" />
Design Principles
Five simple rules that govern our product design, prioritizing user state-of-mind and concrete utility over aesthetic noise.
Utility First
Clarity over decoration. If an element doesn't help users answer 'What's happening now?', it's noise.
The 20-Foot Rule
Lobby displays must be readable from across a room. This mandates massive type scaling and high contrast.
Satisfying Motion
State transitions (like advancing the line) should feel premium, deliberate, and smooth.
Frictionless Entry
The customer flow to scan and join a line on their phone must be the fastest thing they do all day.
Contextual Iconography
Bootstrap Icons provide functional utility, while Bob the Capybara supplies welcoming personality.
The Brand Palette
Our colors use the modern, perceptually uniform OKLCH space. The primary Service Teal denotes safety, and Accent Orange adds warm mascot contrast.
Service Teal
Buttons, success indicators, primary branding elements.
Teal Dark
Deep headers, interactive hovers, and high-contrast typography.
Teal Light
Selection states, banner backgrounds, and border highlights.
Accent Orange
Bob's bow tie, party hat details, notifications, and warning flags.
Surface Light
Main body background, clean containers, and panel fills.
Surface Muted
Input backgrounds, table headers, and disabled statuses.
Text Dark
Body copy, titles, labels, and all primary text components.
Text Muted
Subtitles, table headings, descriptions, and helper hints.
Typography Scale
Our type system utilizes Plus Jakarta Sans paired with Onest Variable. Header elements track tightly, while reading widths are capped to 65-75ch.
20-Foot Rule Simulator
Toggle between the standard staff dashboard view and the Lobby TV mode to observe how the typography scale adjusts for legibility from 20 feet away.
Lobby Queue Management
Currently active queue for Main Salon
| Ticket | Customer | Service | Wait Time | Status |
|---|---|---|---|---|
| A-12 | David Miller | Haircut | 12 min | Serving |
| A-13 | Sarah Connor | Beard Trim | 5 min | Next Up |
| B-02 | Marcus Wright | Hair Dye | 18 min | Waiting |
| A-14 | Ellen Ripley | Shave | 22 min | Waiting |
Brand Assets Download Hub
Get original vector branding assets. All downloads and SVG code copy outputs are pixel-perfect and optimized for web displays.
Horizontal Logo
Standard horizontal brand logo combining Bob the Mascot icon with the typography marker.
Stacked Logo
Stacked vertical asset best suited for central profile pictures, labels, and circular frames.
Bob Mascot Icon
Stand-alone avatar representation of Bob the Capybara in standard Zen posture.