TypeScript
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.
12 swatches 14 light roles 14 dark roles
Swatches
ts-blue
#3178C6
Primary brand color — the rounded-square mark fill. The "TS" lettermark sits on this blue in white.
ts-blue-bright
#4F8AD0
Brighter variant used on dark backgrounds for legibility.
ts-blue-dark
#235A9E
Darker variant used for hover states and shadows.
ts-black
#0E1217
Dark-mode page canvas.
ts-charcoal
#1C232C
Elevated dark surface for cards and panels.
ts-gray
#5C5C5C
Mid neutral for body text and dividers.
ts-light-gray
#D5D5D5
Hairline borders on light canvas.
ts-off-white
#F4F4F4
Subtle layered surface on the light canvas.
ts-white
#FFFFFF
Page canvas in light mode; reversed letter color on the mark.
ts-success
#2EA043
Status success color.
ts-warning
#D29922
Status warning color.
ts-error
#CF222E
Status error color.
Mode role mappings
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 Provenance
- Source
- https://www.typescriptlang.org/branding
- License
Apache-2.0- Attribution
- TypeScript is a trademark of Microsoft Corporation. The TypeScript compiler and language are released under the Apache-2.0 license; the typescriptlang.org branding page permits use of the blue lettermark for indicating TypeScript compatibility. The TS Blue hex (#3178C6) is the value published by the simple-icons project and matches the SVG distributed in the TypeScript Design Assets pack.
- Imported
-
2026-05-18 - Notes
- The TypeScript brand is intentionally minimal — a single blue plus white. The dark-mode role mapping below is brand-atoms' sensible inversion (deep navy canvas, TS blue identity preserved).