Visuals - Flythm/Brand-Guide GitHub Wiki

🎨 Flythm Visual Style Guide

A modern, rhythmic brand for agile teams. Friendly, clear, and elevated by our mascot, Vee.

🟦 Core Brand Colors

Name Hex Usage
Sky Blue #3C91E6 Primary brand color, CTAs, headers
Golden Haze #F9C80E Accents, highlights, notifications
Cloud White #F4F4F9 Backgrounds, empty states
Ink Gray #2E2E3A Primary text, contrast, structure

✅ Gradients can blend blue → soft violet
✅ Use soft shadows and rounded edges
🚫 Avoid harsh neons or overly saturated palettes

🅰️ Typography

Type Font Usage
Headlines Outfit or Sora Playful, clean, geometric
Body Inter or Manrope Readable, modern, spacious
UI Labels Inter Compact, minimal

🔠 Letter-spacing should feel airy, not compressed
🎵 Try rhythmic spacing on navigation and steps

🧸 Vee the Mascot

Overview:

Vee is a soft, friendly, creature that feels:

  • Curious, calm, and encouraging
  • Designed with a silhouette that can reduce to a line icon
  • Always appears to support, never distract

Visual Details:

  • Round head, two small horn-like antennae
  • Large eyes with light glint
  • Gradient blue-to-soft teal fur for texture
  • Flaps, floats, tilts—no aggressive motion

Approved Uses:

  • In onboarding: perched on welcome banners
  • On dashboards: showing helpful insights
  • On swag: plushies, stickers, enamel pins
  • In error states: “off course” or “checking maps”

🧩 Simplified Vee mark (just silhouette or winged “V”) can be used for app icons, badges, and favicon.

📐 UI Elements & Layout

Element Style
Buttons Rounded corners (border-radius: 8px) Sky Blue fill w/ white text
Cards Soft shadows, lightly tinted backgrounds
Navigation Sticky top nav, minimal iconography
Tooltips Subtle bounce on appearance, fade-out
Modals Centered, soft shadow, mascot can appear in corner for extra guidance

🖼 Iconography

  • Use a line + soft-fill icon style (Material Symbols or Remix Icons recommended)
  • Icons should be friendly, not too abstract
  • Vee-specific icons: wings, feathers, loops, charts-in-flight

🧩 Logo & Mark Usage

Variant When to Use
Wordmark Marketing sites, splash pages
Mascot Mark Favicons, avatar, merch
Monogram (F) Social icons, minimal headers

🪶 Vee can be integrated with the y or h in “Flythm”
Always keep 16px padding around logo when used in UI

💡 Motion & Animation

  • Vee flaps wings subtly or tilts in approval
  • Loading animations: looping feathers or rippling rhythm lines
  • Transitions: smooth, gliding, no snap-ins

📸 Imagery & Texture

  • Use soft gradients or lightly textured background (paper, cloud, or sky)
  • Avoid sharp geometry or overly flat styles
  • Photography can include plush toys, soft lighting, warm teams in action

✅ Do

  • Use Vee sparingly and strategically
  • Keep whitespace generous
  • Focus on clarity and rhythmic structure

❌ Don't

  • Over-animate or crowd the screen with mascot elements
  • Use conflicting brand colors (e.g., red or green for neutral UI)
  • Flatten or pixelate Vee—always use vector or high-res assets