Crafting the ACLU's First Global Styles: A Proposal for Corner Radii
Successfully designed and led the process for the first global styles proposal for the ACLU design team, from initial audit and research to final tech team approval and preparation for future implementation affecting 200+ components.
Duration
July 2025
Role
Product Designer
Process
Audit
Literature Review
Competitive Analysis
Prototyping
Proposal
Presentation
Background & Objective
The American Civil Liberties Union (ACLU) is a non-profit organization founded in 1920 to defend and preserve the individual rights and liberties guaranteed by the U.S. Constitution. I was hired as a product design intern on the newly formed Design System Team, which, at the time, lacked any global styles.
The Problem
The ACLU.org components currently have inconsistent corner radii values applied without a clear, underlying logic. This not only creates a fragmented visual experience, but also fails to effectively express our brand identity.
Solution
Research Process
Corner radii give us an opportunity to express our brand identity to users. To ensure I created a workable logic and corner radii that represent our organization's brand identity, I utilized several research methods to gain insights and develop proposals.
Design System Audit
Audit all existing ACLU.org components and organize the various pixel values into categories. Quickly revealed the variety of existing corner radii, that lacked a clear logic of application.
This inconsistency makes our website hard to maintain for engineers and was difficult for designers to know which proper radii to use. The variety of different corner radii applications ultimately leads to a lack of brand cohesion.
Secondary Research: Literature Review
Researched various articles on how different roundness of corner radii impact users and the unique tone and voice each one communicates.
Began research with an understanding of why different corner radii exist and how each variation impacts user experience and a product’s visual brand identity.
Sharp
Clean, modern, minimalist, serious, professional.
Slightly Rounded
Common, safe choice, blend of strict and gentle.
Medium Rounded
Friendly, versatile, not serious, approachable
Fully Rounded
Playful, inviting, warm.
Deeper understanding about the different impact between rounded corners and sharp corners.
Rounded Corners
Evokes warmth and trust.
Makes user feel safer in doing business.
Naturally attracts user attention.
Too much can appear "too Disney".
Sharp Corners
Provides a cleaner look.
Can be perceived as harsh, cold and uninviting.
Secondary Research: Brand Research
My secondary research involved a deep dive into the ACLU's brand guidelines. I discovered that our brand voice and tone is a unique combination of strong and welcoming language.
By understanding the ACLU's brand identity, I can make design decisions that are consistent with how ACLU portray themselves to users.
Secondary Research: Competitive Analysis
Exploring the designs of similar organizations (political + activism) to understand user expectations for corner radii + interfaces within our field.
I examined each company’s mission, values, tone, and voice and compared them to the corner radii style they employed. This was to ensure our designs don't stray away from user expectations within this niche. Our competitors leaned toward sharp or slightly rounded corners.
Secondary Research: Competitive Analysis
Investigating the logic of corner radii in well-established design systems. Google’s Material 3 and Microsoft Fluent 2.
The purpose of this research was to understand how to properly create a logic for corner radii. I learned the established rules for component sizing, identified which components are fully rounded, and investigated industry best practices and edge cases. This is to allow me to develop a rule-based system for our components.
Design Process
After synthesizing my research on how different corner radii affect users, the ACLU’s voice and tone, user expectations, and industry design systems, I began exploring different design concepts. I collaborated with the entire design team to get feedback and refine the designs.
Creating Interactive Prototypes
Creating interactive prototypes to visualize different corner radii.
I recreated existing designs from multiple parts of our sites into Figma, allowing me to modify them and enable people in our design team to visualize how different corner radii could look to make informed decisions.
Creating Interactive Prototypes
Explored mockups and proposals using different corner radii, and then continuously iterated on them based on feedback from the design team.
With the prototypes complete, I presented my audit and research findings to the design team. They reviewed the proposals, offering valuable feedback that raised new edge cases and considerations. Based on their input, I created new variations, ultimately leading to the team's final decision on a preferred design and their rationale behind it.
Final Proposal
After multiple proposals, variations, and explorations, the final proposal was chosen based on votes from our design team.
Radii Summary
ACLU's global styles include rounded corners for a variety of components. For simple reference, the corner radius values are 100%, 8, 4, 2, and 0. Generally, the applied radius depends on the size of the component, though specific established patterns may dictate unique cases.
Why?
ACLU utilizes a slightly rounded corner radii to fit the ACLU’s voice and tone, which is both strong and welcoming. Having slightly rounded radii is a common choice, making elements appear both strict and gentle.
Final Proposal: Edge Cases
When to avoid rounded corners and the use of absolute radius
Avoid Rounded corners: Should be avoided on components if they create awkward gaps in the design. For example, nested components that directly touch the edge of their container or an image will often have a 0px corner radius on the touching side, while the other side retains the assigned rounded radius.
Absolute Radius: Components that expand will retain the same corner radius they are initially assigned.
Results and Impact
Gaining approval for the ACLU's first-ever global styles: a new logic and strategy.
This project established the first-ever global styles for ACLU.org, which is a significant milestone for the organization. The newly created system will have a major impact on the site's consistency and brand identity.
Learnings
Proposing a global style requires a thorough and thoughtful process.
Creating consistent global styles isn’t just visuals but requires deep research, a strong reflection of the brand's voice and tone, and rigorous testing of various options
Engineer constraints drive design decisions.
I learned that effective global styles must be compatible with engineering capabilities. Rather than proposing a complex, dynamic solution, I designed a simpler, more practical method for implementation.