Atlassian. Confetti-edged engineering blueprint.
- SaaS
- Light theme
- 11 colors
- 2 typefaces
Atlassian operates as an enterprise workshop dressed in casual confidence: a white canvas where dense product interfaces meet bold, colorful editorial moments. The visual system splits between quiet functional surfaces (white, light gray, subtle blue) and expressive dark hero blocks (near-black navies) framed by fragmented geometric confetti in vivid violet, yellow, blue, and green. Typography is a paired custom sans family — Charlie Text for dense UI, Charlie Display for editorial headlines that grow to 80px with tightened tracking. Components are large, rounded, and borderless — pills for actions, generous 20px radii for cards, almost no shadow. Color is disciplined: one electric blue drives every primary action and link, while chromatic energy lives only in decorative edges and section dividers, never bleeding into functional UI.
Atlassian design system
Brand1
Primary action buttons, active links, focus states, icon accents — the single chromatic action color across the entire system, providing directional clarity against monochrome surfaces
Accent3
Sporadic CTA alternative (event registration), decorative fill in geometric confetti, accent punctuation in dark banners
Soft purple section backgrounds, highlight bands, decorative geometric fills
Decorative geometric borders around video and hero blocks — conic gradient sweeps violet → yellow → blue
Neutrals7
Primary text, heading fills on light surfaces, dark hero panel backgrounds, link text — the dominant ink color
Outlined action borders, icon strokes, list dividers, tertiary text — a blue-tinted near-gray that hints at brand without committing to color
Card borders on light surfaces, body text, input borders, secondary heading text
Helper text, form labels, info badges, icon tints, secondary metadata
Disabled borders, subtle list separators, card shadow tints
Muted button backgrounds, secondary surface fills, hairline section dividers
Page canvas, card surfaces, button text on dark fills, dark-section backgrounds where contrast demands it
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure White on Atlassian Blue
5.20 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
