Skip to content
DesignMunkDesignMunk Submit a site

RideTandem

ridetandem.com
Tech-enabled shuttle bus services for employers, schools, and agencies
Software Technology Webflow Homepage Roobertpro
Share Visit site
ridetandem.com DESKTOP · 1440
RideTandem

AI Breakdown

Design export

---
version: alpha
name: RideTandem
description: Tech-enabled shuttle bus services for employers, schools, and agencies
colors:
  primary: "#01181a"
  secondary: "#2bd2b2"
  tertiary: "#f4b500"
  neutral: "#f2f1e8"
  brand-evergreen-forest: "#146c5c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Roobertpro
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: 0.025em
  headline-md:
    fontFamily: Roobertpro
    fontSize: 29px
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: -0.025em
  headline-sm:
    fontFamily: Roobertpro
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.14
  headline-xs:
    fontFamily: Roobertpro
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Roobertpro
    fontSize: 16.3px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 10px
  sm: 20px
  md: 52px
  lg: 68px
  xl: 120px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9.75px 19.5px
    height: 41px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9.75px 19.5px
    height: 41px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# RideTandem: Mustard CTA Pills on Warm Off-White

## Overview

RideTandem's UI is pragmatic and calm: warm off-white surfaces, high-contrast ink text, and mustard CTAs. Content is dense but ordered, leaning on left-aligned type and a two-column hero/media pattern. The audience ranges from enterprise ops and HR teams to education administrators, so copy and components prioritise clarity over flourish. Use mint as a fresh accent for data and status, not as a main brand field.

## Colors

- **primary (#01181a):** Deep ink for headlines, body text, and icons.
- **secondary (#2bd2b2):** Mint accent for data chips, highlights, and small UI states.
- **tertiary (#f4b500):** Mustard emphasis for primary CTAs and interactive wayfinding.
- **neutral (#f2f1e8):** Warm off-white surface and card backgrounds.
- **brand-evergreen-forest (#146c5c):** Evergreen support tone for charts, badges, and deeper accents.
- **surface ({colors.neutral}):** Default page canvas; keeps contrast comfortable.
- **on-surface ({colors.primary}):** Standard text/icon colour used over surface blocks.

## Typography

The system uses Roobertpro, a proprietary square-grotesk served self-hosted. It is not a Google font; when Roobertpro is unavailable, substitute Inter, Manrope, or Plus Jakarta Sans for similar x-height and geometric rhythm.
- Headline-lg (Roobertpro 36px/1.19, 600, +0.025em): Primary section and hero headings. Tight but readable for short lines.
- Headline-md (Roobertpro 29px/1.48, 400, -0.025em): Secondary section leads and large card titles.
- Headline-sm (Roobertpro 24px/1.14, 400): Feature labels and subsection headers.
- Headline-xs (Roobertpro 20px/1.2, 400): Card titles, FAQ questions, and metric labels.
- Body-md (Roobertpro 16.3px/1.5, 400): All descriptive copy, FAQs, and captions.

## Layout

Spacing runs on a compact-to-roomy scale: 10, 20, 52, 68, 120px. Use 120px for major section breaks, 68px for hero paddings and tall gutters, and 52px for standard section spacing. Card internals use 16px padding with 20px gaps between grid items. The grid reads as a simple 12-column with left-aligned text blocks and right-side media; on narrow viewports, stack content and retain 20px side padding.

## Elevation & Depth

Shadows are disabled across sizes. Hierarchy is established through strong type contrast, tonal blocks on the neutral surface, and generous whitespace. Dividers and card edges (8px radius) provide separation; rely on color roles and spacing rather than elevation to indicate interactivity.

## Shapes

Two radii define the language: 8px corners for cards, inputs, and media; 9999px for pills—primary and secondary buttons, small chips, and badges. Use square edges for text links and inline actions to keep them distinct from tappable pills.

## Components

Buttons and cards are the primary building blocks.
- Button — Primary: pill shape (radius 9999px), 41px height, 9.75px × 19.5px padding. Text color #01181a. In page usage, fill with tertiary #f4b500 for high-priority CTAs like "Talk to sales".
- Button — Secondary: identical sizing and pill shape with #01181a text; use neutral or outline styling to support the primary without competing.
- Button — Link: text-only, square corners (0px radius). Reserve for inline navigational actions.
- Card: neutral background #f2f1e8, 8px radius, 16px padding, #01181a text. Use for benefits, features, and FAQs.

### Global Navigation Bar
Sticky, single-row header with left brand mark and right-aligned items: Blog, "For Business" and "For Education" menus, and a tertiary-filled Contact pill. Use headline-xs for menu labels and maintain 20px gaps.

### Hero Media Collage
Left column: headline-lg and body-md with a primary CTA pill. Right column: large coach photo with two inset thumbnails (staff portrait and app QR). Maintain 52–68px horizontal gutter and 8px media radii.

### Trust Bar
Row of client logos under the hero. Keep substantial horizontal spacing (20–52px) and render logos monochrome to protect overall contrast.

### Benefit Trio
Under "How can RideTandem support your business?", three cards ("Boost recruitment & retention", "Increase sustainability", "Reduce admin"). Titles in headline-xs, body in body-md, with 8px corners and 20px gaps.

### Tech Feature List
"Easy to use tech-backed service" section: stacked feature items ("Ticketing app", "Location tracking", etc.). Each item uses headline-sm for the label and body-md for the description; arrange in 2–3 column grids on wide screens with 20px gutters.

### Service Category Tiles
Two grouped sets: Business/Agencies and Education. Each tile links to a detail page ("Warehouse & factory shuttles", "Corporate shuttles", etc.). Use headline-xs titles and link-style CTAs; tiles follow the card spec.

### Metrics Strip
Three large counters (passenger journeys, CO2 avoided, earnings). Numbers in headline-lg, labels in body-md. Space items with 52px gaps and keep backgrounds on surface for clarity.

### FAQ Accordion
Question labels in headline-xs; answers in body-md. Each item is a card with 8px corners and 16px internal padding; chevrons align right with 20px touch targets.

### Cookie Consent Banner
Bottom-edge bar with Accept/Reject and a small "Preferences" button. Buttons use the same 41px height and pill shape; keep text color #01181a on mustard fills.

## Do's and Don'ts

- Do reserve tertiary (#f4b500) for primary CTAs and high-intent actions; keep one primary pill per view when possible.
- Do keep body copy at body-md (16.3px/1.5) and left-aligned for long reads.
- Do use 8px corners for all cards and media; use 9999px only for pills and chips.
- Don't add drop shadows—use spacing and the neutral surface for separation.
- Don't overuse the mint accent (#2bd2b2); limit it to data, tags, or minor status.
- Don't mix multiple CTA colors in a single section; the mustard primary should be visually dominant.

## Agent Prompt Guide

Quick reference
- Text: #01181a
- Background: #f2f1e8
- Border: use #01181a at low opacity or hairlines when needed
- Accent/CTA: #f4b500 primary, #2bd2b2 secondary accent, #146c5c deep accent

1) Hero with media collage
- Page background #f2f1e8. Container padding-top 120px, bottom 68px, side gutters 52px.
- H1 set in Roobertpro 36px, line-height 1.19, weight 600, letter-spacing 0.025em, color #01181a.
- Supporting paragraph in Roobertpro 16.3px/1.5.
- Primary CTA: 41px height, padding 9.75px 19.5px, radius 9999px, background #f4b500, text #01181a.
- Right column image group: main 8px radius image plus two 8px inset thumbnails; 20px gaps.

2) Benefit cards (3-up)
- Grid with 20px gutters on #f2f1e8.
- Each card: background #f2f1e8, 8px radius, 16px padding.
- Title in Roobertpro 20px/1.2; body in 16.3px/1.5.
- Optional accent chip or icon in #2bd2b2 for highlights only.

3) Metrics strip
- Horizontal stack with 52px gaps.
- Number in Roobertpro 36px/1.19, weight 600, color #01181a.
- Label in 16.3px/1.5.
- Use small badges in #146c5c or #2bd2b2 sparingly.

4) FAQ accordion
- Each item is a card: #f2f1e8, radius 8px, padding 16px.
- Question in Roobertpro 20px/1.2; answer in 16.3px/1.5.
- Chevron button: 41px hit area, no shadow; expanded item pushes content using 10–20px inner gaps.

## Similar Brands

- Via Transportation — B2B transit tech with photography-led storytelling and pragmatic layouts; RideTandem is warmer and uses mustard for CTAs instead of blues.
- FlixBus — Transportation brand with strong color anchoring and big photography; more consumer-oriented and greener than RideTandem's enterprise tone.
- Citymapper — Transit product using bold, high-contrast UI and functional type; RideTandem is softer with off-white surfaces and pill CTAs.
- Zipcar — Mobility service mixing lifestyle photography with clear action buttons; RideTandem's palette is more muted and enterprise-focused.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 25 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 25 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago