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

300Rubik
400Rubik
500Rubik
600Rubik
700Rubik

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

Primary Blue
#4569FA
Main brand color, CTAs, interactive elements
Primary Shade
#3E5EE1
Hover states, pressed buttons
Primary Tint
#587BFB
Light accents, highlights

Secondary & Accent

Secondary
#3dc2ff
Secondary actions, highlights
Tertiary
#8A2BE2
Premium features, special badges
Success
#00DA97
Success states, confirmations
Warning
#ffc409
Warnings, important notices
Danger
#eb445a
Errors, destructive actions

Neutrals & Backgrounds

Black
#000000
Primary text in light mode
Dark
#222428
Dark backgrounds, headers
Medium
#bfbfbf
Secondary text, dividers
Light
#f4f5f8
Card backgrounds, subtle fills
White
#ffffff
Primary backgrounds, containers

Contextual Colors (Light Mode)

Light Blue
#d7e9ff
Info backgrounds, blue tints
Light Sky Blue
#d4f0ff
Sky accents, subtle highlights
Light Green
#d8f1ea
Success backgrounds
Light Red
#FFECEC
Error backgrounds
Light Yellow
#FFF5D6
Warning backgrounds
Light Purple
#E6D4FF
Premium backgrounds

Contextual Colors (Dark Mode)

Dark Blue
#142b47
Info backgrounds in dark mode
Dark Sky Blue
#1a3a52
Sky accents in dark mode
Dark Green
#216250
Success backgrounds in dark mode
Dark Red
#5d2626
Error backgrounds in dark mode
Dark Yellow
#4d3810
Warning backgrounds in dark mode
Dark Purple
#3D1A5C
Premium backgrounds in dark mode

Logo Variants & Branding

Our logo system adapts to different contexts while maintaining brand consistency

Swum Logo - Primary

Swum Logo - Primary

Primary horizontal logo

Swum Logo - Small

Swum Logo - Small

App icon & small spaces

Swum Circle - Blue

Swum Circle - Blue

Navigation & scrolled header

Swum Logo - Blue

Swum Logo - Blue

Icon only - blue

Swum Logo - White

Swum Logo - White

Icon only - white

Swum Coach Logo

Swum Coach Logo

Coach branding

Swum Pro Logo

Swum Pro Logo

Pro tier branding

Swum Enterprise - Light

Swum Enterprise - Light

Enterprise tier - light

Brand Asset 1

Brand Asset 1

Branding materials

Brand Asset 2

Brand Asset 2

Branding materials

Brand Asset 3

Brand Asset 3

Branding materials

Brand Asset 4

Brand Asset 4

Branding materials

Artwork & Illustrations

Our visual style combines modern 3D illustrations with friendly, approachable characters

Feedback Illustration
Illustrations

Feedback Illustration

Advanced Controls
Illustrations

Advanced Controls

Bank Trust
Illustrations

Bank Trust

Blocked Dates
Illustrations

Blocked Dates

Blocked Dates Calendar
Illustrations

Blocked Dates Calendar

Invite People to Join
Illustrations

Invite People to Join

Legal Illustration
Illustrations

Legal Illustration

Message Customers
Illustrations

Message Customers

Pro Membership
Illustrations

Pro Membership

Semi Private Lessons
Illustrations

Semi Private Lessons

Share Illustration
Illustrations

Share Illustration

Intelligent Booking
Illustrations

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.