Developing a Design System for Anthropic
Creating a functional design system prototype for Anthropic, an AI safety and research company that develops large-scale AI systems.
Anthropic
AI Safety & Research
Duration
2 weeks (Sep 18 - Oct 3)
Myself
Mikaela Thompson
Macy Bosworth
Branding
Visual Design
Prototyping (Figma)
Challenge
We were tasked with building a design system from an interface audit of the current state of Anthropic's site. Our main goal was to prepare assets, visual design elements, and UI components to be handed off for development. We also wanted to create a functional prototype website of our design system, enabling easy presentation and use.
My Role
My primary role was to create the functional prototype with Figma. Using the assets and text styles created by my team members, I was able to create 5 different pages with navigation. The prototype used components and variants that allowed me to account for user interaction, similar to how they would be presented on Anthropic's site.
Try out the design system prototype below!
Process
1. Establish core design principles
To ensure the design system aligned with Anthropic’s mission, we defined key principles that would guide our work throughout the project:
Consistency and Scalability: Maintain a cohesive visual identity and ensure the system can grow with future needs + development
Effortless Navigation: Prioritize ease of use by focusing on user-friendly interactions and clear information hierarchy.
2. Construct components and variants
We focused on creating reusable elements and assets to form the foundation of the design system:
Component Creation: Designed buttons, chips, cards, and other essential UI elements
Variants and Properties: Utilized Figma’s properties panel to create flexible components with multiple states (e.g., hover, active, disabled) for ease of use across pages
Components and Variants
Apply Text Styles
Full Asset Library
3. Use components and text styles to create prototype
In this phase, we focused on bringing the design system to life through a functional prototype that mirrored user interactions:
Auto-Layout for Responsive Design: Used auto-layout to ensure each component adapts seamlessly across different screen sizes and layouts.
Prototyping Interactive States: Implemented dynamic interactions such as hover, click, and active effects to simulate realistic user behavior and improve the presentation's usability
Try out the interactions here
Page-By-Page Breakdown
We were able to create 7 pages connected through the navigation bar
Style Guide Page
Assets - UI Components Page
Assets - Visual Design Page
Assets - Navigation Page
Redesign Page
Conclusion
This project allowed us to create a scalable and cohesive design system for Anthropic. By focusing on consistency, navigation ease, and usability, we were able to ensure ease of use for future development teams to integrate these components.
One of the most rewarding aspects of this project was seeing our prototype in action with components and interactions that closely resemble the current website. While the 2-week timeframe challenged us, we were able to set clear priorities for collaboration and design early on that helped our team of three work together.