Developer

Resources for developers

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)

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

Technical documentation

iOS

Component library documentation hosted in GitHub pages.