Skip to content
DesignMunkDesignMunk Submit a site

Rideaway

rideaway.app
Get found, organize bookings, and build trust in one path
Apps & Mobile Software Next.js Tailwind Homepage Google Sans Flex
Share Visit site
rideaway.app DESKTOP · 1440
Rideaway

AI Breakdown

Design export

---
version: alpha
name: Rideaway
description: Get found, organize bookings, and build trust in one path
colors:
  primary: "#ffffff"
  secondary: "#fc543c"
  tertiary: "#145ae6"
  neutral: "#191919"
  border: "#e7e7e7"
  brand-pink-rose-bud: "#fcac9c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Google Sans Flex Variable
    fontSize: 56px
    fontWeight: 640
    lineHeight: 1.1
    letterSpacing: -0.032em
  headline-md:
    fontFamily: Google Sans Flex Variable
    fontSize: 42px
    fontWeight: 640
    lineHeight: 1.19
    letterSpacing: -0.018em
  headline-sm:
    fontFamily: Google Sans Flex Variable
    fontSize: 22px
    fontWeight: 640
    lineHeight: 1.35
  headline-xs:
    fontFamily: Google Sans Flex Variable
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Google Sans Flex Variable
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0.12em
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 36px
  xl: 56px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 5.92px 19.52px 4.48px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 5.92px 19.52px 4.48px
    height: 44px
  button-link:
    textColor: "{colors.tertiary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 24px
---

# Rideaway: Dark Surface, White Cards, Blue CTAs

## Overview

Rideaway is a dark-mode system aimed at sports instructors, schools, and clubs. The tone is practical and trustworthy—product over polish. Layouts are copy-forward with clear, instruction-style headings and compact body text. Visual energy comes from white cards and blue actions against a near-black surface, keeping the interface focused and uncluttered.

## Colors

- **primary (#ffffff):** Base for cards and text on light surfaces; used for card backgrounds and inverted elements.
- **secondary (#fc543c):** Signal orange reserved for highlights and limited emphasis.
- **tertiary (#145ae6):** Action blue for primary CTAs, links, and active states.
- **neutral (#191919):** Deep charcoal page surface for dark mode.
- **border (#e7e7e7):** Subtle separators on white cards and inputs.
- **brand-pink-rose-bud (#fcac9c):** Soft accent for supportive badges or data points.
- **surface (#191919):** Page and section backgrounds; same as neutral.
- **on-surface (#ffffff):** Foreground text and icons when placed on dark surfaces.

## Typography

All roles use Google Sans Flex Variable. Headings are tight and confident; body text is compact with generous tracking for dark-mode readability.
- Headline LG: Google Sans Flex Variable, 56px, weight 640, line-height 1.1, letter-spacing -0.032em. Use for hero statements.
- Headline MD: 42px, weight 640, line-height 1.19, letter-spacing -0.018em. Section intros.
- Headline SM: 22px, weight 640. Feature titles and subheads.
- Headline XS: 18px, weight 600. Labels within cards and UI blocks.
- Body MD: 15px, weight 400, line-height 1.47, letter-spacing 0.12em. Long copy and descriptions.
Availability: Google Sans Flex Variable is self-hosted (custom). Use Google Sans Flex (type: google) as the first fallback. Other obtainable substitutes with similar geometry and x-height: Inter and Manrope.

## Layout

Spacing follows a 6px base: 6, 14, 24, 36, 56. Build vertical rhythm from these increments—56px for section paddings, 36px for block gaps, 24px inside cards, 14px for element clusters, 6px for micro-spacing. A responsive grid with 12 columns works well; cards span full width on mobile, 6/12 or 4/12 on larger screens. Keep body widths moderate to strengthen readability at 15px.

## Elevation & Depth

Shadows are not used. Hierarchy comes from tonal contrast (white cards on #191919), size, and spacing. Use #e7e7e7 only as a 1px divider or input outline on white cards; do not place borders directly on the dark surface unless necessary—prefer spacing and color blocks.

## Shapes

Two radii define the language. 8px (sm) for interactive controls like buttons and pills. 12px (md) for containers—cards, media, and prominent tiles. Use square edges for links and inline text buttons to keep them distinct from filled controls.

## Components

Buttons and cards are tokenized; build other modules from these primitives.
- Button — Primary: background #145ae6, text #ffffff, radius 8px, 44px height, padding 5.92px 19.52px 4.48px. Use for the main action per view.
- Button — Secondary: background #ffffff, text #ffffff, radius 8px, 44px height, same padding. Reserve for specialized contexts where the surrounding dark surface maintains legibility; otherwise prefer Primary or Link.
- Button — Link: text #145ae6, no radius. Use inline with copy or beside a primary button.
- Card: background #ffffff, text #191919, radius 12px, 24px padding. Default container for content and media.

### Promo Top Bar
A full-width strip announcing Pro availability. Surface: #145ae6 with white text; compact 14px vertical padding. Links use the Link style.

### Global Navigation
Dark header on #191919 with white links and a single prominent CTA. Keep item spacing at 24–36px; language switcher sits as a compact menu.

### Hero with Dual CTAs
56px headline, 15px body, two actions: Primary "Get 6 months of Pro" and Link "See how it works." Left-aligned text over a darkened photo; 56px section padding.

### Instructor Card Carousel
A stack or slider of 12px-radius white cards showcasing an instructor profile preview. Each card uses the Card token and may include a small avatar/media and 18–22px headings.

### Numbered Stepper (Five Steps)
A horizontal or stacked list 1–5 explaining the booking path. Use Headline XS for step titles and Body MD for descriptions; 24px gap between items, 36px between steps.

### Audience Split Cards
Two side-by-side cards: "For instructors" and "For schools and clubs." Each is a Card with 24px padding, iconography optional, Primary or Link CTA at the end.

### Survey Form CTA
A white Card containing inputs for first name, email, and role, plus a consent checkbox. 24px internal grid, 14px gaps between fields, Primary submit button full-width on mobile.

### Referral Steps
A three-step explainer adjacent to the form using numbered items and the Link button for "See what Pro includes." Keep spacing at 24px inside the block.

## Do's and Don'ts

- Do maintain the dark surface (#191919) and place content inside white 12px cards for readable sections.
- Do use #145ae6 for all primary actions and interactive emphasis; reserve #fc543c for minor highlights.
- Do keep body copy at 15px with its default tracking; avoid shrinking text below this size.
- Don't introduce shadows; use contrast, spacing, or borders (#e7e7e7 on white only) to separate elements.
- Don't round controls beyond 8px or containers beyond 12px; consistency signals clickability.
- Don't mix additional accent colors for CTAs; one primary action color per screen.

## Agent Prompt Guide

Quick color reference
- Text on dark: #ffffff
- Background/surface: #191919
- Border on white cards: #e7e7e7
- Accent/primary action: #145ae6

1) Build the hero
"Create a full-width dark hero on #191919 with a left column containing a 56px, weight-640 headline and 15px body set in Google Sans Flex Variable; if unavailable, use Google Sans Flex from Google Fonts. Add two actions: a primary button 44px tall, 8px radius, background #145ae6, text #ffffff labeled 'Get 6 months of Pro'; and a link-style button in #145ae6 labeled 'See how it works'. Section padding 56px top/bottom."

2) Problem grid section
"Add a section on #191919 with a 42px headline and three feature tiles laid out in a 12-column grid (each 4/12 on desktop, full-width on mobile). Each tile is a white card (#ffffff) with 12px radius, 24px padding, a 22px title, and 15px description. Gaps: 36px between tiles."

3) Five-step path
"Render a numbered stepper explaining the booking flow. Use white 12px-radius cards for each step with 24px padding. Titles at 18px/600, descriptions at 15px/400. Place a blue primary button (#145ae6 on #ffffff text) below the list. Section spacing: 56px."

4) Audience split + form
"Create two side-by-side white cards (12px radius, 24px padding) titled 'For instructors' and 'For schools and clubs' with 22px headings and 15px body. Below, add a form card with inputs and a 44px-tall primary button (#145ae6, 8px radius). Use #e7e7e7 borders only inside white cards."

## Similar Brands

- ClassPass: Shares a card-driven marketplace feel; ClassPass stays light-themed where Rideaway leans into dark surfaces for contrast.
- Mindbody: Similar scheduling and booking emphasis; Mindbody uses softer pastels and more shadows, while Rideaway relies on pure tonal contrast.
- Airbnb: Clear, step-based explanations and strong cards; Airbnb is brighter and more illustrative, Rideaway is text-first with restrained imagery.
- Strava: Sports-centric brand with bold action color; Strava is orange and more social, Rideaway uses blue CTAs and instructional copy to sell workflows.

More like this

Browse Apps & Mobile →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 30 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 30 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago