Skip to main content
Back|

Really Design Components

Color Palette

The Really Global brand colors and semantic design tokens.

Brand Colors

#469BA7

Primary Teal

--primary

#1C4961

Navy

--foreground

#FFB7AD

Coral

--secondary

#E85217

Orange Accent

--accent

#10B981

Success

--success

Semantic Colors

#FFFFFF

Background

--background

#F5F5F5

Muted

--muted

#D2D5DA

Border

--border

#DC2626

Destructive

--destructive

Status Backgrounds

Info / Active

bg-[#F0F9FA] border-[#D1EEF0]

Warning / Paused

bg-[#FEF3C7] border-[#FCD34D]

Success

bg-[#D1FAE5] border-[#6EE7B7]

Error / Destructive

bg-[#FEE2E2] border-[#FECACA]

Typography

Font families, sizes, and text styles following MUI v7 spec.

Headings

Heading 1 — 34px / 400

h1 · 2.125rem · letter-spacing: 0.00735em

Heading 2 — 24px / 400

h2 · 1.5rem · letter-spacing: 0

Heading 3 — 20px / 500

h3 · 1.25rem · letter-spacing: 0.0075em

Heading 4 — 18px / 500

h4 · 1.125rem · letter-spacing: 0.0075em

Body Text

Body 1 — 16px / 400 / 1.5 line-height

text-base · Default body text

Body 2 — 14px / 400 / 1.43 line-height

text-sm · Secondary body text

Caption — 12px / 400

text-xs · Captions and labels

Font Family

Roboto — Sans Serif (Default)

font-sans · --font-sans

Roboto Mono — Monospace

font-mono · --font-mono

Layout & Spacing

Border radius, shadows, and spacing utilities.

Border Radius

rounded-sm (8px)
rounded-md (12px)
rounded-lg (16px)
rounded-xl (20px)
rounded-2xl (24px)
rounded-full

Shadows

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl

Buttons

Primary actions, secondary actions, and icon buttons.

Button Variants

Default & Variants

Hover: darker blue

Hover: darker gray

Hover: light teal bg + primary text

Hover: light gray

Hover: underline

Hover: darker red

Button Sizes

Button States

Buttons with Icons

Really Global Custom Buttons

Mobile Button Design Standard

Global pattern: buttons use pill shape and increased padding on mobile, standard corners on desktop.

Design Rules

  • 1.Mobile: Full width (w-full), pill shape (rounded-full), increased padding (py-3)
  • 2.Desktop: Auto width (sm:w-auto), standard corners (sm:rounded-lg), compact padding (sm:py-2)
  • 3.Text: Never wrap (whitespace-nowrap)
  • 4.Stacking: Multiple buttons stack vertically on mobile (flex-col)
  • 5.Titles: Use sentence case for all section titles, no icons
  • 6.Back button: Primary teal outline (border-[#469BA7]) with matching text color (text-[#469BA7])

Mobile Preview (stacked)

Mobile vs Desktop Design Practices

Global responsive design standards differentiating mobile-first layouts from desktop experiences.

Button Stacking & Layout

Mobile Design

  • • Buttons stack vertically: flex-col
  • • Back button on top, Continue on bottom
  • • Full width buttons: w-full
  • • Pill-shaped corners: rounded-full
  • • Increased vertical padding: py-3
  • • Larger tap targets for mobile

Desktop Design

  • • Buttons inline: sm:flex-row
  • • Side-by-side or spaced layout
  • • Auto width: sm:w-auto
  • • Standard corners: sm:rounded-lg
  • • Compact padding: sm:py-2
  • • Optimized for mouse/keyboard

Text Handling

Text Standards

  • ✓Never wrap text across multiple lines: whitespace-nowrap
  • ✓Use sentence case for all titles and section headings
  • ✓No icons to the left of section titles (interactive elements only)
  • ✓Button text: "Continue" (not "Confirm and continue")

Spacing & Breakpoints

Mobile

0px - 639px

Full width, stacked layout, maximum touch targets

Tablet (sm)

640px - 1023px

Transition zone, flexible layouts

Desktop (md+)

1024px+

Constrained width, horizontal layouts

Implementation Checklist

Buttons stack vertically on mobile breakpoint
Back button appears above Continue button
Buttons use full width on mobile with consistent gap
Pill-shaped buttons on mobile, standard on desktop
Text never wraps (whitespace-nowrap)
All titles use sentence case with no section icons

Form Controls

Inputs, selects, checkboxes, and other form elements.

Text Inputs

Textarea

Select

Checkbox & Radio

Checkboxes

Radio Group

Switch

Slider

Value: 50

Feedback

Alerts, toasts, progress indicators, and loading states.

Alerts

Progress

Progress60%
Complete100%

Skeleton Loading

Data Display

Cards, badges, avatars, and other display components.

Badges

DefaultSecondaryOutlineDestructiveSuccessWarningTealNavy

Avatars

MWMWMWMWJD

Cards

Card Title
Card description goes here.

This is the card content area where you can add any content.

Highlighted Card
With teal accent styling.

Used for active states and important information.

Tabs

Content for Tab 1

Accordion

Tooltip

Dialog

Dropdown Menu

Really Components

Project-specific composed components and surfaces, grouped by product area. These compose the primitives above into the actual experiences shipped on Really Global.

Marketplace & Discovery

Public-facing marketplace for finding providers.

  • Hero / Landing Header

    components/landing/header.tsx

    View

  • Marketplace Filters

    components/marketplace/

    View

  • Provider Card

    components/marketplace/

    View

Booking Flow

End-to-end booking with attestation, payment, and confirmation.

  • Book Session Sidebar

    components/booking/book-session-sidebar.tsx

    View

  • Booking Card

    components/booking/booking-card.tsx

    Sub-component

  • Booking Confirm Panel

    components/booking/booking-confirm-panel.tsx

    Sub-component

  • Booking Dialog

    components/booking/booking-dialog.tsx

    Sub-component

  • Booking Trigger

    components/booking/booking-trigger.tsx

    Sub-component

  • Location Attestation Block

    components/booking/location-attestation-block.tsx

    View

  • Mobile Book Session Sheet

    components/booking/mobile-book-session-sheet.tsx

    Sub-component

  • Mobile Floating Book Bar

    components/booking/mobile-floating-book-bar.tsx

    Sub-component

Provider Dashboard

Authenticated provider workspace and profile management.

  • Provider Header

    components/provider-dashboard/provider-header.tsx

    View

  • Provider Sidebar

    components/provider-dashboard/provider-sidebar.tsx

    View

  • Real-Time Translation Section

    components/provider-dashboard/real-time-translation-section.tsx

    View

Talk Now (RGDEV-386)

On-demand sessions: client flow, provider ring, and reliability scoring.

  • Talk Now Hub

    app/talk-now/page.tsx

    View

  • Client Flow (Paths A/B/C)

    app/talk-now/client/page.tsx

    View

  • Provider Pre-Ring + Ring

    app/talk-now/provider/incoming/page.tsx

    View

  • Reliability Score Dashboard

    app/talk-now/reliability/page.tsx

    View

  • Provider Talk Now Dashboard

    app/talk-now/dashboard/page.tsx

    View

Onboarding

Provider onboarding wizard.

  • Onboarding Steps

    components/onboarding/

    View

Internal & Reference

Process documentation and design system surfaces.

  • Content Process Deck

    app/content-process-deck/page.tsx

    View

  • Really Design Components (this page)

    app/really-design/page.tsx

    View

Icons

Commonly used Lucide icons throughout the platform.

Navigation & Actions

ArrowLeft
ArrowRight
ArrowUp
ArrowDown
ChevronDown
ChevronRight
Menu
MoreHorizontal
ExternalLink
Search
Filter
Sliders

Status & Feedback

Check
X
AlertCircle
AlertTriangle
Info
CheckCircle2
Loader2
RefreshCw

Communication & Media

Mail
Phone
Video
Mic
Volume2
Play
Pause
Globe
MapPin
Calendar
Clock

Actions & Editing

Plus
Minus
Edit3
Trash2
Copy
Download
Upload
Eye
EyeOff
Settings
User
Star
Heart