Atlassian

Atlassian's visual system evokes a highly organized and collaborative digital workspace, built on a foundation of crisp, accessible neutrality and punctuated by vibrant brand accents. The prominent use of Slate 900 text on Canvas Frost backgrounds ensures high legibility, while Periwinkle 500 brings an energetic, inviting feel to interactive elements. The system maintains order through a meticulous spacing hierarchy and subtle shadows on key cards, presenting a precise yet approachable tool for complex teamwork. Use Periwinkle 500 (#1868db) exclusively for primary interactive elements to clearly signpost actions. Maintain high contrast by pairing Slate 900 (#000000) or Steel Grey (#1c2b42) text on Canvas Frost (#ffffff) backgrounds. Apply 20px border-radius consistently for all elevated cards and product views to establish visual softness. Utilize 10000px border-radius for all primary buttons to create a clear, approachable call to action. Employ Charlie Display at 70px or 80px for hero headlines using weight 700 or 800 to create significant visual impact. Use 4px as the base unit for horizontal and vertical spacing between elements to ensure a harmonious grid. Implement the rgba(9, 30, 66, 0.31) 0px 0px 1px 0px, rgba(9, 30, 66, 0.25) 0px 1px 1px 0px shadow for all elevated cards to provide subtle depth. Do not use Harvest Gold (#fca700) for interactive elements, reserve it for accents and decorative purposes. Avoid using multiple border-radii values for buttons; stick to 10000px for primary actions and 28px for secondary pill buttons. Do not introduce new shadow styles; consistency is key with the defined card shadow. Refrain from deviating from the defined 4px spacing unit to avoid visual clutter and maintain a consistent rhythm. Do not alter the letter-spacing values from normal for Charlie Text and the specific 0.0120em or 0.0300em for Charlie Display. Avoid using Storm Sky (#42526e) as a primary text color, as its primary role is for inputs and muted UI details. Do not use transparent backgrounds with 0px border-radius for cards that hold critical, distinct content; reserve them for blending sections.