W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
MIT
The Massachusetts Institute of Technology — the research university whose institutional identity rests on three core colours (MIT Red, Silver Gray, Bright Red) plus black and white. MIT's brand voice is direct, technical, and confident: rigorous typography, restrained colour, and a deliberate refusal of decorative treatment on the seal and wordmark. The expanded palette adds high-chroma pinks, purples, blues, greens, and a yellow that MIT pairs with the core for editorial and digital surfaces while keeping MIT Red as the institutional anchor.
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/mit/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/mit/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.
MIT
The Massachusetts Institute of Technology — the research university whose institutional identity rests on three core colours (MIT Red, Silver Gray, Bright Red) plus black and white. MIT's brand voice is direct, technical, and confident: rigorous typography, restrained colour, and a deliberate refusal of decorative treatment on the seal and wordmark. The expanded palette adds high-chroma pinks, purples, blues, greens, and a yellow that MIT pairs with the core for editorial and digital surfaces while keeping MIT Red as the institutional anchor.
Tags: mit, university, education, research, conservative-institutional, light-first
Atoms
Palette
MIT · [email protected] · Proprietary — All Rights Reserved (MIT trademarks)
The Massachusetts Institute of Technology brand palette as published in the MIT Brand Guide. The institutional voice rests on three core swatches — MIT Red (#750014), Silver Gray (#8B959E), and Bright Red (#FF1423) — set against white and black. An expanded palette adds saturated pinks, purples, blues, greens, and a yellow that MIT pairs with the core for editorial and digital surfaces, plus a four-stop neutral gray ramp from Dark Gray 2 to Light Gray 1.
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 |
|---|---|---|
mit-red |
MIT Red | #750014 |
bright-red |
Bright Red | #FF1423 |
silver-gray |
Silver Gray | #8B959E |
black |
Black | #000000 |
white |
White | #FFFFFF |
dark-gray-1 |
Dark Gray 1 | #40464C |
dark-gray-2 |
Dark Gray 2 | #212326 |
dark-silver-gray |
Dark Silver Gray | #626A73 |
light-silver-gray |
Light Silver Gray | #B8C2CC |
light-gray-1 |
Light Gray 1 | #F2F4F8 |
light-gray-2 |
Light Gray 2 | #DDE1E6 |
dark-pink |
Dark Pink | #750062 |
pink |
Pink | #FF14F0 |
light-pink |
Light Pink | #FFB3FF |
dark-purple |
Dark Purple | #3E006B |
purple |
Purple | #9933FF |
light-purple |
Light Purple | #BFB3FF |
dark-blue |
Dark Blue | #002896 |
blue |
Blue | #1966FF |
light-blue |
Light Blue | #99EBFF |
dark-green |
Dark Green | #004D1A |
green |
Green | #00AD00 |
light-green |
Light Green | #AAFF33 |
yellow |
Yellow | #FFEB00 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
light-gray-1 |
#F2F4F8 |
surface-elevated |
white |
#FFFFFF |
text-primary |
dark-gray-2 |
#212326 |
text-secondary |
dark-gray-1 |
#40464C |
text-tertiary |
dark-silver-gray |
#626A73 |
primary |
mit-red |
#750014 |
primary-hover |
bright-red |
#FF1423 |
accent |
bright-red |
#FF1423 |
accent-hover |
mit-red |
#750014 |
warning |
yellow |
#FFEB00 |
warning-hover |
yellow |
#FFEB00 |
error |
bright-red |
#FF1423 |
success |
green |
#00AD00 |
border |
light-gray-2 |
#DDE1E6 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
dark-gray-2 |
#212326 |
surface |
dark-gray-1 |
#40464C |
surface-elevated |
dark-silver-gray |
#626A73 |
text-primary |
white |
#FFFFFF |
text-secondary |
light-silver-gray |
#B8C2CC |
text-tertiary |
silver-gray |
#8B959E |
primary |
bright-red |
#FF1423 |
primary-hover |
mit-red |
#750014 |
accent |
bright-red |
#FF1423 |
accent-hover |
mit-red |
#750014 |
warning |
yellow |
#FFEB00 |
warning-hover |
yellow |
#FFEB00 |
error |
bright-red |
#FF1423 |
success |
light-green |
#AAFF33 |
border |
dark-silver-gray |
#626A73 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
dark-gray-2 |
#212326 |
primary |
mit-red |
#750014 |
primary-hover |
bright-red |
#FF1423 |
accent |
bright-red |
#FF1423 |
accent-hover |
mit-red |
#750014 |
mark |
mit-red |
#750014 |
success |
green |
#00AD00 |
warning |
yellow |
#FFEB00 |
error |
bright-red |
#FF1423 |
text-primary-light |
dark-gray-2 |
#212326 |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
dark-gray-2 |
#212326 |
surface-light |
light-gray-1 |
#F2F4F8 |
surface-dark |
dark-gray-1 |
#40464C |
text-secondary-light |
dark-gray-1 |
#40464C |
text-tertiary-light |
dark-silver-gray |
#626A73 |
border-light |
light-gray-2 |
#DDE1E6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: mit-red, bright-red
- forbidden: pink, dark-pink, purple, blue, green, yellow
MIT Red (#750014) is the institutional crimson and the only colour authorized to act as the primary brand mark fill. Bright Red (#FF1423) is permitted as a digital activation accent but the MIT Brand Guide is explicit that Bright Red "is not a replacement for MIT Red." The expanded-palette chromas are for editorial accent only and must not stand in for the primary institutional colour.
colorChoice → roles.colors.mark
- allowed: mit-red, black
- forbidden: bright-red, silver-gray, pink, purple, blue, green, yellow
The MIT wordmark and seal are reproduced in MIT Red on light surfaces or in black for single-colour and embossed use. Bright Red and the expanded palette chromas are reserved for editorial accents and digital states, not for the institutional mark itself.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Dark Gray 2 (#212326) on white gives ~17:1 — clears AAA. As a research university with extensive long-form scholarly content (theses, OCW, lab pages), MIT's surfaces target the enhanced 7:1 floor rather than the AA 4.5:1 minimum.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted, cropped
The MIT Brand Guide prohibits stretching, rotating, recolouring, outlining, applying drop-shadow or gradient fills, or placing the wordmark on busy photographic backgrounds. The mark renders only in approved colourways on uncluttered backgrounds with documented clear-space.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
MIT's typographic hierarchy pairs a large display sans with body sans at a minimum 1.5× ratio. Closing the gap below 1.5× destroys the scannability the brand guide assumes for hero modules and section openers.
contextRestriction → roles.colors.error
- forbiddenContexts: confirmation, completion, data-viz-positive
- allowedContexts: error-state, destructive-action, validation-failure
Bright Red (#FF1423) is MIT's digital activation / alert colour. Reusing it for confirmation or positive data-viz inverts the established meaning and conflicts with the digital colour's documented role.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
MIT's editorial system on brand.mit.edu uses Regular (400), Medium (500), SemiBold (600), and Bold (700) for headings and body. 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. The institution's scholarly, long-form posture and obligations under Section 504 / ADA to its student and research community justify aiming above the AA floor where core text and background pairs allow it.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: white, light-gray-1, black, silver-gray
- doesNotPairWith: pink, dark-pink, bright-red
MIT Red reads cleanest on white, soft light gray, or black. Adjacent to Bright Red it loses chromatic separation; next to Pink or Dark Pink the warm reds compete for attention and obscure the institutional voice.
Provenance
- Source: https://brand.mit.edu/color
- License:
Proprietary — All Rights Reserved (MIT trademarks) - Attribution: Massachusetts Institute of Technology — visual identity captured from the MIT Brand Guide (brand.mit.edu). "MIT," the MIT name, the MIT seal, and the MIT wordmark are registered trademarks of the Massachusetts Institute of Technology.
- Imported:
2026-05-19 - Notes: MIT's institutional wordmark uses a proprietary face (the MIT Logo Letters); body and display type on brand.mit.edu pair a geometric sans with a serif. This atom references inter@1 as the open-source sans substitute, lora@1 as the serif substitute, and jetbrainsmono-nerdfont@1 for code. The proprietary faces are not publicly distributed and assets are kept empty per trademark policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by MIT
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.
MIT
A clear hierarchy in MIT'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
MIT
[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
→ bright-red #FF1423 accent-hover
→ mit-red #750014 background-dark
→ dark-gray-2 #212326 background-light
→ white #FFFFFF border-light
→ light-gray-2 #DDE1E6 error
→ bright-red #FF1423 identity
→ white #FFFFFF mark
→ mit-red #750014 on-identity
→ dark-gray-2 #212326 primary
→ mit-red #750014 primary-hover
→ bright-red #FF1423 success
→ green #00AD00 surface-dark
→ dark-gray-1 #40464C surface-light
→ light-gray-1 #F2F4F8 text-primary-dark
→ white #FFFFFF text-primary-light
→ dark-gray-2 #212326 text-secondary-light
→ dark-gray-1 #40464C text-tertiary-light
→ dark-silver-gray #626A73 warning
→ yellow #FFEB00 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from mit)
Light mode (15 roles)
accent
→ bright-red accent-hover
→ mit-red background
→ white border
→ light-gray-2 error
→ bright-red primary
→ mit-red primary-hover
→ bright-red success
→ green surface
→ light-gray-1 surface-elevated
→ white text-primary
→ dark-gray-2 text-secondary
→ dark-gray-1 text-tertiary
→ dark-silver-gray warning
→ yellow warning-hover
→ yellow Dark mode (15 roles)
accent
→ bright-red accent-hover
→ mit-red background
→ dark-gray-2 border
→ dark-silver-gray error
→ bright-red primary
→ bright-red primary-hover
→ mit-red success
→ light-green surface
→ dark-gray-1 surface-elevated
→ dark-silver-gray text-primary
→ white text-secondary
→ light-silver-gray text-tertiary
→ silver-gray warning
→ yellow warning-hover
→ yellow Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed mit-red, bright-red forbidden pink, dark-pink, purple, blue, green, yellow MIT Red (#750014) is the institutional crimson and the only colour authorized to act as the primary brand mark fill. Bright Red (#FF1423) is permitted as a digital activation accent but the MIT Brand Guide is explicit that Bright Red "is not a replacement for MIT Red." The expanded-palette chromas are for editorial accent only and must not stand in for the primary institutional colour.
colorChoice roles.colors.mark allowed mit-red, black forbidden bright-red, silver-gray, pink, purple, blue, green, yellow The MIT wordmark and seal are reproduced in MIT Red on light surfaces or in black for single-colour and embossed use. Bright Red and the expanded palette chromas are reserved for editorial accents and digital states, not for the institutional mark itself.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Dark Gray 2 (#212326) on white gives ~17:1 — clears AAA. As a research university with extensive long-form scholarly content (theses, OCW, lab pages), MIT's surfaces target the enhanced 7:1 floor rather than the AA 4.5:1 minimum.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted, cropped The MIT Brand Guide prohibits stretching, rotating, recolouring, outlining, applying drop-shadow or gradient fills, or placing the wordmark on busy photographic backgrounds. The mark renders only in approved colourways on uncluttered backgrounds with documented clear-space.
fontPairing typography.display requires prose minSizeRatio 1.5 MIT's typographic hierarchy pairs a large display sans with body sans at a minimum 1.5× ratio. Closing the gap below 1.5× destroys the scannability the brand guide assumes for hero modules and section openers.
contextRestriction roles.colors.error forbiddenContexts confirmation, completion, data-viz-positive allowedContexts error-state, destructive-action, validation-failure Bright Red (#FF1423) is MIT's digital activation / alert colour. Reusing it for confirmation or positive data-viz inverts the established meaning and conflicts with the digital colour's documented role.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 MIT's editorial system on brand.mit.edu uses Regular (400), Medium (500), SemiBold (600), and Bold (700) for headings and body. 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. The institution's scholarly, long-form posture and obligations under Section 504 / ADA to its student and research community justify aiming above the AA floor where core text and background pairs allow it.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith white, light-gray-1, black, silver-gray doesNotPairWith pink, dark-pink, bright-red MIT Red reads cleanest on white, soft light gray, or black. Adjacent to Bright Red it loses chromatic separation; next to Pink or Dark Pink the warm reds compete for attention and obscure the institutional voice.
Provenance
- Source
- https://brand.mit.edu/color
- License
Proprietary — All Rights Reserved (MIT trademarks)- Attribution
- Massachusetts Institute of Technology — visual identity captured from the MIT Brand Guide (brand.mit.edu). "MIT," the MIT name, the MIT seal, and the MIT wordmark are registered trademarks of the Massachusetts Institute of Technology.
- Imported
2026-05-19- Notes
- MIT's institutional wordmark uses a proprietary face (the MIT Logo Letters); body and display type on brand.mit.edu pair a geometric sans with a serif. This atom references inter@1 as the open-source sans substitute, lora@1 as the serif substitute, and jetbrainsmono-nerdfont@1 for code. The proprietary faces are not publicly distributed and assets are kept empty per trademark policy.