Design Language

Open, minimal, and unapologetically spacious. Built for the Four12 global community.

01 / Foundations

Typography

Quicksand sets the tone — friendly, modern, legible. Hierarchy flows through size and tracking, not weight.

Title SM 16px

Small titles for sidebars and metadata

Title MD 26px

Medium titles for articles and general content

Title LG 32px

Large titles for heroes and featured content

Title XL 40px

Extra large titles for special displays

Body Hero 18px

Our mission is to plant, strengthen and see healthy, New Testament churches established around the world.

Body MD 16px

Our mission is to plant, strengthen and see healthy, New Testament churches established around the world. We believe in the power of the gospel to transform lives and communities.

Body Small 14px

Published Jan 23, 2026 • 5 min read

02 / Foundations

Color Palette

Neutral-first. Gray for structure, red for rare editorial moments. Let the content breathe — not the color.

Accent Colors

Accent Gray #757575
Editorial Red #A6201A

Neutral & Surfaces

Heading #333333
Text #2D2D2D
Muted #757575
Background #FFFFFF
Border RGBA (12%)
03 / Layout

Spacing & Radius

A 4px baseline drives every gap and margin. Generous whitespace is the design, not the leftover.

S-2 8px
S-4 16px
S-6 24px
S-8 32px
S-12 48px
S-16 64px
Radius 1 8px
Radius 2 12px
Radius 3 16px
04 / Interaction

Action Elements

Clean, intentional actions. Smooth transitions, minimal noise.

Primary
Secondary
States
Text / Soft
05 / Interaction

Chips & Filters

Compact, tonal selection elements. Gray leads, red accents sparingly.

view patterns →
Preferred Styling: Uppercase & Tonal
Announcement Interactive Rare Touch
Interactive Filters (Gray-First)
Gray-Themed Sub-Navigation
Filter by date
06 / Interaction

Inputs & Selection

Subtle borders, generous focus states. Tactile and unhurried.

Search Input — Icon Only

Clean search with animated icon. Icon changes color on hover (gray accent) and focus (editorial red) with subtle scale effect.

Search Input — With Submit Button

Search with minimalist icon submit button. Button appears on right, integrated seamlessly into the input field.

Input Fields with Labels
07 / Navigation

Menus & Wayfinding

Effortless wayfinding. Editorial accents mark where you are, space guides where to go.

view patterns →
Vertical Side Nav (Subtle Fill)
Horizontal Tab Nav (Editorial Line)
08 / Containers

Card Variations

Content containers that feel open, not boxed in. Let the layout flow.

view patterns →
Standard Card

Interactive Focus

Clean surface, subtle shadow. Content leads, the container stays quiet.

Open Layout

Clean & Minimal

No background, no shadow. Just a divider and open space.

Featured Story Variant

Join us for a powerful gathering of leaders from across the globe. Tickets are now officially open.

Book Your Spot
09 / Motion

Entrance Animations

Subtle, staggered entrances that bring content to life without demanding attention. Scroll down to see each variant.

f12-fade-in — Opacity Only

Clean entrance with staggered delays. Use --fade-delay to control timing per item.

0.1s --fade-delay
0.2s --fade-delay
0.3s --fade-delay
0.4s --fade-delay
f12-fade-up — Opacity + Slide

A gentle 12px upward slide paired with the fade. Ideal for content blocks, hero text, and section intros.

Upcoming Gatherings

Advancing Together

From regional training times to global conferences. Join us as we equip the saints across the nations.

Explore Events
Custom Properties
--fade-delay Default: 0s — Stagger timing per item
--fade-duration Default: 1.2s — Animation length
--fade-opacity Default: 1 — Final resting opacity