W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Reuters
Reuters is the global wire service of record — fast, factual, and built for redistribution into every newsroom on earth. The visual identity is anchored by the signature Reuters orange (#FA6400), instantly recognizable across the ticker, the wordmark, and the news graphics. Body content sits in a warm near-black on white; trusted-source links use the deep Reuters blue (#005DA2). The proprietary Knowledge typeface (the Reuters editorial type system) and Reuters Sans carry the voice; graphics and data viz draw from a published 9-hue, 6-step palette.
1 palette 4 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/reuters/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/reuters/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.
Reuters
Reuters is the global wire service of record — fast, factual, and built for redistribution into every newsroom on earth. The visual identity is anchored by the signature Reuters orange (#FA6400), instantly recognizable across the ticker, the wordmark, and the news graphics. Body content sits in a warm near-black on white; trusted-source links use the deep Reuters blue (#005DA2). The proprietary Knowledge typeface (the Reuters editorial type system) and Reuters Sans carry the voice; graphics and data viz draw from a published 9-hue, 6-step palette.
Tags: reuters, news, wire-service, journalism, brand, orange, sans, light-first
Atoms
Palette
Reuters · [email protected] · ISC / MIT (reuters-graphics open-source repos); brand identity remains property of Thomson Reuters
The Reuters palette, captured from the published reuters-graphics open-source design tokens. The Reuters identity is anchored by the signature orange ($tr-orange = #FA6400) — the brand's unmissable wire-service accent — paired with a deep navy blue ($tr-dark-blue = #005DA2) for trusted-source links and a tight warm-gray scale for body content. The system also publishes a full 6-step palette across orange, blue, navy, purple, red, yellow, lime, green, and brown for editorial graphics.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
serif |
PT Serif ([email protected]) |
OFL-1.1 | serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
tr-orange |
Reuters Orange | #FA6400 |
tr-dark-orange |
Reuters Dark Orange | #DC4300 |
tr-light-orange |
Reuters Light Orange | #FFA100 |
tr-dark-blue |
Reuters Dark Blue | #005DA2 |
tr-light-blue |
Reuters Light Blue | #0099C4 |
tr-muted-blue |
Reuters Muted Blue | #4386B9 |
tr-lighter-blue |
Reuters Lighter Blue | #7FACCE |
tr-superlight-blue |
Reuters Superlight Blue | #E5EEF5 |
tr-dark-grey |
Reuters Dark Grey | #404040 |
tr-medium-grey |
Reuters Medium Grey | #666666 |
tr-light-grey |
Reuters Light Grey | #AFAFAF |
tr-muted-grey |
Reuters Muted Grey | #D0D0D0 |
tr-hover-grey |
Reuters Hover Background Grey | #F8F8F8 |
tr-light-muted-grey |
Reuters Light Muted Grey | #F4F4F4 |
tr-ultra-light-grey |
Reuters Ultra Light Grey | #FAFAFA |
tr-dark-red |
Reuters Dark Red | #A00000 |
tr-light-red |
Reuters Light Red | #DC0A0A |
tr-dark-green |
Reuters Dark Green | #387C2B |
tr-light-green |
Reuters Light Green | #77A22D |
tr-dark-purple |
Reuters Dark Purple | #621F95 |
tr-light-purple |
Reuters Light Purple | #6E3AB7 |
black |
Black | #000000 |
white |
White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
tr-ultra-light-grey |
#FAFAFA |
surface-elevated |
white |
#FFFFFF |
text-primary |
tr-dark-grey |
#404040 |
text-secondary |
tr-medium-grey |
#666666 |
text-tertiary |
tr-light-grey |
#AFAFAF |
primary |
tr-dark-blue |
#005DA2 |
primary-hover |
tr-light-blue |
#0099C4 |
accent |
tr-orange |
#FA6400 |
accent-hover |
tr-dark-orange |
#DC4300 |
warning |
tr-light-orange |
#FFA100 |
error |
tr-dark-red |
#A00000 |
success |
tr-dark-green |
#387C2B |
border |
tr-muted-grey |
#D0D0D0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
tr-dark-grey |
#404040 |
surface |
tr-medium-grey |
#666666 |
surface-elevated |
tr-light-grey |
#AFAFAF |
text-primary |
white |
#FFFFFF |
text-secondary |
tr-muted-grey |
#D0D0D0 |
text-tertiary |
tr-light-grey |
#AFAFAF |
primary |
tr-light-blue |
#0099C4 |
primary-hover |
tr-dark-blue |
#005DA2 |
accent |
tr-orange |
#FA6400 |
accent-hover |
tr-light-orange |
#FFA100 |
warning |
tr-light-orange |
#FFA100 |
error |
tr-light-red |
#DC0A0A |
success |
tr-light-green |
#77A22D |
border |
tr-medium-grey |
#666666 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
tr-orange |
#FA6400 |
on-identity |
white |
#FFFFFF |
primary |
tr-dark-blue |
#005DA2 |
primary-hover |
tr-light-blue |
#0099C4 |
accent |
tr-orange |
#FA6400 |
accent-hover |
tr-dark-orange |
#DC4300 |
mark |
tr-orange |
#FA6400 |
success |
tr-dark-green |
#387C2B |
warning |
tr-light-orange |
#FFA100 |
error |
tr-dark-red |
#A00000 |
text-primary-light |
tr-dark-grey |
#404040 |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
tr-dark-grey |
#404040 |
surface-light |
tr-ultra-light-grey |
#FAFAFA |
surface-dark |
tr-medium-grey |
#666666 |
text-secondary-light |
tr-medium-grey |
#666666 |
text-tertiary-light |
tr-light-grey |
#AFAFAF |
border-light |
tr-muted-grey |
#D0D0D0 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Reuters Dark Grey (#404040) on white gives ~10.4:1 — past AAA. The wire-service voice favors quick, repeatable reading; the AAA contrast target supports the dense data tables and headline grids that define Reuters layouts.
colorChoice → roles.colors.mark
- allowed: tr-orange, tr-dark-orange, black
- forbidden: tr-dark-blue, tr-light-blue, tr-dark-red, tr-light-purple
The Reuters mark is rendered in Reuters orange or black — the orange variant is the signature wire-service identity. Recoloring the mark in the link blue or any secondary accent would conflict with the wordmark's place in the published asset standards.
contextRestriction → roles.colors.accent
- forbiddenContexts: default-link, body-text, error-state
- allowedContexts: wordmark, editorial-emphasis, ticker, kicker, call-to-action
Reuters orange carries identity meaning. The in-copy link color is tr-dark-blue; substituting the orange for a link would conflate the brand's identity signal with a navigation affordance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
The Reuters wordmark is a globally distributed identity mark that appears across thousands of partner publications every day. Stretching, rotating, recoloring, or applying gradients would erode the consistency that makes Reuters a trusted wire-service signal.
contextRestriction → roles.colors.success
- forbiddenContexts: error-state, destructive-action
- allowedContexts: data-viz-positive, confirmation, market-up
Reuters Dark Green is used in financial data viz to signal positive market movement. Reusing it for failure or destructive states would conflict with the established market-data color semantics.
⚠️ warning (2)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.25
Reuters editorial layouts pair a tighter display weight with the body sans at a measured size step. A 1.25× minimum preserves the wire-service grid rhythm where headline and lede share the same horizontal column.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Reuters serves a global, multilingual audience including data-table-heavy financial readers; the enhanced contrast target preserves legibility under reduced screen quality and high ambient light.
💡 recommendation (1)
compositionConstraint → roles.colors.accent
- pairsWith: white, tr-dark-grey, tr-ultra-light-grey
- doesNotPairWith: tr-dark-red, tr-light-red, tr-light-orange
Reuters orange reads cleanest against white or the warm dark-grey body color. Placing it adjacent to the alert reds or the lighter orange ramp collapses the chromatic hierarchy between identity (orange) and semantic state (red).
Provenance
- Source: https://github.com/reuters-graphics/graphics-svelte-components/blob/main/src/lib/SiteHeader/scss/_colors.scss
- License:
ISC / MIT (reuters-graphics open-source); brand identity remains property of Thomson Reuters - Attribution: Thomson Reuters — visual identity captured from the published reuters-graphics open-source SCSS at github.com/ reuters-graphics/graphics-svelte-components/SiteHeader/scss/ _colors.scss. Reuters, the Thomson Reuters mark, and the Knowledge / Reuters Sans typefaces are property of Thomson Reuters.
- Imported:
2026-05-19 - Notes: Derived from the reuters-graphics open-source SCSS tokens on 2026-05-19. The consumer reuters.com site was not directly reachable from this fetch context (datadome bot protection), so the brand atom relies on the verified open-source token file maintained by the same organization. The proprietary Knowledge / Reuters Sans typefaces are not publicly distributed; open-source substitute (Inter@1) is referenced.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Reuters
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.
Reuters
A clear hierarchy in Reuters'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
Reuters
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · serif
PT Serif
[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
→ tr-orange #FA6400 accent-hover
→ tr-dark-orange #DC4300 background-dark
→ tr-dark-grey #404040 background-light
→ white #FFFFFF border-light
→ tr-muted-grey #D0D0D0 error
→ tr-dark-red #A00000 identity
→ tr-orange #FA6400 mark
→ tr-orange #FA6400 on-identity
→ white #FFFFFF primary
→ tr-dark-blue #005DA2 primary-hover
→ tr-light-blue #0099C4 success
→ tr-dark-green #387C2B surface-dark
→ tr-medium-grey #666666 surface-light
→ tr-ultra-light-grey #FAFAFA text-primary-dark
→ white #FFFFFF text-primary-light
→ tr-dark-grey #404040 text-secondary-light
→ tr-medium-grey #666666 text-tertiary-light
→ tr-light-grey #AFAFAF warning
→ tr-light-orange #FFA100 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from reuters)
Light mode (14 roles)
accent
→ tr-orange accent-hover
→ tr-dark-orange background
→ white border
→ tr-muted-grey error
→ tr-dark-red primary
→ tr-dark-blue primary-hover
→ tr-light-blue success
→ tr-dark-green surface
→ tr-ultra-light-grey surface-elevated
→ white text-primary
→ tr-dark-grey text-secondary
→ tr-medium-grey text-tertiary
→ tr-light-grey warning
→ tr-light-orange Dark mode (14 roles)
accent
→ tr-orange accent-hover
→ tr-light-orange background
→ tr-dark-grey border
→ tr-medium-grey error
→ tr-light-red primary
→ tr-light-blue primary-hover
→ tr-dark-blue success
→ tr-light-green surface
→ tr-medium-grey surface-elevated
→ tr-light-grey text-primary
→ white text-secondary
→ tr-muted-grey text-tertiary
→ tr-light-grey warning
→ tr-light-orange Rules (8 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Reuters Dark Grey (#404040) on white gives ~10.4:1 — past AAA. The wire-service voice favors quick, repeatable reading; the AAA contrast target supports the dense data tables and headline grids that define Reuters layouts.
colorChoice roles.colors.mark allowed tr-orange, tr-dark-orange, black forbidden tr-dark-blue, tr-light-blue, tr-dark-red, tr-light-purple The Reuters mark is rendered in Reuters orange or black — the orange variant is the signature wire-service identity. Recoloring the mark in the link blue or any secondary accent would conflict with the wordmark's place in the published asset standards.
contextRestriction roles.colors.accent forbiddenContexts default-link, body-text, error-state allowedContexts wordmark, editorial-emphasis, ticker, kicker, call-to-action Reuters orange carries identity meaning. The in-copy link color is tr-dark-blue; substituting the orange for a link would conflate the brand's identity signal with a navigation affordance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo The Reuters wordmark is a globally distributed identity mark that appears across thousands of partner publications every day. Stretching, rotating, recoloring, or applying gradients would erode the consistency that makes Reuters a trusted wire-service signal.
contextRestriction roles.colors.success forbiddenContexts error-state, destructive-action allowedContexts data-viz-positive, confirmation, market-up Reuters Dark Green is used in financial data viz to signal positive market movement. Reusing it for failure or destructive states would conflict with the established market-data color semantics.
warning · 2 rules
fontPairing typography.heading requires body minSizeRatio 1.25 Reuters editorial layouts pair a tighter display weight with the body sans at a measured size step. A 1.25× minimum preserves the wire-service grid rhythm where headline and lede share the same horizontal column.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Reuters serves a global, multilingual audience including data-table-heavy financial readers; the enhanced contrast target preserves legibility under reduced screen quality and high ambient light.
recommendation · 1 rule
compositionConstraint roles.colors.accent pairsWith white, tr-dark-grey, tr-ultra-light-grey doesNotPairWith tr-dark-red, tr-light-red, tr-light-orange Reuters orange reads cleanest against white or the warm dark-grey body color. Placing it adjacent to the alert reds or the lighter orange ramp collapses the chromatic hierarchy between identity (orange) and semantic state (red).
Provenance
- Source
- https://github.com/reuters-graphics/graphics-svelte-components/blob/main/src/lib/SiteHeader/scss/_colors.scss
- License
ISC / MIT (reuters-graphics open-source); brand identity remains property of Thomson Reuters- Attribution
- Thomson Reuters — visual identity captured from the published reuters-graphics open-source SCSS at github.com/ reuters-graphics/graphics-svelte-components/SiteHeader/scss/ _colors.scss. Reuters, the Thomson Reuters mark, and the Knowledge / Reuters Sans typefaces are property of Thomson Reuters.
- Imported
2026-05-19- Notes
- Derived from the reuters-graphics open-source SCSS tokens on 2026-05-19. The consumer reuters.com site was not directly reachable from this fetch context (datadome bot protection), so the brand atom relies on the verified open-source token file maintained by the same organization. The proprietary Knowledge / Reuters Sans typefaces are not publicly distributed; open-source substitute (Inter@1) is referenced.