Offline Brand Style Guide

Typography

Offline uses three primary font families: Satoshi for UI and body text, Cabinet Grotesk for large display text, and DM Mono for numerical data.

Display Styles (Cabinet Grotesk)

Display Large 36px / 800 / 100% LH

Hero headlines for landing pages

<h1 class="display-large">Hero headlines</h1>

Display Medium 32px / 800 / 100% LH

Section hero text

<h2 class="display-medium">Section hero text</h2>

Display Small 29px / 800 / 100% LH

Smaller hero text, feature callouts

<h3 class="display-small">Feature callouts</h3>

Headline Styles (Satoshi)

Headline Large 26px / 700 / 32px LH

$30 to spend at Restaurant Name

<h1 class="headline-large">Main page titles</h1>

Headline Medium 23px / 700 / 28px LH

Secondary section headers

<h2 class="headline-medium">Section headers</h2>

Headline Small 20px / 700 / 24px LH

Restaurant Info, How can I use this?

<h3 class="headline-small">Subsection headers</h3>

Title Styles (Satoshi)

Title Large 18px / 700 / 22px LH

Card titles, emphasized list items

<h4 class="title-large">Card titles</h4>

Title Medium 16px / 700 / 20px LH

FAQ questions, small card headers

<h5 class="title-medium">Small headers</h5>

Title Small 14px / 700 / 18px LH

Small UI headers, emphasized labels

<h6 class="title-small">Labels</h6>

Body Styles (Satoshi)

Body Large 16px / 500 / 24px LH

Primary paragraph text and main content. This is the most common body text size used throughout the application for readable content.

<p class="body-large">Primary text</p>

Body Medium 14px / 500 / 20px LH

Secondary text, descriptions, and help text. Used for supporting information and details.

<p class="body-medium">Secondary text</p>

Body Small 12px / 500 / 16px LH

Fine print, captions, and small descriptive text.

<p class="body-small">Fine print</p>

Body X-Small 10px / 500 / 14px LH

Micro copy and legal text

<p class="body-x-small">Micro copy</p>

Label Styles (Satoshi)

Label Large 14px / 700 / 18px LH

BUTTON TEXT, PRIMARY LABELS

<label class="label-large">Label</label>

Label Medium 12px / 700 / 16px LH

FORM LABELS, SMALL BUTTONS

<label class="label-medium">Label</label>

Label Small 10px / 700 / 14px LH

TINY LABELS, BADGES

<label class="label-small">Label</label>

Monospace (DM Mono)

Statistics & Numbers DM Mono / 600 weight

                    1,234,567
                

Color System

Primary Yellow

The signature Offline brand color for CTAs, accents, and Premium borders.

Yellow 25

#FFF2D8

--colors-yellow-25

Yellow 50

#FFE9BD

--colors-yellow-50

Yellow 100

#FFD386

--colors-yellow-100

Yellow 200

#FFBD54

--colors-yellow-200

Yellow 300

#F0A52C

--colors-yellow-300

Yellow 400 ⭐

#DE8E0F

--colors-yellow-400

Secondary Blue

Used for links, secondary actions, and landing page CTAs.

Blue 25

#D8E7FF

--colors-blue-25

Blue 50

#BED6FF

--colors-blue-50

Blue 100

#85AFFF

--colors-blue-100

Blue 400 ⭐

#004FFF

--colors-blue-400

Neutral Grays

Foundation for text, borders, and backgrounds.

Gray 25

#F2F2F2

--colors-gray-25

Gray 100

#DFDFDF

--colors-gray-100

Gray 500

#7C7C7C

--colors-gray-500

Gray 900 ⭐

#191919

--colors-gray-900

Semantic Colors

Error Red

#D31A0C

--colors-red-400

Success Green

#099250

--semantic-success500

Info Teal

#2594AB

--colors-teal-500

Layout & Responsive Patterns

Consistent layout patterns for content centering and responsive design.

Container Structure

All public-facing pages use a consistent container pattern with max-width 1280px.

max-w-7xl mx-auto w-full
Content centered at 1280px max width

<div class="flex relative flex-col md:flex-row max-w-7xl mx-auto w-full min-h-screen">
  {/* Content */}
</div>

Two-Column Layout Pattern

Primary layout pattern for OfferShare and EventShare pages.

Left Column (w-full md:w-1/2)

Sticky on desktop
Images, media content
md:pr-12 (right padding)

Right Column (w-full md:w-1/2)

Scrollable content
Text, details, descriptions
md:pl-12 (left padding)

<div class="flex relative flex-col md:flex-row max-w-7xl mx-auto w-full">
  <!-- Left Column - Images -->
  <div class="w-full md:w-1/2 md:pr-12">
    <div class="md:pt-9 md:sticky md:top-0">...</div>
  </div>
  <!-- Right Column - Content -->
  <div class="w-full md:w-1/2 px-4 md:pl-12">
    <div class="pt-4 md:pt-9">...</div>
  </div>
</div>

Spacing System

Consistent Tailwind spacing scale.

gap-2, gap-3, gap-4

8px, 12px, 16px

Small gaps

gap-6, gap-8

24px, 32px

Medium gaps

gap-12, gap-16

48px, 64px

Large gaps

py-4, py-6, py-8

16px, 24px, 32px

Section padding

Component Patterns

Reusable UI components with consistent styling and behavior.

Buttons

Three color variants for different contexts and emphasis levels.

Black Button (Primary)

Hover: Gray-700
Active: Pure black

White Button (Secondary)

Hover: Gray-25
Active: Gray-200

Gray Button (Tertiary)

Hover: Gray-100
Active: Gray-200

<Button color="black">Download the app</Button>
<Button color="white">Learn More</Button>
<Button color="gray">Cancel</Button>

Form Inputs

Standard input styling with multiple states.

Default State

Border: Gray-100

Focus State

Border: Gray-900 (2px)

Error State

Border: Red-400

Success State

Border: Success-500

<div class="input-wrapper">
  <label class="input-label">Label Text</label>
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Enter text" />
  </div>
</div>

Premium Styling

Premium partners receive special visual treatment with black backgrounds and gold accents.

PREMIUM

<div class="premium-label">
  <span class="premium-text">PREMIUM</span>
</div>

When to Use

Restaurant partners classified as "Premium"
Offers valued at $25 or more
Exclusive or high-value experiences
Special event packages

Shadows & Elevation

Three-tier shadow system for different UI elevations.

Card Shadow

Standard cards & panels

var(--card-shadow)

New Shadow

Elevated modals

var(--new-shadow)

Tag Shadow

Badges & tags

var(--tag-shadow)