Skip to content
Paul MzawakBack to the board
Design systemsDesign systemUI kitMobile

Rally design system

The UI kit behind the Rally: a dark-only theme, volt-yellow actions, event, challenge and chat components, chips and stat tiles.

Role
UX/UI designer
Year
2025
Overview of the Rally design system with its colours, type and components

Overview

The Rally's system is dark-only and high-energy. Near-black surfaces let volt yellow mark exactly what matters: the main action, your messages, active tabs and progress.

Everything on this page is rebuilt in code from the original Rally screens: the colours and font sizes were taken from the exported Figma files.

Colour

Brand

  • Volt

    #D4FF00

    Primary buttons, active tabs, your messages, progress

  • Cheer red

    #EF4444

    Likes

  • Medal gold

    #EAB308

    Badges and achievements

  • Go green

    #10B981

    Online status

Surfaces and text

  • Black

    #121212

    App background

  • Carbon

    #1E1E1E

    Cards and inputs

  • Graphite

    #2A2A2A

    Chips and secondary buttons

  • Line

    #333333

    Dividers

  • White

    #FFFFFF

    Primary text

  • Silver

    #A0A0A0

    Secondary text

Typography

Typeface

Inter

  • Stat
    32px · Bold

    12 / 20

  • Hero
    26px · Bold

    Finish strong

  • Page title
    24px · Bold

    Holiday Bootcamp

  • Greeting
    20px · Bold

    Welcome back, Raphael

  • Section
    18px · SemiBold

    Coming up for you

  • Body
    15px · Regular

    Morning Alex! Ready for leg day?

  • Small
    13px · Medium

    Central Park · North entrance

  • Caption
    11px · Medium

    5km Runner

  • Label
    10px · Bold

    Announcement

Buttons

Dark theme

Primary, secondary and text

Reserve my spot · FreeConnect with David K.Log out

States

PressedDisabled

Icon buttons

Inputs and controls

Dark theme

Search

Search people or groups

Text field

Message

Message…

Focused

Message…

Select

Appearance

Dark

Segmented control

TodayMeal planShopping list

Chips, toggle and selection

All chatsGroupsUnread 2
Event reminders
SelectedNot selected

Cards

Dark theme

4 spots left

Holiday Bootcamp

Wed, Dec 18 · 7:00–8:00 AM

Central Park · With Trainer Elody

Free for members

December challenge

Finish strong

12 / 20 workouts complete

Morning Alex! Ready for leg day? 🏋️
Looks intense! I'm heading there now.

#8

Your rank

148

Members

5 days

Streak

David K.

🏅 5km Runner

24

Icons

Dark theme

  • Home
  • Chat
  • Events
  • Profile
  • Alerts
  • Partners
  • Challenge
  • Send
  • Create
  • Cheer
  • Location
  • Workout

Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.

Radius, spacing and badges

Corner radius

  • Chip Full
  • Button 12px
  • Card 16px
  • Bubble 16px

Spacing scale

  • 4px
  • 8px
  • 12px
  • 16px
  • 20px
  • 24px
  • 32px

Badges and status

4 spots leftFree for membersOnline5km Runner