THE WORD FOR ALL THE WORLD THE WORD FOR ALL THE WORLD Components · v7.1
Home Brand Guide Messaging Documents Letterhead Signatures Assets
The Component Library

Every part, drawn by the published stylesheet.

Not a picture of the components. The components, rendered by the same file anyone else links, so this page cannot show something the stylesheet does not do.

Switch the ground with the button above. Everything here works on Parchment and on Midnight, because the accent and the three state colours change with the ground: Ember is 3.3:1 on Midnight and fails, so a text accent on a dark ground is Flame.

40 components · brand system v7.1 · messaging v1.0 · generated 2026-08-20 · components.json

Primary button

button-primary · .btn

The main call to action. One per view.

Partner With Us

Specification

background
#C13A24
color
#FFFFFF
hover
#A62F1B
font
DM Sans 700, 14.5px, letter-spacing .04em
padding
14px 28px
radius
3px
contrast
5.4:1, passes WCAG AA

Rules

  • Never Flame fill. Flame on a button is 3.3:1 and fails AA.
  • The label is sentence case or title case, never all caps, never a command shouted.
  • The focus ring is 2px Ember, 3px offset, and Flame when the button sits on Midnight.
Markup 
<a class="btn" href="/partner">Partner With Us</a>

Ghost button

button-ghost · .btn ghost

The secondary action beside a primary button, on Midnight or over footage.

See What's Happening

Specification

background
transparent
color
#F7F3EC
border
1.5px solid rgba(247,243,236,.5)
hover
rgba(247,243,236,.1) fill
radius
3px

Rules

  • Only on dark grounds. On Parchment, the secondary action is a text link in Ember.
  • Never two ghost buttons in a row. One primary, one ghost, then stop.
Markup 
<a class="btn ghost" href="/happening">See What's Happening</a>

Quiet button

button-quiet · .btn quiet

A tertiary action beside a primary and a ghost. Toolbar and menu actions.

Specification

background
transparent
color
the themed accent
padding
8px 12px

Rules

  • Never the only action on a view. It is the third choice, not the first.
  • Sits below 44px because it is not a primary target. Do not use it on a touch-first surface.
Markup 
<button class="btn quiet">Copy link</button>

Eyebrow / kicker

eyebrow · .eyebrow

Opens a section or a record. Names what the reader is about to read.

03 — Color System

Specification

font
DM Sans 600, 12px
letterSpacing
.18em
transform
uppercase
color
#C13A24 on light grounds, #F85842 on Midnight

Rules

  • Every record opens with one. Law II.
  • All caps belongs here, to labels, and to the wordmark. Never to the serif.
Markup 
<span class="eyebrow">03 — Color System</span>

Serif headline

headline-serif · .headline

Section and page headlines where the institution speaks.

No one told them it is already here.

Specification

font
DM Serif Display Regular, clamp(34px, 4.8vw, 52px)
lineHeight
1.08
case
sentence case
emphasis
at most one italic word

Rules

  • No bold cut exists. For more weight, go bigger.
  • Never all caps.
  • Below 36px, use DM Serif Text. Below 22px, use DM Sans.
Markup 
<h2>No one told them it is <em>already here.</em></h2>

Body copy

body · .prose

Every extended reading passage.

The local church is the plan. Not a strategy for it, the plan itself.

Every tribe. Every tongue. Every nation.

Specification

font
DM Sans 400, 17px
lineHeight
1.7
color
#0B1A2D on light grounds, #F7F3EC on Midnight
measure
max-width 660px
muted
80% Midnight (light grounds) · 75% Parchment (dark)

Rules

  • Always DM Sans. The serif never carries extended reading.
  • Never Flame body text on a light ground.
  • Short sentences, one idea each.
Markup 
<div class="prose">
  <p>The local church is the plan. Not a strategy for it, the plan itself.</p>
  <p class="muted">Every tribe. Every tongue. Every nation.</p>
</div>

Photo caption

photo-caption · .caption

Every published photograph. A photo without its record does not publish.

The Word opened — attendees follow the teaching with Bibles and notes.
SLC Conference · [City], Uganda · 30 Jul 2026

Specification

font
DM Sans, 13px
color
80% Midnight (light grounds) · 75% Parchment (dark)
structure
what happened, then event · place · date

Rules

  • Names where known and permitted.
  • Bracketed fields mark anything not yet verified against the ministry record.
  • Written at capture, never from memory.
Markup 
<p class="caption">The Word opened — attendees follow the teaching with Bibles and notes.<br><small>SLC Conference · [City], Uganda · 30 Jul 2026</small></p>

Pull quote

blockquote · .quote

A quotation lifted out of the flow, in the serif.

The local church is not a strategy for the plan. It is the plan.Nathan Zimmer

Specification

font
DM Serif Text italic, body text-title
rule
2px left, in the themed accent
measure
44 characters
attribution
required

Rules

  • Attributed, always. An unattributed quotation is gate G8.
  • Never set over a photograph. That is the record document's job, on the scrim.
Markup 
<blockquote class="quote">The local church is not a strategy for the plan. It is the plan.<cite>Nathan Zimmer</cite></blockquote>

Code

code-block · .code

A token name, a file path, or a snippet somebody will copy.

Link /assets/brand.css and the brand is in place.

<link rel="stylesheet" href="/assets/brand.css">

Specification

font
SF Mono, Consolas, monospace at .88em
background
the sunken surface
scroll
its own container

Rules

  • A wide block scrolls inside its own frame. The page body never scrolls sideways.
Markup 
<p>Link <code class="code">/assets/brand.css</code> and the brand is in place.</p>
<pre class="code"><code>&lt;link rel="stylesheet" href="/assets/brand.css"&gt;</code></pre>

Card

card · .card

A repeated unit in a grid: a guide, an initiative, a document.

01

Brand Guide

Identity, voice, colour, typography, and the laws of the brand.

Specification

background
#FFFFFF
border
1px solid rgba(11,26,45,.18)
radius
4px
padding
30px 28px
hoverBorder
#C13A24
hoverShadow
0 10px 30px rgba(11,26,45,.1)

Rules

  • Cards sit on Parchment, never on Midnight, unless the whole band is dark and the card inverts.
  • Card text is Midnight. Watch for light-on-light inherited from a dark parent.
Markup 
<a class="card" href="/brand/">
  <span class="eyebrow">01</span>
  <h3 class="title">Brand Guide</h3>
  <p class="muted">Identity, voice, colour, typography, and the laws of the brand.</p>
</a>

Separator

separator · .separator

A hairline between sections of a page or a menu.

Specification

rule
1px the hairline
spacing
32px above and below

Rules

  • The hairline is the only divider in this system. No thick rules, no double rules, no ornaments.
Markup 
<hr class="separator">

Panel

panel · .panel

A raised container for a group of controls or a summary.

Summary

Four figures, all matched to the July record.

Specification

background
the raised surface
radius
6px
elevation
0 2px 6px rgba(11,26,45,.06)

Rules

  • A panel lifts; a card sits. Use a card in a grid and a panel for something picked up out of the page.
Markup 
<div class="panel">
  <span class="eyebrow">Summary</span>
  <p class="muted">Four figures, all matched to the July record.</p>
</div>

Record document

record-document · .record

The canonical treatment for the prophecy, vision statements, official impact summaries, field reports, and initiative documents. Law II and Law IV in their purest form.

The Word · A Prophecy
…
Received December 2019

Specification

ground
#F7F3EC
rules
hairline, 1px rgba(11,26,45,.18)
kicker
letterspaced DM Sans 600 uppercase
quote
DM Serif Text italic, 22 to 34px
dateline
what, where, when
signature
scanned ink

Rules

  • Never decorated. No color blocks, no illustration, no icons.
  • Closes with a dateline and, where authority is claimed, real signatures.
  • A script font standing in for ink is a violation.
Markup 
<div class="record"><span class="qk">The Word · A Prophecy</span><div class="verse">…</div><div class="dateline">Received December 2019</div></div>

Testimony

testimony · .testimony

The record of what God did. Four slots, always in order.

Before I had been in the city three years and knew no one.

Encounter At the tent on the second night, someone prayed with me.

Transformation I stopped drinking. My brother noticed first.

Outcome I lead a small group now. Come and see for yourself.

[Name] · [City] · Shared with permission

Specification

slots
Before: life as it was, in the person's own words · Encounter: the moment Jesus intervened, where and when · Transformation: what changed, specific, verifiable, honest · Outcome: life now, and the invitation to respond
attribution
Name · City · Shared with permission

Rules

  • Real, consented, and named. Never fabricated, never composited, never anonymous.
  • Closes with an invitation to respond.
Markup 
<div class="testimony">
  <p><b>Before</b> I had been in the city three years and knew no one.</p>
  <p><b>Encounter</b> At the tent on the second night, someone prayed with me.</p>
  <p><b>Transformation</b> I stopped drinking. My brother noticed first.</p>
  <p><b>Outcome</b> I lead a small group now. Come and see for yourself.</p>
  <p class="caption">[Name] · [City] · Shared with permission</p>
</div>

Official-record figure

stat-figure · .stat

Impact reports and per-conference reports.

1,057
Salvations

Specification

numeral
DM Serif Display, #F85842, on #0B1A2D
label
DM Sans 600 uppercase, letterspaced, #F7F3EC

Rules

  • This is Flame's job: display numerals and small uppercase labels on Midnight.
  • Numbers come from the official ministry record only, never estimates, never memory.
  • The figure carries a source line naming the record and its period.
Markup 
<div class="stat"><div class="fig">1,057</div><div class="lab">Salvations</div></div>

Sub-brand endorsement

endorsement-line · .endorse

Wherever an initiative's name appears.

A ministry of THE WORD FOR ALL THE WORLD

Specification

text
A ministry of THE WORD FOR ALL THE WORLD
font
DM Sans 600, small, letterspaced
placement
directly beneath the initiative name or in the same lockup

Rules

  • Required on every initiative surface. Law III.
  • One recorded exception: the future EVERY1 app, on the YouVersion model.
  • Vanity domains redirect into the initiative's page. They never become separate homes.
Markup 
<div class="endorse">A ministry of THE WORD FOR ALL THE WORLD</div>

Full-bleed video hero

hero-video · .footage

Page and priority-panel heroes.

Specification

video
muted, looping, playsinline, 6 to 15 seconds of real field footage
poster
required still frame
scrim
Midnight gradient, ~70% at text
textColor
#FFFFFF or #F7F3EC

Rules

  • Never text over footage without the scrim.
  • Never Flame or Ember text over footage.
  • The still fallback is honored under prefers-reduced-motion and on slow connections.
  • Nothing stock. Documentary footage from our own conferences, crusades, and streets.
Markup 
<video autoplay muted loop playsinline poster="/assets/images/crowd-evening-poster.jpg"><source src="/assets/videos/crowd-evening.mp4" type="video/mp4"></video><div class="scrim"></div>

Video lower third

lower-third · .lower-third

Naming a speaker on screen.

Nathan Zimmer
Founder, THE WORD FOR ALL THE WORLD

Specification

font
DM Sans, letterspaced caps
ground
the Midnight scrim bar
accent
optional Flame tick
content
name, then role

Rules

  • Nothing animated, nothing bouncing.
  • Sits on the scrim, never straight on the footage.
Markup 
<div class="lower-third">
  <div class="name">Nathan Zimmer</div>
  <div class="role">Founder, THE WORD FOR ALL THE WORLD</div>
</div>

Portal navigation and footer

site-chrome · .sitenav

Shared chrome on every page of the brand portal.

Specification

nav
wordmark left, uppercase DM Sans 600 links right, over the hero, .active on the current page
footer
#0B1A2D ground, wordmark · tagline · domain
tagline
Every tribe. Every tongue. Every nation. EVERY1.

Rules

  • A new page copies the chrome from an existing page and adds its own link to every other page.
  • The nav sits over a full-bleed video hero with the scrim in place.
Markup 
<nav class="sitenav">
  <a class="logo" href="/"><img src="/assets/logos/the-word/the-word-horizontal-reversed.svg" alt="THE WORD FOR ALL THE WORLD"></a>
  <div class="links"><a href="/brand/">Brand Guide</a><a href="/assets/">Assets</a></div>
</nav>

Tabs

tabs · .tabs

Switching between views of the same thing.

Specification

indicator
2px bottom rule in the themed accent
rest
muted text
active
body text

Rules

  • Tabs switch views of one thing. They never navigate to a different page.
  • Between two and five. A sixth is a menu.
Markup 
<div class="tabs" role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
  <button role="tab" aria-selected="false">Colour</button>
  <button role="tab" aria-selected="false">Type</button>
</div>

Pagination

pagination · .pagination

Moving through a long list of records.

Specification

target
36px minimum per control
current
the themed accent fill with a white label

Rules

  • The current page is marked with aria-current, not colour alone.
  • Always show first and last. A reader needs to know how far the list goes.
Markup 
<nav class="pagination" aria-label="Pagination">
  <a href="#">Previous</a>
  <a href="#">1</a>
  <span aria-current="page">2</span>
  <a href="#">3</a>
  <a href="#">Next</a>
</nav>

Form field

form-field · .field

Every input on every surface: a partner form, a sign-up, a dashboard.

Add everything after the @, for example theword.world.

Specification

label
DM Sans 600, 15px
input
17px DM Sans on rgba(11,26,45,.05), 1px rgba(11,26,45,.18) border, 4px radius, 44px minimum height
placeholder
rgba(11,26,45,.60), never rgba(11,26,45,.38): a placeholder still has to be read
error
#8C1D13 text and border. Never Flame, never Ember.
hint
13px rgba(11,26,45,.80), below the input, always present rather than appearing on failure

Rules

  • The touch target is 44px whatever the visual height.
  • An error names what is wrong and how to fix it. 'Invalid' is not an error message.
  • Never signal an error with colour alone: the message text carries it.
  • Ember is reserved for the action. An error is not an action.
Markup 
<div class="field" data-state="error">
  <label for="email">Email</label>
  <input id="email" type="email" value="nathan@" aria-describedby="email-error">
  <p class="error" id="email-error">Add everything after the @, for example theword.world.</p>
</div>

Checkbox and radio

choice · .choice

Selection inside a form.

Specification

control
the native input, tinted with accent-color
size
18px
target
44px including its label

Rules

  • Native controls, tinted. Keyboard and screen reader behaviour is the platform's rather than something reimplemented badly.
  • The label is clickable, and it is part of the touch target.
Markup 
<label class="choice"><input type="checkbox" checked> Send me the field report</label>
<label class="choice"><input type="radio" name="d" checked> Every month</label>
<label class="choice"><input type="radio" name="d"> Only when something happens</label>

Switch

switch · .switch

An immediate on or off, with no save step.

Specification

track
42x24, radius 12px
thumb
18px circle at 0 2px 6px rgba(11,26,45,.06)
on
the themed accent fill

Rules

  • A switch takes effect immediately. If it needs saving, it is a checkbox.
  • The visible label says what being on means, not what the switch is called.
Markup 
<label class="switch"><input type="checkbox" checked><span class="track"></span> Show unverified figures</label>

Data table

data-table · .table-scroll

Official figures, schedules, and any grid of records.

ConferenceCitySalvations
SLC[City][n]

Specification

header
DM Sans 600 uppercase 12px, letterspaced .14em, rgba(11,26,45,.80) on #F7F3EC
cell
15px DM Sans, rgba(11,26,45,.10) bottom border
numerals
tabular-nums wherever digits line up
scroll
the table scrolls inside its own container, never the page

Rules

  • A wide table scrolls in its own frame. The page body never scrolls sideways.
  • Figures come from the official ministry record and carry a source line.
Markup 
<div class="table-scroll">
  <table>
    <thead><tr><th>Conference</th><th>City</th><th>Salvations</th></tr></thead>
    <tbody><tr><td>SLC</td><td>[City]</td><td>[n]</td></tr></tbody>
  </table>
</div>

Badge

badge · .badge

A short status or category label beside a title or in a table cell.

Draft CLEAN Published Confirmed Unverified Blocked

Specification

font
DM Sans 600, 11px, letterspaced .1em, uppercase
radius
3px
variants
default, accent, solid, success, warning, error

Rules

  • A badge labels, it does not shout. Never more than two words.
  • The state variants take the themed state colours, which lift on a dark ground.
  • Never Flame: a badge is text at small size.
Markup 
<span class="badge">Draft</span>
<span class="badge" data-state="accent">CLEAN</span>
<span class="badge" data-state="solid">Published</span>
<span class="badge" data-state="success">Confirmed</span>
<span class="badge" data-state="warning">Unverified</span>
<span class="badge" data-state="error">Blocked</span>

Avatar

avatar · .avatar

A person or an account at small size.

Specification

shape
circle, the one circle in this system
ground
#0B1A2D
mark
the glyph, never the wordmark

Rules

  • The wordmark is unreadable in a circle. The glyph is drawn for it.
  • A photograph of a person is used only with their consent, the same as any published image.
  • The image is marked aria-hidden: the name sits beside it, and a screen reader announcing the mark twice helps nobody. An avatar that is the only identification carries real alt text instead.
Markup 
<span class="avatar"><img src="/assets/logos/the-word/the-word-glyph-reversed.svg" alt="" aria-hidden="true"></span>

Email layout

email-layout

Every newsletter and transactional email.

Body copy goes here.

Specification

width
600px, the recorded email breakpoint
structure
nested tables, not divs. Outlook renders the table and ignores the div.
css
inline styles on every element. No stylesheet, no custom properties, no var().
fonts
Georgia for the serif and Arial for the sans. The webfont will not load and the fallback is the design.
ground
#F7F3EC body, #FFFFFF content table, #0B1A2D footer
images
PNG only, with alt text that carries the meaning when images are blocked

Rules

  • No SVG. Most clients strip it.
  • A dark-mode client may invert the ground: state colours explicitly on every cell and never rely on a default.
  • Every email carries a preheader, a reason the person is receiving it, and a working unsubscribe.
  • The logo is a PNG at 400px or 800px, never the vector.
Markup 
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#F7F3EC;margin:0;padding:24px 0;">
  <tr><td align="center">
    <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px;max-width:100%;background:#FFFFFF;">
      <tr><td style="padding:32px;font-family:Arial,sans-serif;font-size:17px;line-height:1.7;color:#0B1A2D;">
        Body copy goes here.
      </td></tr>
    </table>
  </td></tr>
</table>

Email button

email-button

The single call to action in an email.

Partner With Us

Specification

build
a table cell with a background, not a styled anchor: Outlook drops padding on an anchor
background
#C13A24
color
#FFFFFF
padding
14px 28px
radius
3px

Rules

  • One per email.
  • Never Flame fill: it fails contrast at 3.3:1 in an email exactly as it does on the web.
  • The link text says what happens, and the URL is visible in the footer for clients that strip links.
Markup 
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
  <td bgcolor="#C13A24" style="border-radius:3px;">
    <a href="https://theword.world/partner" style="display:inline-block;padding:14px 28px;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;color:#FFFFFF;text-decoration:none;">Partner With Us</a>
  </td>
</tr></table>

Alert

alert · .alert

A message about the state of the page or the last action.

The figure has no source

Every published number names the record it came from. Add the record and the period it covers.

Checked against the record

All four figures match the July conference report.

Specification

structure
a coloured left rule, a title, and one line of explanation
states
neutral, success, warning, error
title
DM Sans 700, body text-body-small

Rules

  • Never colour alone. The title carries the meaning and the rule reinforces it.
  • An error says what went wrong and how to fix it. “Invalid” is not a message.
  • Never Flame and never Ember: Ember means the action, and an alert is not an action.
Markup 
<div class="alert" data-state="error">
  <strong>The figure has no source</strong>
  <p>Every published number names the record it came from. Add the record and the period it covers.</p>
</div>
<div class="alert" data-state="success">
  <strong>Checked against the record</strong>
  <p>All four figures match the July conference report.</p>
</div>

Toast

toast · .toast

Confirmation that something the reader did has finished.

Published
Brand system v7.0 is live.

Specification

width
380px maximum
rule
3px left in the themed accent
elevation
0 24px 60px rgba(11,26,45,.18)

Rules

  • Says what happened, in the past tense. “Published”, not “Publishing”.
  • Never carries the only copy of anything. It disappears.
  • Never announces an error that needs action. That is an alert, which stays.
Markup 
<div class="toast" role="status"><div><strong>Published</strong><br><span class="muted">Brand system v7.0 is live.</span></div></div>

Progress

progress · .progress

How far through a known-length task the reader is.

64% of the logo set rebuilt

Specification

height
6px
fill
the themed accent
track
the sunken surface

Rules

  • Only for a task whose length is known. If it is not known, use a skeleton.
  • Carries a text label nearby. A bar alone is not a measurement.
Markup 
<div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><span style="width:64%"></span></div>
<p class="caption">64% of the logo set rebuilt</p>

Skeleton

skeleton · .skeleton

The shape of content that has not arrived yet.

Specification

fill
the sunken surface
shape
matches the content it stands in for

Rules

  • Matches the shape of what is coming, so the layout does not jump when it arrives.
  • Never a spinner over a blank screen. Show the shape of the answer.
Markup 
<span class="skeleton" style="width:70%;height:28px"></span>
<span class="skeleton" style="width:100%;height:14px"></span>
<span class="skeleton" style="width:88%;height:14px"></span>

Empty state

empty-state · .empty

A list, a search, or a report with nothing in it yet.

No field reports yet

Reports appear here once a conference record is filed.

File a report

Specification

border
1px dashed the hairline
content
what is missing, why, and the one thing to do about it

Rules

  • Never just “No results”. Say why it is empty and what to do next.
  • Invitation before information, the same as everywhere else.
Markup 
<div class="empty">
  <strong>No field reports yet</strong>
  <p class="muted">Reports appear here once a conference record is filed.</p>
  <a class="btn" href="#">File a report</a>
</div>

Accordion

accordion · .accordion

Long reference content the reader scans before reading.

What counts as an official figure
A number that appears in the ministry record, with the period it covers.
Who approves a change
A written proposal, approval by Joel Zimmer and Nathan Zimmer, a version bump, and a changelog entry.

Specification

control
native details and summary
marker
a plus turning to a minus, in the themed accent

Rules

  • Built on details and summary, so it works with no JavaScript and reads correctly to a screen reader.
  • Never hide something the reader needs in order to act. An accordion is for depth, not for tidiness.
Markup 
<div class="accordion">
  <details open><summary>What counts as an official figure</summary><div class="body">A number that appears in the ministry record, with the period it covers.</div></details>
  <details><summary>Who approves a change</summary><div class="body">A written proposal, approval by Joel Zimmer and Nathan Zimmer, a version bump, and a changelog entry.</div></details>
</div>

Dialog

dialog · .dialog

A decision that has to be made before anything else continues.

Specification

width
480px maximum
elevation
0 24px 60px rgba(11,26,45,.18)
actions
right aligned, primary last

Rules

  • One decision per dialog. A dialog with two questions is a page.
  • Escape closes it, focus is trapped inside it, and focus returns to whatever opened it.
  • Never for information alone. That is an alert.
Markup 
<div class="dialog" role="dialog" aria-label="Retire this figure">
  <h3 class="title">Retire this figure?</h3>
  <p class="muted">It stays in the archive and stops appearing in new reports.</p>
  <div class="actions"><button class="btn ghost">Cancel</button><button class="btn">Retire it</button></div>
</div>

Tooltip

tooltip · .tooltip

A short clarification of a control the reader is already looking at.

Measured from the artwork, not the file

Specification

ground
#0B1A2D on both themes, so it reads as an overlay rather than a surface
font
body text-caption

Rules

  • Never the only place information appears. A tooltip cannot be reached by touch or by a screen reader in the same way.
  • One line. If it needs two, it belongs on the page.
Markup 
<span class="tooltip">Measured from the artwork, not the file</span>