Developed proposal for Global styles - 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.
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 did not have 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
Reduced nine different corner radii to a consistent set of five, applying this new logic to over 250 existing components for a unified visual style.
Presented the new global styles to a cross-functional team of over 30 engineers and product managers, leading to team-wide adoption.
Collaborated with engineers to develop a clear roadmap, ensuring a smooth and efficient integration of the new styles into the product.
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 made 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.
Secondary Research: Literature Review
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.
🏠
44% Reduction in Unique Corner Radii
I reduced the number of corner radii and established a new, rule-based system for consistent application across all components.
👍🏼
Presenting the Proposal and Gaining Approval
First to present the concept of global styles than the logic of corner radii to a cross-functional team of over 30 engineers and product managers, leading to full team-wide adoption.
🧱
250+ Components Impacted and Unified.
I reduced the number of corner radii and established a new, rule-based system for consistent application across all components.
Learnings
Proposing a global style requires a thorough 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 within our engineer’s capabilities. Instead of proposing a complex solution like dynamic programming for corner radii, I designed a simpler, more practical method for the engineering team.