Trueside Design System

The colors, type, and components behind the Trueside site. Use the toggle in the nav to preview every token in light and dark.

Color

Palette & tokens

Swatches read live from CSS variables, so they reflect the active theme.

Canvas--cream
Panel--cream-panel
Surface--white
Accent--lime
Accent soft--lime-soft
Ink--ink
Ink card--ink-card
Brown--brown
Text--text
Muted--muted
Prose--prose
Hairline--line
Typography

Hanken Grotesk, set with intent

Display800 · -3% tracking
Discover life on the True Side
Section title.htitle · 800
Find your place, side by side
Heading 3800
Join a Life Group
Lead.lead · 20px

A place where faith feels real, friendships run deep, and lives are transformed.

Body17px · 1.55

We don't just show up — we show up fully. Honest questions are welcome, friendships outlast Sundays, and faith turns into a way of living.

Eyebrowcaps · .18em
Who we are
Actions

Buttons & links

Primary Ink Ghost Text link →
Eyebrow pill Category tag Topic chip 24
Components

Cards

Connect

Dark card

Ink surface with a lime arrow. Used for primary "next step" invitations.

Find a group
Gather

Lime card

The brand accent as a full surface, with ink text and arrow.

Plan a visit

Tile

Bordered surface used for values, grids, and supporting content.

Ink tile

The dark variant for emphasis within a tile grid.

Inputs

Form elements

Patterns

Accordion & data

Accordion item
Built on native <details>/<summary> with a custom plus/minus marker — keyboard accessible by default.
Second item
Only one concern per item; answers stay short and scannable.
Allocation bar60%

Used on the Give page to show how giving is distributed.