Design Principles

Mobile-first: all components designed for 360–430px first, then enhanced for desktop.
Clarity: fast scanability, obvious actions, no visual noise.
Trust: navy + slate base, clear hierarchy, stable layouts.
Conversion: amber accent reserved for primary actions only.
Consistency: one spacing scale, one radius system, one shadow system.

Responsive Breakpoints (Mobile First)

Base (default): 0–639px (mobile) — single column, thumb-friendly controls, compact cards.
sm: 640px+ — comfortable mobile/large phone spacing.
md: 768px+ — tablet layout, split forms where useful.
lg: 1024px+ — desktop two-column content + sticky side panels.
xl: 1280px+ — increased whitespace, wider reading lanes.

Color System (V2 Proposal)

Color ratio: 80% neutral foundation · 15% trust blue · 5% action accent.

This keeps the interface calm and premium while making CTAs unmistakable.

Trust Primary
#2F4FDE

Trust Deep
#1D2A6B

Background
#F7F8FC

Surface
#FFFFFF

Action Accent
#F59E0B

Success
#059669

Contrast & Accessibility Targets

Body text: minimum AA contrast (4.5:1) against all content surfaces.
CTA buttons: minimum 3:1 for large text, ideally 4.5:1.
Focus states: visible keyboard ring on all interactive elements.

Typography

H1 — Commanding headline

H2 — Section title hierarchy

H3 — Component title

Body copy should stay under ~65ch for readability. Aim for short paragraphs, high contrast, and predictable rhythm.

Small text for metadata and helper hints.

Buttons & Badges

Featured AI-ready

Psychology rule: Amber appears only where we want commitment (submit, claim, sponsor, pay).

Cards & Surfaces

Featured

Rock Solid Waivers

Digital waiver and risk management software for gyms and action sports businesses.

Sidebar Component

Use compact, high-contrast modules for supporting info and conversion prompts.

Action

Forms

Responsive Layout Preview

This preview intentionally starts as a single-column mobile stack, then promotes to desktop columns.

Primary content pane

Secondary/support pane

Page Blueprint (V2)

Home: trust statement → search/category action → social proof → CTA.
Category: quick-answer block → listings → minimal sponsored slot → add listing CTA.
Listing: about → services → benefits → trust/reviews → contact CTA.
Forms: single-task screens, visible progress cues, short helper text.

Interaction States

Hover: subtle lift + border tint only on interactive cards.
Focus: 2px ring with offset for keyboard users.
Loading: skeleton blocks for cards and table rows.
Empty/Error: clear reason + single corrective action.

Spacing Scale

4px / 8px — tiny spacing, icon/text gaps
12px / 16px — form controls, compact cards
24px / 32px — section internals
48px / 64px+ — major section spacing

Rule: increase whitespace before increasing decoration.

UI Display & Theme System