# TypeScript

> `typescript@1.0.0`

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** · `typescript@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Source Code Pro** `(source-code-pro@1.0.0)` | 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: `typescript@1.0.0` from the encyclopedia.*