UI SYSTEM V2 · FULL SPEC

Complete visual system for Local Dir

Single source of truth for color theory, typography, spacing, animation, heroes, cards (including all sponsor variants), forms, and legal/content layouts. Mobile-first by default.

View V1 Back Home

1) Token Layer

Color Tokens

  • --v2-color-bg = #F1F5FA
  • --v2-color-surface = #FFFFFF
  • --v2-color-primary = #2F4FDE
  • --v2-color-primary-deep = #1D2A6B
  • --v2-color-accent = #F59E0B
  • --v2-color-text = #0F172A

Spacing Tokens

  • --v2-space-1: 4px
  • --v2-space-2: 8px
  • --v2-space-3: 12px
  • --v2-space-4: 16px
  • --v2-space-6: 24px
  • --v2-space-8: 32px

2) Color Psychology + Contrast

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

Primary#2F4FDE
Primary Deep#1D2A6B
Background#F1F5FA
Surface#FFFFFF
Accent#F59E0B
Success#059669
  • Body and labels: AA contrast minimum 4.5:1
  • Focus rings required on all interactive controls
  • Amber reserved for high-intent actions (claim/pay/sponsor)

3) Typography Hierarchy

H1 · page intent

H2 · section frame

H3 · module title

Body copy should stay around 60–70 characters per line. Keep paragraphs short and separated by clear whitespace.

Meta helper text for labels and support copy.
  • Fraunces: high-impact headings only
  • Inter: all UI, forms, tables, legal copy

4) Motion System

Card hover: +2px lift, subtle border tint
Focus: visible ring + offset
Page reveal: 180–260ms
Respect reduced-motion preferences

5) Hero System Variants

Hero A · Gradient + particles

Use for high-level pages (hub, campaign pages).

Hero B · Photo + trust strip

Use for location/home pages where local context matters.

Hero C · Compact info hero

Use for legal, admin, and utility pages.

6) Card System (Standard / Featured / Sponsored variants)

Standard Listing Card

Business Name

Default card for regular listings.

Featured Listing Card

Featured Business

Premium elevation and badge.

Featured

7) Form System (all forms: submit, claim, sponsor, contact, edit, affiliate)

Used for secure access links and updates.
  • Field height min 44px on touch devices
  • Labels always visible (no placeholder-only labels)
  • Error style: border + text + fix instruction
  • Success state: concise confirmation + next step

8) Legal/Content Page Pattern (Privacy/Terms)

Privacy Policy

Last updated: 28 February 2026

1. Introduction

Longform legal pages should use reduced width, increased line-height, and clear heading spacing for scanability.

2. Data Collection

Use consistent section rhythm and optional sticky in-page TOC on desktop.

9) Responsive Rules

  • 0–639px: single column, stacked cards, concise copy.
  • 640–1023px: wider spacing, selective 2-column components.
  • 1024px+: two-column layouts, sticky side modules.