W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
TypeScript
TypeScript is JavaScript with syntax for types — a strongly-typed superset of JavaScript developed and maintained by Microsoft. The brand voice is precise, pragmatic, and editor-first: tooling is part of the message. The visual identity is intentionally minimal — a single blue rounded-square mark with the white "TS" lettermark inside it. Color appears as identity, hierarchy, and status; the brand does not lean on illustration.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/typescript/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/typescript/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.
TypeScript
TypeScript is JavaScript with syntax for types — a strongly-typed superset of JavaScript developed and maintained by Microsoft. The brand voice is precise, pragmatic, and editor-first: tooling is part of the message. The visual identity is intentionally minimal — a single blue rounded-square mark with the white "TS" lettermark inside it. Color appears as identity, hierarchy, and status; the brand does not lean on illustration.
Tags: typescript, programming-language, microsoft, blue, open-source
Atoms
Palette
TypeScript · [email protected] · Apache-2.0
TypeScript brand palette anchored on TS Blue (#3178C6) — the rounded-square mark fill with the white "TS" lettermark cut out from it. The brand is single-color with white as the reversed-out type; supporting neutrals provide page-level light and dark canvases.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Source Code Pro ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
ts-blue |
TypeScript Blue | #3178C6 |
ts-blue-bright |
TypeScript Blue Bright | #4F8AD0 |
ts-blue-dark |
TypeScript Blue Dark | #235A9E |
ts-black |
TypeScript Black | #0E1217 |
ts-charcoal |
TypeScript Charcoal | #1C232C |
ts-gray |
TypeScript Gray | #5C5C5C |
ts-light-gray |
TypeScript Light Gray | #D5D5D5 |
ts-off-white |
TypeScript Off-White | #F4F4F4 |
ts-white |
TypeScript White | #FFFFFF |
ts-success |
TypeScript Success | #2EA043 |
ts-warning |
TypeScript Warning | #D29922 |
ts-error |
TypeScript Error | #CF222E |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
ts-white |
#FFFFFF |
surface |
ts-off-white |
#F4F4F4 |
surface-elevated |
ts-white |
#FFFFFF |
text-primary |
ts-black |
#0E1217 |
text-secondary |
ts-gray |
#5C5C5C |
text-tertiary |
ts-blue-dark |
#235A9E |
primary |
ts-blue |
#3178C6 |
primary-hover |
ts-blue-dark |
#235A9E |
accent |
ts-blue-dark |
#235A9E |
accent-hover |
ts-blue |
#3178C6 |
warning |
ts-warning |
#D29922 |
warning-hover |
ts-warning |
#D29922 |
error |
ts-error |
#CF222E |
success |
ts-success |
#2EA043 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ts-black |
#0E1217 |
surface |
ts-charcoal |
#1C232C |
surface-elevated |
ts-charcoal |
#1C232C |
text-primary |
ts-white |
#FFFFFF |
text-secondary |
ts-light-gray |
#D5D5D5 |
text-tertiary |
ts-blue-bright |
#4F8AD0 |
primary |
ts-blue-bright |
#4F8AD0 |
primary-hover |
ts-blue |
#3178C6 |
accent |
ts-blue |
#3178C6 |
accent-hover |
ts-blue-bright |
#4F8AD0 |
warning |
ts-warning |
#D29922 |
warning-hover |
ts-warning |
#D29922 |
error |
ts-error |
#CF222E |
success |
ts-success |
#2EA043 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
ts-blue |
#3178C6 |
on-identity |
ts-white |
#FFFFFF |
primary |
ts-blue |
#3178C6 |
primary-hover |
ts-blue-dark |
#235A9E |
accent |
ts-blue-dark |
#235A9E |
accent-hover |
ts-blue |
#3178C6 |
background |
ts-white |
#FFFFFF |
surface |
ts-off-white |
#F4F4F4 |
text-primary |
ts-black |
#0E1217 |
text-secondary |
ts-gray |
#5C5C5C |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
forbiddenTreatment → logo
- treatments: shape-modified, integrated-into-product-logo, recolored, rotated, skewed, on-busy-photo
The TypeScript branding page explicitly forbids modifying the shape of the logo, integrating it into a product's own logo, or using it to name a product in a way that implies TypeScript endorsement.
colorChoice → roles.colors.identity
- allowed: ts-blue, ts-blue-bright
- forbidden: ts-success, ts-warning, ts-error
TS Blue (#3178C6) is the single canonical identity color; a brighter variant exists for dark-surface legibility. Status hues (success / warning / error) are functional and must not stand in as the brand identity color.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
TypeScript Black (#0E1217) on TS White exceeds 18:1 — well above the WCAG AA threshold for body text.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
TS Blue (#3178C6) on White sits around 5.0:1 — clears WCAG AA for body text. Consumers should verify against the actual rendered weight before using TS Blue for fine text on white surfaces.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The TypeScript brand is designed AA-compliant when TS Blue is used as the primary interactive color on the documented backgrounds.
contextRestriction → trademark.use
- forbiddenContexts: product-name-prefix, implied-endorsement
Microsoft's branding page forbids product names that imply TypeScript's endorsement (e.g. "TypeScript Lint", "TypeScript Plus"). Use the mark to indicate compatibility, not as part of a product identity.
⚠️ warning (1)
enumMembership → logo.variant
- allowed: ts-cutout-blue, ts-monochrome, typescript-lettermark
The TypeScript branding pack publishes three approved variants: the blue rounded-square with white TS cutout, a single-color monochrome variant, and a full "TypeScript" lettermark. Other variants are not approved.
💡 recommendation (1)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
typescriptlang.org uses a single humanist sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.
Provenance
- Source: https://www.typescriptlang.org/branding
- License:
Apache-2.0 - Attribution: TypeScript is a trademark of Microsoft Corporation; the TypeScript compiler and language libraries are released under the Apache-2.0 license. The typescriptlang.org branding page permits use of the blue lettermark for indicating TypeScript compatibility but forbids modifying the mark, integrating it into product logos, or naming a product in a way that implies TypeScript endorsement. This atom is brand-atoms' machine-readable encoding of those rules; no logos are bundled.
- Imported:
2026-05-18 - Notes: Microsoft does not publish a hex value alongside the TypeScript branding page; the canonical TS Blue (#3178C6) is the SVG fill in the design assets pack distributed at typescriptlang.org/branding and matches the value published by the simple-icons project.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by TypeScript
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.
TypeScript
A clear hierarchy in TypeScript'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
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
→ ts-blue-dark #235A9E accent-hover
→ ts-blue #3178C6 background
→ ts-white #FFFFFF identity
→ ts-blue #3178C6 on-identity
→ ts-white #FFFFFF primary
→ ts-blue #3178C6 primary-hover
→ ts-blue-dark #235A9E surface
→ ts-off-white #F4F4F4 text-primary
→ ts-black #0E1217 text-secondary
→ ts-gray #5C5C5C Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from typescript)
Light mode (14 roles)
accent
→ ts-blue-dark accent-hover
→ ts-blue background
→ ts-white error
→ ts-error primary
→ ts-blue primary-hover
→ ts-blue-dark success
→ ts-success surface
→ ts-off-white surface-elevated
→ ts-white text-primary
→ ts-black text-secondary
→ ts-gray text-tertiary
→ ts-blue-dark warning
→ ts-warning warning-hover
→ ts-warning Dark mode (14 roles)
accent
→ ts-blue accent-hover
→ ts-blue-bright background
→ ts-black error
→ ts-error primary
→ ts-blue-bright primary-hover
→ ts-blue success
→ ts-success surface
→ ts-charcoal surface-elevated
→ ts-charcoal text-primary
→ ts-white text-secondary
→ ts-light-gray text-tertiary
→ ts-blue-bright warning
→ ts-warning warning-hover
→ ts-warning Rules (8 typed constraints)
error · 6 rules
forbiddenTreatment logo treatments shape-modified, integrated-into-product-logo, recolored, rotated, skewed, on-busy-photo The TypeScript branding page explicitly forbids modifying the shape of the logo, integrating it into a product's own logo, or using it to name a product in a way that implies TypeScript endorsement.
colorChoice roles.colors.identity allowed ts-blue, ts-blue-bright forbidden ts-success, ts-warning, ts-error TS Blue (#3178C6) is the single canonical identity color; a brighter variant exists for dark-surface legibility. Status hues (success / warning / error) are functional and must not stand in as the brand identity color.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA TypeScript Black (#0E1217) on TS White exceeds 18:1 — well above the WCAG AA threshold for body text.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA TS Blue (#3178C6) on White sits around 5.0:1 — clears WCAG AA for body text. Consumers should verify against the actual rendered weight before using TS Blue for fine text on white surfaces.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The TypeScript brand is designed AA-compliant when TS Blue is used as the primary interactive color on the documented backgrounds.
contextRestriction trademark.use forbiddenContexts product-name-prefix, implied-endorsement Microsoft's branding page forbids product names that imply TypeScript's endorsement (e.g. "TypeScript Lint", "TypeScript Plus"). Use the mark to indicate compatibility, not as part of a product identity.
warning · 1 rule
enumMembership logo.variant allowed ts-cutout-blue, ts-monochrome, typescript-lettermark The TypeScript branding pack publishes three approved variants: the blue rounded-square with white TS cutout, a single-color monochrome variant, and a full "TypeScript" lettermark. Other variants are not approved.
recommendation · 1 rule
fontPairing typography.heading requires body minSizeRatio 1.5 typescriptlang.org uses a single humanist sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.
Provenance
- Source
- https://www.typescriptlang.org/branding
- License
Apache-2.0- Attribution
- TypeScript is a trademark of Microsoft Corporation; the TypeScript compiler and language libraries are released under the Apache-2.0 license. The typescriptlang.org branding page permits use of the blue lettermark for indicating TypeScript compatibility but forbids modifying the mark, integrating it into product logos, or naming a product in a way that implies TypeScript endorsement. This atom is brand-atoms' machine-readable encoding of those rules; no logos are bundled.
- Imported
2026-05-18- Notes
- Microsoft does not publish a hex value alongside the TypeScript branding page; the canonical TS Blue (#3178C6) is the SVG fill in the design assets pack distributed at typescriptlang.org/branding and matches the value published by the simple-icons project.