W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Cambridge
The University of Cambridge — the second-oldest English-speaking university and the institutional counterpart to Oxford. Cambridge is identified worldwide by Cambridge Blue, a distinctive light teal-cyan (#8EE8D8 contemporary / #85B09A heritage) that deliberately differentiates Cambridge from Oxford's deep navy. The contemporary brand pairs the light Cambridge Blue with a Cambridge Dark Blue (#133844) anchor and a five-family secondary palette (Crest, Cherry, Purple, Indigo, Green) carrying editorial and data-viz accents. The voice is heritage-aware, restrained, and protective of the University 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/cambridge/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/cambridge/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.
Cambridge
The University of Cambridge — the second-oldest English-speaking university and the institutional counterpart to Oxford. Cambridge is identified worldwide by Cambridge Blue, a distinctive light teal-cyan (#8EE8D8 contemporary / #85B09A heritage) that deliberately differentiates Cambridge from Oxford's deep navy. The contemporary brand pairs the light Cambridge Blue with a Cambridge Dark Blue (#133844) anchor and a five-family secondary palette (Crest, Cherry, Purple, Indigo, Green) carrying editorial and data-viz accents. The voice is heritage-aware, restrained, and protective of the University shield.
Tags: cambridge, university, education, cambridge-blue, heritage, conservative-institutional, light-first
Atoms
Palette
Cambridge · [email protected] · Proprietary — All Rights Reserved (Cambridge trademarks)
The University of Cambridge brand palette as published in the Cambridge brand resources / colour guidelines. The core palette is built around a Cambridge Blue family — a distinctive light teal-cyan (#8EE8D8) that differentiates Cambridge from Oxford's navy — alongside Cambridge Dark Blue (#133844), Warm Blue (#00BDB6), and Light Blue (#D1F9F1). A heritage Cambridge Blue (#85B09A) preserves the traditional cooler shade. Five secondary colour families (Crest, Cherry, Purple, Indigo, Green) each carry a four-stop ramp, and a four-stop greyscale (Slate 1–4) provides neutrals.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-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 |
|---|---|---|
cambridge-blue |
Cambridge Blue | #8EE8D8 |
cambridge-light-blue |
Cambridge Light Blue | #D1F9F1 |
cambridge-warm-blue |
Cambridge Warm Blue | #00BDB6 |
cambridge-dark-blue |
Cambridge Dark Blue | #133844 |
heritage-cambridge-blue |
Heritage Cambridge Blue | #85B09A |
light-crest |
Light Crest | #FFE2C8 |
warm-crest |
Warm Crest | #FFC392 |
crest |
Crest | #FD8153 |
dark-crest |
Dark Crest | #DD3025 |
light-cherry |
Light Cherry | #F2CAD8 |
warm-cherry |
Warm Cherry | #E18AAC |
cherry |
Cherry | #CD3572 |
dark-cherry |
Dark Cherry | #911449 |
light-purple |
Light Purple | #F2ECF8 |
warm-purple |
Warm Purple | #D1B7EB |
purple |
Purple | #A368DF |
dark-purple |
Dark Purple | #681FB1 |
light-indigo |
Light Indigo | #EBEDFB |
warm-indigo |
Warm Indigo | #B0B9F1 |
indigo |
Indigo | #5366E0 |
dark-indigo |
Dark Indigo | #29347A |
light-green |
Light Green | #DFF2EA |
warm-green |
Warm Green | #AFDFCB |
green |
Green | #4DB78C |
dark-green |
Dark Green | #13553A |
cambridge-judge-yellow |
Cambridge Judge Yellow | #FFB81C |
white |
White | #FFFFFF |
slate-1 |
Slate 1 | #ECEEF1 |
slate-2 |
Slate 2 | #B5BDC8 |
slate-3 |
Slate 3 | #546072 |
slate-4 |
Slate 4 | #232830 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
slate-1 |
#ECEEF1 |
surface-elevated |
white |
#FFFFFF |
text-primary |
slate-4 |
#232830 |
text-secondary |
slate-3 |
#546072 |
text-tertiary |
slate-2 |
#B5BDC8 |
primary |
cambridge-blue |
#8EE8D8 |
primary-hover |
cambridge-warm-blue |
#00BDB6 |
accent |
cambridge-warm-blue |
#00BDB6 |
accent-hover |
cambridge-dark-blue |
#133844 |
link |
indigo |
#5366E0 |
link-hover |
dark-indigo |
#29347A |
warning |
cambridge-judge-yellow |
#FFB81C |
warning-hover |
crest |
#FD8153 |
error |
dark-cherry |
#911449 |
success |
green |
#4DB78C |
border |
slate-2 |
#B5BDC8 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
cambridge-dark-blue |
#133844 |
surface |
slate-4 |
#232830 |
surface-elevated |
slate-3 |
#546072 |
text-primary |
white |
#FFFFFF |
text-secondary |
cambridge-light-blue |
#D1F9F1 |
text-tertiary |
slate-2 |
#B5BDC8 |
primary |
cambridge-blue |
#8EE8D8 |
primary-hover |
cambridge-warm-blue |
#00BDB6 |
accent |
cambridge-light-blue |
#D1F9F1 |
accent-hover |
cambridge-warm-blue |
#00BDB6 |
link |
warm-indigo |
#B0B9F1 |
link-hover |
indigo |
#5366E0 |
warning |
cambridge-judge-yellow |
#FFB81C |
warning-hover |
crest |
#FD8153 |
error |
warm-cherry |
#E18AAC |
success |
warm-green |
#AFDFCB |
border |
slate-3 |
#546072 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
slate-4 |
#232830 |
primary |
cambridge-blue |
#8EE8D8 |
primary-hover |
cambridge-warm-blue |
#00BDB6 |
accent |
cambridge-warm-blue |
#00BDB6 |
accent-hover |
cambridge-dark-blue |
#133844 |
mark |
cambridge-dark-blue |
#133844 |
success |
green |
#4DB78C |
warning |
cambridge-judge-yellow |
#FFB81C |
error |
dark-cherry |
#911449 |
text-primary-light |
slate-4 |
#232830 |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
cambridge-dark-blue |
#133844 |
surface-light |
slate-1 |
#ECEEF1 |
surface-dark |
slate-4 |
#232830 |
text-secondary-light |
slate-3 |
#546072 |
text-tertiary-light |
slate-2 |
#B5BDC8 |
border-light |
slate-2 |
#B5BDC8 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: cambridge-blue, cambridge-warm-blue, cambridge-dark-blue, heritage-cambridge-blue
- forbidden: crest, cherry, purple, indigo, green, cambridge-judge-yellow
Cambridge Blue (#8EE8D8 contemporary, #85B09A heritage, with #00BDB6 warm and #133844 dark) is the institutional colour family. The secondary palette families (Crest, Cherry, Purple, Indigo, Green) are editorial accents and Cambridge Judge Yellow is a school-specific heritage accent — none may substitute for the primary brand anchor at the parent-University level.
colorChoice → roles.colors.mark
- allowed: cambridge-dark-blue, slate-4, white
- forbidden: cambridge-blue, cambridge-warm-blue, crest, cherry, purple, indigo, cambridge-judge-yellow
The Cambridge University shield and wordmark are reproduced in Cambridge Dark Blue or near-black, or reversed in white. The light contemporary Cambridge Blue is the brand-block / canvas accent, not the mark fill — its low chroma against white would compromise the shield's legibility.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Slate 4 (#232830) on white gives ~15:1 — clears AAA. As a research university with statutory obligations under the UK Equality Act and extensive long-form scholarly content, Cambridge targets the enhanced 7:1 floor rather than the AA 4.5:1 minimum on core text-on-canvas pairs.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted, cropped
Cambridge's brand guidelines prohibit stretching, rotating, recolouring, outlining, applying drop-shadow or gradient fills, or placing the University shield or wordmark on busy photographic backgrounds. Marks render in approved colourways only with documented clear-space.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Cambridge's editorial hierarchy pairs a large display with body text at a minimum 1.5× ratio. The scholarly voice the institution projects depends on that explicit gap between display and prose.
contextRestriction → roles.colors.error
- forbiddenContexts: confirmation, completion, data-viz-positive
- allowedContexts: error-state, destructive-action, validation-failure
Dark Cherry (#911449) is the deep accent reserved for error and destructive-action signalling in the Cambridge secondary palette. Reusing it for confirmation or positive data-viz inverts the established semantic role.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
Cambridge's editorial type ramp uses Regular (400), Medium (500), SemiBold (600), and Bold (700) weights across surfaces. Heavier display 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. Cambridge's scholarly posture and obligations under the UK Equality Act to a diverse academic and public audience justify the enhanced 7:1 target on core text-on-background pairs.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: white, slate-1, cambridge-dark-blue, slate-4
- doesNotPairWith: warm-cherry, warm-purple, cambridge-judge-yellow
Cambridge Blue reads cleanest on white, the soft Slate 1 surface, or against the deep Cambridge Dark Blue / Slate 4 anchors. Adjacent to Warm Cherry or Warm Purple the teal-cyan loses its calm authority; adjacent to Cambridge Judge Yellow the school-specific heritage accent competes with the parent-University blue for visual weight.
Provenance
- Source: https://www.cam.ac.uk/brand-resources/guidelines/colour
- License:
Proprietary — All Rights Reserved (Cambridge trademarks) - Attribution: The Chancellor, Masters, and Scholars of the University of Cambridge — visual identity captured from the University of Cambridge brand-resources colour guidelines on cam.ac.uk. "Cambridge," "University of Cambridge," the Cambridge coat of arms, and the University shield are protected marks of the University of Cambridge.
- Imported:
2026-05-19 - Notes: The University publishes a proprietary type family for institutional use. This atom references inter@1 as the open-source sans substitute, lora@1 as the serif substitute consistent with Cambridge's heritage-aware voice, and jetbrainsmono-nerdfont@1 for code. The proprietary faces are not publicly distributed and assets are kept empty per trademark policy. The brand atom is scoped to the parent University only — the constituent colleges (Trinity, King's, St John's, etc.), Cambridge Judge Business School (which publishes its own identity using Cambridge Judge Yellow), and Cambridge University Press each carry distinct identities and are out of scope. Both the contemporary Cambridge Blue (#8EE8D8) and the heritage Cambridge Blue (#85B09A) are documented in the palette atom.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Cambridge
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.
Cambridge
A clear hierarchy in Cambridge'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
Cambridge
[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
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
→ cambridge-warm-blue #00BDB6 accent-hover
→ cambridge-dark-blue #133844 background-dark
→ cambridge-dark-blue #133844 background-light
→ white #FFFFFF border-light
→ slate-2 #B5BDC8 error
→ dark-cherry #911449 identity
→ white #FFFFFF mark
→ cambridge-dark-blue #133844 on-identity
→ slate-4 #232830 primary
→ cambridge-blue #8EE8D8 primary-hover
→ cambridge-warm-blue #00BDB6 success
→ green #4DB78C surface-dark
→ slate-4 #232830 surface-light
→ slate-1 #ECEEF1 text-primary-dark
→ white #FFFFFF text-primary-light
→ slate-4 #232830 text-secondary-light
→ slate-3 #546072 text-tertiary-light
→ slate-2 #B5BDC8 warning
→ cambridge-judge-yellow #FFB81C Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from cambridge)
Light mode (17 roles)
accent
→ cambridge-warm-blue accent-hover
→ cambridge-dark-blue background
→ white border
→ slate-2 error
→ dark-cherry link
→ indigo link-hover
→ dark-indigo primary
→ cambridge-blue primary-hover
→ cambridge-warm-blue success
→ green surface
→ slate-1 surface-elevated
→ white text-primary
→ slate-4 text-secondary
→ slate-3 text-tertiary
→ slate-2 warning
→ cambridge-judge-yellow warning-hover
→ crest Dark mode (17 roles)
accent
→ cambridge-light-blue accent-hover
→ cambridge-warm-blue background
→ cambridge-dark-blue border
→ slate-3 error
→ warm-cherry link
→ warm-indigo link-hover
→ indigo primary
→ cambridge-blue primary-hover
→ cambridge-warm-blue success
→ warm-green surface
→ slate-4 surface-elevated
→ slate-3 text-primary
→ white text-secondary
→ cambridge-light-blue text-tertiary
→ slate-2 warning
→ cambridge-judge-yellow warning-hover
→ crest Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed cambridge-blue, cambridge-warm-blue, cambridge-dark-blue, heritage-cambridge-blue forbidden crest, cherry, purple, indigo, green, cambridge-judge-yellow Cambridge Blue (#8EE8D8 contemporary, #85B09A heritage, with #00BDB6 warm and #133844 dark) is the institutional colour family. The secondary palette families (Crest, Cherry, Purple, Indigo, Green) are editorial accents and Cambridge Judge Yellow is a school-specific heritage accent — none may substitute for the primary brand anchor at the parent-University level.
colorChoice roles.colors.mark allowed cambridge-dark-blue, slate-4, white forbidden cambridge-blue, cambridge-warm-blue, crest, cherry, purple, indigo, cambridge-judge-yellow The Cambridge University shield and wordmark are reproduced in Cambridge Dark Blue or near-black, or reversed in white. The light contemporary Cambridge Blue is the brand-block / canvas accent, not the mark fill — its low chroma against white would compromise the shield's legibility.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Slate 4 (#232830) on white gives ~15:1 — clears AAA. As a research university with statutory obligations under the UK Equality Act and extensive long-form scholarly content, Cambridge targets the enhanced 7:1 floor rather than the AA 4.5:1 minimum on core text-on-canvas pairs.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted, cropped Cambridge's brand guidelines prohibit stretching, rotating, recolouring, outlining, applying drop-shadow or gradient fills, or placing the University shield or wordmark on busy photographic backgrounds. Marks render in approved colourways only with documented clear-space.
fontPairing typography.display requires prose minSizeRatio 1.5 Cambridge's editorial hierarchy pairs a large display with body text at a minimum 1.5× ratio. The scholarly voice the institution projects depends on that explicit gap between display and prose.
contextRestriction roles.colors.error forbiddenContexts confirmation, completion, data-viz-positive allowedContexts error-state, destructive-action, validation-failure Dark Cherry (#911449) is the deep accent reserved for error and destructive-action signalling in the Cambridge secondary palette. Reusing it for confirmation or positive data-viz inverts the established semantic role.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 Cambridge's editorial type ramp uses Regular (400), Medium (500), SemiBold (600), and Bold (700) weights across surfaces. Heavier display 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. Cambridge's scholarly posture and obligations under the UK Equality Act to a diverse academic and public audience justify the enhanced 7:1 target on core text-on-background pairs.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith white, slate-1, cambridge-dark-blue, slate-4 doesNotPairWith warm-cherry, warm-purple, cambridge-judge-yellow Cambridge Blue reads cleanest on white, the soft Slate 1 surface, or against the deep Cambridge Dark Blue / Slate 4 anchors. Adjacent to Warm Cherry or Warm Purple the teal-cyan loses its calm authority; adjacent to Cambridge Judge Yellow the school-specific heritage accent competes with the parent-University blue for visual weight.
Provenance
- Source
- https://www.cam.ac.uk/brand-resources/guidelines/colour
- License
Proprietary — All Rights Reserved (Cambridge trademarks)- Attribution
- The Chancellor, Masters, and Scholars of the University of Cambridge — visual identity captured from the University of Cambridge brand-resources colour guidelines on cam.ac.uk. "Cambridge," "University of Cambridge," the Cambridge coat of arms, and the University shield are protected marks of the University of Cambridge.
- Imported
2026-05-19- Notes
- The University publishes a proprietary type family for institutional use. This atom references inter@1 as the open-source sans substitute, lora@1 as the serif substitute consistent with Cambridge's heritage-aware voice, and jetbrainsmono-nerdfont@1 for code. The proprietary faces are not publicly distributed and assets are kept empty per trademark policy. The brand atom is scoped to the parent University only — the constituent colleges (Trinity, King's, St John's, etc.), Cambridge Judge Business School (which publishes its own identity using Cambridge Judge Yellow), and Cambridge University Press each carry distinct identities and are out of scope. Both the contemporary Cambridge Blue (#8EE8D8) and the heritage Cambridge Blue (#85B09A) are documented in the palette atom.