Brand Guidelines
Visual identity, color system, and design philosophy
Design Principles
Swum's design is deceptively simple—but that's the point. While others chase gradients and heavy shadows, we've built a system where ~85% white/light backgrounds create breathing room, and Primary Blue appears only where action is needed. Icons don't float—they live on light backgrounds with bold, colored glyphs. Depth comes from layered neutrals and precise 1px borders, not drop shadows. Rubik's friendly geometry balances warmth with structure, using weight (400-700) to guide the eye, not color chaos. The result? An interface that feels effortless because every pixel serves a purpose. No visual debt. No redesigns every six months. Just clarity that scales.
Aquatic Foundation
Color palette inspired by water—from deep ocean blues to light cyan shallows—creating an intuitive connection to swimming and our name, Swum.
Trust & Accessibility
WCAG AA compliant with 4.5:1 contrast ratios for body text and 3:1 for large text. Every interaction is readable and accessible.
Modern & Friendly
Rubik font with rounded letterforms creates approachability. Geometric foundation maintains professionalism and clarity.
Layered Backgrounds
White (#FFFFFF) for main pages, Light (#F4F5F8) for cards and sections. Creates depth through subtle contrast, not shadows.
Minimal Color Usage
~85% white/light backgrounds, ~10% primary blue accents, ~5% semantic colors. Color is strategic—never decorative.
Dark Mode System
Dark backgrounds (#121212, #222428) with adapted contextual colors. Light Blue becomes Dark Blue to maintain proper contrast.
Consistent Spacing
1rem border-radius for cards, 0.75rem for icons, clean 1px borders. Icons use Light backgrounds with colored glyphs at 2.25rem.
Semantic Clarity
Primary Blue (#4569FA) for actions, Success Green (#00DA97) for confirmations, Medium gray (#6E758F) for secondary elements.
Typography
Why Rubik?
Rubik strikes the perfect balance we needed—geometric enough for credibility, rounded enough for warmth. Its slightly condensed proportions maximize screen real estate without feeling cramped, crucial for data-heavy coaching interfaces. The five weights (300-700) give us precise typographic hierarchy without color dependency. Unlike trendy display fonts that age poorly, Rubik's clean structure ensures longevity. It feels professional in enterprise settings yet approachable for parents booking their child's first lesson. Most importantly, it remains highly legible at small sizes on mobile devices, where most of our users live.
Color System
Primary
Secondary & Accent
Neutrals & Backgrounds
Contextual Colors (Light Mode)
Contextual Colors (Dark Mode)
Logo Variants & Branding
Our logo system adapts to different contexts while maintaining brand consistency

Swum Logo - Primary
Primary horizontal logo

Swum Logo - Small
App icon & small spaces

Swum Circle - Blue
Navigation & scrolled header

Swum Logo - Blue
Icon only - blue

Swum Logo - White
Icon only - white

Swum Coach Logo
Coach branding

Swum Pro Logo
Pro tier branding

Swum Enterprise - Light
Enterprise tier - light

Brand Asset 1
Branding materials

Brand Asset 2
Branding materials

Brand Asset 3
Branding materials

Brand Asset 4
Branding materials
Artwork & Illustrations
Our visual style combines modern 3D illustrations with friendly, approachable characters

Feedback Illustration

Advanced Controls

Bank Trust

Blocked Dates

Blocked Dates Calendar

Invite People to Join

Legal Illustration

Message Customers

Pro Membership

Semi Private Lessons

Share Illustration

Intelligent Booking
Illustration Style Guide
3D Rendered Characters
Our illustrations feature smooth, rounded 3D characters that feel approachable and modern. Soft lighting and subtle shadows create depth without overwhelming the composition.
Color Harmony
Illustrations use our core palette—blues, purples, and accent colors—ensuring visual consistency across all touchpoints. Backgrounds remain subtle to let characters shine.
Emotional Connection
Characters display genuine emotions and relatable scenarios. From travelers exploring new pools to coaches celebrating success, each illustration tells a story.