Acorn Design System
Acorn Update - Design Systems in Bloom

April 23rd 2025 

Topics

  • New newsletter format 

  • Design System Work week takeaways 

  • What we shipped this past quarter and updates on desktop and mobile

  • What's next?

  • Thank yous!

 
 

New newsletter format 

The week of March 17th the design systems design team met with our engineering and accessibility partners in Toronto. We had a wonderful time filled with games like "guess the hex code" and serious discussions on how can we improve our documentation and review processes. We also made the commitment to working closer as a unified team. One of those steps is a combined team newsletter! 

From left to right, top: Jane, Crystal, Hanna, Anna K. holding laptop with Tim on it, Mark S., Jules, Mark K., Julian holding Acorn plushie, and Stuart

From left to right, bottom: Maggie, Anna A., Cyndi, and Noah

Work week takeaways 

During our recent Design Systems work week, we aligned on key focus areas to improve how we support teams and scale quality across Firefox. Here’s what we’re prioritizing next:

  • Earlier Involvement in the Design Process
     Engaging design systems earlier helps reduce rework and duplication. We're integrating into PRD checklists, building closer product team relationships, and joining late-stage design reviews.

  • Better Documentation & Tools
     We’re consolidating and expanding documentation, improving onboarding materials, and enhancing Figma integration and automation tools like Code Connect and linting.

  • Design Tokens for the Brand Refresh
     Tokens remain a top technical priority. We're updating the color palette and prioritizing surfaces that have the biggest impact on the refreshed look and feel.

  • Advocacy & Visibility
     We're launching an advocacy plan, improving internal storytelling, and establishing clearer communication channels and cadences to highlight progress and impact.

We’re excited to move these forward—let us know if you'd like a deeper dive or see opportunities to collaborate!

 
 

What we shipped this past quarter

📋 Unified intake form + engineering joining Office Hours

We launched a single Airtable form for contributions, tokens, and office hours. Engineering is now joining office hours to give earlier feedback and strengthen cross-functional collaboration.


📚 Docs site updates

We launched several new and updated pages including: 

  • New Color palette documentation

  • New Android Chip component documentation

  • Updated Button component guidelines

  • Updated Iconography guidelines

  • New Layout guidelines

  • Updated Help and support pages

And we kicked off workshops to improve the docs site overall. More updates are on the way!

Desktop

Cards stacked on top of one another showcasing new colors

New color palette

Live on: mozilla-central and Figma

Our biggest launch this cycle! We’ve modernized and unified the browser’s color system with accessibility and scalability in mind. 

The new colors appear in the Message Bar, Tab Groups, and our new Icon Picker on iOS. Also take a look at our dimmed down dark mode accent color. 

Built with tokens, it’s live in Figma for designers, and mozilla-central for front-end developers. Learn more on Acorn.

Please note, the colors are still a WIP for mobile.

Different layers stacked with a light source pointing at them

Updated shadows

Live on: mozilla-central and Figma

Cleaner, more consistent shadow styles are now live, with updated tokens available in Figma.

Documentation coming out soon.

Storybook logo

Don't forget you can preview and play with our components on Storybook


New components

Live on: mozilla-central (coming soon to our V3 Figma library)

  • BOXES (need to contain content, but don't want a card?)

    • Box Button

    • Box Item

    • Box Link

  • Input Color

  • Input Folder

  • Input Search

  • Input Text

  • Input Password

  • Select

Pile of coins with acorn logo on them

New tokens

Live on: mozilla-central and Figma

--table-row-background-color + alternate

--link-colors got updated on chrome

New icon size tokens:

  • small (alias of default), medium, large, xlarge

Coin with Figma logo on it that is sparkling

More design tokens in Figma

Live on: mozilla-central and Figma

We've released shadows, colors, space, size... Now our smallest captured design decisions are documented across design and code. Expect easier collaboration, hand offs, and more consistent styling throughout Firefox!

Motorized wheelchair user using a mobile phone

Grey & translucency testing

We tested proposals for improving our grey values (light and dark mode) and translucent surfaces on Fable with people with disabilities. Fable testing helps us get feedback and clarity on contrast improvements across our themes.

Look out for theme improvements in h2 👀.

Reach out to the #accessibility team on Slack if you want to test your designs with Fable.

Mobile

Mobile phone showing a blue toast showing that tabs are closed

iOS Toast improvements

The iOS toast component has been refined for better UX and implemented in collaboration with engineering.

Material 3 components layered together

Material 3 migration plan

We’ve partnered with Android engineering to align on the move to Material 3. All updated designs have been reviewed together for a smooth, thoughtful migration.

9 gradients laid out next to each other

Figma variables updates

  • We've introduced gradients as variables in the Mobile styles design library.

  • We’ve officially removed our deprecated color styles from the Mobile Styles library

Chip component on different backgrounds

Component contributions

  • Thanks to Megan Daniels for contributing chip component update! 

  • We’ve also adjusted the line height of Header 5 for readability (Thank you Aarjav for the request!) 

 
 

What's next: Documentation & more tokens

2025 is the year of documentation for the Acorn team 

We're expanding the resources on our site, with more comprehensive information on components and tokens for both desktop and mobile platforms. Stay tuned for a continuous rollout of documentation updates!

Figma Desktop Library v3.0.0

We’re excited to announce a complete rebuild of our Desktop Components library (V3!), built with the new variables and other powerful features introduced in Figma. These updated components will streamline your design process, making it easier to create new designs, experiment with different themes, and explore component options with greater flexibility.

Figma Mobile Libraries 

We’re quickly building updated libraries that support the mobile redesign work on iOS and Android. You'll soon see an iOS library featuring tons of updates, with an Android one to come. Thank you to Nicole Weber for kicking off work on an Android Material 3 library

Design tokens coverage

We'll be working hard this year on expanding our tokens coverage in mozilla-central for desktop features in order to set up our upcoming design refresh for success. Up first: We're actively working alongside Maxx Crawford for New Tab's remaining tokenization.

Our coverage is currently at 67.5% ! Follow along at arewedesigntokensyet?.

(Note, coverage percentage may change based on what directories and properties we track) 

 
 

Thank yous! 

  • Thank you rking for adding badging support to moz button

  • Thank you Raksha for improving upon our moz button group story with a moz card

  • Thank you Gautam for adding automatic fluent support for the heading property of moz card

  • Thank you kpatenio for adding support for different icon positions for the icon + text variant of moz button

  • Thank you maxx for supporting the New Tab full tokenization

  • Thank you Tati for working with us on designs for an upcoming "promotional bar" component

  • Thanks to Megan Daniels for contributing to our chip component on Android

  • Thank you Laurie Marceau for contributing to our Toast component on iOS

  • Thank you for Nicole Weber for kicking off the Android Material 3 Library

Unsubscribe