Offcanvas
overlay thumb
Firefox Photon Design System

Firefox Photon Design System

Mozilla's design system for creating cohesive Firefox user experiences.

Design Principles: Emphasizes scale, performance, and inclusion to guide cohesive user experiences.
Visual Guidelines: Provides standards for grid layouts, typography, color schemes, iconography, and illustrations.
Motion Principles: Outlines best practices for animations, including duration, easing, and icon motion.
Copy Standards: Establishes voice, tone, capitalization, punctuation, and a word list for consistent communication.
UI Components: Offers reusable elements like buttons, checkboxes, input fields, and tabs.
Patterns: Includes design solutions for errors, warnings, shadows, and overlays.
Resources: Provides access to colors, icons, fonts, and design tokens.