W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Harvard
Harvard University — the oldest institution of higher learning in the United States, whose institutional voice has rested on Crimson since the Class of 1858 adopted the colour. Harvard's central brand pairs Crimson (#A51C30) with black on a white canvas; a supporting core palette of saturated reds, greens, blues, yellows, turquoises, and purples carries editorial and data-visualization work without competing with the institutional crimson. The voice is restrained, scholarly, and protective of the wordmark and shield.
1 palette 4 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/harvard/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/harvard/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.
Harvard
Harvard University — the oldest institution of higher learning in the United States, whose institutional voice has rested on Crimson since the Class of 1858 adopted the colour. Harvard's central brand pairs Crimson (#A51C30) with black on a white canvas; a supporting core palette of saturated reds, greens, blues, yellows, turquoises, and purples carries editorial and data-visualization work without competing with the institutional crimson. The voice is restrained, scholarly, and protective of the wordmark and shield.
Tags: harvard, university, education, crimson, conservative-institutional, light-first
Atoms
Palette
Harvard · [email protected] · Proprietary — All Rights Reserved (Harvard trademarks)
The Harvard University brand palette as published in the Harvard SEAS brand style guide (the most accessible authoritative source for Harvard's core institutional Crimson and supporting palette). Crimson (#A51C30) is the dominant institutional colour; the core palette adds saturated reds, greens, blues, yellows, turquoises, and purples that pair with Crimson and Black to produce the editorial voice across Harvard's many surfaces.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Lora ([email protected]) |
OFL-1.1 | serif |
body |
Inter ([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 |
|---|---|---|
crimson |
Crimson | #A51C30 |
black |
Black | #1E1E1E |
white |
White | #FFFFFF |
grey |
Grey | #93A1AD |
red |
Red | #ED1B34 |
salmon |
Salmon | #EC8F9C |
green |
Green | #4DB848 |
lime-green |
Lime Green | #CBDB2A |
blue |
Blue | #4E88C7 |
sky-blue |
Sky Blue | #95B5DF |
warm-yellow |
Warm Yellow | #FCB315 |
yellow |
Yellow | #FFDE2D |
turquoise |
Turquoise | #00AAAD |
aquamarine |
Aquamarine | #77CED9 |
purple |
Purple | #946EB7 |
lavender |
Lavender | #BB89CA |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
grey |
#93A1AD |
surface-elevated |
white |
#FFFFFF |
text-primary |
black |
#1E1E1E |
text-secondary |
black |
#1E1E1E |
text-tertiary |
grey |
#93A1AD |
primary |
crimson |
#A51C30 |
primary-hover |
red |
#ED1B34 |
accent |
crimson |
#A51C30 |
accent-hover |
red |
#ED1B34 |
link |
blue |
#4E88C7 |
link-hover |
crimson |
#A51C30 |
warning |
warm-yellow |
#FCB315 |
warning-hover |
yellow |
#FFDE2D |
error |
red |
#ED1B34 |
success |
green |
#4DB848 |
border |
grey |
#93A1AD |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#1E1E1E |
surface |
grey |
#93A1AD |
surface-elevated |
grey |
#93A1AD |
text-primary |
white |
#FFFFFF |
text-secondary |
grey |
#93A1AD |
text-tertiary |
grey |
#93A1AD |
primary |
crimson |
#A51C30 |
primary-hover |
red |
#ED1B34 |
accent |
salmon |
#EC8F9C |
accent-hover |
crimson |
#A51C30 |
link |
sky-blue |
#95B5DF |
link-hover |
blue |
#4E88C7 |
warning |
warm-yellow |
#FCB315 |
warning-hover |
yellow |
#FFDE2D |
error |
red |
#ED1B34 |
success |
lime-green |
#CBDB2A |
border |
grey |
#93A1AD |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
black |
#1E1E1E |
primary |
crimson |
#A51C30 |
primary-hover |
red |
#ED1B34 |
accent |
crimson |
#A51C30 |
accent-hover |
red |
#ED1B34 |
mark |
crimson |
#A51C30 |
success |
green |
#4DB848 |
warning |
warm-yellow |
#FCB315 |
error |
red |
#ED1B34 |
text-primary-light |
black |
#1E1E1E |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
black |
#1E1E1E |
surface-light |
grey |
#93A1AD |
surface-dark |
grey |
#93A1AD |
text-secondary-light |
black |
#1E1E1E |
text-tertiary-light |
grey |
#93A1AD |
border-light |
grey |
#93A1AD |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: crimson
- forbidden: red, salmon, blue, green, purple, turquoise, warm-yellow, yellow
Crimson (#A51C30) is Harvard's institutional colour and the only swatch permitted to act as the primary brand anchor. The Harvard brand-style guidance places Crimson as the dominant colour for materials, with the core palette providing accents — not substitutes.
colorChoice → roles.colors.mark
- allowed: crimson, black, white
- forbidden: red, salmon, blue, green, purple, turquoise
The Harvard wordmark and shield are reproduced in Crimson, solid black, or solid white (reversed) only. Accent palette colours MUST NOT be used to colorize the institutional mark.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Harvard Black (#1E1E1E) on white gives ~17:1 — clears AAA. As a research university with extensive scholarly content and obligations under Section 504 / ADA to its student body and the public, Harvard's core text-on-canvas pairs target the enhanced 7:1 floor.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted, cropped
Harvard's trademark guidance prohibits stretching, rotating, recolouring, outlining, applying drop-shadow or gradient fills, or placing the wordmark or shield on busy photographic backgrounds. Marks render only in approved colourways with documented clear-space.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Harvard's editorial hierarchy pairs a large serif display with body text at a minimum 1.5× ratio. The scholarly voice the institution projects depends on that explicit hierarchy between display and prose.
contextRestriction → roles.colors.error
- forbiddenContexts: confirmation, completion, data-viz-positive
- allowedContexts: error-state, destructive-action, validation-failure
Red (#ED1B34) is Harvard's saturated digital accent and the documented error / destructive-action signal. Reusing it for confirmation or positive data-viz inverts the established semantic role and conflicts with Crimson sitting beside it on Harvard surfaces.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
Harvard's editorial system uses Regular (400), Medium (500), SemiBold (600), and Bold (700) weights across surfaces. Display ultra-heavy cuts (800/900) are not part of the documented institutional ramp.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Harvard's 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, grey
- doesNotPairWith: red, salmon, purple
Crimson reads cleanest on white, near-black, or the cool Harvard grey. Adjacent to the saturated accent Red the two hues vibrate without resolving into hierarchy; adjacent to Salmon or Purple the editorial accents compete with the institutional crimson for attention.
Provenance
- Source: https://seas.harvard.edu/office-communications/brand-style-guide/color-palette
- License:
Proprietary — All Rights Reserved (Harvard trademarks) - Attribution: The President and Fellows of Harvard College — visual identity captured from the Harvard SEAS brand style guide, which publishes the canonical institutional Crimson (#A51C30) consistent with Harvard's central trademark guidance. "Harvard," "Veritas," the Harvard shield, and the Harvard wordmark are registered trademarks of the President and Fellows of Harvard College.
- Imported:
2026-05-19 - Notes: trademark.harvard.edu (the central reference URL named in the task brief) returned HTTP 403 / Forbidden on WebFetch. The Harvard SEAS brand-style page is the most accessible authoritative source for the institutional Crimson hex value (#A51C30) and the core supporting palette. This atom is scoped to the parent institution only — the individual Harvard schools (HBS, HMS, GSE, SEAS, HLS, GSAS, the Library) each publish their own atom-eligible identity variants but are out of scope for this brand atom. Harvard's serifed institutional voice is supported by lora@1 as the catalogue substitute for proprietary serif faces, inter@1 as the sans, and jetbrainsmono-nerdfont@1 for code. Assets are kept empty per trademark policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Harvard
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.
Harvard
A clear hierarchy in Harvard'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
Harvard
[email protected]font · heading
Lora
[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
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
→ crimson #A51C30 accent-hover
→ red #ED1B34 background-dark
→ black #1E1E1E background-light
→ white #FFFFFF border-light
→ grey #93A1AD error
→ red #ED1B34 identity
→ white #FFFFFF mark
→ crimson #A51C30 on-identity
→ black #1E1E1E primary
→ crimson #A51C30 primary-hover
→ red #ED1B34 success
→ green #4DB848 surface-dark
→ grey #93A1AD surface-light
→ grey #93A1AD text-primary-dark
→ white #FFFFFF text-primary-light
→ black #1E1E1E text-secondary-light
→ black #1E1E1E text-tertiary-light
→ grey #93A1AD warning
→ warm-yellow #FCB315 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Lora prose
→ body Inter Palette mode mappings (from harvard)
Light mode (17 roles)
accent
→ crimson accent-hover
→ red background
→ white border
→ grey error
→ red link
→ blue link-hover
→ crimson primary
→ crimson primary-hover
→ red success
→ green surface
→ grey surface-elevated
→ white text-primary
→ black text-secondary
→ black text-tertiary
→ grey warning
→ warm-yellow warning-hover
→ yellow Dark mode (17 roles)
accent
→ salmon accent-hover
→ crimson background
→ black border
→ grey error
→ red link
→ sky-blue link-hover
→ blue primary
→ crimson primary-hover
→ red success
→ lime-green surface
→ grey surface-elevated
→ grey text-primary
→ white text-secondary
→ grey text-tertiary
→ grey warning
→ warm-yellow warning-hover
→ yellow Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed crimson forbidden red, salmon, blue, green, purple, turquoise, warm-yellow, yellow Crimson (#A51C30) is Harvard's institutional colour and the only swatch permitted to act as the primary brand anchor. The Harvard brand-style guidance places Crimson as the dominant colour for materials, with the core palette providing accents — not substitutes.
colorChoice roles.colors.mark allowed crimson, black, white forbidden red, salmon, blue, green, purple, turquoise The Harvard wordmark and shield are reproduced in Crimson, solid black, or solid white (reversed) only. Accent palette colours MUST NOT be used to colorize the institutional mark.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Harvard Black (#1E1E1E) on white gives ~17:1 — clears AAA. As a research university with extensive scholarly content and obligations under Section 504 / ADA to its student body and the public, Harvard's core text-on-canvas pairs target the enhanced 7:1 floor.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted, cropped Harvard's trademark guidance prohibits stretching, rotating, recolouring, outlining, applying drop-shadow or gradient fills, or placing the wordmark or shield on busy photographic backgrounds. Marks render only in approved colourways with documented clear-space.
fontPairing typography.display requires prose minSizeRatio 1.5 Harvard's editorial hierarchy pairs a large serif display with body text at a minimum 1.5× ratio. The scholarly voice the institution projects depends on that explicit hierarchy between display and prose.
contextRestriction roles.colors.error forbiddenContexts confirmation, completion, data-viz-positive allowedContexts error-state, destructive-action, validation-failure Red (#ED1B34) is Harvard's saturated digital accent and the documented error / destructive-action signal. Reusing it for confirmation or positive data-viz inverts the established semantic role and conflicts with Crimson sitting beside it on Harvard surfaces.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 Harvard's editorial system uses Regular (400), Medium (500), SemiBold (600), and Bold (700) weights across surfaces. Display ultra-heavy cuts (800/900) are not part of the documented institutional ramp.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Harvard's 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, grey doesNotPairWith red, salmon, purple Crimson reads cleanest on white, near-black, or the cool Harvard grey. Adjacent to the saturated accent Red the two hues vibrate without resolving into hierarchy; adjacent to Salmon or Purple the editorial accents compete with the institutional crimson for attention.
Provenance
- Source
- https://seas.harvard.edu/office-communications/brand-style-guide/color-palette
- License
Proprietary — All Rights Reserved (Harvard trademarks)- Attribution
- The President and Fellows of Harvard College — visual identity captured from the Harvard SEAS brand style guide, which publishes the canonical institutional Crimson (#A51C30) consistent with Harvard's central trademark guidance. "Harvard," "Veritas," the Harvard shield, and the Harvard wordmark are registered trademarks of the President and Fellows of Harvard College.
- Imported
2026-05-19- Notes
- trademark.harvard.edu (the central reference URL named in the task brief) returned HTTP 403 / Forbidden on WebFetch. The Harvard SEAS brand-style page is the most accessible authoritative source for the institutional Crimson hex value (#A51C30) and the core supporting palette. This atom is scoped to the parent institution only — the individual Harvard schools (HBS, HMS, GSE, SEAS, HLS, GSAS, the Library) each publish their own atom-eligible identity variants but are out of scope for this brand atom. Harvard's serifed institutional voice is supported by lora@1 as the catalogue substitute for proprietary serif faces, inter@1 as the sans, and jetbrainsmono-nerdfont@1 for code. Assets are kept empty per trademark policy.