W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Reddit is the network of communities — "the front page of the internet" — founded in 2005 and centered on user-submitted content, voting, and threaded discussion. The brand voice is irreverent, community-first, and unpolished by design. Visually, Reddit is anchored on Reddit Orange (#FF4500): a saturated red-orange that carries the Snoo alien mark, the Reddit wordmark, and the up-vote affordance that defines the platform. The brand surface is bi-modal — the historical light canvas reads orange on white, and the modern product surface defaults to the "new Reddit" near-black canvas (#1A1A1B) with the orange retained as the constant.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/reddit/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/reddit/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Reddit is the network of communities — "the front page of the internet" — founded in 2005 and centered on user-submitted content, voting, and threaded discussion. The brand voice is irreverent, community-first, and unpolished by design. Visually, Reddit is anchored on Reddit Orange (#FF4500): a saturated red-orange that carries the Snoo alien mark, the Reddit wordmark, and the up-vote affordance that defines the platform. The brand surface is bi-modal — the historical light canvas reads orange on white, and the modern product surface defaults to the "new Reddit" near-black canvas (#1A1A1B) with the orange retained as the constant.
Tags: social, community, reddit, orange, consumer-tech, voting
Atoms
Palette
Reddit · [email protected] · Proprietary — All Rights Reserved
Reddit corporate palette, anchored on Reddit Orange (#FF4500) — the saturated red-orange that has carried Snoo (the Reddit alien) and the Reddit wordmark since the company's founding. The brand is bi-modal: the legacy and the dominant mobile-app surface read as Reddit Orange on a white canvas, while the modernized "new Reddit" dark theme surfaces the Orange on a near-black canvas (#1A1A1B) inherited from the redesign and retained in the 2023 brand evolution.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
IBM Plex Sans ([email protected]) |
OFL-1.1 | sans-serif |
body |
IBM Plex Sans ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
reddit-orange |
Reddit Orange | #FF4500 |
reddit-orange-dark |
Reddit Orange Dark | #CC3700 |
reddit-white |
Reddit White | #FFFFFF |
reddit-near-white |
Reddit Near-White | #F6F7F8 |
reddit-text-primary |
Reddit Text Primary | #1A1A1B |
reddit-text-secondary |
Reddit Text Secondary | #7C7C7C |
reddit-divider-light |
Reddit Divider Light | #EDEFF1 |
reddit-canvas-dark |
Reddit Canvas Dark | #1A1A1B |
reddit-surface-dark |
Reddit Surface Dark | #272729 |
reddit-surface-elevated-dark |
Reddit Surface Elevated Dark | #343536 |
reddit-text-on-dark |
Reddit Text on Dark | #D7DADC |
reddit-text-secondary-dark |
Reddit Text Secondary Dark | #818384 |
reddit-divider-dark |
Reddit Divider Dark | #343536 |
reddit-downvote-blue |
Reddit Downvote Blue | #7193FF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
reddit-white |
#FFFFFF |
surface |
reddit-near-white |
#F6F7F8 |
surface-elevated |
reddit-white |
#FFFFFF |
text-primary |
reddit-text-primary |
#1A1A1B |
text-secondary |
reddit-text-secondary |
#7C7C7C |
text-tertiary |
reddit-text-secondary |
#7C7C7C |
primary |
reddit-orange |
#FF4500 |
primary-hover |
reddit-orange-dark |
#CC3700 |
accent |
reddit-orange |
#FF4500 |
accent-hover |
reddit-orange-dark |
#CC3700 |
warning |
reddit-orange |
#FF4500 |
warning-hover |
reddit-orange-dark |
#CC3700 |
error |
reddit-orange |
#FF4500 |
success |
reddit-orange |
#FF4500 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
reddit-canvas-dark |
#1A1A1B |
surface |
reddit-surface-dark |
#272729 |
surface-elevated |
reddit-surface-elevated-dark |
#343536 |
text-primary |
reddit-text-on-dark |
#D7DADC |
text-secondary |
reddit-text-secondary-dark |
#818384 |
text-tertiary |
reddit-text-secondary-dark |
#818384 |
primary |
reddit-orange |
#FF4500 |
primary-hover |
reddit-orange-dark |
#CC3700 |
accent |
reddit-orange |
#FF4500 |
accent-hover |
reddit-orange-dark |
#CC3700 |
warning |
reddit-orange |
#FF4500 |
warning-hover |
reddit-orange-dark |
#CC3700 |
error |
reddit-orange |
#FF4500 |
success |
reddit-orange |
#FF4500 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
reddit-orange |
#FF4500 |
on-identity |
reddit-white |
#FFFFFF |
primary |
reddit-orange |
#FF4500 |
primary-hover |
reddit-orange-dark |
#CC3700 |
accent |
reddit-orange |
#FF4500 |
accent-hover |
reddit-orange-dark |
#CC3700 |
upvote |
reddit-orange |
#FF4500 |
downvote |
reddit-downvote-blue |
#7193FF |
background-light |
reddit-white |
#FFFFFF |
background-dark |
reddit-canvas-dark |
#1A1A1B |
surface-light |
reddit-near-white |
#F6F7F8 |
surface-dark |
reddit-surface-dark |
#272729 |
surface-elevated-dark |
reddit-surface-elevated-dark |
#343536 |
text-primary-light |
reddit-text-primary |
#1A1A1B |
text-primary-dark |
reddit-text-on-dark |
#D7DADC |
text-secondary-light |
reddit-text-secondary |
#7C7C7C |
text-secondary-dark |
reddit-text-secondary-dark |
#818384 |
divider-light |
reddit-divider-light |
#EDEFF1 |
divider-dark |
reddit-divider-dark |
#343536 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → logo.mark
- allowed: reddit-orange, reddit-white, reddit-text-primary
- forbidden: any-non-brand-color, reddit-downvote-blue
The Snoo mark and Reddit wordmark render in Reddit Orange, white (on dark surfaces), or near-black (in monochrome contexts). The complementary downvote-blue is reserved for the down-vote affordance and never recolors the mark itself.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, snoo-redesign, cropped
Reddit's brand guidelines prescribe the Snoo mark and the wordmark in approved variants only. Recoloring, redrawing Snoo, or applying decorative effects violates the brand-use policy published at redditinc.com/brand.
variantSelection → logo
- use:
snoo-white - when:
backgroundColorScheme="dark"
On the "new Reddit" dark canvas, Snoo renders in white or in the orange-on-dark variant. The orange-on-light variant must not be placed directly on the dark canvas without sufficient contrast against the surface.
variantSelection → logo
- use:
snoo-orange - when:
backgroundColorScheme="light"
On light surfaces, Snoo renders in Reddit Orange. The white variant is reserved for dark canvases.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Reddit's near-black text (#1A1A1B) on Reddit White clears AA comfortably; the dark-mode text tone (#D7DADC) on the near-black canvas also clears AA.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Reddit Orange (#FF4500) on white reads at ~3.3:1 — meeting WCAG AA at large-text size. CTA buttons and primary affordances must clear this threshold on light canvas; the orange clears AA-large on the dark canvas as well.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, subreddit-impersonation
Reddit's brand-use guidance restricts use of the Snoo mark and the Reddit wordmark in ways that imply official affiliation, on competing-product surfaces, or on third-party merchandise without explicit license. Use of the mark to impersonate a Reddit-sanctioned subreddit is similarly forbidden.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The bi-modal canvas requires contrast verification on both the light and dark surfaces; AA is the floor on either.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Reddit's display typography sits in the Medium (500), Semi-Bold (600), and Bold (700) band on the marketing surface and the product UI. Lighter cuts compromise the platform's confident community voice.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: reddit-white, reddit-canvas-dark, reddit-text-primary
Reddit Orange is calibrated to read on both the historical white canvas and the new Reddit dark canvas. Pairing it with a third dominant chromatic value breaks the calibrated bi-modal composition.
Provenance
- Source: https://www.redditinc.com/brand
- License:
Proprietary — All Rights Reserved - Attribution: Reddit, the Reddit logotype, and Snoo are registered trademarks of Reddit, Inc. The brand-orange value (#FF4500) is documented in Reddit's public brand kit at redditinc.com/brand and independently verified via the simple-icons brand database, which cites reddit.com as the source. The "new Reddit" dark canvas (#1A1A1B) is documented in Reddit's redesign brand assets and surfaced on the Reddit web product's dark theme.
- Imported:
2026-05-18 - Notes: Reddit's identity is bi-modal: the light canvas is the historical canonical surface (orange on white, since 2005), while the modern mobile-app default and the user-selectable web dark mode render the orange on the published near-black canvas. The orange is the invariant; the canvas is the variable. The IBM Plex Sans reference is brand-atoms' read of Reddit's published typographic direction — Reddit has used Plex prominently in marketing since the 2023 brand evolution.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Reddit
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
A clear hierarchy in Reddit's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Reddit
[email protected]font · heading
IBM Plex Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
IBM Plex Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ reddit-orange #FF4500 accent-hover
→ reddit-orange-dark #CC3700 background-dark
→ reddit-canvas-dark #1A1A1B background-light
→ reddit-white #FFFFFF divider-dark
→ reddit-divider-dark #343536 divider-light
→ reddit-divider-light #EDEFF1 downvote
→ reddit-downvote-blue #7193FF identity
→ reddit-orange #FF4500 on-identity
→ reddit-white #FFFFFF primary
→ reddit-orange #FF4500 primary-hover
→ reddit-orange-dark #CC3700 surface-dark
→ reddit-surface-dark #272729 surface-elevated-dark
→ reddit-surface-elevated-dark #343536 surface-light
→ reddit-near-white #F6F7F8 text-primary-dark
→ reddit-text-on-dark #D7DADC text-primary-light
→ reddit-text-primary #1A1A1B text-secondary-dark
→ reddit-text-secondary-dark #818384 text-secondary-light
→ reddit-text-secondary #7C7C7C upvote
→ reddit-orange #FF4500 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading IBM Plex Sans prose
→ body IBM Plex Sans Palette mode mappings (from reddit)
Light mode (14 roles)
accent
→ reddit-orange accent-hover
→ reddit-orange-dark background
→ reddit-white error
→ reddit-orange primary
→ reddit-orange primary-hover
→ reddit-orange-dark success
→ reddit-orange surface
→ reddit-near-white surface-elevated
→ reddit-white text-primary
→ reddit-text-primary text-secondary
→ reddit-text-secondary text-tertiary
→ reddit-text-secondary warning
→ reddit-orange warning-hover
→ reddit-orange-dark Dark mode (14 roles)
accent
→ reddit-orange accent-hover
→ reddit-orange-dark background
→ reddit-canvas-dark error
→ reddit-orange primary
→ reddit-orange primary-hover
→ reddit-orange-dark success
→ reddit-orange surface
→ reddit-surface-dark surface-elevated
→ reddit-surface-elevated-dark text-primary
→ reddit-text-on-dark text-secondary
→ reddit-text-secondary-dark text-tertiary
→ reddit-text-secondary-dark warning
→ reddit-orange warning-hover
→ reddit-orange-dark Rules (10 typed constraints)
error · 8 rules
colorChoice logo.mark allowed reddit-orange, reddit-white, reddit-text-primary forbidden any-non-brand-color, reddit-downvote-blue The Snoo mark and Reddit wordmark render in Reddit Orange, white (on dark surfaces), or near-black (in monochrome contexts). The complementary downvote-blue is reserved for the down-vote affordance and never recolors the mark itself.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, snoo-redesign, cropped Reddit's brand guidelines prescribe the Snoo mark and the wordmark in approved variants only. Recoloring, redrawing Snoo, or applying decorative effects violates the brand-use policy published at redditinc.com/brand.
variantSelection logo use snoo-white when backgroundColorScheme="dark" On the "new Reddit" dark canvas, Snoo renders in white or in the orange-on-dark variant. The orange-on-light variant must not be placed directly on the dark canvas without sufficient contrast against the surface.
variantSelection logo use snoo-orange when backgroundColorScheme="light" On light surfaces, Snoo renders in Reddit Orange. The white variant is reserved for dark canvases.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Reddit's near-black text (#1A1A1B) on Reddit White clears AA comfortably; the dark-mode text tone (#D7DADC) on the near-black canvas also clears AA.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Reddit Orange (#FF4500) on white reads at ~3.3:1 — meeting WCAG AA at large-text size. CTA buttons and primary affordances must clear this threshold on light canvas; the orange clears AA-large on the dark canvas as well.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, subreddit-impersonation Reddit's brand-use guidance restricts use of the Snoo mark and the Reddit wordmark in ways that imply official affiliation, on competing-product surfaces, or on third-party merchandise without explicit license. Use of the mark to impersonate a Reddit-sanctioned subreddit is similarly forbidden.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The bi-modal canvas requires contrast verification on both the light and dark surfaces; AA is the floor on either.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Reddit's display typography sits in the Medium (500), Semi-Bold (600), and Bold (700) band on the marketing surface and the product UI. Lighter cuts compromise the platform's confident community voice.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith reddit-white, reddit-canvas-dark, reddit-text-primary Reddit Orange is calibrated to read on both the historical white canvas and the new Reddit dark canvas. Pairing it with a third dominant chromatic value breaks the calibrated bi-modal composition.
Provenance
- Source
- https://www.redditinc.com/brand
- License
Proprietary — All Rights Reserved- Attribution
- Reddit, the Reddit logotype, and Snoo are registered trademarks of Reddit, Inc. The brand-orange value (#FF4500) is documented in Reddit's public brand kit at redditinc.com/brand and independently verified via the simple-icons brand database, which cites reddit.com as the source. The "new Reddit" dark canvas (#1A1A1B) is documented in Reddit's redesign brand assets and surfaced on the Reddit web product's dark theme.
- Imported
2026-05-18- Notes
- Reddit's identity is bi-modal: the light canvas is the historical canonical surface (orange on white, since 2005), while the modern mobile-app default and the user-selectable web dark mode render the orange on the published near-black canvas. The orange is the invariant; the canvas is the variable. The IBM Plex Sans reference is brand-atoms' read of Reddit's published typographic direction — Reddit has used Plex prominently in marketing since the 2023 brand evolution.