Brand

Design System

Our design system is built on Inter and Orbitron typography, bold colors, and clean geometric forms that reflect the future of mobility.

Logos

Official Ride AI marks and downloads for full logo, short logo, and favicon variants.

Ride AI Full Logo - Black
Black
full logo
Ride AI Full Logo - White
White
full logo
Ride AI Full Logo - Yellow
Yellow
full logo
Ride AI Full Logo - Yellow/Black
Yellow/Black
full logo

Typography

Headings

font-orbitron text-5xl
Heading 5XL
font-orbitron text-4xl
Heading 4XL
font-orbitron text-3xl
Heading 3XL
font-orbitron text-2xl
Heading 2XL
font-orbitron text-xl
Heading XL

Body Text

text-lg
Large body text - For prominent paragraphs and introductions
text-base
Base body text - For standard paragraphs and content
text-sm
Small text - For captions, labels, and secondary information
text-xs
Extra small text - For fine print and metadata

Web Fonts

Our design system uses two primary typefaces that work together to create a distinctive, futuristic aesthetic while maintaining excellent readability.

Orbitron

A geometric sans-serif typeface used for all headings and display text. Orbitron evokes a sense of technology and forward-thinking design, perfect for the autonomous vehicle and mobility space.

Regular (400)
Medium (500)
Bold (700)

Inter

A highly legible sans-serif typeface designed for screens. Inter is used for all body text, ensuring excellent readability across all devices and sizes.

Regular (400)
Medium (500)
Semibold (600)
Bold (700)

Colors

Brand Colors

Soft Yellow
#f8ff5f
--color-soft-yellow
Black
#091315
--color-black
Darker Green
#00292c
--color-darker-green
Dark Green
#1ecb6e
--color-dark-green
Light Green
#afff5f
--color-light-green
Light Pink
#f5bad8
--color-light-pink
Dark Pink
#c344e3
--color-dark-pink
White
#ffffff
--color-white

Semantic Tokens

Semantic tokens represent meaning rather than specific values. This abstraction makes theming easier and ensures consistency across the application.

Foreground
Near black
Background
Pure white
Muted
Light gray
Muted Foreground
Mid gray

Spacing Scale

Based on 4px base unit

4px
8px
16px
24px
32px
48px
64px
96px

Components

Buttons

Primary
Secondary
Outline
Ghost
Link
CTA (Dark BG)

Links

Container

.ride-ai-container

The standard container class provides consistent max-width and padding across all pages. It uses max-w-7xl mx-auto px-4 sm:px-6 lg:px-8