Design System

The components and design language behind Driverize.

Brand Overview

The foundation of the Driverize identity

Driverize is an online appointment booking platform. We serve everyone from solo professionals to multi-location businesses, handling one-on-one appointments, group sessions, and mobile services in one place.

Tagline

Drive yourself.

Mission

Build the best online appointment booking experience — for businesses and their customers.

Values

Simplicity — easy to set up, easy to use, no learning curve
Reliability — bookings just work, every time
Empowerment — built for people betting on themselves
Clarity — no jargon, no clutter, no confusion

Colors

Core color tokens used across the product

Core

Primary

--primary

Secondary

--secondary

Accent

--accent

Destructive

--destructive

Surfaces

Background

--background

Card

--card

Muted

--muted

Popover

--popover

Text

Foreground

--foreground

Muted Foreground

--muted-foreground

Primary FG

--primary-foreground

Destructive FG

On destructive

All colors adapt automatically between light and dark mode. Toggle the theme to preview.

Typography

Type scale, weights, and usage guidelines

Type Scale

Heading 1

text-4xl · font-bold · Page titles

Heading 2

text-3xl · font-bold · Section titles

Heading 3

text-xl · font-semibold · Subsections

Heading 4

text-lg · font-semibold · Card titles

Body

text-base · Default body text

Small / Muted

text-sm · text-muted-foreground · Descriptions, helper text

Label

text-xs · uppercase · tracking-wider · Category labels

Font Stack

Primary: Inter — a clean, geometric sans-serif inspired by San Francisco (macOS). Consistent across all platforms.

Handwriting: Brush Script MT, Comic Sans MS, cursive

We use Inter for a consistent look across all devices. Falls back to system sans-serif. The handwriting font is used sparingly for the tagline.

Logo & Iconography

Logo usage, sizes, and display rules

Primary Logo

The logo is white by default. Use invert on light backgrounds and dark:invert-0 for automatic theme switching.

Nav Icon

32×32 · Used in navbar and favicon contexts

Usage Guidelines

Always maintain clear space around the logo
Do not stretch, rotate, or recolor the logo
Minimum display size: 32px height for nav, 96px for hero/feature use
Use logo.webp for full logo, nav_logo.webp for icon

Voice & Tone

How Driverize speaks to the world

Our Voice

Clear, confident, and approachable. We talk like a knowledgeable friend, not a corporation. No jargon, no buzzwords, no filler.

Tone Principles

Be direct — say what you mean in as few words as possible
Be human — contractions, casual phrasing, and warmth are welcome
Be encouraging — our users are building something real, cheer them on
Be honest — if something isn't ready, say so. No empty promises.

Do's and Don'ts

"Your booking page is live."
"Something went wrong. Try again?"
"Add your first service to get started."

Don't

"Your booking page has been successfully deployed."
"An unexpected error has occurred. Please contact support."
"No services found in the system."

Section Header

Centered title + description for page sections

Example Section

This is a reusable section header with centered text.

Button

Standard button variants and sizes

Variants

Sizes

States

Input & Label

Form input components

Disabled

Async Button

Button with loading state for async operations

Form Error

Inline field validation error

Please enter a valid email address.

Spinner

Loading spinner in three sizes

Skeleton

Content placeholder during loading

Toast Notifications

Color-coded by message level (via svelte-sonner)

Empty State

Placeholder when no data is available

No services yet

Add your first service to get started.

Error Boundary

Catches and displays unexpected component errors

Content wrapped in an error boundary. If this component throws, a friendly error card appears instead.

Card

Container with header, content, title, and description slots

Basic Card

With title and description

Card content goes here.

Another Card

Cards are composable

Mix and match sub-components.

Feature Card

Image + title + description card

One-on-One

Example feature card with image, title, and description.

Group Sessions

Another feature card showing a different image and content.

Pricing Card

Pricing tier with features, CTA, and optional highlight

Starter

Perfect for getting started

Free

1 team member
1 location
Unlimited bookings

Start Free

Best Value

Team

For teams managing appointments

$74 /mo billed annually

Everything in Pro, plus:

Up to 25 team members
Team management
Analytics

Get Started