The Hebronh Brand, From the Ground Up

Semantic Tokens

Every surface and text color resolves to a live variable, so the same markup re-themes for light, dark, and each palette. Never hardcode a hex — reach for these.

Terracotta Ramp

The fixed clay scale the brand is built from. The brand color is clay-600.

Accent Palette

Warm, kid-friendly accents for categories and tags — each with a softer companion.

Three Voices

Syne for display, Inter for body, JetBrains Mono for labels and data. The fluid display scale is capped so headings never outgrow their column.

A 0.25rem Rhythm

All padding and gaps step off a 4px base. Stick to the scale so vertical rhythm stays even across the site.

Straight Edges, On Purpose

The brand uses 0px radius everywhere — cards, buttons, inputs, modals. The square geometry is the look; don’t round corners locally.

Layered Shadows

Three soft drop-shadows separate floating chrome, popovers, and modals from the page. Used sparingly — depth, not decoration.

One Signature Ease

Transitions share a single spring-like curve and short durations. Everything respects “reduce motion” — animations collapse to instant when the OS asks.

Phosphor Icons

A single icon set (Phosphor, via iconify-icon) keeps weight and corner radius consistent. Size icons relative to adjacent text — never emoji.

Action Hierarchy

Primary for the one main action, outline for secondary, ghost for low-emphasis. They lift on hover and show a 2px focus ring.

Inputs & Validation

All controls share one height and the brand focus ring. Errors get a rose border plus a message line that reserves its own space (no layout jump).

Content Containers

The square card is the workhorse surface — a thin rule, a subtle hover, and an optional image cap. Used for team, sermons, events, and more.

Filters & Labels

Tab pills drive the listing filters; the eyebrow and live pill carry small bits of status and section labeling.