Pillar Beacon Partners
Design System v1.0

A quiet, considered visual system

Editorial typography, restrained color, and a steady sense of structure — the visual grammar of clarity and continuity beyond the point of care.

Foundations
  • Typography
  • Color
  • Components
  • Motion
  • Spacing
  • Radius
  • Shadows
  • Iconography
01 — Typography

Type system

Fraunces for editorial headlines, Inter for body. Responsive sizes via clamp().

H1
Clarity and continuity
clamp(3rem, 5vw, 5.5rem).t-h1 · Fraunces
H2
Responsibility arrives
clamp(2.5rem, 4vw, 4rem).t-h2 · Fraunces
H3
Understanding our role
clamp(2rem, 3vw, 3rem).t-h3 · Fraunces
H4
Legal context for probate
clamp(1.5rem, 2.5vw, 2.25rem).t-h4 · Fraunces
H5
Editorial subhead
clamp(1.25rem, 2vw, 1.75rem).t-h5 · Fraunces
H6
Section label
clamp(1rem, 1.5vw, 1.25rem).t-h6 · Fraunces
Body
The quick brown fox jumps over the lazy dog
clamp(1rem, 1vw, 1.125rem).t-body · Inter
Small
The quick brown fox jumps over the lazy dog
0.875rem.t-small · Inter
02 — Color

Color palette

Restrained, editorial. Navy and teal carry the brand; gold accents call attention sparingly.

Primary — Teal
Buttons, links, focus
var(--teal)
Navy
Headlines, footer
var(--navy)
Navy Deep
Heavy contrast
var(--navy-deep)
Gold Accent
Highlights
var(--gold)
Cream
Section backgrounds
var(--cream)
Sand
Surfaces
var(--sand)
Background
Page base
var(--background)
Foreground
Body text
var(--foreground)
Muted Foreground
Secondary text
var(--muted-foreground)
Border
Dividers
var(--border)
Teal Gradient · var(--gradient-teal)
Navy Gradient · var(--gradient-navy)
Warm Gradient · var(--gradient-warm)
03 — Components

Reusable surfaces

The same shadcn primitives used across the landing page.

Buttons
Form field

Focus ring: 4px teal/15. Border: teal.

Card
Card title

Soft surface with subtle border and shadow.

Testimonial

"Clarity arrived exactly when we needed it most."

— Family Member, Massachusetts
Badges
● ActiveNavyOutlineGold
CTA section
Request a Conversation

Messages reviewed carefully, responses in due course.

04 — Effects & System

Radius, shadow, motion

System tokens shared across every surface.

Border radius
sm
md
lg
xl
2xl
full
Shadows
soft
md
lg
Motion
  • Entrance: 300–900ms · cubic-bezier(.2,.7,.2,1)
  • Interaction: 200–400ms · ease-out
  • Reveal: opacity + 16–20px Y translate on scroll
  • Respects prefers-reduced-motion
Spacing
  • Mobile: 64px vertical section padding
  • Tablet: 96px
  • Desktop: 128px
  • Container: max 1240px · padding clamp(1.25rem, 4vw, 2.5rem)