Design System Accessibility Foundations

5 posts · Dec 2024 – Dec 2025

What this trail covers

Atlassian's Design System has evolved its icon system to improve clarity, cohesion, and quality at scale. This includes refining stroke width and alignment to 1.5px on a 16px canvas, creating a unified brand and product expression. The system now offers a core 16x16px set and downscaled 12x12px versions for tighter spaces. A taxonomy of single-purpose and multi-purpose icons drives consistent usage. Icon Lab centralizes contributions with a Figma plugin and automated export. Migration tooling, i

All Atlassian trails

Dec 2025Behind the screens: Accessible design is good designThis post details the integration of accessibility into Atlassian's Design System. It outlines the establishment of an Accessibility team, three guiding principles (Accessibility by default, Tooling and automation, Maker empowerment), and practical implementations including system-wide component audits, recalibration of design foundations (color, typography), and the development of Figma-based accessibility tooling. A specific case study on the date time picker redesign highlights improvements in semantic structure, navigation (reducing keyboard input from 52 to 12 keystrokes), input feedback, and visual clarity (achieving at least 3:1 contrast). The post emphasizes that accessibility is treated as a measure of design quality, not just compliance, and has led to the resolution of over 6,000 accessibility issues.
Nov 2025Turning Handoffs into Handshakes: Integrating Design Systems for AI Prototyping at ScaleThis post details how Atlassian is teaching AI to utilize its design system for AI prototyping. It discusses challenges in configuring AI tools with Atlassian's design system (npm packages, styling with Compiled, import handling), the need for custom instructions and templates, and strategies to reduce AI 'hallucinations' by providing structured context and configuration files. The post highlights the use of templates for speed and accuracy, the importance of configuration files over open-ended prompting for brand consistency, and the proliferation of templates across the organization. It also covers building confidence at scale through collective learning and maintaining evolving agentic content.
Sep 2025Behind the screens: Building Atlassian's new icon systemThis post details the technical and design evolution of Atlassian's icon system. Key contributions include: refining icon design with a 1.5px stroke on a 16px canvas, creating both 16x16px core icons and downscaled 12x12px utility icons, and establishing a taxonomy of single-purpose and multi-purpose icons. It also describes the development of Icon Lab, a centralized contribution platform with a custom Figma plugin for automated layout, export, and publishing. Migration tooling, such as feature flagging, backwards-compatibility props, an ESLint rule with auto-fixer, and an 'Icon Facade' for safe testing, is also detailed.
Apr 2025Implementing typography at scale: the journey behind the screensThis post details the journey of rebuilding the Atlassian typography system, focusing on establishing a consistent and modern visual identity, improving readability and accessibility, and creating a strong foundation for future growth. The process involved incremental improvements, starting with baking typography tokens and components into apps to mimic the old system for testing. Subsequent phases enhanced visual hierarchy with a cohesive scale based on the minor third, bolder headings, increased minimum body size to 12px, removal of all caps for legibility, and simpler naming conventions. The introduction of new fonts, Atlassian Sans (derived from Inter Variable) and Atlassian Mono (derived from JetBrains Mono), addressed inconsistencies caused by system fonts. Key lessons learned include the critical nature of co-design, the importance of removing confusing elements ('UI text'), the necessity of cross-functional collaboration between design and engineering, planning time for iterations, and prioritizing naming conventions.
Dec 2024Designing Atlassian's new navigationThis post details the technical implementation of Atlassian's new navigation system, focusing on the design system primitives and reusable components (menu button, flyout menu, expandable menu) that underpin its flexibility and consistency. It highlights how optional properties within these components enable customization for various scenarios, such as adding descriptions or quick actions. The post also discusses the technical approach to driving adoption through a navigation library, a Figma spec template, and component library with implementation videos. It emphasizes the use of indentation within components to show hierarchy and the technical considerations for handling truncation on smaller screens. The new navigation is built on a modern tech stack that's faster, enables more contributions, and requires less context switching, with built-in support for accessibility and RTL languages.
Advertisement