The TCF style guide.
Colors, typography, and component patterns that make up the Testicular Cancer Foundation's visual language. Click any hex or RGB value to copy it.
Color system
01 · FoundationsThree roles: primary for brand identity, ink for type and surfaces, signals for tints and borders. Click any hex or RGB code to copy it.
Primary & brand
TCF Cyan
The brand. CTAs, accents, links, eyebrow text, and key visual moments.
Deep Cyan
Tag pills and hover states for the primary cyan. Higher contrast on tinted backgrounds.
Cyan Tint
Tag and callout backgrounds. Subtle brand presence without competing with content.
Ink & type
Deep Navy
Headings, hero cards, CTA blocks, footer. Replaces pure black everywhere.
Slate 700
Default body text on light surfaces. Lower contrast than navy, easier on long-form reading.
Slate 600
Sub-paragraphs, list descriptions, secondary copy below a heading.
Slate 500
Captions, spec labels, footnotes, EIN lines. Quiet but readable.
Slate 400
Body copy on top of Deep Navy backgrounds — hero cards, CTAs, footer.
White
Default page background. Cards and content surfaces.
Signals & surfaces
Slate 100
Alternating section backgrounds, inactive toggle states, soft dividers.
Slate 200
Card dividers, hairlines below headings, list row borders.
Pure Black
Reserved for media (logo lockups, photography masks). Do not use for type — use Deep Navy.
Typography
02 · FoundationsA serif for headings, a sans for everything else. DM Serif Display brings warmth and editorial weight; Inter handles long-form reading and UI without distraction.
DM Serif Display
abcdefghijklmnopqrstuvwxyz
0123456789
Inter
abcdefghijklmnopqrstuvwxyz
0123456789
Type scale
03 · FoundationsTwo scales. Article is for long-form content, blog posts, and program pages. Display is for hero sections, landing pages, and marketing moments where the type needs to do more work.
Independently rated. Publicly accountable.
Why third-party ratings matter
Operational excellence supports mission delivery
Trust is built through measurable accountability and sustained transparency — and our third-party ratings reflect exactly that.
Founded in 2009, the Testicular Cancer Foundation is a 501(c)(3) nonprofit organization and the only full-time staffed testicular cancer group in the country. We are a team of survivors, caregivers, and advocates passionate about increasing education and awareness.
Fighting testicular cancer through early detection.
Our mission: saving lives through education.
Learn how to perform a testicular self-exam.
Component patterns
04 · PatternsReusable building blocks. These appear on blog posts, program pages, and donor-facing content. Use the same five patterns everywhere so the brand stays consistent without becoming rigid.
Tag pill
Category label above an H1. Tint background, deep cyan text.
Callout
Short summary or key takeaway. Cyan tint with a 3px primary border.
The short version: Candid Platinum, Charity Navigator 4-Star at 93%, GreatNonprofits Top-Rated, Trustpilot 4.2 / 5.
Hero card
Dark surface with eyebrow, headline, supporting paragraph, and optional pull quote.
For donors and partners
Four independent evaluators. One consistent answer.
Most nonprofits in our category appear on one or two of these platforms. TCF is rated on all four.
"Independent verification is the floor, not the ceiling."
Numbered list
Use for stepped lists, ratings, beats. Serif numerals in primary cyan, hairline dividers.
-
01
Awareness
Reach young men where they are with stigma-free education.
-
02
Support
Connect newly diagnosed patients with survivors who've been there.
-
03
Survivorship
Long-term care, community, and resources after treatment ends.
CTA block
End-of-article donate or signup block. Dark navy with primary cyan emphasis.
Support TCF with a tax-deductible donation.
Every dollar is stewarded under the same standards reflected in our independent ratings.
Donate to TCF