What Atlassian does
Atlassian's system icons are drawn in a 16 x 16 px box with a 1.5 px stroke, rounded outer corners and curves paired with sharp interior corners, square-cut end points (the Figma end-point style set to none), and a straight-on or 90 degree profile view; 12 px icons are downscaled and kept for chevrons, field validation, tags and secondary actions, and larger decorative icons sit on an icon tile whose radius is 25%. Illustration in product is limited to spot illustrations (colorful for wins, neutral for routine moments), low-fidelity UI built from basic shapes, sharp corners and mostly gray tones in place of real screenshots, and ambient patterns as background texture; collage is kept to marketing. Spacing runs on an 8 px base unit with tokens from space.025 (2 px) to space.1000 (80 px), the main content grid is 12 columns on desktop, 6 on tablet and 2 on mobile, and fixed grids cap at 1296 px (fixed-wide) or 864 px (fixed-narrow, for reading). Radius tokens run 2, 4, 6, 8, 12 and 16 px plus a full 999 px round, with the focus ring offset 2 px and its radius 2 px larger than the element's. Motion uses 50-150 ms for interactions and 150-400 ms for transitions (list hover 50 ms, dropdown 150 ms, modal 250 ms) with four named curves, exits faster than entrances, and no motion at all under reduced-motion settings. The design system publishes no photography direction; its image guidance covers themed light and dark sources, alt text of about 100 characters, and no flashing.
Atlassian's system, as published
- Icon Box
- 16 x 16 px (medium, default); 12 x 12 px small, downscaled from 16
- Icon Stroke
- 1.5 px
- Icon Corners
- rounded corners and curves outside, sharp interior corners
- Icon Caps
- squared off; end point style none, not round or square
- Icon Perspective
- straight on or full 90 degree profile; no diagonal 3D
- Icon 12px Uses
- chevrons, field validation, tags/badges/lozenges, app affiliation, secondary and supporting actions
- Icon Tile Radius
- radius.tile, calculated 25%
- Icon Color
- icon color tokens or text color tokens when matching text
- Illustration Types
- spot (empty states, errors, big wins), low-fidelity UI (onboarding, feature tours, workflows), ambient pattern (backgrounds for messages and promos)
- Low Fi Ui
- basic shapes, sharp corners, mostly gray tones; no real screenshots in product
- Collage
- marketing landing pages and communications only
- Space Base Unit
- 8 px (space.100)
- Space Tokens
- 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80 px (space.0 to space.1000); negatives -2 to -32 px
- Space Ranges
- small 0-8 px inside compact UI; medium 12-24 px for larger components; large 32-80 px for layout
- Grid
- xxs 320-479 px: 2 cols, 12 px gutter, 16 px margin; xs 480-767 and s 768-1023: 6 cols, 12 / 16; m 1024-1439, l 1440-1767, xl 1768+: 12 cols, 16 px gutter, 32 px margin
- Grid Max Widths
- fixed-wide 1296 px (default), fixed-narrow 864 px (long-form), fluid no maximum (boards)
- Grid Spans
- 12, 6 or 4 columns; centered blocks of 8, 10 or 12
- Radius Tokens
- xsmall 2 px, small 4 px, medium 6 px (buttons, inputs), large 8 px (cards, menus), xlarge 12 px (modals, tables), xxlarge 16 px (video), full 999 px (avatars)
- Focus Ring
- 2 px offset; radius = element radius + 2 px
- Motion Durations
- interactions 50-150 ms; transitions 150-400 ms; list hover 50 ms, dropdown entrance 150 ms, modal entrance 250 ms; frequent motion under 150 ms
- Easing Ease Out Bold
- cubic-bezier(0, 0.4, 0, 1): panels and flags entering
- Easing Ease In Out Bold
- cubic-bezier(0.4, 0, 0, 1): scaling modals, repositioning
- Easing Ease In Practical
- cubic-bezier(0.6, 0, 0.8, 0.6): exits
- Easing Ease Out Practical
- cubic-bezier(0.4, 1, 0.6, 1): popups, hover background fades
- Motion Properties
- scale, fade, slide, color
- Motion Rules
- exit faster than entrance; one focal event at a time; reduced motion means off and instant; never flash or sweep large areas
- Image Rules
- theme-aware light and dark sources; alt text ideally 100 characters or fewer; no images of text; never flash more than three times per second
Why it works
Every space, radius and duration is a step on a short named scale, so pieces stay consistent without a designer checking each one. The warmth comes from small choices on top of that scale: rounded outer corners, gentle spot art and quick motion, not decoration.
Best for
Collaboration and productivity software, B2B SaaS with dense screens, developer and IT tools, teams that want a warm but disciplined product look and a token scale engineers can apply directly
What breaks it
- Rounded or square-projecting line caps on icons
- Rounded inside corners
- Real screenshots inside product walkthroughs
- Collage or purely decorative art in product screens
- Spacing values off the 8 px scale
- Several simultaneous animations pulling attention apart
- Exits slower than entrances
Sources
- atlassian.design: Icon style: 1.5 px stroke, 16 and 12 px sizes, rounded outside and sharp inside corners, squared end caps, perspective, color
- atlassian.design: Spot, low-fidelity UI and ambient pattern illustration types; low-fi UI rules; collage kept to marketing
- atlassian.design: Motion durations, four easing curves with cubic-bezier values, properties, frequency and reduced-motion rules
- atlassian.design: 8 px base unit and the space token scale with usage ranges
- atlassian.design: 12-column grid, breakpoints, gutters, margins, fixed-wide and fixed-narrow widths
- atlassian.design: Radius tokens by element type, tile radius 25%, focus ring offset and radius
- atlassian.design: Image component: theme-aware sources, alt text length, no flashing or images of text
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Atlassian's look comes with it.
The recipe
- Draw or restyle icons in a 16 px box with a 1.5 px stroke: round the outside corners and curves, keep every inside corner sharp, cut line ends flat, and show objects straight on with no 3D angle.
- Color icons
palette.ink(orpalette.ink mutedbeside secondary text); use 12 px copies only for chevrons, field messages, tags and secondary actions. - When an icon has to be large, put the 16 px icon on a tile filled
palette.accentwith the icon inpalette.on accentand a corner radius of 25% of the tile. - Use one spot illustration per empty state, error or win: lead with
palette.accentfor celebrations and keep routine moments inpalette.ink muted; one idea per spot. - Explain a product flow with low-fidelity UI instead of a screenshot: square-cornered blocks in
palette.surface,palette.borderandpalette.ink muted, with only the element that matters inpalette.accent. - Put a quiet ambient pattern in
palette.borderbehind promotional messages that need texture but no picture. - Space everything from the 8 px scale: 0-8 px inside a component, 12-24 px between components, 32-80 px between layout blocks, using the recipe's layout_gap_px between sections.
- Lay content on 12 columns above 1024 px (6 on tablet, 2 on phones) with the recipe's gutters and margins; cap structured pages at 1296 px and reading pages at 864 px; span 12, 6 or 4 columns, or center 8 or 10.
- Derive every corner from
style.radius: a quarter for tiny details, half for labels and inline images, three quarters for controls, the full value for cards, one and a half for modals, double for video; draw focus rings 2 px outside with 2 px more radius inpalette.accent. - Animate hovers in 50 ms and other interactions at the recipe's interaction_ms; bring small popups in over 150 ms and panels or modals at the recipe's large_enter_ms with the recipe curves, and exit in about two thirds of the entrance time.
- Let one element lead each animation, keep anything people trigger constantly under 150 ms, and switch all motion off when the viewer asks for reduced motion.
What you'll need
- The customer's own product screens, to redraw as low-fidelity UI
- Light and dark versions of any image that has to work in both themes
- Which moments are celebrations and which are routine
Recipe as JSON
{
"recipe": {
"icon_style": {
"box_px": 16,
"small_px": 12,
"stroke_px": 1.5,
"stroke_to_box_ratio": 0.09375,
"exterior_corners": "rounded",
"interior_corners": "sharp",
"linecap": "butt",
"linejoin": "miter",
"perspective": "straight-on",
"fill": "none",
"color": "{palette.ink}",
"color_secondary": "{palette.ink_muted}",
"small_icon_uses": [
"chevrons",
"field validation",
"tags and badges",
"secondary actions"
],
"tile_radius_ratio": 0.25,
"tile_fill": "{palette.accent}",
"tile_icon_color": "{palette.on_accent}",
"tile_padding_px": 8,
"icon_text_gap_px": 4
},
"illustration_style": {
"types": [
"spot",
"low-fidelity UI",
"ambient pattern"
],
"spot_fill_celebrate": "{palette.accent}",
"spot_fill_secondary": "{palette.accent_secondary}",
"spot_fill_routine": "{palette.ink_muted}",
"spot_concepts_per_image": 1,
"lowfi_radius_px": 0,
"lowfi_fills": [
"{palette.surface}",
"{palette.border}",
"{palette.ink_muted}"
],
"lowfi_highlight": "{palette.accent}",
"lowfi_highlight_share": 0.1,
"pattern_role": "background texture behind messages and promos",
"pattern_color": "{palette.border}",
"collage": "marketing pages only"
},
"photo_treatment": {
"default_visual": "low-fidelity UI drawn from shapes instead of real screenshots",
"radius_card_px": "{style.radius}",
"radius_inline_px": "{style.radius} * 0.5",
"radius_video_px": "{style.radius} * 2",
"themed_sources": "separate light and dark versions",
"grade": "none",
"overlay": "none",
"alt_text_max_chars": 100,
"text_in_image": "none",
"max_flashes_per_second": 3
},
"motion": {
"hover_ms": 50,
"interaction_ms": {
"by": "style.motion",
"map": {
"crisp": 50,
"calm": 150,
"playful": 100
},
"default": 100
},
"small_enter_ms": 150,
"large_enter_ms": {
"by": "style.motion",
"map": {
"crisp": 250,
"calm": 400,
"playful": 300
},
"default": 250
},
"exit_to_enter_ratio": 0.66,
"frequent_max_ms": 150,
"easing_enter_large": [
0,
0.4,
0,
1
],
"easing_move_or_scale": [
0.4,
0,
0,
1
],
"easing_exit": [
0.6,
0,
0.8,
0.6
],
"easing_enter_small": [
0.4,
1,
0.6,
1
],
"properties": [
"scale",
"fade",
"slide",
"color"
],
"focal_events_at_once": 1,
"reduced_motion_ms": 0
},
"layout_move": {
"base_unit_px": 8,
"space_multipliers": [
0,
0.25,
0.5,
0.75,
1,
1.5,
2,
2.5,
3,
4,
5,
6,
8,
10
],
"inside_component_max_px": 8,
"between_components_px": [
12,
24
],
"layout_gap_px": {
"by": "style.density",
"map": {
"airy": 64,
"balanced": 40,
"dense": 32
},
"default": 40
},
"columns_by_breakpoint": {
"320": 2,
"480": 6,
"768": 6,
"1024": 12,
"1440": 12,
"1768": 12
},
"gutter_px_by_breakpoint": {
"320": 12,
"480": 12,
"768": 12,
"1024": 16,
"1440": 16,
"1768": 16
},
"margin_px_by_breakpoint": {
"320": 16,
"480": 16,
"768": 16,
"1024": 32,
"1440": 32,
"1768": 32
},
"max_width_px": 1296,
"reading_max_width_px": 864,
"spans": [
12,
6,
4
],
"centered_spans": [
8,
10,
12
],
"radius_scale_ratios": {
"detail": 0.25,
"label": 0.5,
"control": 0.75,
"card": 1,
"modal": 1.5,
"media": 2
},
"radius_base_px": "{style.radius}",
"focus_ring_offset_px": 2,
"focus_ring_radius_extra_px": 2,
"focus_ring_color": "{palette.accent}"
}
},
"fallbacks": {
"palette.ink_muted": "{palette.ink}",
"palette.accent_secondary": "{palette.accent}",
"palette.on_accent": "{palette.paper}",
"palette.border": "{palette.ink_muted}",
"palette.surface": "{palette.paper}",
"style.radius": 8
},
"steps": [
"Draw or restyle icons in a 16 px box with a 1.5 px stroke: round the outside corners and curves, keep every inside corner sharp, cut line ends flat, and show objects straight on with no 3D angle.",
"Color icons {palette.ink} (or {palette.ink_muted} beside secondary text); use 12 px copies only for chevrons, field messages, tags and secondary actions.",
"When an icon has to be large, put the 16 px icon on a tile filled {palette.accent} with the icon in {palette.on_accent} and a corner radius of 25% of the tile.",
"Use one spot illustration per empty state, error or win: lead with {palette.accent} for celebrations and keep routine moments in {palette.ink_muted}; one idea per spot.",
"Explain a product flow with low-fidelity UI instead of a screenshot: square-cornered blocks in {palette.surface}, {palette.border} and {palette.ink_muted}, with only the element that matters in {palette.accent}.",
"Put a quiet ambient pattern in {palette.border} behind promotional messages that need texture but no picture.",
"Space everything from the 8 px scale: 0-8 px inside a component, 12-24 px between components, 32-80 px between layout blocks, using the recipe's layout_gap_px between sections.",
"Lay content on 12 columns above 1024 px (6 on tablet, 2 on phones) with the recipe's gutters and margins; cap structured pages at 1296 px and reading pages at 864 px; span 12, 6 or 4 columns, or center 8 or 10.",
"Derive every corner from {style.radius}: a quarter for tiny details, half for labels and inline images, three quarters for controls, the full value for cards, one and a half for modals, double for video; draw focus rings 2 px outside with 2 px more radius in {palette.accent}.",
"Animate hovers in 50 ms and other interactions at the recipe's interaction_ms; bring small popups in over 150 ms and panels or modals at the recipe's large_enter_ms with the recipe curves, and exit in about two thirds of the entrance time.",
"Let one element lead each animation, keep anything people trigger constantly under 150 ms, and switch all motion off when the viewer asks for reduced motion."
]
}See it working
- Atlassian: The 1.5 px icon style with soft outer and sharp inner corners and flat ends
- Atlassian: Spot, low-fidelity UI and ambient pattern types side by side
- Atlassian: Playable duration and easing demos for hover, dropdown and modal
- Atlassian: The 8 px space token scale and its three usage ranges
- Atlassian: Radius tokens by element type and the focus ring rule
The lesson
Write each icon rule with its reason tied to another brand element, so designers can apply it to a case you didn't list.
The move
The Iconography page explains that icons have "rounded corners and curves to align with our typography and other rounded UI elements", while "square end terminals add boldness". Its contents list breaks Visual style into seven headings, including Shapes, Corners and curves, End caps and Color. A black-framed purple gear with a green arrow circle sits top right.
Why it works
- Our readThe rule's reason is stated in the same sentence, so a designer can tell why a new icon should have round corners.
- Our readCorners, end caps and color each get their own heading, which makes each decision checkable on its own.
- Our readThe header art pairs rounded shapes with square-ended frame lines, echoing the traits the text describes.
What not to copy
Don't copy the specific round-corner-and-square-end look unless it fits your type. Keep the habit of naming what each icon trait matches in the rest of the brand.
