---
name: atlassian-design-reference
provider: DesignSkill (https://designskill.dev)
reference: atlassian.com
source_url: https://www.atlassian.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T08:01:56.380Z
mode: full-render
classification: reference_only
---

# Atlassian — Design Reference (measured)

Measured design tokens extracted from `https://www.atlassian.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 756 observation records.
- Primary action color observed as `#ffab00` (basis: cross-validated, confidence 0.67).
- Dominant font family: **Charlie Text** (×733; secondary Charlie Display ×497).
- Type scale observed at 8 sizes from 12px to 32px.
- Corner radius values in use: 20px, 3px, 2px, 10px….

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#ffab00` | cross-validated | 0.67 | ×30 |
| `{color.background}` | `#b7b9be` | declared | 0.92 | ×16 — --badge-background-color |
| `{color.ink}` | `#101214` | cross-validated | 0.95 | ×828 |
| `{color.muted}` | `#505258` | inferred | 0.7 | ×201 |
| `{color.surface}` | `#dddee1` | inferred | 0.7 | ×76 |
| `{color.accent}` | `#0052cc` | inferred | 0.65 | ×30 |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#101214` | 23.2% | background-color, color, border-color, eu, custom-property | ×828 (cross-validated, 0.95) |
| `#ffffff` | 20.7% | background-color, color, border-color, --node-text-color, zot | ×739 (cross-validated, 0.95) |
| `#292a2e` | 12.3% | color, background-color, --wac-color-body, custom-property | ×440 (cross-validated, 0.94) |
| `#1868db` | 8.9% | color, background-color, border-color, zot, box-shadow | ×318 (cross-validated, 0.93) |
| `#505258` | 5.6% | background-color, color, ud | ×201 (cross-validated, 0.93) |
| `#803fa5` | 4.3% | color, background-color, pjwz | ×154 (cross-validated, 0.92) |
| `#48245d` | 3.0% | color, apmj | ×107 (inferred, 0.62) |
| `#091e42` | 3.3% | background-color, border-color, color, box-shadow, --track-fg | ×117 (cross-validated, 0.92) |
| `#1558bc` | 2.2% | color, background-color, ciuzt | ×79 (cross-validated, 0.91) |
| `#4c6b1f` | 1.7% | color, background-color, vdjstz | ×62 (cross-validated, 0.91) |
| `#dddee1` | 2.1% | background-color, qtmnbg, border-color | ×76 (cross-validated, 0.91) |
| `#0052cc` | 0.8% | color, background-color, border-color | ×30 (cross-validated, 0.9) |
| `#f0f1f2` | 1.1% | background-color, hiy, color | ×40 (cross-validated, 0.9) |
| `#cfe1fd` | 0.7% | background-color, --ds-background-accent-blue-subtlest-hovered | ×26 (cross-validated, 0.9) |
| `#4688ec` | 0.6% | border-color, background-color, outline, --icon-color | ×20 (inferred, 0.59) |
| `#c75300` | 0.5% | background-color | ×18 (observed, 0.74) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `Charlie Text` | ×733 |
| `Charlie Display` | ×497 |
| `monospace` | ×45 |
| `Atlassian Mono` | ×43 |
| `SFMono-MediumItalic` | ×2 |
| `Atlassian Sans` | ×1 |

Use **Charlie Text** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 32px | ×46 |
| `{type.h1}` | 24px | ×109 |
| `{type.h2}` | 20px | ×87 |
| `{type.h3}` | 18px | ×230 |
| `{type.body-lg}` | 16px | ×298 |
| `{type.body}` | 14px | ×268 |
| `{type.body-sm}` | 13px | ×42 |
| `{type.caption}` | 12px | ×142 |

The most frequently observed size is **16px** (×298) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `8px` | ×466 |
| `24px` | ×359 |
| `32px` | ×288 |
| `4px` | ×192 |
| `16px` | ×190 |
| `19px` | ×168 |
| `10px` | ×119 |
| `40px` | ×104 |
| `20px` | ×89 |
| `64px` | ×78 |
| `12px` | ×36 |
| `6px` | ×34 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `20px` | ×88 |
| `3px` | ×55 |
| `2px` | ×30 |
| `10px` | ×22 |
| `4px` | ×22 |
| `40px` | ×14 |
| `8px` | ×5 |
| `32px` | ×4 |

## Elevation

| Shadow | Observed |
|---|---|
| `#091e42` | ×29 |
| `#1e1f21` | ×20 |
| `rgb(248, 248, 248) 0px 0px 0px 0px` | ×12 |
| `#388bff` | ×7 |
| `var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f)` | ×7 |
| `#0c66e4` | ×6 |

## Motion

| Duration | Observed |
|---|---|
| `0.25s` | ×145 |
| `0.3s` | ×50 |
| `.2s` | ×17 |
| `0.15s` | ×12 |
| `0.166667s` | ×8 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#ffab00` · text `#172b4d` · radius `2px` · padding `12px 10px` · font `13.008px/600` | ×1 |
| button.outline | text `#101214` · border `2px solid rgb(16, 18, 20)` · radius `999px` · padding `14px 26px` · font `20px` | ×2 |
| form.input | bg `#000000` · text `#42526e` · border `0px solid rgb(66, 82, 110)` · radius `0px` · padding `0px` · height `22` | ×1 |
| card | bg `#f8f8f8` · radius `20px` · shadow `rgb(248, 248, 248) 0px 0px 0px 0px` · padding `24px` | ×5 |
| badge | bg `#000000` · text `#ffffff` · radius `999px` · font `12px/400` · padding `8px 32px` | ×1 |
| nav | height `68px` · position `static` · link `#101214` | — |

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| hover | color | `rgb(255, 255, 255)` | `rgb(143, 184, 246)` |
| hover | border-color | `rgb(255, 255, 255)` | `rgb(143, 184, 246)` |
| hover | outline-color | `rgb(255, 255, 255)` | `rgb(143, 184, 246)` |
| focus | color | `rgb(255, 255, 255)` | `rgb(143, 184, 246)` |
| focus | border-color | `rgb(255, 255, 255)` | `rgb(143, 184, 246)` |
| focus | outline-width | `3px` | `2px` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#292a2e` | `#000000` | 1.46 | fail | observed ×114 |
| `#101214` | `#f8f8f8` | 17.68 | pass | observed ×93 |
| `#292a2e` | `#101214` | 1.31 | fail | observed ×76 |
| `#ffffff` | `#101214` | 18.77 | pass | observed ×46 |
| `#101214` | `#000000` | 1.12 | fail | observed ×45 |
| `#1868db` | `#000000` | 4.04 | fail | observed ×27 |
| `#ffffff` | `#4c6b1f` | 6.12 | pass | observed ×21 |
| `#292a2e` | `#ffffff` | 14.34 | pass | observed ×21 |
| `#505258` | `#f8f8f8` | 7.35 | pass | observed ×21 |
| `#ffffff` | `#1558bc` | 6.66 | pass | observed ×18 |
| `#ffffff` | `#803fa5` | 6.62 | pass | observed ×15 |
| `#101214` | `#f0f1f2` | 16.6 | pass | observed ×12 |
| `#101214` | `#b7b9be` | 9.56 | pass | ink_on_background |
| `#ffffff` | `#ffab00` | 1.9 | fail | white_on_primary |
| `#505258` | `#b7b9be` | 3.98 | fail | muted_on_background |

6 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#ffab00`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#101214`) on `{color.background}` (`#b7b9be`).
- Set all text in `Charlie Text` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (20px, 3px, 2px, 10px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://www.atlassian.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T08:01:56.380Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12 · missing: none
- Degraded stages (extraction failure ≠ design change — exclude from diffs): state-observation
- Warning: primary 불일치: static=#1868db vs render=#ffab00 — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>