# Agustín Ruiz > Product designer and design engineer from Argentina, currently working at Brave. I'm Agustín, a design engineer from Argentina. I currently work at [Brave](https://brave.com), crafting the user experience for the leading privacy browser. Let's connect! Send me an email at [info@aguscruiz.com](mailto:info@aguscruiz.com), or find me on [Twitter (𝕏)](https://x.com/aguscruiz) or [Bluesky](https://bsky.app/profile/agustin.bsky.social). ## Highlighted projects - [Brave's Design system](https://aguscruiz.com/projects/brave-design-system.md): Led the creation of Nala, Brave's design system from the ground up to solve the company's fragmented user experience across multiple products and platforms. As the Design System owner and DesignOps Lead, I architected a three-layer system with universal foundations, platform-specific libraries, and feature-specific components, implementing a custom token architecture that bridges design and development. - [Browser design, pushing beyond Chrome](https://aguscruiz.com/projects/browser-design.md): Worked on pushing the browser design past chromium so we could introduce several features: vertical tabs, split view, sidebar browsing and containers. This involved moving on from the "tab" design concept into a pill shape that facilitated multiple transformations and add-ons. - [Containers](https://aguscruiz.com/projects/containers.md): Led the user experience and design of the new containers feature for Brave, which allows users to isolate tabs and data in separate containers. - [Custom tool for generating dithered images](https://aguscruiz.com/projects/ditherator.md): I created a tool to generate dithered gradients that is tailor made for my company's very specific dither preset. It is able to take any image and create a dithered version where the dither matrix can be tweaked to adjust for specific outputs. - [Recapturing the feeling of the old internet](https://aguscruiz.com/projects/little-friends-garden.md): I've been wanting to recapture the magic feeling of the old internet, and I wanted to create a spin on the old "guestbook" sites where people could come in and leave their mark. I created the Little friends garden so anyone can come in, leave their name and X link, and generate a randomized "friend" that lives in the 3D space alongside all the other visitors. Check it out and create your little friend too! ## More about me Hi again! I'm glad you scrolled this far. To recap, my name is Agustín and I'm a design engineer from Argentina. I've been working as a designer since I graduated as a graphic designer in 2006. All these years, I've worn all sorts of designer hats: branding, naming, editorial, web design, coding, you name it. I discovered product design in 2017, and it immediately clicked with how I think. I love solving difficult problems, and especially like being responsible for how people interact with a product and how they feel while doing it. [See my full resume here](https://aguscruiz.com/resume/resume-agustin-ruiz.pdf). ### What I'm good at - Thinking in systems and patterns - Learning new things - Seeing the big picture - Sweating the details Outside of design, I enjoy boxing (great for frustration!) and reading. I also recently began studying criminology with a focus on cybercrime to put my tech knowledge to good use. It would be great to connect! Here are some places you can find me: - [𝕏 (Twitter)](https://x.com/aguscruiz) - [Bluesky](https://bsky.app/profile/agustin.bsky.social) - [GitHub](https://github.com/aguscruiz) - [Linktree](https://linktr.ee/aguscruiz) ## Let's talk about AI Yes, AI is everywhere. So how do I feel about it? Well, I am building Brave AI, Brave's assistant in the browser. So I am very in the weeds, so to speak. I try to use and build AI in the most ethical way possible: ### Idea enhancer AI tools let me transform static Figma mocks into functional, coded MVPs. This allows me to demonstrate exactly how a feature should work, far better than a static prototype ever could. ### Research assistant AI tools allow me to get data and market research in a way that a regular search engine never could. And since my main work is in a very private browser, with no user tracking… I need to get insights from somewhere. Deep research is awesome for that. ### An engineering partner When I find a bug or need a custom tool, AI products like Cursor and Claude let me build solutions immediately rather than waiting for developer bandwidth. This self-reliance ensures my own ideas are my only limit. ## Contact - Email: [info@aguscruiz.com](mailto:info@aguscruiz.com) - Resume: [https://aguscruiz.com/resume/resume-agustin-ruiz.pdf](https://aguscruiz.com/resume/resume-agustin-ruiz.pdf) - Website: [https://aguscruiz.com](https://aguscruiz.com) --- # Project case studies The following sections contain the full text of every project page on the site. --- # Brave's Design system > Led the creation of Nala, Brave's design system from the ground up to solve the company's fragmented user experience across multiple products and platforms. As the Design System owner and DesignOps Lead, I architected a three-layer system with universal foundations, platform-specific libraries, and feature-specific components, implementing a custom token architecture that bridges design and development. - **Year:** 2022 - Ongoing - **Role:** Product design / Design ops / Implementation - **Tools:** Figma / Cursor - **HTML page:** https://aguscruiz.com/projects/brave-design-system ![Some of the components of Nala: Brave's Design system.](https://aguscruiz.com/projects/designsystem/heroImage.webp) *Some of the components of Nala: Brave's Design system.* ## Overview When I joined Brave as a Product Designer, I encountered a familiar challenge that many rapidly growing companies face: a fragmented design system with inconsistent user experiences across different products and platforms. What began as an initiative to bring order to this chaos evolved into Nala, a comprehensive design system that now serves as the foundation for all of Brave's products. ## Before joining Brave **Brave's suite of products had grown in silos, with each team (or pod) developing its own products and solutions to design challenges.** Previous attempts at creating a unified design system had fallen short, leading to: - Inconsistent implementation of basic elements like colors and typography across products. - Designers frequently recreating components from scratch due to rigid, incomplete libraries. - Developers independently implemented similar components across different codebases. - Communication gaps between design and development teams. ## Impact and results ![Nala's usage across Brave has been widely adopted by all teams.](https://aguscruiz.com/projects/designsystem/image1.webp) *Nala's usage across Brave has been widely adopted by all teams.* **The implementation of Nala has transformed how Brave approaches product design and development.** Some highlights are: ### Productivity gains - Significantly reduced time spent on component creation and reduction of duplicate occurrences. - Substantial decrease in design inconsistency reports. - Notably faster design-to-development handoff time. - Eliminated orphaned design tokens through cascading updates: changes to foundational tokens (like a color shade) now automatically propagate across all products and instances, ensuring complete system-wide consistency. ### Resource utilization - Reduced design debt across all products. Now updates don't even require coordination from designers or developers from a pod to make any changes, they come from upstream to all teams at once. - Achieved high component reuse rate across new features. - Reduced new features development time. - Fostered cross-team collaboration through shared component development: developers from different pods now contribute to a central component library, reducing duplication of effort and increasing knowledge sharing across teams. - Prevented component duplication through centralized oversight: my role provides a company-wide view of all design work, allowing me to identify opportunities for component reuse and standardization across different teams. ## My role ![The browser frame component is one of the most complex components in Nala, with multiple variants and states.](https://aguscruiz.com/projects/designsystem/image2.webp) *The browser frame component is one of the most complex components in Nala, with multiple variants and states.* ### As the Design System owner and later DesignOps Lead, I spearheaded the creation and evolution of Nala from its inception to its current mature state. My responsibilities included: - Architecting and building the design system from the ground up. - Creating and maintaining product libraries across all platforms. - Creating flexible components, and making sure they were adaptable to as many requirements as possible, giving designers more freedom of use. - Establishing processes for design-to-development handoff and component documentation. - Facilitating communication between design, product and development teams. - Leading the migration to a Material Design-based token architecture after Chromium's 2023 "Material You" update. Component documentation is comprehensive and explains both designers and developers how to work with the different variations. I try to make each component as customizable as possible, without it getting incomprehensible. ## Nala's Structure ![Nala's three layer structure: Universal / Platforms / Features.](https://aguscruiz.com/projects/designsystem/image3.webp) *Nala's three layer structure: Universal / Platforms / Features.* ### A three-layer approach Rather than creating a one-size-fits-all solution, I developed a three-level architecture that balanced consistency with flexibility: ## Universal foundation ### At the core of Nala lies a universal library containing shared elements that maintain consistency across all Brave products: - A perceptually uniform color system with predictable contrast ratios. - Typography foundations. - Basic components (buttons, inputs, tooltips, illustrations, icons, etc.). ## Platform libraries ### The second layer addresses the unique requirements of different platforms: - Specific components and patterns for the desktop browser. - Material Design components and patterns for Android. - iOS-native design patterns following Human Interface Guidelines. - Web-specific components. ## Feature libraries ### The most specific layer enables feature teams to maintain their unique identity and style, while staying in line within the broader design language. - Custom components for Brave Search. - Specialized UI patterns for Brave Wallet. - Unique elements for Brave News and Leo. Of course, since most of our products live within the browser UI, there's a lot of cross-referencing between the different libraries: Our Wallet, for example, has implementations that live within the browser in all platforms, but also has a web version. So they all have to be in sync and make for a streamlined experience. ## Takeaways Nala's creation and implementation were a critical strategic move, transforming Brave's fragmented design landscape into a cohesive, efficient, and scalable system. This three-layered design system boosted team productivity, reduced design inconsistency, accelerated development, and fostered cross-team collaboration. Nala solved design debt and established a robust foundation, underpinned by custom, token-based architecture, ensuring future product growth maintains a consistent user experience. As the Design System owner and DesignOps Lead, my work positioned Nala as the essential engine driving design consistency and efficiency at Brave. --- # Browser design, pushing beyond Chrome > Worked on pushing the browser design past chromium so we could introduce several features: vertical tabs, split view, sidebar browsing and containers. This involved moving on from the "tab" design concept into a pill shape that facilitated multiple transformations and add-ons. - **Year:** 2023 - **Role:** Product design / Implementation - **Tools:** Figma / Cursor - **HTML page:** https://aguscruiz.com/projects/browser-design ![The browser, using vertical tabs with split view and containers.](https://aguscruiz.com/projects/browserdesign/heroImage.webp) *The browser, using vertical tabs with split view and containers.* ## Overview In today's landscape of multi-tasking, cognitive overload and divided attention, the traditional horizontal tab design has begun showing its limitations. I worked on enabling new ways to browse and making the browser work better for users' streams of work through a new set of complementary features: **vertical tabs, split view, and sidebar browsing**. These improvements help users manage their tabs more effectively and create a more natural workflow for complex tasks. At the time of publishing this case study, some of the features are only available in the alpha channel of the browser, but we've gotten really good user feedback about the features and how they've helped users in their workflows. ## Impact and results ### The implementation of the features that'll be the detailed have significantly enhanced the Brave browsing experience: - Users can better manage larger numbers of tabs - Side-by-side comparison of web pages is seamless - Screen space is used more effectively - The browsing experience feels more modern and organized **Something very important to keep always in mind, it's not one-size-fits-all. Different users might like a feature and not the others, and that's fine.** The goal is to help users figure out their best workflow in their own way. ### Lessons learned This project reinforced several key principles about browser design and user experience. **We found that challenging established patterns, like the traditional tab design, can open doors to meaningful innovation when approached thoughtfully.** The process also revealed how design solutions often yield unexpected benefits across different features - the pill design we created for vertical tabs naturally evolved to enhance our split view functionality. Perhaps most importantly, we learned the art of maintaining visual consistency while introducing new functionality, ensuring that innovations feel like natural extensions of the browser rather than patched up features. ## The challenge **Brave, built on Chromium, inherited the classic horizontal tab design that has been a browser standard for decades.** However, modern web usage patterns revealed several limitations: - Screen real estate wasn't being used efficiently, especially on widescreen displays. - Tab management became unwieldy with multiple open tabs that a lot of our tab hoarders have to deal with. - The traditional tab design didn't accommodate newer browsing patterns like side-by-side comparisons, or being able to reference content from other tabs. ## Phase 1: vertical tabs ![Vertical tabs in Brave.](https://aguscruiz.com/projects/browserdesign/image1.webp) *Vertical tabs in Brave.* The first major challenge was reconceptualizing how tabs could work in a vertical orientation. The existing horizontal tab design, with its connected edge to the content area, wouldn't translate effectively to a vertical layout. This led to the development of the "pill" design concept. **The pill-shaped tab represented a significant departure from traditional browser tabs.** Instead of appearing attached to the content area, these tabs float independently in the tab bar, creating a more abstract visual representation of the relationship between the tab and content. Although controversial, this design choice had several advantages: - Improved scalability for multiple tabs. - Clearer visual separation between navigation and content. - More efficient use of vertical space. - A detachment of the 1:1 relationship between a tab and the content window. **This new pill shape design worked really well for vertical tabs, and I had the theory that it would also work really well in horizontal tabs.** I kept that idea in my sleeve for features that were yet to come. ## Phase 2: Separating the content area ![Content padding on the browser elements, separating the web content area from side panels, the sidebar and the edge of the browser.](https://aguscruiz.com/projects/browserdesign/image2.webp) *Content padding on the browser elements, separating the web content area from side panels, the sidebar and the edge of the browser.* With the introduction of vertical tabs, the main content area required careful reconsideration. We needed to: - Add appropriate padding to accommodate the vertical tab list. - Create a subtle separation between content and sidebar. The content of the website should never be confused with some other part of the browser UI. - Ensure the content area remains responsive to different window sizes. To achieve this, a small padding was added to the content area and every item that might come in contact with it. - Maintain a clean, uncluttered appearance despite the additional UI elements. ## Phase 3: Unifying the Tab Design Language ![A unified language for tabs: The pill shape helps to create a more flexible foundation for features like split view and containers.](https://aguscruiz.com/projects/browserdesign/image3.webp) *A unified language for tabs: The pill shape helps to create a more flexible foundation for features like split view and containers.* The success of the pill-shaped design in vertical tabs revealed an opportunity to create a more cohesive browsing experience. We realized that bringing this same design language to horizontal tabs would not only create visual consistency but also prepare the groundwork for future features. **By disconnecting tabs from the content area and giving them the same pill-shaped appearance as their vertical counterparts, we created a more flexible foundation for upcoming features like split view.** This unified design approach offered several advantages. First, it made the interface more intuitive: users who were familiar with one tab style could easily understand the other. Second, it created a more modern, cleaner aesthetic throughout the browser. Most importantly, it established a design pattern that could accommodate future innovations in tab management and window organization without feeling disjointed or like a patchwork of features. The transformation of horizontal tabs into the pill design was particularly crucial for split view functionality. **When users divide their screen between multiple web pages, the detached tab design makes it visually clear which tabs belong to which content area**, while maintaining the sleek, contemporary feel of the browser interface. ## Phase 4: Split View ![Split view enables productivity hacks like searching and navigating a result page within the same view.](https://aguscruiz.com/projects/browserdesign/image4.webp) *Split view enables productivity hacks like searching and navigating a result page within the same view.* The success of the pill design in vertical and horizontal tabs facilitated the creation of the split view feature. This required solving several design challenges: Creating a visual system to indicate grouped tabs, maintaining clarity in the tab strip for split view states, ensuring smooth transitions between different view modes, and developing intuitive controls for split view management. The solution involved introducing a subtle grouping indicator in the tab strip, visually connecting related tabs while maintaining the clean aesthetic of the pill design. ## Phase 5: Sidebar browsing ![Sidebar browsing let's you have a persistent tab open on the side while you navigate the web.](https://aguscruiz.com/projects/browserdesign/image5.webp) *Sidebar browsing let's you have a persistent tab open on the side while you navigate the web.* As we observed how users managed their workflows, we noticed a common pattern: **users frequently switched between their main browsing activity and reference materials or tools they needed to keep readily available**. This insight led to the development of sidebar browsing, a feature that fundamentally changes how users can maintain context while navigating the web. **Sidebar browsing introduces a new way to keep frequently accessed content within reach.** Think of it as having a persistent set of compact windows that live in your browser's sidebar. These miniature versions of websites remain accessible regardless of what's happening in your main browsing window. For instance, a user writing a research paper could keep a Google Doc continuously visible in the sidebar while searching for references in their main browser window. This eliminates the cognitive overhead of constantly switching between tabs and helps maintain focus on the primary task. Not to mention that users can now have multiple contents without having to deal with managing multiple windows at the OS level. The design challenge lay in creating an experience that felt natural and unobtrusive. **We needed to ensure these sidebar items remained easily accessible without competing with the main content for attention. This led to several key design decisions:** - **The sidebar tabs maintain their own independent state** from the main browsing session, allowing users to treat them as persistent tools rather than temporary pages. - **We implemented a compact view for the URL and toolbar** that preserves the essential functionality of these sites while fitting comfortably in the reduced space. - **The visual design maintains consistency with our pill-shaped tab aesthetic** while clearly distinguishing these persistent views from regular tabs. - **Take advantage of the browser sidebar that Brave currently has**, and it's not really being taken advantage of for websites. It's only very relevant for using our AI assistant and a handful of small features, but web shortcuts would just open in new tabs. The feature particularly shines in scenarios where users need to reference, monitor, or interact with multiple sources simultaneously. A developer might keep documentation visible while coding, a student could maintain note-taking tools while researching, or a financial analyst could monitor market data while reviewing reports. ## Future considerations As web browsing continues to evolve, these features lay the groundwork for future innovations in browser interface design. The introduction of artificial intelligence presents exciting opportunities for features like smarter tab organization. We're exploring systems that could automatically group tabs based on related topics or domains, helping users maintain focus while researching specific subjects. For instance, when a user is planning a trip, the browser could intelligently cluster all travel-related tabs together, from flight bookings to hotel reviews and local attractions. **Beyond AI-driven organization, we're investigating ways to enhance the split view functionality to support more complex workflows.** This could include customizable layouts that adapt to different types of content, such as a three-panel view for comparing products with an AI generated layout that doesn't depend on the websites you're visiting, but rather a completely new UI to just focus on the task at hand. This project demonstrates how design can significantly improve the core browsing functionality while maintaining familiarity for users transitioning from the more massive, default browsers. --- # Containers > Led the user experience and design of the new containers feature for Brave, which allows users to isolate tabs and data in separate containers. - **Year:** 2026 - **Role:** Product design / Design ops / Implementation - **Tools:** Figma / Cursor - **HTML page:** https://aguscruiz.com/projects/containers - **Live project:** [More about containers](https://brave.com/blog/containers/) ![Screenshot of the containers feature.](https://aguscruiz.com/projects/containers/cardImage.webp) *Screenshot of the containers feature.* ## Overview Led the user experience and design of the new containers feature for Brave, which allows users to isolate tabs and data in separate containers. --- # Custom tool for generating dithered images > I created a tool to generate dithered gradients that is tailor made for my company's very specific dither preset. It is able to take any image and create a dithered version where the dither matrix can be tweaked to adjust for specific outputs. - **Year:** 2026 - **Role:** Product design / Implementation - **Tools:** Cursor - **HTML page:** https://aguscruiz.com/projects/ditherator ![Ditherator allows us to create and customize dithered images fine tuning the dither matrix.](https://aguscruiz.com/projects/ditherator/heroImage.webp) *Ditherator allows us to create and customize dithered images fine tuning the dither matrix.* ## Overview At work we're exploring a new design style that uses dithered gradients as textures. Our marketing designer created a first batch of dithered vectors that we were using in the product, but I quickly realized we needed to create more, with specific shapes and texture sizes. Initially asked him if he could create a new batch, but I realized this wouldn't really scale, since he'd be bombarded by requests all the time, so instead I decided to create a tool that allowed us to do exactly that. You can give the tool an image with a gradient, with the shapes you want in the position you want, and Ditherator will create a dithered version of it that you can tweak to your liking, in threshold and scale of the effect. **Quick, easy, and you can get the exact shape you want.** Oh! And you can download the image as an .svg, so you always have vector files ready to go. [Visit ditherator.vercel.app](https://ditherator.vercel.app) --- # Recapturing the feeling of the old internet > I've been wanting to recapture the magic feeling of the old internet, and I wanted to create a spin on the old "guestbook" sites where people could come in and leave their mark. I created the Little friends garden so anyone can come in, leave their name and X link, and generate a randomized "friend" that lives in the 3D space alongside all the other visitors. Check it out and create your little friend too! - **Year:** 2026 - **Role:** Implementation - **Tools:** v0 - **HTML page:** https://aguscruiz.com/projects/little-friends-garden - **Live project:** [jardindeamiguitos.vercel.app](https://jardindeamiguitos.vercel.app) ![Screenshot of the Little Friends Garden guestbook experience.](https://aguscruiz.com/projects/jardindeamiguitos/cardImage.webp) ## Overview I've been wanting to recapture the magic feeling of the old internet, and I wanted to create a spin on the old "guestbook" sites where people could come in and leave their mark. I created the Little friends garden so anyone can come in, leave their name and X link, and generate a randomized "friend" that lives in the 3D space alongside all the other visitors.