# Mozilla Protocol (Mozilla Protocol)

> Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.

- IndexStyle No.560 — https://indexstyle.org/styles/mozilla-protocol
- Kind: Style · Family: Platform Screen Languages · Era: 2017–
- Mood: Technique, Trust, Exhilaration
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Bold black headings and broad white space
- Large fields of vivid color
- Flexible billboards and cards
- Short copy and explicit calls to action

## Best used for

- Open-web product marketing across languages
- Balancing bright brand expression with accessible content

## Composition recipe

- Typography & lettering: Use short heavy headings, readable body text and room for translation expansion.
- Layout & structure: Separate one-message billboards from reusable card groups.
- Material & texture: Ground the page in black and white, reserving gradients for a single focal area.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #7542E5
- Text and outlines: #20123A

## What to avoid

Spreading the Firefox gradient everywhere buries the content. Color should reinforce meaning and focus.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Bold black headings and broad white space
- [ ] Visible in the piece: Large fields of vivid color
- [ ] Visible in the piece: Flexible billboards and cards
- [ ] Visible in the piece: Short copy and explicit calls to action
- [ ] The layout follows: Separate one-message billboards from reusable card groups.
- [ ] The lettering follows: Use short heavy headings, readable body text and room for translation expansion.
- [ ] The material and surface follow: Ground the page in black and white, reserving gradients for a single focal area.
- [ ] The colour relation holds: #FFFFFF as ground, #7542E5 carrying the style, #20123A for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Web 1.0 (ウェブ1.0)** — Reuses the naivety of the constrained early web as directness and charm. In the 2020s it came back as a movement to take the personal site back, gathering under names like Neocities and Yesterweb. → https://indexstyle.org/styles/web-one
- **GitHub Primer (GitHub Primer)** — GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior. → https://indexstyle.org/styles/github-primer

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=mozilla-protocol+web-one

## Further study

- Protocol's five principles
- Global localization
- HTML/CSS pattern library

## Reference works

- Mozilla Protocol — Design Principles — https://protocol.mozilla.org/docs/fundamentals/principles.html

## Source of record

- Mozilla Protocol — Design Principles — https://protocol.mozilla.org/docs/fundamentals/principles.html

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/mozilla-protocol
- Image-generation prompt (legally clean): https://indexstyle.org/styles/mozilla-protocol/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)