501C3.HELP BRAND BOOK

The system is called The Ledger

Everything we publish borrows the vocabulary of official paperwork: receipts, dotted tear lines, filing stamps, status tags, tabular numerals. That is not a styling choice. We ask people to trust us with legal and tax adjacent work, and the interface has to read like a business rather than a brochure.

Use this page to work with our style. Every value here is the real value, taken from the running site, and every colour is one click from your clipboard.

SYSTEM
The Ledger
TYPEFACES
Archivo · IBM Plex Mono
ACCENT
#FAC700
LICENCE
Both typefaces are SIL Open Font License
QUESTIONS
[email protected]
02 · COLOUR

Ink, paper, green, and one highlighter

The palette is deliberately short. Near black and white do almost all the work, a deep forest green carries every link and label, and a single yellow exists to highlight exactly one phrase per headline. Click any swatch to copy its hex.

Contrast, checked

Every pair the system actually uses, measured against the WCAG AA threshold of 4.5:1 for body text.

ForegroundBackgroundRatioVerdictWhere
#0B0F0A#FFFFFF19.32:1AAABody text and headings
#0B0F0A#FAC70012.18:1AAAText inside a highlight mark
#FAC700#0B0F0A12.18:1AAAAccent text on a dark band
#155138#FFFFFF9.27:1AAALinks, eyebrows, ledger figures
#4A5247#FFFFFF8.11:1AAASupporting paragraphs
#5A6457#FFFFFF6.19:1AAMono captions and disclaimers
#155138#E8EFE47.90:1AAAAvailable badge
#9DB89A#0B0F0A8.98:1AAASecondary text on dark
#9A4A2F#FFFFFF6.19:1AAMyth label, error state
#5A6457#0B0F0A3.12:1FAILNever use this pair. Reach for the sage instead

Where the accent comes from. #FAC700 is set to agree with the arrow on the founder's hoodie, which measures #FDB512, while sitting one step lighter: 0.85 against 0.82 on the OKLCh lightness scale, at the full chroma sRGB can hold at that hue. Lightness is the part that matters. A highlight behind heavy black type reads as a marker pen when it is light and as a solid slab when it is dark, and three earlier candidates at 0.76 to 0.80 all read as mud for that reason alone.

One accent, everywhere. #FAC700 replaced the earlier #F3EE74 across the whole site in a single pass: the homepage, the state guides, the compliance updates, the course, the sign-up flow and both accent logo files. Nothing still carries the old value. If you find a yellow on our material that is not this one, it is out of date and we would like to know.

03 · TYPOGRAPHY

Two typefaces, one job each

Archivo carries anything meant to be read as language: headlines, paragraphs, buttons, card titles. IBM Plex Mono carries anything meant to be read as a record: labels, timestamps, status tags, money, deadlines, ledger lines. A sentence never goes in the mono, and a figure never goes in the sans.

Both are under the SIL Open Font License, so anyone working with us can install and ship them freely.

DISPLAYArchivo 800
64px / 1.0
tracking −0.03em
A nonprofit that runs
HEADLINE LGArchivo 800
52px / 1.1
tracking −0.025em
Who is behind 501c3.HELP
HEADLINE MDArchivo 800
40px / 1.12
tracking −0.02em
What we do, and what we do not do
TITLEArchivo 700
19px / 1.25
State registration and compliance
BODY LGArchivo 400
17px / 1.65
colour #4A5247
Every fee, deadline, and form number is traced to the agency that publishes it, and each page carries the date it was last verified against those sources.
BODY MDArchivo 400
15px / 1.6
colour #4A5247
Filings are submitted by you through your own accounts. You own every login and every credential from the first day.
LABELIBM Plex Mono 600
11px / 1.3
tracking 0.16em · caps
colour #155138
ABOUT 501C3.HELP
LABEL SMIBM Plex Mono 600
9px / 1.3
tracking 0.1em · caps
LAST VERIFIED JULY 2026 · SOURCE VERIFIED
DATAIBM Plex Mono 600
24px / 1.15
tabular figures
colour #155138
$161,400+

Rules that are not negotiable. Mono labels are always uppercase and always letter-spaced; lowercase mono in a label position reads as a bug. Every figure uses tabular numerals so columns line up and a counting animation does not shift width. One highlight mark per headline, never in a paragraph. Headline tracking is always negative, body tracking is always zero.

04 · SHAPE AND DEPTH

Two corner radii, and no blur anywhere

Corners say what a thing is. Fully round means you can press it. Sharp means it is information. There is nothing in between, and a 8px or 12px radius anywhere in our work is a bug rather than a variant.

Round means action

Every button that does something is a full pill at 999px, sitting 3px above a solid black shadow. On hover it lifts 2px and the shadow deepens to 5px, so pressing feels physical.

Start on WhatsApp

Sharp means information

Cards, tags, badges, inputs, tabs and receipts are square or 2px. Data-carrying cards sit on a 6px hard shadow in ink, or in green when one card matters more than its neighbours.

HARD SHADOW 6PX ACCENTED IN GREEN

No soft shadows, no gradients, no glass. Depth comes from solid offset blocks and 1px borders only. A blurred box-shadow breaks the stamped-paper feeling the whole system rests on, and it is the single fastest way to make work look like it came from somewhere else.

05 · COMPONENTS

The pieces, and when each one is right

Buttons

Ink pill for the primary action on light. Accent pill only on dark, since a black pill disappears there. Green underline for a lower emphasis inline action. Bordered mono for compact secondary actions inside a card.

Primary Secondary inline GHOST MONO
On a dark band

Status badges

All four share one shape and differ only by meaning: included, available, watch this, flagged. The same green, amber and terracotta logic repeats everywhere a state is shown, so a colour never means two things.

INCLUDED AVAILABLE WATCH THIS FLAGGED

Highlight mark

A highlighter, not a background. One phrase per headline, always behind dark ink.

Compliance you can verify

The receipt

The signature element. A dark header, itemised lines separated by dotted rules, mono labels left and green figures right, a heavier rule above the total, and a torn edge at the bottom. Use it wherever content is itemised data with a sum.

WHAT YOUR STATUS BUYS
NEW 501(C)(3) · FIRST YEAR
GOOGLE AD GRANTS$120,000
WORKSPACE$3,600
CLOUD CREDITS$5,000
TOTAL$128,600

Myth against reality

The pattern for correcting a belief. The false side is struck through in muted grey under a terracotta label, the correction is bold ink under a green label, divided by a hairline. Never argue in a paragraph what this pattern can show in two columns.

THE MYTH
Once the IRS letter arrives, the organization is done.
THE REALITY
The letter is the start. The state filings begin immediately.

Eyebrow and section head

Every section opens with a green mono label, then the heading. The label says where you are, the heading says what it is.

PUBLIC RESEARCH
Where the numbers come from
06 · LAYOUT

Stacked bands, four widths, one gutter

TokenValueUsed for
container-wide1240pxMarketing pages, heroes, footers, this page
container1000pxProduct pages
container-narrow760pxA single reading column: a lesson, a letter
gutter44pxHorizontal padding, stepping to 20px under 900px
section64pxVertical padding on a band, 80px when it needs air
grid2 or 3 columnsCollapses to one under 900px
spacing unit4pxEvery gap is a multiple of it

Alternate the band backgrounds. White, then the surface tint, then white, down the length of a page. Two bands of the same colour in a row fuse into one block and the page loses its rhythm. This is the most common regression when a section in the middle gets removed.

07 · VOICE AND COPY

Write like a person who checked

We are read by founders who are about to hand over legal and tax adjacent work. Confidence comes from specifics and from saying plainly what we do not know, never from adjectives.

HOW WE WRITE
  • Exact over roundThe fee is $50, the deadline is the fifteenth day of the fifth month. Never "a small fee" or "in the spring".
  • Name the sourceThe Secretary of State, the Attorney General, the IRS. A claim without a source does not go out.
  • Date everythingEvery fact carries the date it was last verified. A guide with no date is a guide nobody can check.
  • Say what is unresolvedIf the official material is silent, we publish that it is silent. Verification in progress is a real answer.
  • Short sentencesOne idea each. If a sentence needs a clause bolted on, it is two sentences.
WHAT WE NEVER WRITE
  • No dash between clausesNot an em dash, not an en dash, not a spaced hyphen. Use two sentences, a comma, a colon, or "and". Hyphens inside fixed terms and form numbers are fine.
  • No guarantee of approval501(c)(3) status is decided solely by the IRS and Ad Grants solely by Google. Anyone promising either is selling something they do not control.
  • No legal or tax adviceWe are not a law firm and not a CPA firm. We prepare drafts for review by licensed professionals.
  • No filing on someone's behalfClients file through their own accounts and own every credential from day one. Copy must never suggest otherwise.
  • No hype adjectivesRevolutionary, seamless, effortless, game changing. If the sentence survives deleting the adjective, delete it.

The standing disclaimer. It appears in the footer of every page and must travel with any material that describes what we do:

IT HUB Service Inc, operating as 501c3.help. Not a law firm or CPA firm. We prepare mission architecture, document drafts, and formation packages for review by licensed attorneys. All filings are made by the client through their own accounts. 501(c)(3) approval is determined solely by the IRS. Google Ad Grants eligibility and approval are determined solely by Google. Results vary.

08 · DO AND DO NOT

The short list

If you only read one section, read this one. Every line here is a mistake that has actually been made in this system.

DO
  • Keep actions round and information sharpA pill can be pressed, a square holds a fact. Never invent a radius in between.
  • Load both typefacesAny page using this system must ship Archivo and IBM Plex Mono. A missing import silently falls back to the browser default.
  • Pick sage for secondary text on dark#9DB89A, not a grey that happened to work on white.
  • Use hard shadows onlyInk, green, or black, zero blur.
  • Keep one highlight per headlineIt is emphasis, and emphasis stops working when repeated.
  • Keep the semantic colours honestGreen is good, amber is watch, terracotta is wrong. Never borrow one as decoration.
DO NOT
  • Two same-coloured bands in a rowThey fuse and the page reads as one undifferentiated scroll.
  • A third typefaceOne page in our own codebase references a font it never loads. Do not copy it.
  • Yellow as a surfaceThe accent is a highlighter behind text. It is not a button on white and not a panel fill.
  • Blurred shadows, gradients, glassAny of them and the work stops looking like this system.
  • Mono for a sentenceThe mono is for records. Prose in it reads as a system error message.
  • A rebuilt logoUse the supplied files. A hand-set wordmark is never the logo.
09 · TOKENS AND FILES

Take it with you

Drop this into any stylesheet and the palette is available as custom properties. The names match the ones used throughout this page.

:root {
  /* surfaces */
  --ink:          #0B0F0A;
  --paper:        #FFFFFF;
  --paper-dim:    #F4F6F3;

  /* text */
  --ink-2:        #4A5247;   /* body */
  --ink-3:        #5A6457;   /* captions */
  --sage:         #9DB89A;   /* secondary on dark */

  /* lines */
  --rule:         #E2E6DF;
  --rule-2:       #C8CEC6;

  /* brand */
  --green:        #155138;
  --green-tint:   #E8EFE4;
  --accent:       #FAC700;

  /* status */
  --rust:         #9A4A2F;
  --rust-tint:    #FBF1EE;
  --amber:        #8A6D1E;
  --amber-tint:   #FCFBE8;

  /* shape and depth */
  --radius-flat:  0;
  --radius-soft:  2px;
  --radius-pill:  999px;
  --shadow-card:  6px 6px 0 var(--ink);
  --shadow-btn:   0 3px 0 #000;

  /* type */
  --font-sans:    'Archivo', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

Files

LOGOB.svgWORDMARK · LIGHT BACKGROUNDS LOGOW.svgWORDMARK · DARK BACKGROUNDS LOGOBY.svgACCENT · LIGHT BACKGROUNDS LOGOWY.svgACCENT · DARK BACKGROUNDS ArchivoSIL OPEN FONT LICENSE · GOOGLE FONTS IBM Plex MonoSIL OPEN FONT LICENSE · GOOGLE FONTS

Using our marks. The logo files are ours. Partners, sellers and professionals we work with may use them to say they work with us, in the four supplied forms, unmodified. Nobody may use them to suggest that we endorse an unrelated product, or in a way that implies a partner is 501c3.HELP. If you are unsure whether a use is fine, write to [email protected] and ask, and we will answer the same day.