Basic

Foundational elements: typography and color palette.

Typography

Display Font (Seriously Nostalgic)

Use two classes: font-display + size class

font-display text-h1
96px•400•LH 1.1

Welcome to Tenpo

font-display text-h2
60px•400•LH 1.1

Build Amazing Experiences

Primary Font (Host Grotesk)

Use single class for each style

Headings

text-h1
96px•400•LH 1.1

Large Heading

text-h2
60px•400•LH 1.1

Medium Heading

text-h3
48px•400•LH 1.2

Section Heading

text-h4
34px•400•LH 1.2

Subsection Heading

text-h5
24px•400•LH 1.3

Small Heading

text-h6
20px•500•LH 1.6•LS 0.15px

Smallest Heading

Subtitles

text-subtitle1
16px•400•LH 1.5

Section label or description

text-subtitle2
14px•400•LH 1.5

Smaller section label

Body

text-body1
16px•400•LH 1.5

Regular body text for paragraphs and content. This is the default text style for longer reading.

text-body2
14px•400•LH 1.43•LS 0.17px

Secondary body text for smaller content areas and supporting information.

Small Text

text-caption
12px•400•LH 1.66•LS 0.4px

Helper text, labels, and metadata

text-overline
12px•400•LH 1.0•LS 3px

Section label (uppercase)

Colors

Core — Page structure

Base colors for layouts and surfaces

background

foreground

card

muted

Actions — Buttons & interactive

Primary for main CTA, Secondary/Tertiary for supporting actions

primary

secondary

tertiary

destructive

Accents — Highlights & emphasis

Bold colors for emphasis, tags, badges, or decorative elements

accent

accent-2

Status — Feedback & alerts

Icons use main color, backgrounds use muted variant

success

success-muted

warning

warning-muted

error

error-muted

info

info-muted

Brand Aliases — Raw palette

Direct brand colors (prefer semantic tokens above)

pitch-green

obsidian

chalk

sand

wet-sand

steel

mist

vapor

cloud

day

midnight

carbon

Styling

Border radius, spacing, and visual treatment conventions.

Border Radius

sm (12px)

md (24px)

lg (32px)

xl (36px)

full

Spacing Scale

p-2 (8px)

p-4 (16px)

p-6 (24px)

p-8 (32px)

p-10 (40px)

p-12 (48px)

p-14 (56px)

p-16 (64px)

Separator

Visual dividers • Horizontal (default) and vertical orientations

Horizontal (default)

Content above

Content below

Vertical

Item 1
Item 2
Item 3

Actions

Interactive elements for user actions.

Buttons

Hover: 90% opacity • Focus: orange ring • Pill shape

All variants

All sizes (sm, default, lg)

Icon sizes (icon-sm, icon, icon-lg)

With icons

Disabled states

Full width

Badges

DefaultSecondaryDestructiveOutline
SuccessWarningErrorInfo

Forms

Input components for data entry and form handling.

Form Elements

Text Inputs

Specialized Inputs

Select / Dropdown

Checkboxes

Radio Buttons

Switches

Slider

Range inputs • Horizontal and vertical orientations • Single and range values

Horizontal (default)

$0$500

Vertical orientation

Single

Range

Disabled

Calendar

Date picker • Selected date uses primary (Pitch Green) • Hover uses secondary (Day cream) • Today highlighted

Click a date to select

March 2026

Date & Time Pickers

Specialized date and time selection components

Date Range Picker

No range selected

Time Picker

No time selected

Time Range Picker

→

No time range selected

Form with Validation

React Hook Form + Zod validation • Try submitting empty

The name that will appear on their camp badge.

We'll send confirmation and updates here.

You agree to our Terms of Service and Privacy Policy.

Data Display

Components for presenting information and content.

Cards

Basic card variants

Soccer Skills Camp
Build fundamental soccer techniques in a fun environment.

Ages: 8-10 years

Price: $299

Basketball Basics
Master dribbling, shooting, and teamwork skills.

Hover to see interactive effect

Tennis Fundamentals
Learn proper form and game strategy.

Ages: 10-14 years

Price: $449

Rounded variants (sm, md, lg, xl)

rounded="sm"

rounded="md"

rounded="lg"

rounded="xl"

Padding variants (none, sm, md, lg)

padding="none"

padding="sm"

padding="md"

padding="lg"

Table

CampAge GroupDurationPrice
Soccer Skills8-10 years1 week$299
Basketball Basics11-13 years2 weeks$549
Multi-Sport5-7 years3 days$149

Tabs

Welcome to the camp overview. Here you'll find all the essential information about what makes our programs special.

Accordion

Collapsible content sections • Great for FAQs

Avatars

All sizes: sm, md, lg, xl • With image and fallback

Size variants with image

JD

sm

JD

md

JD

lg

JD

xl

Fallback variants (no image)

JD

sm

JD

md

AB

lg

CD

xl

Progress

Visual progress indicators • Uses primary color

Profile completion25%
Registration steps60%
Camp capacity90%

Skeleton

Loading placeholders

Feedback

Components for user notifications and status messages.

Alerts

Icon left • Title + Description (80% opacity) • No visible border

Toast

Non-blocking notifications • Click buttons to trigger

Overlays

Modal dialogs, sheets, and popup components.

Dialogs

Cancel + Continue button patterns • Click to open

Alert Dialog

Confirmation dialogs for destructive actions

Sheet

Slide-out panels • Sides: top, right, bottom, left • Sizes: sm, md, lg, xl, 2xl, 3xl, full

Side variants

Size variants (right/left sides)

Full example with form

Tooltip

Side positions: top (default), right, bottom, left

Popover

Side positions and alignment options

Side positions

Alignment options

With content