Susan

Library

Saved

Living sample

Atlassian

New

A place for what you noticed

Cool gray workspace, navy text, and one blue action. For issue trackers and team documents.

New entry

Title

Helper text uses the muted color. Field names stay in sentence case.

Save entryDiscard

SavedReviewMissingNote

--color-accent: #0c66e4

Identity

What this look is for, and whether builders should use it.

Summary

Status

Builders should follow this

Notes for builders

Match Jira and Confluence, not the Atlassian marketing site. The page is sunken gray #f7f8f9. Cards, menus, and fields are white #ffffff. Text is navy #172b4d. Secondary text and field names are #44546f. Metadata is #626f86. Dividers and field strokes are #dcdfe4, the solid form of the translucent navy border. The only action color is brand blue #0c66e4, with white text. The older brand blue #0052cc is retired; do not use it. Selected rows sit on #e9f2ff. Focus is the same blue. Success is #187a50. Danger is #ca3521. The warning text token is #b38600; that gold fails as type on white, so this design uses #8a6400 for warning text. Do not add a second hue for decoration. Radius stays tight: 8px cards and 6px buttons. Shadows are a hairline, not a float. Buttons are solid. Fields are boxed. Icons are regular line icons. Density is compact, like an issue list. Body copy is 14px with a quiet scale. Motion is calm. The real product sets Atlassian Sans and Atlassian Mono. This library has neither, so IBM Plex Sans stands in for headlines and body, and IBM Plex Mono stands in for issue keys and code. Do not introduce a serif or a dark theme.