Developer

Resources for developers

Help and support

Please refer to our main Help and Support section.

Desktop

Component library

Storybook is our library for desktop design system components and technical documentation.

Our Storybook instance is best previewed on Firefox, since our components are built for Firefox.

You also must enable certain preferences in about:config to ensure components display as expected (specifically svg.context-properties.content.enabled and layout.css.light-dark.enabled).

Design tokens

See technical documentation on how design tokens work on desktop on Firefox Source Docs.

Shared tokens (shared across all of Firefox)

Brand tokens (used on in-content features)

Platform tokens (used on chrome features)

Helper text and typography related classes (shared across all of Firefox)

Icons

You’ll find most desktop icons within the toolkit/themes and browser/themes directories, although some will live within its feature-specific directory.

Technical documentation

Firefox Source Docs

 

Mobile

Component libraries

Android

Component library on GitHub

iOS

Component library on GitHub

Design tokens

Android

Colors

iOS

Colors

Light theme

Dark theme

Private mode theme

Icons

iOS and Android icon repository and releases on GitHub

Technical documentation

iOS

Component library documentation hosted in GitHub pages.