W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Stanford
Stanford University — the private research university whose institutional voice has rested on Cardinal red since the university's founding. The Stanford Identity Guide pairs Cardinal Red (#8C1515) with a warm black (#2E2D29) and Cool Grey on a white canvas, with a distinct digital palette that reserves Digital Blue for links and Digital Green for form validation. The brand voice is restrained, scholarly, and unmistakably West-Coast: confident colour, generous whitespace, and a refusal to use Digital Red as a stand-in for Cardinal.
1 palette 4 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/stanford/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/stanford/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.
Stanford
Stanford University — the private research university whose institutional voice has rested on Cardinal red since the university's founding. The Stanford Identity Guide pairs Cardinal Red (#8C1515) with a warm black (#2E2D29) and Cool Grey on a white canvas, with a distinct digital palette that reserves Digital Blue for links and Digital Green for form validation. The brand voice is restrained, scholarly, and unmistakably West-Coast: confident colour, generous whitespace, and a refusal to use Digital Red as a stand-in for Cardinal.
Tags: stanford, university, education, cardinal, conservative-institutional, light-first
Atoms
Palette
Stanford · [email protected] · Proprietary — All Rights Reserved (Stanford trademarks)
The Stanford University brand palette as published in Stanford's Identity Guide. The primary palette is Cardinal red, white, black (#2E2D29 — a warm near-black), and Cool Grey. A digital accent palette adds Digital Red, Digital Blue (links only), and Digital Green (form validation). Black tints in 10% increments expand the neutral ramp. The Identity Guide is emphatic that Cardinal Red is the institutional colour and Digital Red is an accent — not a replacement.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Source Sans 3 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Source Sans 3 ([email protected]) |
OFL-1.1 | sans-serif |
serif |
Lora ([email protected]) |
OFL-1.1 | serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
cardinal-red |
Cardinal Red | #8C1515 |
cardinal-red-light |
Cardinal Red Light | #B83A4B |
cardinal-red-dark |
Cardinal Red Dark | #820000 |
white |
White | #FFFFFF |
black |
Black | #2E2D29 |
cool-grey |
Cool Grey | #53565A |
black-90 |
Black 90 | #43423E |
black-10 |
Black 10 | #EAEAEA |
digital-red |
Digital Red | #B1040E |
digital-red-light |
Digital Red Light | #E50808 |
digital-red-dark |
Digital Red Dark | #820000 |
digital-blue |
Digital Blue | #006CB8 |
digital-blue-light |
Digital Blue Light | #6FC3FF |
digital-blue-dark |
Digital Blue Dark | #00548F |
digital-green |
Digital Green | #008566 |
digital-green-light |
Digital Green Light | #1AECBA |
digital-green-dark |
Digital Green Dark | #006F54 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
black-10 |
#EAEAEA |
surface-elevated |
white |
#FFFFFF |
text-primary |
black |
#2E2D29 |
text-secondary |
cool-grey |
#53565A |
text-tertiary |
black-90 |
#43423E |
primary |
cardinal-red |
#8C1515 |
primary-hover |
cardinal-red-dark |
#820000 |
accent |
digital-red |
#B1040E |
accent-hover |
digital-red-dark |
#820000 |
link |
digital-blue |
#006CB8 |
link-hover |
digital-blue-dark |
#00548F |
warning |
digital-red |
#B1040E |
warning-hover |
digital-red-dark |
#820000 |
error |
digital-red |
#B1040E |
success |
digital-green |
#008566 |
border |
black-10 |
#EAEAEA |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#2E2D29 |
surface |
black-90 |
#43423E |
surface-elevated |
cool-grey |
#53565A |
text-primary |
white |
#FFFFFF |
text-secondary |
black-10 |
#EAEAEA |
text-tertiary |
cool-grey |
#53565A |
primary |
cardinal-red-light |
#B83A4B |
primary-hover |
cardinal-red |
#8C1515 |
accent |
digital-red-light |
#E50808 |
accent-hover |
digital-red |
#B1040E |
link |
digital-blue-light |
#6FC3FF |
link-hover |
digital-blue |
#006CB8 |
warning |
digital-red-light |
#E50808 |
warning-hover |
digital-red |
#B1040E |
error |
digital-red-light |
#E50808 |
success |
digital-green-light |
#1AECBA |
border |
cool-grey |
#53565A |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
black |
#2E2D29 |
primary |
cardinal-red |
#8C1515 |
primary-hover |
cardinal-red-dark |
#820000 |
accent |
digital-red |
#B1040E |
accent-hover |
digital-red-dark |
#820000 |
mark |
cardinal-red |
#8C1515 |
success |
digital-green |
#008566 |
warning |
digital-red |
#B1040E |
error |
digital-red |
#B1040E |
text-primary-light |
black |
#2E2D29 |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
black |
#2E2D29 |
surface-light |
black-10 |
#EAEAEA |
surface-dark |
black-90 |
#43423E |
text-secondary-light |
cool-grey |
#53565A |
text-tertiary-light |
black-90 |
#43423E |
border-light |
black-10 |
#EAEAEA |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → roles.colors.primary
- allowed: cardinal-red, cardinal-red-dark
- forbidden: digital-red, digital-red-light, digital-blue, digital-green
Cardinal Red (#8C1515) is Stanford's institutional colour. The Stanford Identity Guide is explicit that Digital Red "is not a replacement for Cardinal red" and that Digital Blue and Digital Green are role-restricted (links and form validation). The primary brand colour role MUST be Cardinal — no exceptions.
colorChoice → roles.colors.mark
- allowed: cardinal-red, black, white
- forbidden: digital-red, digital-red-light, digital-blue, cardinal-red-light
The Stanford wordmark, block-S, and tree mark are reproduced in Cardinal Red, solid black, or solid white (reversed). Digital Red MUST NOT be used to colorize the Stanford wordmark per the published guidance.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Stanford Black (#2E2D29) on white gives ~14:1 — clears AAA. As a research university with extensive long-form scholarly content and obligations under ADA / Section 504, Stanford's surfaces target the enhanced 7:1 floor rather than the AA 4.5:1 minimum.
contextRestriction → roles.colors.link
- forbiddenContexts: error-state, confirmation, destructive-action, data-viz-positive
- allowedContexts: link, navigation
The Identity Guide reserves Digital Blue (#006CB8) "exclusively for links" on digital communications. Repurposing it for confirmation, error, or data-viz roles breaks the link-affordance contract Stanford visitors rely on.
contextRestriction → roles.colors.success
- forbiddenContexts: error-state, destructive-action, link
- allowedContexts: confirmation, completion, form-validation, data-viz-positive
Digital Green (#008566) is documented as the form-validation colour. Using it for errors or as a link colour inverts the semantics the Identity Guide assigns it.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted
Stanford's brand standards prohibit stretching, rotating, recolouring, outlining, or applying decorative treatments to the wordmark, block-S, or tree. Marks render in solid Cardinal Red, solid black, or solid white only, with documented clear-space.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Stanford's editorial hierarchy pairs a large display sans with body sans at a minimum 1.5× ratio. The Identity Guide depends on that gap for the legible scholarly voice the institution projects.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 600, 700
Stanford's Identity Guide type ramp anchors on Regular (400), SemiBold (600), and Bold (700) for headings and body. Heavier display cuts (800/900) are not part of the published institutional ramp.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Stanford's research / scholarly posture and its obligations to a diverse academic community justify the enhanced 7:1 target on core text-on-background pairs.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: white, black-10, black
- doesNotPairWith: digital-red, digital-red-light, cardinal-red-light
Cardinal Red reads cleanest on white, soft black-tint surfaces, or against the warm institutional black. Adjacent to Digital Red or the light Cardinal tint, the two reds vibrate without resolving into hierarchy — and the Identity Guide treats their roles as semantically distinct.
Provenance
- Source: https://identity.stanford.edu/design-elements/color/primary-colors/
- License:
Proprietary — All Rights Reserved (Stanford trademarks) - Attribution: The Board of Trustees of The Leland Stanford Junior University — visual identity captured from the Stanford Identity Guide (identity.stanford.edu). "Stanford," the Stanford block-S, the Stanford wordmark, and the Stanford tree are registered trademarks of the Board of Trustees.
- Imported:
2026-05-19 - Notes: Stanford ships a proprietary type system anchored on Source Sans 3 and Source Serif 4 (both open-source) for digital surfaces. This atom references inter@1 as the sans surrogate where Source Sans is not the chosen substitute, source-serif-4@1 is unavailable in catalogue so lora@1 is used as the serif substitute, and jetbrainsmono-nerdfont@1 for code. The Identity Guide is explicit that Digital Red is "not a replacement for Cardinal Red" and that Digital Blue is reserved for links. Assets are kept empty per trademark policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Stanford
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.
Stanford
A clear hierarchy in Stanford'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
Stanford
[email protected]font · heading
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · serif
Lora
[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
→ digital-red #B1040E accent-hover
→ digital-red-dark #820000 background-dark
→ black #2E2D29 background-light
→ white #FFFFFF border-light
→ black-10 #EAEAEA error
→ digital-red #B1040E identity
→ white #FFFFFF mark
→ cardinal-red #8C1515 on-identity
→ black #2E2D29 primary
→ cardinal-red #8C1515 primary-hover
→ cardinal-red-dark #820000 success
→ digital-green #008566 surface-dark
→ black-90 #43423E surface-light
→ black-10 #EAEAEA text-primary-dark
→ white #FFFFFF text-primary-light
→ black #2E2D29 text-secondary-light
→ cool-grey #53565A text-tertiary-light
→ black-90 #43423E warning
→ digital-red #B1040E Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Source Sans 3 prose
→ body Source Sans 3 Palette mode mappings (from stanford)
Light mode (17 roles)
accent
→ digital-red accent-hover
→ digital-red-dark background
→ white border
→ black-10 error
→ digital-red link
→ digital-blue link-hover
→ digital-blue-dark primary
→ cardinal-red primary-hover
→ cardinal-red-dark success
→ digital-green surface
→ black-10 surface-elevated
→ white text-primary
→ black text-secondary
→ cool-grey text-tertiary
→ black-90 warning
→ digital-red warning-hover
→ digital-red-dark Dark mode (17 roles)
accent
→ digital-red-light accent-hover
→ digital-red background
→ black border
→ cool-grey error
→ digital-red-light link
→ digital-blue-light link-hover
→ digital-blue primary
→ cardinal-red-light primary-hover
→ cardinal-red success
→ digital-green-light surface
→ black-90 surface-elevated
→ cool-grey text-primary
→ white text-secondary
→ black-10 text-tertiary
→ cool-grey warning
→ digital-red-light warning-hover
→ digital-red Rules (10 typed constraints)
error · 7 rules
colorChoice roles.colors.primary allowed cardinal-red, cardinal-red-dark forbidden digital-red, digital-red-light, digital-blue, digital-green Cardinal Red (#8C1515) is Stanford's institutional colour. The Stanford Identity Guide is explicit that Digital Red "is not a replacement for Cardinal red" and that Digital Blue and Digital Green are role-restricted (links and form validation). The primary brand colour role MUST be Cardinal — no exceptions.
colorChoice roles.colors.mark allowed cardinal-red, black, white forbidden digital-red, digital-red-light, digital-blue, cardinal-red-light The Stanford wordmark, block-S, and tree mark are reproduced in Cardinal Red, solid black, or solid white (reversed). Digital Red MUST NOT be used to colorize the Stanford wordmark per the published guidance.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Stanford Black (#2E2D29) on white gives ~14:1 — clears AAA. As a research university with extensive long-form scholarly content and obligations under ADA / Section 504, Stanford's surfaces target the enhanced 7:1 floor rather than the AA 4.5:1 minimum.
contextRestriction roles.colors.link forbiddenContexts error-state, confirmation, destructive-action, data-viz-positive allowedContexts link, navigation The Identity Guide reserves Digital Blue (#006CB8) "exclusively for links" on digital communications. Repurposing it for confirmation, error, or data-viz roles breaks the link-affordance contract Stanford visitors rely on.
contextRestriction roles.colors.success forbiddenContexts error-state, destructive-action, link allowedContexts confirmation, completion, form-validation, data-viz-positive Digital Green (#008566) is documented as the form-validation colour. Using it for errors or as a link colour inverts the semantics the Identity Guide assigns it.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted Stanford's brand standards prohibit stretching, rotating, recolouring, outlining, or applying decorative treatments to the wordmark, block-S, or tree. Marks render in solid Cardinal Red, solid black, or solid white only, with documented clear-space.
fontPairing typography.display requires prose minSizeRatio 1.5 Stanford's editorial hierarchy pairs a large display sans with body sans at a minimum 1.5× ratio. The Identity Guide depends on that gap for the legible scholarly voice the institution projects.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 600, 700 Stanford's Identity Guide type ramp anchors on Regular (400), SemiBold (600), and Bold (700) for headings and body. Heavier display cuts (800/900) are not part of the published institutional ramp.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Stanford's research / scholarly posture and its obligations to a diverse academic community justify the enhanced 7:1 target on core text-on-background pairs.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith white, black-10, black doesNotPairWith digital-red, digital-red-light, cardinal-red-light Cardinal Red reads cleanest on white, soft black-tint surfaces, or against the warm institutional black. Adjacent to Digital Red or the light Cardinal tint, the two reds vibrate without resolving into hierarchy — and the Identity Guide treats their roles as semantically distinct.
Provenance
- Source
- https://identity.stanford.edu/design-elements/color/primary-colors/
- License
Proprietary — All Rights Reserved (Stanford trademarks)- Attribution
- The Board of Trustees of The Leland Stanford Junior University — visual identity captured from the Stanford Identity Guide (identity.stanford.edu). "Stanford," the Stanford block-S, the Stanford wordmark, and the Stanford tree are registered trademarks of the Board of Trustees.
- Imported
2026-05-19- Notes
- Stanford ships a proprietary type system anchored on Source Sans 3 and Source Serif 4 (both open-source) for digital surfaces. This atom references inter@1 as the sans surrogate where Source Sans is not the chosen substitute, source-serif-4@1 is unavailable in catalogue so lora@1 is used as the serif substitute, and jetbrainsmono-nerdfont@1 for code. The Identity Guide is explicit that Digital Red is "not a replacement for Cardinal Red" and that Digital Blue is reserved for links. Assets are kept empty per trademark policy.