Moss Foundation · Digital Brand System
The digital style guide
Type and color, pulled from the 2025 Annual Grant Report and translated for web, email, and screen. Two voices carry the brand: Argent Light for warmth, Trade Gothic Condensed for structure, with Open Sans Light doing the reading.
Moss Foundation 2025 Annual Grant Report · Digital Reference
Two voices, one signature
Argent is the warmth, Trade Gothic is the structure, and the brand comes alive where they meet. Open Sans stays out of the way and carries the reading.
Argent CF
Display serif
The editorial voice, always set Light. The italic, used on a single emphasis word in Emerald, is the brand's tell.
Weights in use: Light, Light Italic, Thin · Roles: H1, H4, pull quotes
Trade Gothic Cn
Condensed grotesque
The structural voice, and the biggest voice on the page. It sets impact figures, uppercase section titles, and the smallest data labels.
Weights: Bold Cn No.20, Cn No.18 · Roles: impact figures, H2, H3, H5, H6
Open Sans
Humanist sans
The reading voice, set Light in warm gray for body. Semibold and Bold pick out numbers and short emphasis inside copy.
Weights: Light 300, Semibold 600, Bold 700 · Roles: lead, body, captions
The heading scale, H1 to H6
Drawn from the report's applied hierarchy. Argent carries the top and one editorial subhead. Trade Gothic carries the structural levels. Sizes use clamp() to scale from phone to desktop.
A legacy worth building, from the ground up
Use for: the one hero title or opening statement per view. Set one word italic in Emerald for emphasis. Never uppercase.
- Face
- Argent Light + Light Italic
- Desktop
- 60px
- Mobile
- 38px
- Leading
- 1.08
- Tracking
- -0.015em
- Case
- Sentence case
- Accent
- Italic word in Emerald
2025 grantees by location
Use for: major section titles and page-level dividers. Uppercase, Emerald. The structural voice at full scale.
- Face
- Trade Gothic Bold Cn No.20
- Desktop
- 40px
- Mobile
- 28px
- Leading
- 1.06
- Tracking
- +0.02em
- Case
- UPPERCASE
- Color
- Emerald
Education · Veterans · First responders
Use for: subsections and program-area labels. Uppercase, Olive Wood, to sit a step under the Emerald H2.
- Face
- Trade Gothic Bold Cn No.20
- Desktop
- 26px
- Mobile
- 20px
- Leading
- 1.14
- Tracking
- +0.05em
- Case
- UPPERCASE
- Color
- Olive Wood
Building the workforce of tomorrow
Use for: feature titles and editorial subheads where the serif returns for warmth. Emerald, sentence case, italic.
- Face
- Argent Light Italic
- Desktop
- 24px
- Mobile
- 19px
- Leading
- 1.20
- Case
- Sentence, italic
- Color
- Emerald
Chad Moss · Lanie Morgenstern
Use for: card titles, article kickers, names, and table headers. Uppercase, Carbon, tracked.
- Face
- Trade Gothic Bold Cn No.20
- Desktop
- 16px
- Mobile
- 15px
- Leading
- 1.20
- Tracking
- +0.06em
- Case
- UPPERCASE
- Color
- Carbon
Grantee info · 2025 gift · Expected graduation
Use for: micro data labels, field names, and tags. The smallest heading, wide tracked, in Olive Wood or Peach Fuzz on dark.
- Face
- Trade Gothic Bold Cn No.20
- Desktop
- 11px
- Mobile
- 11px
- Leading
- 1.30
- Tracking
- +0.10em
- Case
- UPPERCASE
- Color
- Olive / Peach
The standout figure and the reading styles
The impact figure is the loudest element in the system. Below it sit the styles that carry length: lead, body, captions, and the pull quote.
$22 Million
Use for: the single hero statistic on a page or card. This is the biggest type in the brand, larger than any headline. Emerald on light, or white on Emerald.
- Face
- Trade Gothic Bold Cn No.20
- Desktop
- up to 96px
- Leading
- 0.86
- Case
- Mixed or UPPER
- Color
- Emerald / White
Grantmaking here is not transactional. Every dollar carries a commitment, and every commitment starts with people showing up for one another.
Use for: intro paragraphs and section openers. Open Sans Light in Emerald, one size up from body.
- Face
- Open Sans Light 300
- Size
- 20px
- Leading
- 1.55
- Color
- Emerald
Body copy carries the substance of the page. It is set Light in a warm gray with open line height, at a measure near sixty characters so the eye finds each new line without effort. Numbers and short emphasis can step up to Semibold inside a paragraph.
Use for: all running text. Warm gray, not pure black, to match the printed report.
- Face
- Open Sans Light 300
- Size
- 16 to 17px
- Leading
- 1.70
- Measure
- 62ch max
- Color
- Warm gray 555555
Captions, credits, and grantee metadata sit at the small size in warm gray, quiet enough to support the photography without competing with it.
Use for: captions, photo credits, footnotes, and dense grantee listings.
- Face
- Open Sans Light 300
- Size
- 13 to 14px
- Leading
- 1.55
- Color
- Charcoal
The values, the authenticity, the passion. It starts with the Moss family.
Use for: testimonials and pull quotes. Argent set Thin or Light Italic in Ash Brown, large and airy.
- Face
- Argent Thin / Light Italic
- Size
- 22 to 30px
- Leading
- 1.30
- Color
- Ash Brown
Moss Foundation 2025 Annual Grant Report
Use for: running headers, footers, and mastheads. The regular condensed weight, wide tracked, in gray.
- Face
- Trade Gothic Cn No.18
- Size
- 11 to 12px
- Tracking
- +0.14em
- Case
- UPPERCASE
- Color
- Charcoal
Type on color, safely
Combinations pulled from the report and checked against the palette accessibility grid. Emerald and Carbon are the grounds for light type. Almond and White are the grounds for dark.
Applying the system on screen
The rules that keep the printed hierarchy intact as it moves into responsive layouts.
The italic accent
- Emphasis lives in one Argent italic word, set in Emerald, inside a roman Argent line.
- One accent per heading. A second italic word cancels the signal.
- Never fake it with a system italic. If Argent is not loaded, keep the word roman rather than slanting a fallback.
Weight and reading
- Body is Open Sans Light. Hold it at 16px minimum on screen so the light weight stays legible.
- Keep body in warm gray 555555, not black, to match the report.
- Step up to Semibold only for numbers or a few emphasized words inside copy.
Uppercase and figures
- Every uppercase Trade Gothic run gets positive tracking, from +0.02em at H2 to +0.10em at H6.
- Let the impact figure be the loudest thing on a view. One per card or section.
- Reserve all caps for structure and labels so it keeps meaning.
Fallback stacks
- Argent: "Argent CF", Georgia, serif. Load Light, Light Italic, Thin.
- Trade Gothic: "Trade Gothic Cn", "Oswald", "Arial Narrow", sans-serif.
- Open Sans: "Open Sans", system-ui, sans-serif, weights 300 / 600 / 700.
