🏍️
MotoSocial
Social network for riders
Brand Guide v1.0
01 — Palette
6 Colors. That's It.
Midnight for dark surfaces. Ember for action. Cloud for background. White for cards. Green and red for system states. Everything else derives from these.
#0F1923
Midnight
Headers, dark bg, text
#E94560
Ember
CTA, active, likes, accent
#F8F9FA
Cloud
App background
#FFFFFF
White
Cards, surfaces, inputs
#2ECC71
Success
Online, confirmed
#E74C3C
Danger
SOS, errors
02 — Typography
Two Fonts
Outfit for headlines and UI. DM Sans for body text. Nothing else needed.
Display Outfit — 300-900
H1 / 36px Ride Together
H2 / 24px Mountain Loop
H3 / 18px My Garage
Label / 12px UPCOMING RIDES
Body DM Sans — 300-700
Body / 15px Amazing ride today! The views from the top were incredible.
Small / 13px 2 hours ago · Mountain pass · 8 riders
Caption / 11px Yamaha MT-07 · 2023 · 8,200 km
04 — Components
UI Kit
Buttons, inputs, list items, navigation. Lucide icons (outline) throughout the app.

Buttons

Inputs

List Items

🧑
Alex Rider
See you tomorrow!
🛣️
Mountain Loop
8/15 riders joined
🧑
Maria Speed
Thanks for the tips!

Bottom Navigation

🗺️Map
📰Feed
🏍️Rides
💬Chat
👤Me
05 — Depth & Shape
Shadows & Radii

Shadows

SMCards
MDDropdowns
LGModals
EmberCTA

Border Radius

8px
12px
16px
Full
06 — Preview
Map Screen
9:41📶 🔋
☰ MotoSocial
🔔🔍
📍
🏍️
🏍️
🏍️
⛽
☕
🏍️ 5 riders
3 km ▼
SOS
🗺️Map
📰Feed
🏍️Rides
💬Chat
👤Me
07 — Dev Reference
CSS Variables
Copy-paste into your project. All tokens in one place.
:root {
  /* Palette */
  --midnight: #0F1923;
  --ember:    #E94560;
  --cloud:    #F8F9FA;
  --white:    #FFFFFF;
  --success:  #2ECC71;
  --danger:   #E74C3C;

  /* Text */
  --text-primary:   #1A2634;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  /* Fonts */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(15,25,35,0.06);
  --shadow-md:    0 4px 12px rgba(15,25,35,0.08);
  --shadow-lg:    0 8px 30px rgba(15,25,35,0.12);
  --shadow-ember: 0 4px 20px rgba(233,69,96,0.3);
}