atlassian.com
MIT
Enterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Published by Layout6 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install atlassian-comUI themeReskin shadcn or Layout UI components to match atlassian.com.
npx shadcn add https://layout.design/r/atlassian-com/theme.json# layout.md — Atlassian.com Design System
---
## 0. Quick Reference
**Stack:** Atlassian marketing site (atlassian.com) · Custom brand fonts (Charlie Display, Charlie Text, Atlassian Sans) · Token source: reconstructed-from-computed (medium confidence) · Libraries detected: Tailwind, Bootstrap
**How to apply:** Use as `var(--atlassian-token-name)` in CSS, `style={{ prop: 'var(--atlassian-token-name)' }}` in JSX, or `bg-[var(--atlassian-token-name)]` in Tailwind.
```css
:root {
/* Colours */
--atlassian-bg-surface: rgb(21, 88, 188); /* Primary brand surface — blue hero/section backgrounds */
--atlassian-accent: rgb(76, 107, 31); /* Secondary accent — green brand surface */
--atlassian-accent-cool: rgb(53, 125, 232); /* Primary interactive blue — links, tabs, highlights */
--atlassian-accent-warm: rgb(199, 83, 0); /* Warm accent — orange category tags, badges */
--atlassian-accent-hover: rgb(130, 181, 54); /* Hover-state green accent — brand mark */
--atlassian-bg-app: rgb(242, 172, 0); /* Yellow brand mark — illustration accent only */
--atlassian-text-primary: #101214; /* Primary heading colour */
--atlassian-text-secondary: #292a2e; /* Body text, labels, nav items */
--atlassian-text-on-dark: #ffffff; /* Text on coloured/dark surfaces */
/* Typography */
--atlassian-font-display: "Charlie Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--atlassian-font-text: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--atlassian-font-sans: "Atlassian Sans", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, sans-serif;
/* Spacing */
--atlassian-space-xs: 10px; /* Tight internal padding */
--atlassian-space-sm: 12px; /* Small gaps */
--atlassian-space-md: 16px; /* Base unit */
--atlassian-space-lg: 24px; /* Section sub-gaps */
--atlassian-space-xl: 32px; /* Component padding */
--atlassian-space-2xl: 40px; /* Section padding */
--atlassian-space-3xl: 64px; /* Large section gaps */
/* Border Radius */
--atlassian-radius-sm: 2px; /* Badges, cookie elements */
--atlassian-radius-md: 3px; /* Sign-in button, nav pills */
--atlassian-radius-lg: 20px; /* Collection tags, chips */
--atlassian-radius-full: 40px; /* Primary CTA buttons — pill shape */
/* Shadow */
--atlassian-shadow-sm: rgb(204, 204, 204) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 5px 20px -5px;
/* Motion */
--atlassian-duration-fast: 0.125s;
--atlassian-duration-base: 0.25s;
--atlassian-duration-slow: 0.5s;
--atlassian-ease-default: ease;
}
```
```tsx
// Primary CTA Button — pill-shaped, Charlie Text, 40px radius
<button style={{
fontFamily: 'var(--atlassian-font-text)',
backgroundColor: 'var(--atlassian-accent-cool)',
color: 'var(--atlassian-text-on-dark)',
borderRadius: 'var(--atlassian-radius-full)',
padding: '12px 24px',
transition: `background-color var(--atlassian-duration-base) var(--atlassian-ease-default)`,
}}>Get started free</button>
```
**NEVER rules:**
- NEVER use Inter, Roboto, or Arial as the primary font — always use Charlie Display (headings) or Charlie Text (body/UI)
- NEVER use `border-radius` values other than 2px, 3px, 20px, or 40px for brand components
- NEVER use hardcoded hex colours — always reference `var(--atlassian-*)` tokens
- NEVER construct dynamic Tailwind class names (e.g. `bg-${color}`) — Tailwind cannot purge them
- NEVER omit hover, focus, and disabled states on interactive elements
- NEVER use spacing values not matching the token scale (xs through 3xl)
- NEVER use `--atlassian-bg-app` (yellow) or `--atlassian-bg-surface` (blue) as text colours
**Full design system → see layout.md**
---
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
Atlassian's marketing site projects **confident enterprise optimism** — authoritative enough for IT decision-makers, energetic enough for team leads. The visual language balances a structured information hierarchy with playful illustration accents. The brand does not whisper; hero text reaches 84px, section headings 68px, and the colour palette uses saturated primaries as bold environmental colours (blue surfaces, green surfaces, orange category tags).
### What This Design Is
- **Type-led.** Two proprietary typefaces carry the brand: Charlie Display for hero/display text (used at extreme sizes, 52–84px, weight 500–600) and Charlie Text for all body, UI, nav, labels, and buttons (weight 400–700).
- **Colour as environment.** Coloured backgrounds (blue, green, orange) are full-section treatments, not decorative accents on white cards.
- **Pill CTAs.** All primary action buttons use `border-radius: 40px` — a fully pill-shaped profile. This is a brand signature, not an option.
- **Micro-motion rich.** An unusually large library of named keyframe animations governs content reveals: fade-up, slide-in from all four directions, blur-in, scale-in. Animations are content-directional and purposeful.
- **Illustration-integrated.** SVG brand marks use a fixed 4-colour palette (blue #3579E8, yellow #F2AC00, purple #BF63F3, green #82B536) as fill values.
### What This Design Explicitly Rejects
- **Generic SaaS blue-on-white.** The palette deliberately spans blue, green, orange, yellow, and purple as full surface environments.
- **Thin or light type.** Minimum visible weight is 400; display type is 500–600 at large sizes. No ultra-light (100–300) weights appear in the live UI (they exist in the font files but are not observed in page elements).
- **Rounded cards.** Card containers have `border-radius: 0px` in computed styles. Roundedness belongs to buttons and chips only.
- **Drop shadows on cards.** Cards use zero box-shadow in default state; shadow appears only on hover via `var(--ds-shadow-overlay)`.
- **Warm neutral surfaces.** All surfaces are either pure white, near-black, or brand-saturated colour. No beige, taupe, or warm grey.
---
## 2. Colour System
### Tier 1: Primitive Values
```css
:root {
/* Blues */
--primitive-blue-600: rgb(21, 88, 188); /* Deep brand blue */
--primitive-blue-400: rgb(53, 125, 232); /* Interactive/link blue */
--primitive-blue-active: rgb(24, 104, 219); /* Tab active blue — extracted from tab computed style */
/* Greens */
--primitive-green-700: rgb(76, 107, 31); /* Dark brand green surface */
--primitive-green-400: rgb(130, 181, 54); /* Light brand green mark */
/* Oranges */
--primitive-orange-600: rgb(199, 83, 0); /* Dark orange surface/tag */
/* Yellows */
--primitive-yellow-500: rgb(242, 172, 0); /* Brand yellow mark */
/* Purples */
--primitive-purple-400: rgb(191, 99, 243); /* Brand purple mark */
--primitive-purple-600: rgb(128, 63, 165); /* Dark purple surface */
/* Neutrals */
--primitive-neutral-950: #101214; /* Near-black — primary text */
--primitive-neutral-900: #292a2e; /* Dark grey — body text */
--primitive-neutral-700: rgb(41, 42, 46); /* Mid-dark — secondary text */
--primitive-neutral-500: rgb(80, 82, 88); /* Card meta text */
--primitive-neutral-400: rgb(66, 82, 110); /* Input placeholder */
--primitive-neutral-200: rgb(223, 225, 230); /* Disabled border */
--primitive-neutral-000: #ffffff; /* White surface */
--primitive-neutral-disabled-bg: rgba(23, 23, 23, 0.03); /* --ds-background-disabled */
}
```
### Tier 2: Semantic Aliases
```css
:root {
/* Surfaces */
--atlassian-bg-surface: var(--primitive-blue-600); /* Brand blue section backgrounds */
--atlassian-bg-surface-alt: var(--primitive-green-700); /* Brand green section backgrounds */
--atlassian-bg-surface-warm: var(--primitive-orange-600); /* Warm accent surface/tag backgrounds */
--atlassian-bg-surface-purple: var(--primitive-purple-600); /* Purple surface — ebook/report cards */
--atlassian-bg-app: var(--primitive-yellow-500); /* Yellow — illustration/SVG fills only, NOT surfaces */
--atlassian-bg-white: var(--primitive-neutral-000); /* White page background */
/* Text */
--atlassian-text-primary: var(--primitive-neutral-950); /* h1, h3, dark-surface headings */
--atlassian-text-secondary: var(--primitive-neutral-900); /* Body copy, nav text */
--atlassian-text-muted: var(--primitive-neutral-500); /* Card meta, captions */
--atlassian-text-input: var(--primitive-neutral-400); /* Input placeholder and value */
--atlassian-text-on-dark: var(--primitive-neutral-000); /* Text on blue/dark surfaces */
/* Actions & Interactive */
--atlassian-accent-cool: var(--primitive-blue-400); /* Primary interactive — links, tabs */
--atlassian-accent: var(--primitive-green-700); /* Secondary brand accent */
--atlassian-accent-hover: var(--primitive-green-400); /* Hover state green */
--atlassian-accent-warm: var(--primitive-orange-600); /* Category tag colour */
/* Borders & States */
--atlassian-border-disabled: var(--primitive-neutral-200); /* Disabled input/element border */
--atlassian-bg-disabled: var(--primitive-neutral-disabled-bg); /* Disabled input background */
/* Original CSS vars (preserved) */
--wac-color-heading: #101214; /* = --atlassian-text-primary */
--wac-color-body: #292a2e; /* = --atlassian-text-secondary */
}
```
### Tier 3: Component Tokens
```css
:root {
/* Buttons */
--atlassian-btn-primary-bg: var(--atlassian-accent-cool); /* Primary CTA background */
--atlassian-btn-primary-text: var(--atlassian-text-on-dark); /* Primary CTA label */
--atlassian-btn-radius: var(--atlassian-radius-full); /* 40px pill */
/* Tab */
--atlassian-tab-bg: var(--atlassian-bg-white); /* Active tab background */
--atlassian-tab-text: var(--atlassian-accent-cool); /* Active tab text: rgb(24,104,219) */
--atlassian-tab-radius: 8px 0px 0px 8px; /* Left-side tab pill shape */
/* Badge/Cookie */
--atlassian-badge-radius: var(--atlassian-radius-sm); /* 2px */
--atlassian-badge-shadow: rgb(128,128,128) 0px 0px 5px 0px; /* Cookie/badge lift */
/* Card hover overlay */
--atlassian-card-shadow-hover: var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
}
```
### Brand / Illustration Accent Palette
| Token | Value | Usage |
|---|---|---|
| `--atlassian-mark-blue` | `rgb(53, 125, 232)` | SVG brand mark fill — primary (60 shapes) |
| `--atlassian-mark-yellow` | `rgb(242, 172, 0)` | SVG brand mark fill — secondary (10 shapes) |
| `--atlassian-mark-purple` | `rgb(191, 99, 243)` | SVG brand mark fill — tertiary (13 shapes) |
| `--atlassian-mark-green` | `rgb(130, 181, 54)` | SVG brand mark fill — quaternary (13 shapes) |
> **These four colours appear ONLY in illustrations and SVG brand marks.** Do not use them as UI surface or text colours.
---
## 3. Typography System
### Font Families
```css
:root {
/* Preserved from extracted CSS vars */
--bxp-charlie-display-font-family: "Charlie Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--bxp-charlie-text-font-family: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--atlassian-sans-font-family: "Atlassian Sans", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
--atlassian-recommended-system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--atlassian-recommended-sans-system-fonts: ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
/* Semantic aliases */
--atlassian-font-display: var(--bxp-charlie-display-font-family); /* Hero, h1, h3, section headings, tabs */
--atlassian-font-text: var(--bxp-charlie-text-font-family); /* Body, nav, buttons, labels, inputs */
--atlassian-font-sans: var(--atlassian-sans-font-family); /* Utility/fallback sans */
}
```
### Composite Type Scale
**Rule: Charlie Display = display/heading. Charlie Text = everything else.**
| Token | Family | Size | Weight | Line-height | Letter-spacing | Usage |
|---|---|---|---|---|---|---|
| `--atlassian-type-hero` | Charlie Display | 84px | 600 | 84px | normal | h1 — hero headline, centred |
| `--atlassian-type-display` | Charlie Display | 68px | 500 | 76px | normal | h2 display — section hero headings |
| `--atlassian-type-section` | Charlie Display | 52px | 500 | 60px | normal | h3 — feature section titles |
| `--atlassian-type-heading-lg` | Charlie Display | 40px | 500 | 48px | normal | h3 — security/compliance headings |
| `--atlassian-type-eyebrow` | Charlie Text | 12px | 700 | 20px | normal | h2 overline — UPPERCASE category label |
| `--atlassian-type-label` | Charlie Text | 24px | 400 | 32px | normal | Large descriptive labels, product names |
| `--atlassian-type-body-lg` | Charlie Text | 18px | 400 | 26px | normal | Primary body copy |
| `--atlassian-type-body` | Charlie Text | 16px | 400 | normal | normal | Standard body, nav, labels, cards |
| `--atlassian-type-body-sm` | Charlie Text | 14px | 400 | normal | normal | Input text, small UI labels |
| `--atlassian-type-caption` | Charlie Text | 13px | 400 | normal | normal | Smallest UI text — nav sub-labels |
| `--atlassian-type-tab` | Charlie Display | 14px | 700 | normal | normal | Tab labels (Charlie Display, bold) |
```css
/* Composite token usage pattern */
.atlassian-hero-heading {
font-family: var(--atlassian-font-display);
font-size: 84px; /* --atlassian-font-size-3xl */
font-weight: 600; /* --atlassian-font-weight-semibold */
line-height: 84px; /* 1:1 tight for hero */
letter-spacing: normal;
color: var(--atlassian-text-primary);
text-align: center;
}
.atlassian-section-heading {
font-family: var(--atlassian-font-display);
font-size: 52px;
font-weight: 500; /* --atlassian-font-weight-medium */
line-height: 60px;
letter-spacing: normal;
color: var(--atlassian-text-primary);
text-align: start;
}
.atlassian-eyebrow {
font-family: var(--atlassian-font-text);
font-size: 12px; /* Smallest tracked size in system */
font-weight: 700; /* --atlassian-font-weight-bold */
line-height: 20px;
letter-spacing: normal;
text-transform: uppercase; /* Always uppercase — extracted from h2 computed */
color: var(--atlassian-text-primary);
}
.atlassian-body {
font-family: var(--atlassian-font-text);
font-size: 18px;
font-weight: 400;
line-height: 26px;
letter-spacing: normal;
color: var(--atlassian-text-secondary);
}
```
### Weight Scale
| Token | Value | Usage |
|---|---|---|
| `--atlassian-font-weight-regular` | 400 | Body, nav, labels, standard UI |
| `--atlassian-font-weight-medium` | 500 | Section headings (Charlie Display) |
| `--atlassian-font-weight-semibold` | 600 | Hero h1, hero h2 (Charlie Display) |
| `--atlassian-font-weight-bold` | 700 | Eyebrow labels, tab text, nav sub-items |
### Pairing Rules
- **NEVER pair Charlie Display with Charlie Display at different sizes in the same line.** Use Display for headings only; switch to Charlie Text for any supporting text.
- Eyebrow (12px uppercase Charlie Text bold) always precedes a display heading — it is the semantic pair for `h3` or `h2` section openers.
- Tab text uses **Charlie Display at 14px 700** — the only small-size use of the display face.
---
## 4. Spacing & Layout
```css
:root {
/* Spacing scale — extracted from CSS vars */
--atlassian-space-xs: 10px; /* Tight internal padding — off-grid, use sparingly */
--atlassian-space-sm: 12px; /* Small component gaps, button internal padding-y */
--atlassian-space-md: 16px; /* Base grid unit — default gap, padding base */
--atlassian-space-lg: 24px; /* Card internal padding, sub-section gaps */
--atlassian-space-xl: 32px; /* Tab padding, component separation */
--atlassian-space-2xl: 40px; /* Section-level breathing room */
--atlassian-space-3xl: 64px; /* Inter-section vertical padding */
/* Practical 4px sub-units (reconstructed) */
--atlassian-space-4: 4px; /* Micro spacing — icon gap, tight insets */
--atlassian-space-8: 8px; /* Button padding-y, toggle margin */
/* Container widths (reconstructed — moderate confidence) */
--atlassian-container-max: 1440px; /* Max content width — inferred from 1439px breakpoint */
--atlassian-container-lg: 1280px; /* Wide breakpoint container */
--atlassian-container-md: 1024px; /* Desktop breakpoint */
--atlassian-container-sm: 768px; /* Tablet breakpoint */
/* Grid */
--atlassian-grid-columns: 12; /* Standard 12-column grid */
--atlassian-grid-gap: var(--atlassian-space-lg); /* 24px default column gap */
}
```
### Breakpoint Reference
The site has an unusually dense breakpoint set. Key structural breakpoints:
| Breakpoint | Width | Role |
|---|---|---|
| xs | 400px | Small mobile |
| sm | 768px | Tablet portrait |
| md | 1024px | Desktop entry |
| lg | 1280px | Wide desktop |
| xl | 1440px | Max content width |
| 2xl | 1920px | Ultra-wide (layout caps at 1440px) |
> Additional fine-tuned breakpoints (425px, 500px, 530px, 540px, 550px, 560px, 600px, 640px, 680px, 767px, 769px, 890px, 896px, 897px, 900px, 980px, 1023px, 1050px, 1075px, 1100px, 1125px, 1140px, 1150px, 1175px, 1200px, 1306px, 1326px, 1500px) are used for micro-adjustments to typography scale and component layout. These are component-level breakpoints, not page layout breakpoints.
### Layout Decision Rules
- **Flex row** for: navigation bar, button groups, card CTAs, form rows, icon+label pairs
- **Block** for: cards (default), modals, dropdowns, badge containers
- **Inline-flex** for: links with icons (align: center), card link rows
- **Grid** for: feature card grids, product listing grids (12-column, gap 24px)
- Navigation uses `display: flex`, `flex-direction: row`, `align-items: center`, `padding: 0`
- Button primary uses `display: flex`, `flex-direction: row`, `justify-content: flex-end`, `align-items: center`, `padding: 8px`
---
## 5. Page Structure & Layout Patterns
> No screenshots available. Section derived from LAYOUT DIGEST, component inventory, computed styles, and CTA census. Rows marked **(inferred)** are not visually confirmed.
### 5.1 Section Map
| # | Section | Layout type | Approx. height | Key elements |
|---|---|---|---|---|
| 1 | Global Navigation | Flex row, sticky | 64px | Logo, product nav links, sign-in button (radius-md 3px), CTA button (radius-full 40px) |
| 2 | Hero | Full-width, centred column | ~600px | h1 84px/600 (Charlie Display), body 18px, dual CTAs, illustration/animation (inferred) |
| 3 | Social Proof / Logos | Flex row, scroll | ~120px | Customer logo strip, animated scroll marquee (inferred) |
| 4 | Feature Product Grid | 12-col grid, contained | ~800px (inferred) | 145 card instances, product icons, h3 headings, 24px gap |
| 5 | Collections / Tab Section | Tabbed panel, 2-col | ~600px (inferred) | Tab list (left, radius 8px 0 0 8px, bg white), content panel (right), category chips (radius-lg 20px) |
| 6 | Section: "Transform how your team works" | Full-width coloured bg | ~500px | h2 68px/500 Charlie Display, body, blue surface (--atlassian-bg-surface) |
| 7 | Security / Compliance | 3-col grid | ~500px (inferred) | h3 40px/500, body 18px, icon per column |
| 8 | Testimonials / Social Proof | Card carousel or grid | ~400px (inferred) | Quote cards, shadow-sm on hover, avatar images |
| 9 | Blog / Resource Cards | 3-col card grid | ~600px (inferred) | Category eyebrow (12px uppercase), h3, body, coloured bg per category (orange, green, purple, blue) |
| 10 | CTA Banner | Full-width coloured surface | ~300px (inferred) | h2 display, single CTA button pill, centred layout |
| 11 | Footer | Multi-col flex | ~300px (inferred) | Nav links Charlie Text 16px, 4–5 columns, logo |
### 5.2 Layout Patterns
**Navigation:**
```
display: flex | flex-direction: row | align-items: center | padding: 0
[Logo] ——————————————— [Product] [Solutions] [Resources] ——— [Sign in] [Get started]
flex: 1, justify-content: space-between
```
- Sign-in: `border-radius: 3px` (radius-md)
- Get started: `border-radius: 40px` (radius-full), pill CTA
**Hero Section (inferred):**
```
display: flex | flex-direction: column | align-items: center | text-align: center
[Eyebrow — 12px uppercase Charlie Text]
[h1 — 84px/600 Charlie Display]
[Body — 18px/400 Charlie Text, max-width ~640px]
[CTA pair — flex row, gap 16px]
[Illustration / animation — below text]
```
**Feature Card Grid:**
```
display: grid | grid-template-columns: repeat(3–4, 1fr) | gap: 24px
Card: display:block | border-radius: 0px | padding: 0 | shadow on hover only
```
- Card text colour: `rgb(80, 82, 88)` (muted)
- Card heading colour: `rgb(16, 18, 20)` (primary)
**Tab + Panel Section:**
```
display: flex | flex-direction: row
[Tab list — left column, ~30% width]
Tab: display:flex | bg: #ffffff | border-radius: 8px 0 0 8px | padding: 12px 32px 12px 16px
Tab text: Charlie Display 14px/700 | color: rgb(24,104,219)
[Content panel — right column, ~70% width]
Collection chips: border-radius: 20px | bg: coloured surface
```
**Resource/Blog Cards:**
Card backgrounds use full brand-surface colours as category identifiers:
- Event: `rgb(21, 88, 188)` (blue)
- Video: `rgb(76, 107, 31)` (green)
- Report: `rgb(199, 83, 0)` (orange)
- Ebook: `rgb(128, 63, 165)` (purple)
### 5.3 Visual Hierarchy
1. **h1 at 84px** (centred, Charlie Display 600) — dominant visual anchor of the hero
2. **Section display headings at 68px** (Charlie Display 500) — second tier, full-width coloured surfaces
3. **Section h3 at 52px** — feature section anchors on white backgrounds
4. **CTA buttons** — pill-shaped (40px radius), blue (`--atlassian-accent-cool`), always paired with a secondary ghost/outline variant (inferred)
5. **Category chip tags** — 20px radius, coloured surfaces, drive visual interest in card grids
6. **Whitespace rhythm:** 64px between major sections, 24px between cards, 16px internal padding baseline
### 5.4 Content Patterns
**Eyebrow → Heading → Body → CTA** is the canonical section pattern:
```
[UPPERCASE SMALL LABEL — Charlie Text 12px/700]
[Large Heading — Charlie Display 52–84px/500–600]
[Supporting paragraph — Charlie Text 18px/400]
[Button — pill, 40px radius]
```
**Card pattern** (repeated across 145 instances):
```
[Coloured surface or white bg]
[Category eyebrow — uppercase]
[Title — Charlie Text or Display]
[Body — 16–18px]
[Link/CTA — inline-flex, align:center, icon+text]
```
Shadow appears **only on hover** (`--atlassian-card-shadow-hover`), never in default state.
---
## 6. Component Patterns
### 6.1 Primary Button
**Anatomy:** `[container] > [label text]` — optionally `[icon] [label]`
**Token mappings:**
| State | background | color | border-radius | transition |
|---|---|---|---|---|
| default | `--atlassian-accent-cool` (rgb 53,125,232) | `--atlassian-text-on-dark` | `--atlassian-radius-full` (40px) | `0.25s ease` |
| hover | darken ~10% (inferred) | same | same | same |
| focus | same + outline `2px solid --atlassian-accent-cool` offset 2px | same | same | same |
| active | darken ~15% (inferred) | same | same | same |
| disabled | `--atlassian-bg-disabled` | `--atlassian-border-disabled` | same | none |
```tsx
// Production-ready Primary Button
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
loading?: boolean;
}
export function PrimaryButton({ children, disabled, loading, ...props }: ButtonProps) {
return (
<button
{...props}
disabled={disabled || loading}
aria-busy={loading}
style={{
fontFamily: 'var(--atlassian-font-text)',
fontSize: '16px',
fontWeight: '500',
lineHeight: '1.5',
letterSpacing: 'normal',
backgroundColor: disabled || loading
? 'rgba(23, 23, 23, 0.03)'
: 'var(--atlassian-accent-cool)',
color: disabled || loading
? 'rgb(223, 225, 230)'
: 'var(--atlassian-text-on-dark)',
borderRadius: 'var(--atlassian-radius-full)',
padding: '12px 24px',
border: 'none',
cursor: disabled || loading ? 'not-allowed' : 'pointer',
opacity: disabled ? 1 : undefined, // Atlassian uses opacity:1 on disabled
transition: `background-color var(--atlassian-duration-base) var(--atlassian-ease-default),
box-shadow var(--atlassian-duration-fast) var(--atlassian-ease-default)`,
outline: 'none',
display: 'inline-flex',
alignItems: 'center',
gap: '8px',
textDecoration: 'none',
}}
onFocus={(e) => {
e.currentTarget.style.outline = '2px solid var(--atlassian-accent-cool)';
e.currentTarget.style.outlineOffset = '2px';
}}
onBlur={(e) => {
e.currentTarget.style.outline = 'none';
}}
onMouseEnter={(e) => {
if (!disabled && !loading) {
e.currentTarget.style.backgroundColor = 'rgb(35, 105, 212)';
}
}}
onMouseLeave={(e) => {
if (!disabled && !loading) {
e.currentTarget.style.backgroundColor = 'var(--atlassian-accent-cool)';
}
}}
>
{loading ? <span aria-hidden="true">⋯</span> : null}
{children}
</button>
);
}
```
---
### 6.2 Card
**Anatomy:** `[card-root] > [card-image?] > [card-body] > [eyebrow, title, body, link]`
| State | box-shadow | transform | transition |
|---|---|---|---|
| default | none | none | — |
| hover | `var(--atlassian-card-shadow-hover)` | none | `box-shadow 0.125s ease-out` |
| focus (full-card link) | `var(--atlassian-card-shadow-hover)` | same as hover | same |
| image hover | — | `scale(1.05)` (inferred) | `transform 0.35s ease-in` |
```tsx
export function ResourceCard({
category, categoryColor, title, body, href
}: {
category: string;
categoryColor: string;
title: string;
body: string;
href: string;
}) {
return (
<article
style={{
fontFamily: 'var(--atlassian-font-text)',
fontSize: '16px',
color: 'rgb(80, 82, 88)',
backgroundColor: categoryColor, // e.g. var(--atlassian-bg-surface)
borderRadius: '0px', // NEVER add border-radius to cards
padding: '0px',
display: 'block',
transition: `box-shadow var(--atlassian-duration-fast) var(--atlassian-ease-default)`,
position: 'relative',
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLElement).style.boxShadow =
'var(--atlassian-card-shadow-hover)';
}}
onMouseLeave={(e) => {
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
}}
>
<a className="full-card" href={href} style={{
display: 'block',
textDecoration: 'none',
color: 'inherit',
padding: 'var(--atlassian-space-xl)',
}}>
<span style={{
display: 'block',
fontFamily: 'var(--atlassian-font-text)',
fontSize: '12px',
fontWeight: '700',
lineHeight: '20px',
textTransform: 'uppercase',
color: 'var(--atlassian-text-on-dark)',
marginBottom: 'var(--atlassian-space-md)',
}}>{category}</span>
<h3 style={{
fontFamily: 'var(--atlassian-font-display)',
fontSize: '24px',
fontWeight: '500',
lineHeight: '32px',
color: 'var(--atlassian-text-on-dark)',
margin: '0 0 var(--atlassian-space-sm)',
}}>{title}</h3>
<p style={{
fontSize: '16px',
lineHeight: '24px',
color: 'var(--atlassian-text-on-dark)',
margin: '0',
}}>{body}</p>
</a>
</article>
);
}
```
---
### 6.3 Navigation Item
**Anatomy:** `[nav] > [nav-item] > [label] [dropdown-indicator?]`
| State | color | background |
|---|---|---|
| default | `rgb(41, 42, 46)` | transparent |
| hover | `--atlassian-accent-cool` (inferred) | transparent |
| active / current | `--atlassian-accent-cool` | transparent |
| focus | `--atlassian-accent-cool` + outline | transparent |
```tsx
export function NavItem({ label, href, active = false }: {
label: string; href: string; active?: boolean;
}) {
return (
<a
href={href}
aria-current={active ? 'page' : undefined}
style={{
fontFamily: 'var(--atlassian-font-text)',
fontSize: '16px',
fontWeight: '400',
lineHeight: 'normal',
color: active ? 'var(--atlassian-accent-cool)' : 'var(--atlassian-text-secondary)',
textDecoration: 'none',
display: 'inline-flex',
alignItems: 'center',
padding: '8px 0',
transition: `color var(--atlassian-duration-base) var(--atlassian-ease-default)`,
outline: 'none',
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLAnchorElement).style.color =
'var(--atlassian-accent-cool)';
}}
onMouseLeave={(e) => {
if (!active) {
(e.currentTarget as HTMLAnchorElement).style.color =
'var(--atlassian-text-secondary)';
}
}}
onFocus={(e) => {
(e.currentTarget as HTMLAnchorElement).style.outline =
'2px solid var(--atlassian-accent-cool)';
(e.currentTarget as HTMLAnchorElement).style.outlineOffset = '2px';
}}
onBlur={(e) => {
(e.currentTarget as HTMLAnchorElement).style.outline = 'none';
}}
>
{label}
</a>
);
}
```
---
### 6.4 Tab
**Anatomy:** `[tab-list] > [tab] > [label]` with left-rounded pill shape
| State | background | color | border-radius |
|---|---|---|---|
| default | `#ffffff` | `rgb(24, 104, 219)` | `8px 0 0 8px` |
| hover | `#f0f4ff` (inferred) | `rgb(24, 104, 219)` | same |
| active / selected | `#ffffff` + bottom indicator | `rgb(24, 104, 219)` | same |
| focus | same + focus ring | same | same |
```tsx
export function Tab({ label, selected, onClick }: {
label: string; selected: boolean; onClick: () => void;
}) {
return (
<button
role="tab"
aria-selected={selected}
onClick={onClick}
style={{
fontFamily: '"Charlie Display"',
fontSize: '14px',
fontWeight: '700',
lineHeight: 'normal',
color: 'rgb(24, 104, 219)',
backgroundColor: selected ? '#ffffff' : 'transparent',
borderRadius: '8px 0px 0px 8px',
padding: '12px 32px 12px 16px',
border: 'none',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
transition: `background-color var(--atlassian-duration-base) var(--atlassian-ease-default)`,
width: '100%',
textAlign: 'start',
position: 'relative',
}}
>
{label}
</button>
);
}
```
---
### 6.5 Input
**Anatomy:** `[wrapper] > [input]` — wrapper handles border/shadow, input is transparent
| State | wrapper border | background |
|---|---|---|
| default | transparent (no border) | `#ffffff` (via `--ds-background-input`) |
| hover (not focused, not readonly) | transparent | transparent |
| focus | transparent border (wrapper handles) | `#ffffff` |
| error / invalid | `--_1l1juom` shadow (Atlassian DS token) | `--_1z08gfx` (error tint) |
| disabled | `rgb(223, 225, 230)` border | `rgba(23, 23, 23, 0.03)` |
```tsx
export function TextInput({ id, label, error, disabled, ...props }:
React.InputHTMLAttributes<HTMLInputElement> & {
id: string; label: string; error?: string;
}
) {
return (
<div>
<label htmlFor={id} style={{
fontFamily: 'var(--atlassian-font-text)',
fontSize: '16px',
fontWeight: '400',
color: 'var(--atlassian-text-secondary)',
display: 'block',
marginBottom: 'var(--atlassian-space-xs)',
}}>{label}</label>
<div data-invalid={error ? true : undefined} style={{
borderRadius: '3px',
border: error
? '1px solid rgb(222, 53, 11)'
: `1px solid ${disabled ? 'rgb(223, 225, 230)' : 'transparent'}`,
backgroundColor: disabled ? 'rgba(23, 23, 23, 0.03)' : '#ffffff',
}}>
<input
id={id}
disabled={disabled}
aria-invalid={!!error}
aria-describedby={error ? `${id}-error` : undefined}
style={{
fontFamily: 'var(--atlassian-font-text)',
fontSize: '14px',
fontWeight: '400',
color: 'rgb(66, 82, 110)',
backgroundColor: 'transparent',
border: 'none',
outline: 'none',
width: '100%',
padding: '8px 12px',
cursor: disabled ? 'not-allowed' : 'text',
}}
{...props}
/>
</div>
{error && (
<span id={`${id}-error`} role="alert" style={{
fontFamily: 'var(--atlassian-font-text)',
fontSize: '13px',
color: 'rgb(222, 53, 11)',
marginTop: '4px',
display: 'block',
}}>{error}</span>
)}
</div>
);
}
```
---
### 6.6 Badge / Cookie Banner Element
**Anatomy:** `[badge-container]` — slides in, 2px radius, soft shadow
| State | box-shadow | transition |
|---|---|---|
| default | `rgb(128,128,128) 0px 0px 5px 0px` | `right 0.3s` |
| visible | shadow as above | — |
```css
.atlassian-badge {
font-family: var(--atlassian-font-text);
font-size: 16px;
font-weight: 400;
color: var(--atlassian-text-secondary);
border-radius: var(--atlassian-radius-sm); /* 2px */
box-shadow: rgb(128, 128, 128) 0px 0px 5px 0px;
transition: right 0.3s;
display: block;
}
```
---
## 7. Elevation & Depth
```css
:root {
/* Shadows */
--atlassian-shadow-none: none; /* Cards at rest, nav */
--atlassian-shadow-sm: rgb(204, 204, 204) 0px 0px 1px 0px,
rgba(0, 0, 0, 0.1) 0px 5px 20px -5px; /* Elevated cards, tooltips */
--atlassian-shadow-badge: rgb(128, 128, 128) 0px 0px 5px 0px; /* Badge/cookie panel */
--atlassian-shadow-card-hover: var(--ds-shadow-overlay,
0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f); /* Card hover — from DS overlay token */
/* Borders */
--atlassian-border-disabled-color: rgb(223, 225, 230); /* Disabled inputs */
--atlassian-border-focus-color: var(--atlassian-accent-cool); /* Focus rings */
--atlassian-border-width: 1px; /* Standard border */
--atlassian-border-focus-width: 2px; /* Focus ring width */
/* Z-index scale (reconstructed — moderate confidence) */
--atlassian-z-base: 0; /* Default stacking */
--atlassian-z-card: 1; /* Cards above base */
--atlassian-z-dropdown: 100; /* Nav dropdowns */
--atlassian-z-sticky: 200; /* Sticky nav */
--atlassian-z-modal: 300; /* Modals/overlays */
--atlassian-z-badge: 400; /* Cookie/notification badges */
--atlassian-z-toast: 500; /* Toasts/alerts */
}
```
### Layering Principles
- **Cards are flat by default.** Shadow appears only on `:hover` or `:focus` via `--atlassian-shadow-card-hover`. NEVER add a shadow to a card in its default state.
- **Shadow transitions** on cards use `box-shadow 0.125s ease-out` (`--atlassian-duration-fast`).
- **Navigation uses zero shadow** in the extracted styles. It achieves separation through background colour contrast.
- **Modals** computed with `border-radius: 0px` and no shadow in extracted data — shadow is likely applied to the backdrop/overlay element, not the modal itself. `[TBD - verify manually]`
---
## 8. Motion
```css
:root {
/* Duration tokens */
--atlassian-duration-fast: 0.125s; /* Micro-interactions: shadow reveal, icon nudge */
--atlassian-duration-base: 0.25s; /* Standard UI transitions: colour, opacity, transform */
--atlassian-duration-slow: 0.5s; /* Page-level: button nav transition (extracted from button_primary) */
/* Easing */
--atlassian-ease-default: ease; /* All transitions — 289 elements use this */
--atlassian-ease-out: ease-out; /* Reveals, slides in (card shadow hover) */
--atlassian-ease-in: ease-in; /* Image scale on card hover */
--atlassian-ease-in-out: ease-in-out; /* Icon transform (download arrow) */
}
/* Named keyframe animations (from page CSS) */
/* Content reveals — use for section entry animations */
.wac-fade-in { animation: wac-fade-in var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-fade-up { animation: wac-fade-up var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-fade-out { animation: wac-fade-out var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-scale-in { animation: wac-scale-in var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-scale-out { animation: wac-scale-out var(--atlassian-duration-base) var(--atlassian-ease-default); }
/* Directional slides — use for menu panels, drawer reveals */
.wac-slide-in-top { animation: wac-slide-in-top var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-slide-in-bottom { animation: wac-slide-in-bottom var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-slide-in-left { animation: wac-slide-in-left var(--atlassian-duration-base) var(--atlassian-ease-default); }
.wac-slide-in-right { animation: wac-slide-in-right var(--atlassian-duration-base) var(--atlassian-ease-default); }
/* Spinner */
.loading-spinner { animation: kztt5h0 1s linear infinite; } /* rotate(1turn) */
```
### Named Keyframes (Core Set)
```css
@keyframes wac-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes wac-fade-up {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes wac-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes wac-scale-in {
0% { opacity: 0.8; }
100% { opacity: 1; }
}
@keyframes wac-slide-in-top {
0% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@keyframes wac-slide-in-bottom {
0% { transform: translateY(20px); }
100% { transform: translateY(0px); }
}
@keyframes wac-slide-in-left {
0% { transform: translateX(-20px); }
100% { transform: translateX(0px); }
}
@keyframes wac-slide-in-right {
0% { transform: translateX(20px); }
100% { transform: translateX(0px); }
}
```
### Motion Decision Rules
- **Use `wac-fade-up`** for on-scroll section reveals (content enters from below with opacity)
- **Use `wac-fade-in`** for overlay and dropdown appearances
- **Use `0.125s ease-out`** (fast) for shadow reveals on card hover — shadow feels "instant"
- **Use `0.25s ease`** (base) for colour transitions on nav items and links
- **Use `0.5s ease`** (slow) only for significant state changes (page navigation, full modal transitions)
- **Prefer opacity + transform** over layout-affecting properties (no animating `width`, `height`, or `margin` in UI transitions)
- **Respect `prefers-reduced-motion`**: wrap all `wac-*` animations in `@media (prefers-reduced-motion: no-preference)`
---
## 9. Anti-Patterns & Constraints
1. **NEVER use Inter, Roboto, or Arial as the primary font → Why: AI models default to Inter/Roboto as "modern SaaS fonts" because they appear in countless training examples. On atlassian.com the heading font is Charlie Display and the UI font is Charlie Text — both proprietary. Using Inter produces a completely off-brand result that fails visual QA immediately → Instead: always set `font-family: var(--atlassian-font-display)` for headings and `font-family: var(--atlassian-font-text)` for body/UI, with the full fallback stack specified in the token.**
2. **NEVER add `border-radius` to card containers → Why: AI agents see "modern card" and apply `border-radius: 8px` or `border-radius: 12px` by default. Atlassian's cards have `border-radius: 0px` in every extracted computed style — the brand uses sharp-cornered card containers with coloured backgrounds as the design language. Rounded corners on cards introduce a visual style from a different brand → Instead: set `border-radius: 0px` explicitly on card roots; reserve `border-radius: 40px` for CTA buttons, `20px` for category chips, and `3px` for nav pills only.**
3. **NEVER use a non-pill `border-radius` on primary CTA buttons → Why: AI generates `border-radius: 8px` (a common "slightly rounded" default) on buttons. The Atlassian primary CTA is a `border-radius: 40px` pill — this is a brand signature extracted directly from the page. Any other radius is visually incorrect → Instead: always apply `border-radius: var(--atlassian-radius-full)` (40px) to primary action buttons.**
4. **NEVER hardcode colour hex values in component code → Why: AI agents writing inline styles will emit literal values like `backgroundColor: '#0052CC'` (Atlassian's legacy blue) or `color: '#172B4D'` (legacy ADS tokens). These bypass the token system and will not update when themes change, and they may reference the wrong colour tier entirely → Instead: always reference `var(--atlassian-*)` tokens. If a token doesn't exist yet, add it to the token system first.**
5. **NEVER construct Tailwind class names dynamically → Why: Tailwind's build-time purge removes any class whose full string doesn't appear as a literal in source. Dynamic constructions like `bg-${brandColor}` or `` `text-${size}` `` produce classes that exist at runtime but are purged from the CSS bundle, resulting in unstyled elements in production → Instead: use full class names as string literals or use `style={{ }}` with CSS variable references for dynamic values.**
6. **NEVER omit hover, focus, active, and disabled states on interactive components → Why: AI agents completing "create a button" will produce only the default visual state. Atlassian's interactive state system is explicit and extracted: card hover triggers `box-shadow 0.125s ease-out`, input disabled sets `cursor: not-allowed` and `opacity: 1`, tab hover triggers a pseudo-element underline indicator. Missing states break accessibility (WCAG 2.1 2.4.7 requires visible focus) and produce incomplete components → Instead: implement all states listed in Section 6 for every interactive component.**
7. **NEVER use `--atlassian-bg-app` (yellow, `rgb(242,172,0)`) or brand mark colours as surface or text colours → Why: The four brand mark colours (blue, yellow, purple, green) are extracted exclusively from SVG fill attributes on illustration shapes — they are illustration pigments, not UI colours. An AI agent seeing a bright yellow token will misapply it to button backgrounds or heading colours, producing garish results → Instead: use brand mark colours ONLY in `fill` attributes on SVG/illustration elements. For surface colours, use `--atlassian-bg-surface` (blue), `--atlassian-bg-surface-alt` (green), or `--atlassian-accent-warm` (orange).**
8. **NEVER use spacing values outside the token scale → Why: The extraction flagged `10px` as off-grid relative to a 4px base. AI agents generating intermediate padding values (e.g. `padding: 14px 18px`) will break the visual rhythm that the 12/16/24/32/40/64px scale creates. Atlassian's dense, information-rich pages rely on consistent spatial cadence to remain scannable → Instead: map all spacing to the nearest token (`--atlassian-space-sm` 12px, `--atlassian-space-md` 16px, etc.). Use `--atlassian-space-xs` (10px) only when replicating an existing pattern, never as a new spacing invention.**
9. **NEVER use `!important` to override token-based styles → Why: AI agents resolving specificity conflicts often reach for `!important` as a shortcut. This breaks the token cascade, making future theme changes and dark-mode additions impossible to apply predictably → Instead: increase selector specificity structurally (add a parent class, use a `:where()` layer) or restructure the component hierarchy. If overriding a third-party style (Bootstrap, Atlassian DS), scope the override to a specific component namespace.**
10. **NEVER use absolute positioning for primary layout structure → Why: AI agents building multi-column layouts sometimes use `position: absolute` with calculated widths instead of flex/grid. The Atlassian page uses `display: flex` for navigation and `display: grid` for card grids exclusively. Absolute-positioned layouts break at breakpoints, fail at content-dynamic heights, and are inaccessible for zoom users → Instead: use `display: flex; flex-direction: row` for navigation and horizontal sequences; use `display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px` for card grids.**
11. **NEVER use Charlie Display at body text sizes (below 24px) except for tabs → Why: Charlie Display is a display typeface optimised for large-scale rendering. The only extracted sub-24px use of Charlie Display is the tab component at 14px/700. At body sizes the display face loses legibility advantage and appears typographically incongruent. AI agents may use it at 14–18px because it appears in the font stack → Instead: use `var(--atlassian-font-text)` (Charlie Text) for all text below 24px, with the sole exception of tab labels.**
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (54) */
--wac-color-heading: #101214;
--wac-color-body: #292a2e;
--brand-surface-1: rgb(21, 88, 188); /* Brand surface, dominant on 4 elements — e.g. "EventMay 6-7Anaheim, CACatch t" /* mined from computed styles */ */
--brand-surface-2: rgb(76, 107, 31); /* Brand surface, dominant on 4 elements — e.g. "VideoRovo at work: How context" /* mined from computed styles */ */
--brand-surface-3: rgb(199, 83, 0); /* Brand surface, dominant on 2 elements — e.g. "ReportHow top teams avoid the " /* mined from computed styles */ */
--brand-surface-4: rgb(128, 63, 165); /* Brand surface, dominant on 2 elements — e.g. "EbookInside the agentic enterp" /* mined from computed styles */ */
--brand-mark-1: rgb(53, 125, 232); /* Brand mark fill on 60 svg shapes — e.g. "path" /* mined from svg fill */ */
--brand-mark-2: rgb(242, 172, 0); /* Brand mark fill on 10 svg shapes — e.g. "rect" /* mined from svg fill */ */
--brand-mark-3: rgb(191, 99, 243); /* Brand mark fill on 13 svg shapes — e.g. "circle" /* mined from svg fill */ */
--brand-mark-4: rgb(130, 181, 54); /* Brand mark fill on 13 svg shapes — e.g. "circle" /* mined from svg fill */ */
--atlassian-bg-surface: rgb(21, 88, 188);
--atlassian-accent: rgb(76, 107, 31);
--atlassian-accent-cool: rgb(53, 125, 232);
--atlassian-accent-warm: rgb(199, 83, 0);
--atlassian-accent-hover: rgb(130, 181, 54);
--atlassian-bg-app: rgb(242, 172, 0);
--atlassian-text-primary: #101214;
--atlassian-text-secondary: #292a2e;
--atlassian-text-on-dark: #ffffff;
--primitive-blue-600: rgb(21, 88, 188);
--primitive-blue-400: rgb(53, 125, 232);
--primitive-blue-active: rgb(24, 104, 219);
--primitive-green-700: rgb(76, 107, 31);
--primitive-green-400: rgb(130, 181, 54);
--primitive-orange-600: rgb(199, 83, 0);
--primitive-yellow-500: rgb(242, 172, 0);
--primitive-purple-400: rgb(191, 99, 243);
--primitive-purple-600: rgb(128, 63, 165);
--primitive-neutral-950: #101214;
--primitive-neutral-900: #292a2e;
--primitive-neutral-700: rgb(41, 42, 46);
--primitive-neutral-500: rgb(80, 82, 88);
--primitive-neutral-400: rgb(66, 82, 110);
--primitive-neutral-200: rgb(223, 225, 230);
--primitive-neutral-000: #ffffff;
--primitive-neutral-disabled-bg: rgba(23, 23, 23, 0.03);
--atlassian-bg-surface-alt: rgb(76, 107, 31);
--atlassian-bg-surface-warm: rgb(199, 83, 0);
--atlassian-bg-surface-purple: rgb(128, 63, 165);
--atlassian-bg-white: #ffffff;
--atlassian-text-muted: rgb(80, 82, 88);
--atlassian-text-input: rgb(66, 82, 110);
--atlassian-border-disabled: rgb(223, 225, 230);
--atlassian-bg-disabled: rgba(23, 23, 23, 0.03);
--atlassian-btn-primary-bg: var(--atlassian-accent-cool);
--atlassian-tab-bg: var(--atlassian-bg-white);
--atlassian-border-disabled-color: rgb(223, 225, 230);
--atlassian-border-focus-color: var(--atlassian-accent-cool);
--atlassian-border-width: 1px;
--atlassian-border-focus-width: 2px;
--atlassian-mark-blue: rgb(53, 125, 232);
--atlassian-mark-yellow: rgb(242, 172, 0);
--atlassian-mark-purple: rgb(191, 99, 243);
--atlassian-mark-green: rgb(130, 181, 54);
/* Typography (38) */
--atlassian-recommended-system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--atlassian-recommended-sans-system-fonts: ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
--atlassian-sans-font-family: "Atlassian Sans", sans-system-fonts;
--bxp-charlie-display-font-family: "Charlie Display", system-fonts;
--bxp-charlie-text-font-family: "Charlie Text", system-fonts;
--font-size-xs: 13px; /* 3 elements — e.g. h2 "Products", h2 "Resources", h2 "Learn" /* mined from computed styles */ */
--font-size-sm: 16px; /* 9 elements — e.g. a "Skip to content", a "Atlassian", a "Products" /* mined from computed styles */ */
--font-size-md: 18px; /* 2 elements — e.g. p "Turn scattered tools", p "Includes" /* mined from computed styles */ */
--font-size-lg: 24px; /* 6 elements — e.g. p "Everyone. Working on", p "Discover collections", p "Jira" /* mined from computed styles */ */
--font-size-xl: 40px; /* 3 elements — e.g. h3 "Secure by design", h3 "Compliant across the", h3 "Reliable at scale" /* mined from computed styles */ */
--font-size-2xl: 68px; /* 4 elements — e.g. h2 "Transform how your t", h2 "Fueled by Atlassian’", h2 "Built for how real t" /* mined from computed styles */ */
--font-size-3xl: 84px; /* 2 elements — e.g. h1 "Unleash your teams a", h2 "Power up your teams " /* mined from computed styles */ */
--font-weight-regular: 400; /* 15 elements — e.g. p "Everyone. Working on", p "Discover collections", p "Turn scattered tools" /* mined from computed styles */ */
--font-weight-medium: 500; /* 10 elements — e.g. h2 "Transform how your t", h2 "Fueled by Atlassian’", h2 "Built for how real t" /* mined from computed styles */ */
--font-weight-semibold: 600; /* 2 elements — e.g. h1 "Unleash your teams a", h2 "Power up your teams " /* mined from computed styles */ */
--font-weight-bold: 700; /* 3 elements — e.g. h2 "Products", h2 "Resources", h2 "Learn" /* mined from computed styles */ */
--line-height-tight: 32px; /* 6 elements — e.g. p "Everyone. Working on", p "Discover collections", p "Jira" /* mined from computed styles */ */
--line-height-normal: 48px; /* 3 elements — e.g. h3 "Secure by design", h3 "Compliant across the", h3 "Reliable at scale" /* mined from computed styles */ */
--line-height-loose: 76px; /* 4 elements — e.g. h2 "Transform how your t", h2 "Fueled by Atlassian’", h2 "Built for how real t" /* mined from computed styles */ */
--atlassian-font-display: "Charlie Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--atlassian-font-text: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--atlassian-font-sans: "Atlassian Sans", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, sans-serif;
--atlassian-btn-primary-text: var(--atlassian-text-on-dark);
--atlassian-tab-text: var(--atlassian-accent-cool);
--atlassian-font-weight-regular: 400;
--atlassian-font-weight-medium: 500;
--atlassian-font-weight-semibold: 600;
--atlassian-font-weight-bold: 700;
--atlassian-font-size-xs: 13px;
--atlassian-font-size-sm: 16px;
--atlassian-font-size-md: 18px;
--atlassian-font-size-lg: 24px;
--atlassian-font-size-xl: 40px;
--atlassian-font-size-2xl: 68px;
--atlassian-font-size-3xl: 84px;
--atlassian-line-height-tight: 32px;
--atlassian-line-height-normal: 48px;
--atlassian-line-height-loose: 76px;
/* Spacing (21) */
--space-xs: 10px; /* 4 elements — e.g. ul ._1e0c11p5, ul ._1e0c11p5, ul ._1e0c11p5 /* mined from computed styles */ */
--space-sm: 12px; /* 3 elements — e.g. nav ._11q7cd5j, nav ._11q7cd5j, nav ._11q7cd5j /* mined from computed styles */ */
--space-md: 16px; /* 4 elements — e.g. nav ._11q7cd5j, nav ._11q7cd5j, nav ._11q7cd5j /* mined from computed styles */ */
--space-lg: 24px; /* 50 elements — e.g. li ._1e0c1txw, a ._1e0c1txw, a ._1e0c1txw /* mined from computed styles */ */
--space-xl: 32px; /* 24 elements — e.g. section ._1e0c1txw, section ._1e0c1txw, section ._1e0c1txw /* mined from computed styles */ */
--space-2xl: 40px; /* 18 elements — e.g. section ._1e0c1txw, section ._1e0c1txw, section ._1e0c1txw /* mined from computed styles */ */
--space-3xl: 64px; /* 3 elements — e.g. section ._1e0c1txw, section ._1e0c1txw, section ._1e0c1txw /* mined from computed styles */ */
--atlassian-space-xs: 10px;
--atlassian-space-sm: 12px;
--atlassian-space-md: 16px;
--atlassian-space-lg: 24px;
--atlassian-space-xl: 32px;
--atlassian-space-2xl: 40px;
--atlassian-space-3xl: 64px;
--atlassian-space-4: 4px;
--atlassian-space-8: 8px;
--atlassian-container-max: 1440px;
--atlassian-container-lg: 1280px;
--atlassian-container-md: 1024px;
--atlassian-container-sm: 768px;
--atlassian-grid-gap: var(--atlassian-space-lg);
/* Radius (11) */
--radius-sm: 2px; /* 5 elements — e.g. button .onetrust-close-btn-handler, button .ot-link-btn "Back Button", button .save-preference-btn-handler "Confirm my choices" /* mined from computed styles */ */
--radius-md: 3px; /* 3 elements — e.g. button .css-48ccbj "Sign in", button .css-48ccbj "Sign in", a ._1q51u2gc "Products" /* mined from computed styles */ */
--radius-lg: 20px; /* 6 elements — e.g. a ._1e0c1txw "Teamwork CollectionS", a ._1e0c1txw "Strategy CollectionO", a ._1e0c1txw "Service CollectionDe" /* mined from computed styles */ */
--radius-full: 40px; /* 2 elements — e.g. button ._1e0c1txw, button ._1e0c1txw /* mined from computed styles */ */
--atlassian-radius-sm: 2px;
--atlassian-radius-md: 3px;
--atlassian-radius-lg: 20px;
--atlassian-radius-full: 40px;
--atlassian-btn-radius: var(--atlassian-radius-full);
--atlassian-tab-radius: 8px 0px 0px 8px;
--atlassian-badge-radius: var(--atlassian-radius-sm);
/* Effects (7) */
--shadow-sm: rgb(204, 204, 204) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 5px 20px -5px; /* 2 elements — e.g. div ._1e0cglyw, div ._1e0cglyw /* mined from computed styles */ */
--atlassian-shadow-sm: rgb(204,204,204) 0px 0px 1px 0px, rgba(0,0,0,0.1) 0px 5px 20px -5px;
--atlassian-badge-shadow: rgb(128,128,128) 0px 0px 5px 0px;
--atlassian-card-shadow-hover: var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
--atlassian-shadow-none: none;
--atlassian-shadow-badge: rgb(128,128,128) 0px 0px 5px 0px;
--atlassian-shadow-card-hover: var(--ds-shadow-overlay,
0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
/* Motion (110) */
----motion-wac-fade-in: @keyframes wac-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes wac-fade-in */
----motion-wac-fade-up: @keyframes wac-fade-up {
0% { opacity: 0; transform: translateY(20px); }
}; /* @keyframes wac-fade-up */
----motion-wac-fade-out: @keyframes wac-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes wac-fade-out */
----motion-wac-scale-in: @keyframes wac-scale-in {
0% { opacity: 0.8; }
100% { opacity: 1; }
}; /* @keyframes wac-scale-in */
----motion-wac-scale-out: @keyframes wac-scale-out {
0% { opacity: 1; }
100% { opacity: 0.8; }
}; /* @keyframes wac-scale-out */
----motion-wac-slide-in-top: @keyframes wac-slide-in-top {
0% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}; /* @keyframes wac-slide-in-top */
----motion-wac-slide-in-bottom: @keyframes wac-slide-in-bottom {
0% { transform: translateY(20px); }
100% { transform: translateY(0px); }
}; /* @keyframes wac-slide-in-bottom */
----motion-wac-slide-in-left: @keyframes wac-slide-in-left {
0% { transform: translateX(-20px); }
100% { transform: translateX(0px); }
}; /* @keyframes wac-slide-in-left */
----motion-wac-slide-in-right: @keyframes wac-slide-in-right {
0% { transform: translateX(20px); }
100% { transform: translateX(0px); }
}; /* @keyframes wac-slide-in-right */
----motion-wac-slide-out-top: @keyframes wac-slide-out-top {
0% { transform: translateY(0px); }
100% { transform: translateY(-20px); }
}; /* @keyframes wac-slide-out-top */
----motion-wac-slide-out-bottom: @keyframes wac-slide-out-bottom {
0% { transform: translateY(0px); }
100% { transform: translateY(20px); }
}; /* @keyframes wac-slide-out-bottom */
----motion-wac-slide-out-left: @keyframes wac-slide-out-left {
0% { transform: translateX(0px); }
100% { transform: translateX(-20px); }
}; /* @keyframes wac-slide-out-left */
----motion-wac-slide-out-right: @keyframes wac-slide-out-right {
0% { transform: translateX(0px); }
100% { transform: translateX(20px); }
}; /* @keyframes wac-slide-out-right */
----motion-fadein: @keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadein */
----motion-fadeInFromTop: @keyframes fadeInFromTop {
0% { opacity: 0; transform: translate(0px, -50px); }
100% { opacity: 1; transform: translate(0px); }
}; /* @keyframes fadeInFromTop */
----motion-fadeswipe: @keyframes fadeswipe {
0% { opacity: 0; transform: translateX(75pt); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes fadeswipe */
----motion-fadeswipesmall: @keyframes fadeswipesmall {
0% { opacity: 0; transform: translateX(20px); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes fadeswipesmall */
----motion-flickerAnimation: @keyframes flickerAnimation {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}; /* @keyframes flickerAnimation */
----motion-k10qkshg: @keyframes k10qkshg {
0% { width: var(--sl-featured-width); height: var(--sl-… <0.4KB elided>; /* @keyframes k10qkshg */
----motion-k10ssv7b: @keyframes k10ssv7b {
0% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes k10ssv7b */
----motion-k11647nu: @keyframes k11647nu {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(0px, -4px, 0px); }
}; /* @keyframes k11647nu */
----motion-k12cqms0: @keyframes k12cqms0 {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(calc(-5% - 4px), 0px, 0px); }
}; /* @keyframes k12cqms0 */
----motion-k1366g2b: @keyframes k1366g2b {
0% { opacity: 1; transform: translateY(-24px); }
100% { opacity: 1; transform: translateY(24px); }
}; /* @keyframes k1366g2b */
----motion-k13s0oiv: @keyframes k13s0oiv {
0% { opacity: 0; filter: blur(8px); }
100% { opacity: 1; filter: blur(); }
}; /* @keyframes k13s0oiv */
----motion-k14orlqj: @keyframes k14orlqj {
0% { transform: translateX(-13rem); }
100% { transform: translateX(0px); }
}; /* @keyframes k14orlqj */
----motion-k15q8p25: @keyframes k15q8p25 {
0% { width: var(--sl-featured-width); height: var(--sl-… <0.3KB elided>; /* @keyframes k15q8p25 */
----motion-k16084ef: @keyframes k16084ef {
0%, 35% { width: 300px; height: 75pt; }
70% { width: 100%; height: 75pt; }
100% { width: 100%; height: 100%; }
}; /* @keyframes k16084ef */
----motion-k17lnbbx: @keyframes k17lnbbx {
0% { opacity: 0; stroke-dashoffset: 60px; transform: rotate(50deg); }
100% { opacity: 1; stroke-dashoffset: 50px; transform: rotate(230deg); }
}; /* @keyframes k17lnbbx */
----motion-k182pxwt: @keyframes k182pxwt {
0% { width: 0px; }
100% { width: 100%; }
}; /* @keyframes k182pxwt */
----motion-k18nt15r: @keyframes k18nt15r {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes k18nt15r */
----motion-k18u7571: @keyframes k18u7571 {
0% { width: var(--sl-small-width); height: var(--sl-sma… <0.5KB elided>; /* @keyframes k18u7571 */
----motion-k19c8zrh: @keyframes k19c8zrh {
0%, 35% { width: 250px; }
70%, 100% { width: 100%; }
}; /* @keyframes k19c8zrh */
----motion-k1a7rfge: @keyframes k1a7rfge {
0% { background-position: -300px 0px; }
100% { background-position: 125pc 0px; }
}; /* @keyframes k1a7rfge */
----motion-k1aqz426: @keyframes k1aqz426 {
0% { width: var(--sl-small-width); height: var(--sl-sma… <0.5KB elided>; /* @keyframes k1aqz426 */
----motion-k1bbsfcj: @keyframes k1bbsfcj {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(100%, 0px, 0px); }
}; /* @keyframes k1bbsfcj */
----motion-k1dj5hf1: @keyframes k1dj5hf1 {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(calc(5% + 4px), 0px, 0px); }
}; /* @keyframes k1dj5hf1 */
----motion-k1dwi8u6: @keyframes k1dwi8u6 {
0% { width: var(--sl-small-width); height: var(--sl-sma… <0.5KB elided>; /* @keyframes k1dwi8u6 */
----motion-k1ekdaqb: @keyframes k1ekdaqb {
0% { opacity: 0; transform: translateX(100%); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes k1ekdaqb */
----motion-k1febnmo: @keyframes k1febnmo {
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes k1febnmo */
----motion-k1fo8igf: @keyframes k1fo8igf {
0% { opacity: 0; transform: translate3d(0px, -4px, 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1fo8igf */
----motion-k1gp9ioh: @keyframes k1gp9ioh {
0% { opacity: 0; transform: translate3d(calc(5% + 4px), 0px, 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1gp9ioh */
----motion-k1h8oue3: @keyframes k1h8oue3 {
0% { opacity: 0; transform: translate3d(0px, 4px, 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1h8oue3 */
----motion-k1hd1027: @keyframes k1hd1027 {
0% { transform: translateY(0px); }
100% { transform: translateY(3rem); }
}; /* @keyframes k1hd1027 */
----motion-k1j8u6o8: @keyframes k1j8u6o8 {
0% { opacity: 0; transform: translate3d(0px, -100%, 0px); }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1j8u6o8 */
----motion-k1jfli1s: @keyframes k1jfli1s {
0% { width: var(--sl-featured-width); height: var(--sl-… <0.4KB elided>; /* @keyframes k1jfli1s */
----motion-k1l93kt0: @keyframes k1l93kt0 {
0% { opacity: 0; transform: translateX(100%); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes k1l93kt0 */
----motion-k1m8kn42: @keyframes k1m8kn42 {
0% { transform: translateY(3rem); }
100% { transform: translateY(0px); }
}; /* @keyframes k1m8kn42 */
----motion-k1na2ju7: @keyframes k1na2ju7 {
0% { opacity: 0; transform: translate3d(-100%, 0px, 0px); }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1na2ju7 */
----motion-k1o0pcpo: @keyframes k1o0pcpo {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}; /* @keyframes k1o0pcpo */
----motion-k1obljfm: @keyframes k1obljfm {
0% { height: 0px; }
100% { height: 100%; }
}; /* @keyframes k1obljfm */
----motion-k1ojqp0a: @keyframes k1ojqp0a {
0% { transform: translate(-5pc, -50px); }
100% { transform: translate(90px, -70px); }
}; /* @keyframes k1ojqp0a */
----motion-k1phiwcn: @keyframes k1phiwcn {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}; /* @keyframes k1phiwcn */
----motion-k1rm11hx: @keyframes k1rm11hx {
0% { max-height: 0px; }
100% { max-height: 500px; }
}; /* @keyframes k1rm11hx */
----motion-k1rq2oqw: @keyframes k1rq2oqw {
0% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; }
75% { transform: scale(1.25); }
100% { transform: scale(1); }
}; /* @keyframes k1rq2oqw */
----motion-k1sspn6e: @keyframes k1sspn6e {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(0px, calc(-5% - 4px), 0px); }
}; /* @keyframes k1sspn6e */
----motion-k1tay9q1: @keyframes k1tay9q1 {
100% { opacity: 0; transform: scale(0.75); }
}; /* @keyframes k1tay9q1 */
----motion-k1v8un7d: @keyframes k1v8un7d {
0% { stroke-dashoffset: 60px; transform: rotate(50deg); }
100% { stroke-dashoffset: 50px; transform: rotate(230deg); }
}; /* @keyframes k1v8un7d */
----motion-k1vint76: @keyframes k1vint76 {
0% { opacity: 0; transform: translate3d(4px, 0px, 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1vint76 */
----motion-k1vmhg30: @keyframes k1vmhg30 {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(0px, 100%, 0px); }
}; /* @keyframes k1vmhg30 */
----motion-k1vqx1x: @keyframes k1vqx1x {
0% { background-position: -300px 0px; }
100% { background-position: 750pt 0px; }
}; /* @keyframes k1vqx1x */
----motion-k1wh49cw: @keyframes k1wh49cw {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(-100%, 0px, 0px); }
}; /* @keyframes k1wh49cw */
----motion-k1y4xa46: @keyframes k1y4xa46 {
0% { opacity: 0; transform: translate3d(calc(-5% - 4px), 0px, 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes k1y4xa46 */
----motion-k1ydy56c: @keyframes k1ydy56c {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(0px, -100%, 0px); }
}; /* @keyframes k1ydy56c */
----motion-k1ylodgn: @keyframes k1ylodgn {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(4px, 0px, 0px); }
}; /* @keyframes k1ylodgn */
----motion-k1zwidv: @keyframes k1zwidv {
0% { opacity: 1; transform: translateY(50%); }
2% { transform: translateY(0px); }
49% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}; /* @keyframes k1zwidv */
----motion-k3433yz: @keyframes k3433yz {
0% { width: var(--sl-small-width); height: var(--sl-smal… <0.4KB elided>; /* @keyframes k3433yz */
----motion-k68jmz9: @keyframes k68jmz9 {
0% { opacity: 1; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(-10px); }
}; /* @keyframes k68jmz9 */
----motion-k73gfcn: @keyframes k73gfcn {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(0px, 4px, 0px); }
}; /* @keyframes k73gfcn */
----motion-k73ob7o: @keyframes k73ob7o {
0% { width: var(--sl-small-width); height: var(--sl-smal… <0.5KB elided>; /* @keyframes k73ob7o */
----motion-k7ccisj: @keyframes k7ccisj {
0% { opacity: 1; }
100% { opacity: 0; transform: translate3d(-4px, 0px, 0px); }
}; /* @keyframes k7ccisj */
----motion-k7ep2a6: @keyframes k7ep2a6 {
0% { transform: translateY(0px); }
100% { transform: translateY(0px); }
50% { transform: translateY(-4px); }
}; /* @keyframes k7ep2a6 */
----motion-k7nhgau: @keyframes k7nhgau {
0% { max-height: 500px; }
100% { max-height: 0px; display: none; }
}; /* @keyframes k7nhgau */
----motion-k8cfm2j: @keyframes k8cfm2j {
0% { opacity: 0; height: 0px; }
100% { opacity: 1; height: 100%; }
}; /* @keyframes k8cfm2j */
----motion-k8nf8el: @keyframes k8nf8el {
0% { opacity: 0; transform: translate3d(100%, 0px, 0px); }
100% { opacity: 1; transform: none; }
}; /* @keyframes k8nf8el */
----motion-k9i97cc: @keyframes k9i97cc {
0% { opacity: 0; transform: translate3d(0px, calc(5% + 4px), 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes k9i97cc */
----motion-kb8er1w: @keyframes kb8er1w {
0% { transform: translateX(13rem); }
100% { transform: translateX(0px); }
}; /* @keyframes kb8er1w */
----motion-kbbmxla: @keyframes kbbmxla {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; display: none; transform: scale(0.95); }
}; /* @keyframes kbbmxla */
----motion-kbjizr2: @keyframes kbjizr2 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes kbjizr2 */
----motion-kbqfe0b: @keyframes kbqfe0b {
0%, 70% { clip-path: polygon(0px 0px, 100% 0px, 100% 0px, 0px 0px); }
100% { clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
}; /* @keyframes kbqfe0b */
----motion-kc09ee: @keyframes kc09ee {
0% { background-position: 50% 0px; }
100% { background-position: -50% 0px; }
}; /* @keyframes kc09ee */
----motion-kcn2yry: @keyframes kcn2yry {
0% { transform: rotate(0deg); }
100% { transform: rotate(-180deg); }
}; /* @keyframes kcn2yry */
----motion-kdubt3d: @keyframes kdubt3d {
0% { width: var(--sl-small-width); height: var(--sl-smal… <0.4KB elided>; /* @keyframes kdubt3d */
----motion-kebabnc: @keyframes kebabnc {
0% { opacity: 0; transform: translateX(-100%); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes kebabnc */
----motion-kecjqy3: @keyframes kecjqy3 {
0% { opacity: 0; transform: translate3d(0px, calc(-5% - 4px), 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes kecjqy3 */
----motion-kfg0zxp: @keyframes kfg0zxp {
0% { width: var(--sl-featured-width); height: var(--sl-h… <0.3KB elided>; /* @keyframes kfg0zxp */
----motion-kgnpaw5: @keyframes kgnpaw5 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes kgnpaw5 */
----motion-kh03vup: @keyframes kh03vup {
0% { opacity: 0; transform: translateX(-100%); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes kh03vup */
----motion-kh6n47f: @keyframes kh6n47f {
0% { stroke-dashoffset: 20px; }
100% { stroke-dashoffset: 0; }
}; /* @keyframes kh6n47f */
----motion-kij747q: @keyframes kij747q {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 1; }
}; /* @keyframes kij747q */
----motion-klep33g: @keyframes klep33g {
0% { opacity: 0; transform: translateY(-40px); }
15% {… <0.2KB elided>; /* @keyframes klep33g */
----motion-km3530i: @keyframes km3530i {
0% { opacity: 0; transform: translate3d(-4px, 0px, 0px); }
50% { opacity: 1; }
100% { opacity: 1; transform: none; }
}; /* @keyframes km3530i */
----motion-kmbxsvu: @keyframes kmbxsvu {
0% { outline-offset: 10px; }
100% { outline-offset: 0px; }
}; /* @keyframes kmbxsvu */
----motion-kmx8amg: @keyframes kmx8amg {
0% { opacity: 1; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes kmx8amg */
----motion-ko8h14c: @keyframes ko8h14c {
0% { opacity: 0; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
100% { transform: scale(1); }
}; /* @keyframes ko8h14c */
----motion-kqit24e: @keyframes kqit24e {
0% { opacity: 0; transform: translate3d(0px, 100%, 0px); }
100% { opacity: 1; transform: none; }
}; /* @keyframes kqit24e */
----motion-kskr1ph: @keyframes kskr1ph {
0% { background-color: var(--_wenvhl); }
100% { background-color: var(--_1soe2er); }
}; /* @keyframes kskr1ph */
----motion-ktqcyze: @keyframes ktqcyze {
0% { width: var(--sl-small-width); height: var(--sl-smal… <0.4KB elided>; /* @keyframes ktqcyze */
----motion-ktsahvd: @keyframes ktsahvd {
0% { background-position: -20px 0px; }
100% { background-position: 60px 0px; }
}; /* @keyframes ktsahvd */
----motion-kwjg7dx: @keyframes kwjg7dx {
0% { width: var(--sl-small-width); height: var(--sl-smal… <0.5KB elided>; /* @keyframes kwjg7dx */
----motion-kwlxyjp: @keyframes kwlxyjp {
0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
100% { opacity: 0; transform: translate3d(0px, calc(5% + 4px), 0px); }
}; /* @keyframes kwlxyjp */
----motion-kwx91l9: @keyframes kwx91l9 {
0% { opacity: 1; display: block; }
100% { opacity: 0; display: none; }
}; /* @keyframes kwx91l9 */
----motion-kztt5h0: @keyframes kztt5h0 {
100% { transform: rotate(1turn); }
}; /* @keyframes kztt5h0 */
----motion-scroll: @keyframes scroll {
0% { transform: translateX(0px); }
100% { transform: translateX(calc(-50% - 10px)); }
}; /* @keyframes scroll */
----motion-animation-n2ntg8: @keyframes animation-n2ntg8 {
100% { transform: rotate(360deg); }
}; /* @keyframes animation-n2ntg8 */
----motion-animation-1rxe0gr: @keyframes animation-1rxe0gr {
0% { transform: rotate(50deg); opacity: 0; stroke-dashoffset: 60; }
100% { transform: rotate(230deg); opacity: 1; stroke-dashoffset: 50; }
}; /* @keyframes animation-1rxe0gr */
----motion-slide-down-custom: @-webkit-keyframes slide-down-custom {
0% { }
100% { bottom: 0px; }
}; /* @keyframes slide-down-custom */
--duration-fast: 0.125s; /* 2 elements — e.g. button, button /* mined from computed styles */ */
--duration-base: 0.25s; /* 21 elements — e.g. a, a, a /* mined from computed styles */ */
--duration-slow: 0.5s; /* 2 elements — e.g. button, button /* mined from computed styles */ */
--ease-default: ease; /* 289 elements — e.g. button, button, button /* mined from computed styles */ */
```
## Appendix B: Token Source Metadata
```yaml
tokenSource: reconstructed-from-computed
confidence: medium
cssVarsFound: 7
totalTokensMapped: 39
extraction_notes:
- 7 CSS custom properties were found on the live page
- Remaining tokens reconstructed from computed styles on 18 element types
- Colour tokens clustered by hue family into semantic roles
- Spacing clustered from observed values: 10, 12, 16, 24, 32, 40, 64px
- Border-radius census: 2px (5 elements), 3px (3 elements), 20px (6 elements), 40px (2 elements)
- Pill-shaped buttons (40px) confirmed on primary CTA elements
- Tab radius (8px 0 0 8px) is a component-specific value, NOT a global radius token
- Cookie/badge radius (2px) is --atlassian-radius-sm, isolated from brand UI
- Card radius is 0px — sharp, not rounded
- Body text colour (white) in computed styles reflects a dark/coloured background context at extraction time
- h2 computed at 12px/uppercase is an eyebrow pattern, not a true heading level
- Libraries detected: Tailwind (utility classes), Bootstrap (grid/layout)
- Atlassian Design System (ADS) tokens (--ds-*) are referenced internally but not exposed as page-level custom properties
- Motion: 70+ named keyframe animations detected; core wac-* animations documented; hashed keyframes (k*) are ADS internal
confidence_by_token_type:
font_families: high # explicitly declared as CSS vars
font_size_scale: high # extracted from computed styles across multiple elements
font_weights: high # extracted from computed styles across multiple elements
line_heights: high # extracted from computed styles
spacing: high # extracted from CSS vars (--space-*)
border_radius: high # census from 16 elements across 4 distinct values
shadows: high # extracted from CSS var (--shadow-sm)
motion_durations: high # extracted from CSS vars
colour_surfaces: medium # role assignment reconstructed from context (section bg, card bg)
colour_text: low # body text was white at extraction (dark bg context)
colour_interactive: low # accent-cool role inferred from tab active colour + link colour
colour_marks: high # SVG fill extraction is deterministic
clustering_method:
colours: hue-family clustering + element context (surface/mark/text/interactive)
spacing: direct CSS var extraction (no clustering needed)
radius: element-type census + brand signature identification (CTA pill = 40px)
typography: direct computed style extraction + family-role assignment by element type
```More from the gallery
Browse all kits →You may also like
github.com
MITGitHub's production design system with 568 CSS custom properties, featuring clean typography, accessible colour tokens, and motion primitives built for developer platforms and collaborative workflows
Layout04
darkdeveloper-toolsaas
Customer.io
MITDark SaaS design system with mint-green accents and clean typography, built for product dashboards and developer-focused platforms
Layout011
darksaasdeveloper-tooldashboard
Asana
MITEnterprise work-management design system with sharp modernist aesthetic, dark-mode focus and purposeful colour accents for product teams
Layout02
darksaasdashboarddeveloper-tool