Foundations

Foundations are the visual elements needed to create engaging end-to-end user experiences. This includes guidance on iconography, typography, layout and structure.

Accessibility

Accessible design lets people of all abilities interact with, understand, and navigate our products.

Color

Color distinguishes our brand and helps us create consistent experiences across products.

Color (beta)

Color distinguishes our brand and reinforces consistent experiences across products.

Design tokens (beta)

Design tokens are a single source of truth to name and store design decisions for Atlassian product experiences.

Elevation (beta)

Elevations are layered surfaces that form the foundation of UI.

Iconography

Icons are visual representations of commands, devices, directories, or common actions.

Illustrations

Illustrations help convey complex ideas in a simple way. They should be meaningful and reflect a user's context and emotional state.

Logos

Our brand and product logos are clear, impactful and recognizable. All carry our simple blue and white color palette with design variations.

Spacing (beta)

A spacing system supports the creation of simple page layouts and understandable UI.

Typography

Typography is our system of fonts. Each font conveys the appropriate sentiment to assist our users through each stage of their journey.