---
version: alpha
name: Atlassian
description: "A white workspace, one confident blue, and a Jira board's quiet status spectrum."
colors:
  on-surface-variant: "#505258"
  surface: "#FFFFFF"
  outline: "#DDDEE1"
  primary: "#1868DB"
  on-surface: "#101214"
  blue-pressed: "#1558BC"
  blue-tint: "#CFE1FD"
  body-ink: "#292A2E"
  slate-legacy: "#42526E"
  deep-navy: "#1C2B42"
  off-white: "#F8F8F8"
  panel-gray: "#F0F1F2"
  dark-surface: "#3B3D42"
  purple-accent: "#BF63F3"
  purple-status: "#803FA5"
  purple-tint: "#EED7FC"
  green-status: "#4C6B1F"
  green-tint: "#D3F1A7"
  amber-text: "#9E4C00"
  orange-fill: "#C75300"
  yellow-tint: "#FFE48F"
typography:
  meta:
    fontFamily: Charlie Text
    fontSize: 11.5px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Charlie Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Charlie Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Charlie Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Charlie Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: Charlie Text
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  title:
    fontFamily: Charlie Text
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  heading:
    fontFamily: Charlie Text
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display-s:
    fontFamily: Charlie Display
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  display-m:
    fontFamily: Charlie Display
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  display-l:
    fontFamily: Charlie Display
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: 0em
  hero:
    fontFamily: Charlie Display
    fontSize: 84px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  mega:
    fontFamily: Charlie Text
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
rounded:
  chip-hairline-detail: 2px
  control: 3px
  card-small-surface: 4px
  panel: 20px
  large-surface: 32px
  feature-block: 40px
  pill: 10000px
spacing:
  2xs: 4px
  xs: 8px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
---
# Atlassian — Style Reference
> A white workspace, one confident blue, and a Jira board's quiet status spectrum.

**Theme:** light

Atlassian's surface is an unapologetically bright white canvas that lets a single trusted blue (`#1868DB` — the exact fill of the wordmark) carry every primary action, link, and logo. The one signature move is chromatic restraint held against a purpose-built status spectrum: a Jira-style Kanban board where blue, purple, green, and amber tints (`#CFE1FD`, `#EED7FC`, `#D3F1A7`, `#FFE48F`) each mean something — "in progress," "ready for review," "done," "blocked" — so color is functional taxonomy, never decoration. Typography is the bespoke Charlie family: Charlie Display drives a huge 84px hero heading (weight 600) that can accent a single word in magenta (`#BF63F3`), while Charlie Text handles calm 16px body copy in near-black `#292A2E`. The layout rhythm is contained and generous — a full-bleed dark event banner up top, then a centered hero on white, then a soft `#F0F1F2` panel holding product UI. Shapes are gentle: 3px control corners, fully-pill CTAs, and one whisper-soft gray shadow. Everything reads as enterprise software that wants to feel human.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Atlassian Blue | `#1868DB` | `--color-blue` | The one primary. Wordmark fill, primary buttons, links. Never share this weight with another hue. |
| Blue Pressed | `#1558BC` | `--color-blue-pressed` | Darker blue for hover/pressed states and "in progress" status text. |
| Blue Tint | `#CFE1FD` | `--color-blue-tint` | Soft fill behind "in progress" status chips. Functional, not decorative. |
| Heading Ink | `#101214` | `--color-heading` | `--wac-color-heading`. Near-black for display headings and the dark event banner. |
| Body Ink | `#292A2E` | `--color-body` | `--wac-color-body`. Default body copy — a warmer near-black than the heading. |
| Muted Text | `#505258` | `--color-text-muted` | Secondary/supporting card text; captions and meta. |
| Slate Legacy | `#42526E` | `--color-slate` | Legacy ADG slate, still present in older UI text. |
| Deep Navy | `#1C2B42` | `--color-navy` | Deep navy used sparingly for high-emphasis dark text. |
| Canvas White | `#FFFFFF` | `--color-canvas` | The dominant surface. Hero and content sit on pure white. |
| Off-White | `#F8F8F8` | `--color-surface` | Barely-there raised surface; also the base of the soft shadow. |
| Panel Gray | `#F0F1F2` | `--color-panel` | The soft product-UI panel that holds the Kanban board. |
| Dark Surface | `#3B3D42` | `--color-dark-surface` | Elevated dark chip/surface on near-black regions. |
| Border | `#DDDEE1` | `--color-border` | The only real hairline — card and control edges on white. |
| Purple Accent | `#BF63F3` | `--color-purple` | Editorial magenta for a single accented headline word. Never a CTA. |
| Purple Status | `#803FA5` | `--color-purple-status` | "Ready for review" status text and dark purple fill. |
| Purple Tint | `#EED7FC` | `--color-purple-tint` | Soft fill behind "ready for review" chips. |
| Green Status | `#4C6B1F` | `--color-green` | "Done" status text and green fill. |
| Green Tint | `#D3F1A7` | `--color-green-tint` | Soft fill behind "done" chips. |
| Amber Text | `#9E4C00` | `--color-amber` | Warning/blocked status text. |
| Orange Fill | `#C75300` | `--color-orange` | Strong orange fill for high-urgency status. |
| Yellow Tint | `#FFE48F` | `--color-yellow-tint` | Soft fill behind warning/blocked chips. |

## Tokens — Typography

### Charlie Display — big editorial headings, weights 100–800, the hero voice · `--font-display`
- **Substitute:** -apple-system, BlinkMacSystemFont, "Segoe UI"
- **Weights:** 100, 200, 400, 500, 600, 700, 800 (hero uses 600; sub-headings 500)
- **Sizes:** 96px, 84px, 68px, 52px, 40px, 28px, 24px
- **Line height:** tight (~1.0–1.1) on display sizes
- **Letter spacing:** near-zero; the weight and scale do the work, not tracking
- **Role:** Reserved for hero and section display. The 84px/600 headline is the brand's loudest gesture — one word may go magenta.

### Charlie Text — body and UI copy, calm and legible · `--font-text`
- **Substitute:** -apple-system, BlinkMacSystemFont, "Segoe UI"
- **Weights:** 400 (body), 500 (buttons/emphasis), 700 (card titles)
- **Sizes:** 18px, 16px, 14px, 12px, 11.5px
- **Line height:** comfortable ~1.5 for paragraphs
- **Letter spacing:** default
- **Role:** Default reading and interface font. 16px paragraphs in `#292A2E`; 11.5–12px meta in `#505258`.

### Atlassian Sans / Atlassian Mono — system UI + code · `--font-sans` / `--font-mono`
- **Substitute:** ui-sans-serif, "system-ui", "Segoe UI" (sans); ui-monospace (mono)
- **Weights:** Sans 100–900; Mono 100–800 (normal + italic)
- **Role:** Atlassian Sans is the newer product-UI face; Atlassian Mono carries code and technical labels.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Meta | 11.5px | 1.4 | 0 | `--text-meta` |
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Small | 14px | 1.5 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Lead | 18px | 1.5 | 0 | `--text-lead` |
| Subheading | 20px | 1.3 | 0 | `--text-subheading` |
| Title | 24px | 1.25 | 0 | `--text-title` |
| Heading | 28px | 1.2 | 0 | `--text-heading` |
| Display S | 40px | 1.1 | 0 | `--text-display-sm` |
| Display M | 52px | 1.05 | 0 | `--text-display-md` |
| Display L | 68px | 1.02 | 0 | `--text-display-lg` |
| Hero | 84px | 1.0 | 0 | `--text-hero` |
| Mega | 96px | 1.0 | 0 | `--text-mega` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 10px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 32px | `--spacing-xl` |
| 2xl | 40px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Chip / hairline detail | 2px |
| Control (button, input) | 3px |
| Card / small surface | 4px |
| Panel | 20px |
| Large surface | 32px |
| Feature block | 40px |
| Pill (CTA, tag) | 10000px |
| Avatar | 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Flat | `rgb(248, 248, 248) 0px 0px 0px 0px` | `--shadow-flat` |
| Soft | `rgb(128, 128, 128) 0px 0px 5px 0px` | `--shadow-soft` |

### Layout
- **Page max-width:** contained centered content (~1200px hero column)
- **Section gap:** generous vertical rhythm between banner, hero, and product panel
- **Card padding:** ~16–24px inside Kanban cards
- **Element gap:** 8–16px between controls and card rows

## Components

### Primary Button
**Role:** The single most important action on a screen (e.g. "Get started with Jira").
Fully-pill (`10000px`) with a solid `#1868DB` fill and `#FFFFFF` label in Charlie Text 500. No border. One primary per view; everything else steps down to a text link.

### Text-Link Button
**Role:** Secondary action beside the primary CTA (e.g. "Contact us →").
No fill, no border. `#1868DB` label with a trailing arrow. Reads as a link, not a button — deliberately quieter than the pill.

### Navigation Bar
**Role:** Global top nav on white.
Left-aligned Atlassian wordmark in `#1868DB`, center menu items (Products, Solutions, Why Atlassian, Resources, Enterprise) in `#292A2E`, right-side search icon and a "Sign in" link. Flat, borderless, sits directly on the white canvas.

### Event Banner
**Role:** Full-bleed promotional strip above the nav (e.g. Team '26 Europe).
Near-black `#101214` background, white text, a bright artwork bleed on the left, and a "Register now →" link on the right with a dismiss control. The only persistently dark region in the header.

### Kanban Column
**Role:** A status lane on the Jira board.
Header is a soft status chip — "Blocked," "In progress" (`#CFE1FD` tint), "Ready for review" (`#EED7FC` tint), "Done" (`#D3F1A7` tint) — with a collapse chevron. Column sits on the `#F0F1F2` panel.

### Issue Card
**Role:** A single work item on the board.
White `#FFFFFF` surface, `4px` radius, `#DDDEE1` hairline border, `--shadow-soft`. Title in Charlie Text 700 `#101214`; below it an issue-type icon, a mono issue key (e.g. "FIN-50") in `#505258`, and a rounded avatar (`100%`) on the right.

### Status Chip
**Role:** Encodes workflow state via tint + text pair.
Rounded pill with a pale tint fill and a saturated matching text color: blue `#CFE1FD`/`#1558BC`, purple `#EED7FC`/`#803FA5`, green `#D3F1A7`/`#4C6B1F`, yellow `#FFE48F`/`#9E4C00`. Color is meaning, never mood.

### Product Panel
**Role:** The soft container that frames product UI inside a marketing page.
Large `20px` radius, `#F0F1F2` fill, sitting inside the white canvas so the app screenshot feels embedded, not pasted.

### Search Field
**Role:** Global search entry in the nav.
Icon-first, minimal, on white. Controls use the 3px control radius consistent with buttons.

### Avatar
**Role:** Assignee identity on issue cards.
Fully circular (`100%`), small, photographic. Multiple assignees read as a quiet human layer over an otherwise systematic board.

### Section Heading
**Role:** Hero / display headline.
Charlie Display 84px weight 600 in `#101214`. A single word may be set in `#BF63F3` magenta for editorial emphasis ("Unleash your teams **and** their agents").

## Do's and Don'ts

### Do
- Keep one primary blue. `#1868DB` owns the wordmark, primary CTA, and links — do not dilute it with a second brand hue at equal weight.
- Use the status tints as a taxonomy: blue = in progress, purple = ready for review, green = done, yellow/amber = blocked/warning.
- Let white dominate. Content breathes on pure `#FFFFFF`; product UI gets the `#F0F1F2` panel, not the whole page.
- Reserve magenta `#BF63F3` for a single accented headline word — editorial, never a control.
- Pair the huge Charlie Display hero (84px/600) with calm 16px Charlie Text body.

### Don't
- Don't put the purple or magenta on a button — CTAs are blue only.
- Don't add drop shadows beyond the whisper-soft `rgb(128,128,128) 0 0 5px 0`; depth comes from the hairline and panel, not elevation.
- Don't tint the canvas — it is white, full stop.
- Don't mix status colors decoratively; a green chip must mean "done."
- Don't over-round controls. Buttons are pills, but cards and inputs stay at 3–4px.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The base — hero and all content. |
| 1 | Surface | `#F8F8F8` | Barely-raised off-white. |
| 2 | Panel | `#F0F1F2` | Soft product-UI container (Kanban board). |
| — | Card | `#FFFFFF` | White cards lifted off the panel by border + soft shadow. |
| Dark | Banner | `#101214` | Full-bleed dark event strip and dark UI regions. |
| Dark+ | Dark Surface | `#3B3D42` | Elevated chip on the dark banner. |

## Elevation
Depth is expressed almost entirely through **luminance step + hairline**, not shadow. White cards separate from the `#F0F1F2` panel via the `#DDDEE1` border and a single whisper-soft gray shadow (`rgb(128,128,128) 0 0 5px 0`). There is no dramatic drop-shadow stack — the flattest possible shadow (`rgb(248,248,248) 0 0 0 0`) confirms most surfaces are intentionally shadowless. Layering reads as: dark banner → white canvas → gray panel → white card.

## Imagery
Product-first. The dominant "image" is a live-looking Jira Kanban board rendered in the brand's own UI — real issue cards, type icons, mono keys, and photographic assignee avatars. The header carries a bright, playful artwork bleed (looping abstract shapes in blue/purple) against the dark banner. Photography appears only as small circular avatars. The message: the product IS the hero image; illustration is a light accent, never the substance.

## Layout
A stacked, contained composition: (1) a full-bleed dark event banner, (2) a flat white global nav with centered menu, (3) a centered hero — oversized headline, one lead sentence, a pill CTA plus a text link — and (4) a soft rounded `#F0F1F2` panel holding the product UI, embedded in the white canvas. Content is column-centered rather than edge-to-edge; the board panel is the widest element. Rhythm is calm and generous, letting the single blue and the huge headline do the talking.

## Typography Voice
Two clear modes. **Display mode** (Charlie Display, 40–96px, weight 500–600, tight ~1.0 line height) is confident and editorial — big enough to accent a single magenta word and let it register as art direction, not error. **Reading mode** (Charlie Text, 16px, weight 400, ~1.5 line height, `#292A2E`) is deliberately understated so dense enterprise content stays legible. The signature move is the weight/scale contrast: the hero is loud through size and a solid 600 weight, never through tracking or color — tracking stays near-zero throughout. Meta labels drop to 11.5–12px in muted `#505258`, and Atlassian Mono handles issue keys so structured data reads as data.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF` / text: `#292A2E` / heading: `#101214` / surface: `#F0F1F2` / border: `#DDDEE1` / accent: `#BF63F3` / primary action: `#1868DB`

## Example Component Prompts
1. **Primary CTA**: A fully-pill button (`border-radius: 10000px`), solid `#1868DB` background, white `#FFFFFF` label in a geometric sans at weight 500, ~10px 24px padding, no border. Beside it, a borderless text link in `#1868DB` with a trailing arrow.
2. **Jira issue card**: White `#FFFFFF` card, `4px` radius, `1px` `#DDDEE1` border, soft `rgb(128,128,128) 0 0 5px 0` shadow. Bold title in `#101214`, a small issue-type icon, a monospace key "FIN-50" in `#505258`, and a `100%`-rounded photographic avatar right-aligned.
3. **Status chip row**: Rounded pill chips pairing a pale tint with saturated text — "In progress" `#CFE1FD`/`#1558BC`, "Ready for review" `#EED7FC`/`#803FA5`, "Done" `#D3F1A7`/`#4C6B1F`, "Blocked" `#FFE48F`/`#9E4C00`.
4. **Hero headline**: Charlie Display (or -apple-system fallback) at 84px, weight 600, color `#101214`, line-height ~1.0, one word colored `#BF63F3` magenta for editorial emphasis, over a pure white canvas.
5. **Product panel**: A soft `20px`-radius container filled `#F0F1F2` embedded in a white page, holding a multi-column Kanban board so the app UI looks framed rather than pasted.

## Similar Brands
- **Linear** — the same restraint-plus-one-accent discipline and product-as-hero screenshots, though cooler and darker.
- **Asana** — kindred project-tool taxonomy where status color is functional meaning, on a bright canvas.
- **Notion** — shared calm white surface with content-first typographic hierarchy.
- **Stripe** — the confident single-blue brand identity paired with editorial display type.
- **monday.com** — a fellow work-OS whose colorful status spectrum reads as workflow taxonomy, not decoration.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — brand */
  --color-blue: #1868DB;
  --color-blue-pressed: #1558BC;
  --color-blue-tint: #CFE1FD;
  --color-purple: #BF63F3;
  --color-purple-status: #803FA5;
  --color-purple-tint: #EED7FC;
  --color-green: #4C6B1F;
  --color-green-tint: #D3F1A7;
  --color-amber: #9E4C00;
  --color-orange: #C75300;
  --color-yellow-tint: #FFE48F;

  /* Colors — ink & neutrals */
  --color-heading: #101214;
  --color-body: #292A2E;
  --color-text-muted: #505258;
  --color-slate: #42526E;
  --color-navy: #1C2B42;
  --color-canvas: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-panel: #F0F1F2;
  --color-dark-surface: #3B3D42;
  --color-border: #DDDEE1;

  /* Typography — Families */
  --font-display: "Charlie Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Atlassian Sans", ui-sans-serif, "system-ui", "Segoe UI", sans-serif;
  --font-mono: "Atlassian Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Typography — Scale */
  --text-meta: 11.5px;
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lead: 18px;
  --text-subheading: 20px;
  --text-title: 24px;
  --text-heading: 28px;
  --text-display-sm: 40px;
  --text-display-md: 52px;
  --text-display-lg: 68px;
  --text-hero: 84px;
  --text-mega: 96px;
  --leading-tight: 1.0;
  --leading-snug: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-control: 3px;
  --radius-card: 4px;
  --radius-panel: 20px;
  --radius-surface: 32px;
  --radius-feature: 40px;
  --radius-pill: 10000px;
  --radius-avatar: 100%;

  /* Shadows */
  --shadow-flat: rgb(248, 248, 248) 0px 0px 0px 0px;
  --shadow-soft: rgb(128, 128, 128) 0px 0px 5px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — brand */
  --color-blue: #1868DB;
  --color-blue-pressed: #1558BC;
  --color-blue-tint: #CFE1FD;
  --color-purple: #BF63F3;
  --color-purple-status: #803FA5;
  --color-purple-tint: #EED7FC;
  --color-green: #4C6B1F;
  --color-green-tint: #D3F1A7;
  --color-amber: #9E4C00;
  --color-orange: #C75300;
  --color-yellow-tint: #FFE48F;

  /* Colors — ink & neutrals */
  --color-heading: #101214;
  --color-body: #292A2E;
  --color-text-muted: #505258;
  --color-slate: #42526E;
  --color-navy: #1C2B42;
  --color-canvas: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-panel: #F0F1F2;
  --color-dark-surface: #3B3D42;
  --color-border: #DDDEE1;

  /* Typography — Families */
  --font-display: "Charlie Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Atlassian Sans", ui-sans-serif, "system-ui", "Segoe UI", sans-serif;
  --font-mono: "Atlassian Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Typography — Scale */
  --text-meta: 11.5px;
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lead: 18px;
  --text-subheading: 20px;
  --text-title: 24px;
  --text-heading: 28px;
  --text-display-sm: 40px;
  --text-display-md: 52px;
  --text-display-lg: 68px;
  --text-hero: 84px;
  --text-mega: 96px;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-control: 3px;
  --radius-card: 4px;
  --radius-panel: 20px;
  --radius-surface: 32px;
  --radius-feature: 40px;
  --radius-pill: 10000px;
  --radius-avatar: 100%;
}
```