Reliever Brand Guidelines

01 · Introduction

The Idea

Reliever is the back office for youth sports.

It exists for the parent who raised a hand for the kids and got handed the money. The treasurer. The board. The good person now on the hook for dollars they cannot see. In youth sports, every parent volunteers to help the kids. Coaches, refs, the snack table, the fundraiser. But the one job that proves every dollar reached them is the one job nobody's name is on.

The name is the job description. A reliever is the one who steps in and takes the weight. Reliever takes the books, the filings, and the two-year handoff off one tired volunteer's hands, and makes the destination of every dollar something a whole community can see together.

"We put a light on. Not a camera."

Word to own: Reached
Ownable phrase: Every dollar reached the kids.
Positioning: Prove every dollar reached the kids.
Flag line: Every dollar, home to the kids.
Aspiration: Every dollar accounted for.
Character: Plain-spoken · Protective · Steady · Honest

The identity carries the same promise the product makes. High contrast, because nothing is hidden. Exact line work, because the books are exact. Restraint, because in this category restraint is the credibility. Reliever speaks plainly, stays warm at the kitchen table, and gets dead serious the moment the money is at risk. Every page of this guide holds that line.

"Visibility removes the opportunity."

02 · The Mark

An Abstract R, Built From Pieces

The Reliever mark is an abstract letter R. It is built from six solid pieces: three that hang from the top, three that rise from the bottom. The pieces represent elements coming together. Organization. The line work is very exact where the pieces meet. They slot right into place.

That exactness is the whole point. A treasurer's job is to take separate things, the team account, the fundraiser cash, the year-end filing, and bring them into one clean picture. The mark performs that job in front of you. Six separate pieces, one letter, no gaps.

"The different pieces represent elements coming together and organization. The line work is very exact where the pieces meet, like they can slot right into place."

From the designer

Anatomy

Name the parts, and the R appears.

The Reliever mark, an abstract letter R built from six exact pieces

The serif entry. The first piece carries a curved serif at its top left, the mark's handshake with tradition.
The stems. Plain rectangular pieces, the working columns of the letter.
The bowl. The large upper-right piece, curved where the R's bowl closes.
The leg. The lower-right piece, kicking out in a single confident curve, the R's foot.
The seam. The middle band where upper and lower pieces pass each other and the mark reads, for a moment, like a checkerboard. This is where the slotting happens, and the edges align to the pixel.

Every piece is exactly one module wide, and the mark stands exactly four modules tall. That module governs spacing rules later in this guide.

Heritage

The serifs are inherited. The mark takes its curved artifacts from Chronicle, a very traditional serif typeface originally designed by Hoefler & Co. Chronicle is the mark's ancestry, not a brand font. It is never loaded, licensed, or set as type on any Reliever surface. Its influence lives only in the drawn curves of the mark itself.

Against that serif weight sits Host Grotesk, the brand's working typeface. In the designer's words, the pairing creates "a very nice balance": a bold mark with very exact points representing organization of elements, and a strong serif complement that feels grown up and very adult, carried by the clean, modern voice of Host Grotesk.

The variant system

The identity ships in three forms. Each earns its place.

Horizontal lockup. The mark beside the Reliever wordmark. The primary identification. Use it wherever the brand introduces itself: headers, documents, covers, signatures.
Vertical lockup. The mark stacked above the wordmark. For square and tall formats, centered compositions, and overlays on photography, where the stack holds the center with more presence than a wide line.
The mark alone. For places the name is already established or space is tight: interface corners, app icons, watermarks, pattern anchors. The mark alone comes in two versions, large and small, explained below.

Two marks, one reason

The logo mark ships in a large variant and a small variant, and the only difference is the trademark symbol. On the large variant the TM is discreet, about five percent of the mark's height, so it never distracts at billboard and cover sizes. On the small variant the TM is bigger, about nine percent of the mark's height, so it survives when the mark is small. Pick by destination size: if the mark will run large, use the large variant; if it will run small, use the small variant. If the TM in your artwork has gone illegible or has started shouting, you picked the wrong one.

Both lockups carry the TM at the lower right of the wordmark. The standalone marks carry it at the lower right of the leg.

03 · Logo Usage

Black or White. Nothing Else.

The logo is used as full black or as full white. That is the entire color rule, and it is the brand's strength. High contrast means nothing is hidden, and it keeps the mark strong across everything from a board report to a video frame. Black artwork goes on light grounds. White artwork goes on dark grounds and photography. No greys, no gradients, no takeover colors, no exceptions.

logo-mark-large-black.png Black artwork · Use on: Paper, light greys, light photography, at large sizes PNG ↓

logo-mark-large-white.png White artwork · Use on: Ink, black, dark photography, takeover surfaces, at large sizes PNG ↓

logo-mark-small-black.png Black artwork · Use on: Paper, light greys, light photography, at small sizes PNG ↓

logo-mark-small-white.png White artwork · Use on: Ink, black, dark photography, takeover surfaces, at small sizes PNG ↓

When a surface floods with Adoption Purple or Alert Orange, the mark on it is white. Measured against the system colors, white artwork carries 7.7 to 1 contrast on purple and 3.3 to 1 on orange, both clear of the 3 to 1 floor for graphics. Black artwork is also acceptable on orange, at 5.7 to 1, but never on purple.

Clearspace

The clearspace unit is the module: the width of one piece of the mark, which is exactly one quarter of the mark's height. Keep at least one module of clear space on all sides of any lockup or standalone mark. The production files already carry about one and a half modules of padding inside the artboard, so placing a file edge-to-edge against another element still respects the minimum. When in doubt, give it more room. Space is part of this system.

The horizontal lockup with one module of clear space measured on all sides — ClearspaceOne module S on all sides, where S is the width of one piece of the mark. The same unit governs the lockups, measured from the mark, not the wordmark.

Minimum sizes

The mark was drawn to survive small. In the product dashboard it sits in the top left corner at roughly 15 pixels tall and stays fully legible. That working proof sets the floor.

Logo mark, small variant: minimum 15 px tall (about 31 px wide with its TM). Below this, do not use the mark at all.
Horizontal lockup: minimum 16 px tall (about 98 px wide). The mark spans nearly the full lockup height, and the wordmark holds an 11 px capital height, the smallest we allow the name to be set.
Vertical lockup: minimum 56 px tall (about 60 px wide), which keeps the wordmark at that same 11 px capital floor.

Below a lockup's minimum, switch to the mark alone. Below 15 px, use nothing.

A 100 percent crop of the product dashboard navigation corner, with the Reliever mark holding the top left — The working proofA 100 percent crop of the product dashboard. At working interface scale the mark stands about 15 pixels tall and stays fully legible. At UI scale the mark runs without its TM lockup, which is exactly why the small TM variant exists for standalone small placements.

Reliever mark at 15 pixels tall — True-pixel specimensReal production artwork rendered at literal pixel sizes. The 15 px mark uses the small TM variant.

Reliever mark at 20 pixels tall — True-pixel specimensReal production artwork rendered at literal pixel sizes. The 15 px mark uses the small TM variant.

Misuse

The mark is six exact pieces slotted into place. Most misuse is someone un-slotting them. Never means never.

Black artwork on light grounds. This is the rule working.

White artwork on dark grounds. This is the rule working.

Never recolor the mark. It is black or it is white. Grey counts as recoloring. So do the takeover colors.

Never pull the pieces apart. The edges meet exactly. Any gap, overlap, or shifted piece breaks the letter and the meaning.

Never rearrange or delete pieces. Six pieces make the R. Five make nothing.

Never stretch or squeeze. The mark is built on a strict module. Distortion breaks the grid before your eye knows why it looks wrong.

Never rotate or tilt. The stems stay vertical and the seam stays level.

Never outline the mark or convert it to strokes. The pieces are solid. Their edges do the work.

Never add shadows, glows, bevels, or any effect. The mark is flat and exact, like the books should be.

**Never set black artwork on dark or busy grounds, or white artwork on light ones.** If the mark is fighting its background, change the artwork color or calm the ground.

R

Never redraw the R or fake it with a typeface. The curves are drawn, not typed, and no font will slot.

**Never use the mark as a letter inside a word.** It stands alone. It does not replace the R in Reliever or anything else.

04 · Color

Monochrome Until It Matters

The system lives in black, white, and a few muted greys. They carry about 95 percent of every surface. That restraint is not a style choice sitting on top of the brand. It is the brand. Clean books, made visible: nothing hidden, nothing decorated, everything laid out plainly and easy to scan.

Then color arrives, and when it arrives it takes the entire space.

Color is never an accent. It is a takeover.

Color never appears in this system as a stripe, a badge tint, or a button highlight. It stays out entirely, until something happens that matters. Then a single color floods the whole surface. Two states, two colors:

Adoption Purple. Claimed, adopted, verified. When something is taken on, made the standard, or confirmed, purple takes the whole space. This is the positive takeover, the hero moment, the proof rendered as design.
Alert Orange. Something is wrong. Orange floods the surface the same way, heavy and total and impossible to miss. A problem is never a small dot in a corner. The surface itself changes state.

States over accents. Surfaces shift wholesale. Components never get colored trim. One takeover at a time, and the moment the state resolves, the surface returns to monochrome.

The tokens

Ink

#111111 · 17, 17, 17

Primary text, structure, dark surfaces

Ink Lift

#1A1A1A · 26, 26, 26

Gradient companion on Ink fields only. Never a flat fill, never text

Muted Grey

#6B6B6B · 107, 107, 107

Secondary text, the subtle tones under the black and white

Line

#E8E8E8 · 232, 232, 232

Dividers and quiet structure on light surfaces. On Ink, the secondary text color, reading at 15.4 to 1.

Field

#FAFAFA · 250, 250, 250

Quiet section surface, specimen grounds

Paper

#FFFFFF · 255, 255, 255

Canvas, kept clean and open

Adoption Purple

#7030B0 · 112, 48, 176

The claimed, adopted, verified takeover. Only ever as a full surface

Carries Paper text only.

Alert Orange

#F0600F · 240, 96, 15

The something-is-wrong takeover. Only ever as a full surface

Carries Ink text. Paper at display sizes only.

The artwork's colors. The logo artwork is pure black #000000 and pure white #FFFFFF, and it stays that way. Ink #111111 is the reading black for text and interface structure; it is never applied to the mark. Keep the two blacks separate: the mark's black is absolute, the system's black is soft enough to read against all day.

Contrast, measured

Pairing	Ratio	Verdict
Ink on Paper	18.9 : 1	AA and AAA, all sizes
Paper on Ink	18.9 : 1	AA and AAA, all sizes
Muted Grey on Paper	5.3 : 1	AA, all text sizes
Paper text on Adoption Purple	7.7 : 1	AA, all text sizes
Ink text on Adoption Purple	2.5 : 1	Fails. Never set Ink on purple
Ink text on Alert Orange	5.7 : 1	AA, all text sizes
Paper text on Alert Orange	3.3 : 1	Large text and graphics only
Black artwork on Paper	21.0 : 1	Maximum
White artwork on Ink	18.9 : 1	AA and AAA

On purple, text is Paper. On orange, text is Ink. No other combinations.

The takeover, demonstrated

One panel, three states. Change the state and watch the surface, not the trim.

Northside Youth Sports Association · Season Fund

$18,342.71

Carryover from spring$8,283.15
Registration fees$9,845.00
Fall fundraiser$4,212.50
Equipment and field fees−$2,687.94
Referee payouts−$1,310.00

Books current. Reconciled July 9, 2026.

State: Mono. The working surface. Black, white, and greys carry the books.

Northside Youth Sports Association · Season Fund

$18,342.71

Carryover from spring$8,283.15
Registration fees$9,845.00
Fall fundraiser$4,212.50
Equipment and field fees−$2,687.94
Referee payouts−$1,310.00

Verified

Claimed, adopted, confirmed. The whole surface says so.

State: Adopted. Adoption Purple floods the entire surface and text sets in Paper.

Northside Youth Sports Association · Season Fund

$18,342.71

Carryover from spring$8,283.15
Registration fees$9,845.00
Fall fundraiser$4,212.50
Equipment and field fees−$2,687.94
Referee payouts−$1,310.00

Something is wrong.

One withdrawal has no matching receipt.

State: Alert. Alert Orange floods the entire surface and text sets in Ink.

Where the mechanic comes from

Reference photograph: a monochrome room where a purple book claims all the color — The takeover · adoptionMonochrome until purple claims the room

Reference photograph: an interface where orange takes over the screen when something is wrong — The takeover · alertWhen something's wrong, color takes over

The reference images carry their own ambient colors. Those belong to the references, not to Reliever. The brand palette is this section, complete as printed.

The rules

Black, white, and muted greys carry about 95 percent of every surface.
Color is binary: fully off, or fully on as a takeover.
Purple means claimed, adopted, verified. Orange means something is wrong.
A takeover floods the entire surface. Never a stripe, tint, trim, or dot.
One takeover at a time. Never both colors on one surface.
The logo never wears either color. On a takeover surface, the mark is white.
Muted greys sit under the black and white. They never become a third voice.

05 · Typography

Host Grotesk, the Working Voice

Reliever sets everything in Host Grotesk. One family, doing every job. This page is the first formal documentation of the system: what you see here is the standard.

The pairing logic comes from the mark. The mark carries the serif weight, the grown-up, adult presence inherited from Chronicle. Host Grotesk answers it with a clean, modern, plainspoken voice. The mark is the signature; Host Grotesk is the handwriting of everything else. The type does the work without raising its voice.

AaBbCcDdEeFf 0123456789

Family: Host Grotesk
Source: Google Fonts
Job: Everything. Display, body, data, labels, interface.

The display registerType as the hero. Weight, case, and space do the work. No decoration.

The roles

Display

Clean books, made visible.

Display is uppercase, always: reserved, tightly set, earning its size through weight and space. Sentence case belongs to the body and lede copy, and that is where the warmth lives.

Body

The books, the filings, and the handoff, off one volunteer's hands and visible to the whole community.

Regular weight, generous line height, plain language. Built to be scanned by a tired volunteer at a kitchen table.

Data and labels

Season fund

Registration fees$9,845.00
Referee payouts$1,310.00

SemiBold weight at small sizes, with a little extra letter spacing on uppercase labels. Numbers are content here, not ornament. Set them plainly and align them.

The weights

300 LightEvery dollar reached the kids.
400 RegularEvery dollar reached the kids.
500 MediumEvery dollar reached the kids.
600 SemiBoldEvery dollar reached the kids.
700 BoldEvery dollar reached the kids.
800 ExtraBoldEvery dollar reached the kids.

300 Light is for oversized specimen use only, never below 24 px. 400 carries prose and data. 500 carries navigation and interface microcopy. 600 carries labels, subheads, and emphasis. 700 carries section display. 800 carries the hero display and takeover status lines.

The scale

Level	Preview	Size px	Weight	Line	Tracking	Case	Job
display-1	Aa Reliever 4,812.77	48–104	800	0.95	−0.03em	Uppercase	Hero H1, one per page
display-2	Aa Reliever 4,812.77	32–52	700	1.02	−0.02em	Uppercase	Section H2s
heading-3	Aa Reliever 4,812.77	24	600	1.2	−0.01em	Sentence	Subsection H3s
heading-4	Aa Reliever 4,812.77	18	600	1.3	−0.005em	Sentence	Card titles, H4
lede	Aa Reliever 4,812.77	20	400	1.55	−0.005em	Sentence	Section intros, max 62ch
body	Aa Reliever 4,812.77	16	400	1.6	0	Sentence	Prose, max 68ch
data	Aa Reliever 4,812.77	14	400	1.5	0	Sentence	Tables, specs, tabular numerals
caption	Aa Reliever 4,812.77	13	400	1.5	0	Sentence	Figure captions, Muted on light, Line on dark
label	Aa Reliever 4,812.77	12	600	1.4	+0.08em	Uppercase	Kickers, filenames, table labels
micro	Aa Reliever 4,812.77	11	600	1.35	+0.06em	Uppercase	Table headers, swatch hex readouts

Ten levels. Display sizes flex between the small-screen and desktop values; everything below them holds still. Numbers everywhere use tabular numerals. Emphasis in prose is weight 600, never a slant, never a color.

The rules

Host Grotesk is the only brand typeface. No second family, ever.
Chronicle is the mark's ancestry, not a brand font. Never license it, load it, or set text in it.
Never condense, stretch, or slant the type artificially. The reserved register comes from weight, case, and spacing.
Keep the display voice quiet. If a headline needs an exclamation point, rewrite the headline.
Write plainly. If a parent at a rink would not say the word, the type should not carry it.

06 · Visual Language

The Functional Standard

The chosen creative direction is called The Functional Standard: black, white, and the takeover. Its one-line idea: clean books, made visible. Everything below is that idea, stated as working principles. They govern every Reliever surface, from a board report to a video frame.

01
Clean books, made visible.
High contrast black and white, nothing hidden, nothing decorated, everything laid out plainly and easy to scan. The aesthetic is the audit.
02
Read first, admired second.
Every surface is uber-functional: easy to navigate, easy to scan, never cute. Restraint is the trust signal.
03
Color is a takeover, not an accent.
Monochrome until it matters, then one color floods the whole surface. States over accents, always.
04
Type is the hero.
Strong, simple typography carries the frame as a primary design element, not a label. Reserved display, functional body, and the type does the work without raising its voice.
05
Space and silence are part of the system.
Never show everything at once. Generous space is not emptiness; it is the confidence of clean books.
06
Inviting fields, not stark voids.
Strict black and white can read cold, and cold is a failure here. Place the mark on complementary, inviting grounds, keep muted warmth in the greys, and let people appear. Money should never feel casual, and the system should never feel unfriendly.
07
Exact where the pieces meet.
The mark's slotted geometry extends into the system: precise alignments, module-true spacing, and the abstract element carried into surfaces as wayfinding. When the seam expands, it becomes pattern, as on the quarterly report cover.

Never use accent color as decoration, stripes, or button tints.
Never get cute, and never let money feel casual.
Never let functional tip into cold or clinical.
Never crowd the screen. Never show everything at once.

The reference set

The direction was built from a reference set. A curated selection is shown here with the creative direction's original notes.

Reference: a high-contrast black and white interface with muted tones underneath — Functional UIHigh-contrast B&W baseline, muted tones under

Reference: a functional dashboard built to be scanned — Functional UIFunctional dashboard, easy to scan, not cute

Reference: posters where the typography carries the whole frame — TypographyLet the type be the hero

Reference: a restrained layout that holds most of its content back — RestraintDon't show everything at once

Reference: a simplified mark sitting on an inviting field — MarkSimplified mark on an inviting field

WayfindingAbstract element brought into the cards

The reference images carry their own ambient colors, including muted greens, rusts, and pinks. Those belong to the references, not to Reliever. The brand palette is Section 4, complete as printed.

07 · Applications

The System at Work

Five applications, from a board report to a 15 pixel corner of a dashboard. Each one is doing something this guide documents. The captions say what you are looking at.

The white Reliever mark holding the center of a deep black dimensional ground of angular machined panels — Depth without decoration.The white mark holds the center of a deep black dimensional ground: angular machined panels, brushed textures, hairline edges catching light. In the designer's words, the very dimensional background represents a great deal of depth but also a very strong visual language. One mark, one color, and the black carries everything else.

Quarterly report cover: condensed display title, the black mark beside it, and a checkered field flooding the lower two thirds — The books, published.A quarterly report cover for a sample association, Northside Youth Sports Association. Condensed display type runs the title, the black mark sits beside it, and the lower two thirds flood with a checkered field built from the mark's own slotted geometry. In the designer's words, a very strong, very literal visual language: everything representing organization.

The printed quarterly report as a saddle-stitched booklet with pages fanned, photographed on a warm paper ground — The same cover in hand.The report as a printed, saddle-stitched booklet, pages fanned, photographed on a warm paper ground. The system survives the trip from screen to print without losing a single value: black ink, white paper, exact edges.

A dashboard interface mockup with the black Reliever mark holding the top left corner of the navigation — Fifteen pixels, fully legible.A dashboard interface with the black mark holding the top left corner of the navigation. At working interface scale the mark stands about 15 pixels tall and stays completely readable. This is the living proof behind the minimum size rule in Section 3. The dashboard shown is a scale demonstration, not a color reference; product surfaces follow Section 4.

Detail crop of the dashboard corner showing the mark at interface scale — The detail.The corner at 100 percent. The minimum size rules live in Logo Usage.

The people the books are for.The white vertical lockup centered over a darkened black and white portrait: a man in a ball cap, in profile, looking out over water. Photography is how this system stays warm. The person carries the frame, the mark sits quietly on top, and the vertical stack holds the center of the square crop.

Money should never feel casual, and the system should never feel unfriendly.

08 · Downloads

Production Files

Eight production files: every variant, in black and in white, at full resolution with clearspace padding built in. Download them individually below, or take the complete set as one zip. If you need something that is not here, ask; never rebuild the mark yourself.

File	What it is	Pixels	Size	Download
primary-id-horizontal-black.png	Horizontal lockup, black artwork, for light grounds	3880 × 1014	45 KB	PNG ↓
primary-id-horizontal-white.png	Horizontal lockup, white artwork, for dark grounds	3880 × 1014	43 KB	PNG ↓
primary-id-vertical-black.png	Vertical lockup, black artwork, for light grounds	2044 × 1893	41 KB	PNG ↓
primary-id-vertical-white.png	Vertical lockup, white artwork, for dark grounds	2044 × 1893	39 KB	PNG ↓
logo-mark-large-black.png	Logo mark, large usage, discreet TM, black artwork	2926 × 1893	35 KB	PNG ↓
logo-mark-large-white.png	Logo mark, large usage, discreet TM, white artwork	2926 × 1893	34 KB	PNG ↓
logo-mark-small-black.png	Logo mark, small usage, legible TM, black artwork	1243 × 804	10 KB	PNG ↓
logo-mark-small-white.png	Logo mark, small usage, legible TM, white artwork	1243 × 804	10 KB	PNG ↓

Download all assets (.zip) reliever-logo-pngs.zip · all 8 files · byte-identical to production

All files are transparent PNGs. The white-artwork files will look empty against a white page; they are not.

The back office for youth sports.

Anatomy

Heritage

The variant system

Two marks, one reason

Clearspace

Minimum sizes

Misuse

Color is never an accent. It is a takeover.

The tokens

Ink

Ink Lift

Muted Grey

Line

Field

Paper

Contrast, measured

The takeover, demonstrated

Where the mechanic comes from

The rules

The roles

The weights

The scale

The rules

Clean books, made visible.

Read first, admired second.

Color is a takeover, not an accent.

Type is the hero.

Space and silence are part of the system.

Inviting fields, not stark voids.

Exact where the pieces meet.

The reference set