Browser Styles Normalization in the Global Design System? #12
Description
Rationale
While design systems generally deliver UI components, documentation, Figma, and design tokens at the "component level", their ultimate purpose is supposed to "orchestrate consistent user experiences" — not merely exist as collections of UI components and design tokens.
Design systems have the potential to address all elements related to this goal.
The browser rendering inconsistencies undermine this goal at the most fundamental as well as historical level.
Therefore, while browser style normalization is challenging, it can massively contribute to the high-quality user experience across different browsers and platforms.
What makes the Global Design System special is that it's a foundational layer for other design systems, an incubation layer for standards, and it carries W3C authority.
This means the Global Design System can:
- Provide the base layer that all design systems need, but not all design systems can define
- Deliver solutions with the trust and credibility that comes from official W3C CG maintenance
- Help shape future UA stylesheet improvements, similar to how
appearance: base;is exploring standardized form control styling
I do understand that standardizing browser defaults is a complex task. The default stylesheet isn't just about consistency between browsers. It's about consistency across time.
The entire Web must remain backwards-(and-forwards) compatible.
As such, it is very unusual to change the browser defaults without breaking existing sites because changing browser defaults risks breaking millions of existing sites.
However, we don't need to change browser defaults.
We can provide a trustworthy, well-maintained, opt-in-able normalized style layer.
Global Design System can be a place to define and provide such a style, which can be used by design systems and web projects that want to ensure consistent rendering across browsers.
The community has already explored multiple "defaulting" approaches:
- CSS Remedy: Reimagines what defaults should be if we started from scratch today
- Normalize CSS: Provides consistent default styles across browsers.
- Reset CSS: Remove default styles as much as possible.
As the Global Design System aims to be "global" for the web platform, we should avoid opinionated styles while providing the minimum necessary normalization.
The exact definition of "minimum necessary" should be discussed.
Expected Requirements
While the exact requirements deserve deeper exploration, here're high-level thoughts:
- Separation of Concerns: UI Components must work independently, with or without normalization
- Modular Structure & Opt-in Adoption: Each normalization aspect should be a separate module—developers choose what to include, or nothing at all
- Documentation: Every style decision needs clear rationale to tell the history (unlike that mysterious 8px margin for body)
- Layering: Use @layer and document integration strategies to minimize impact on existing styles
- Shadow DOM Compatibility: Ensure UI components remain properly encapsulated
- Browser Compatibility: Should align with Global Design System browser support policy (will be discussed in What's the target browser support? #5)
I'm not sure if it will be a monorepo after all, but I imagne the following structure for now:
Global Design System/
├── components/
├── design-tokens/
├── documentation/
└── normalization/
├── core.css # Essential normalizations
├── forms.css # Form controls consistency (might complement appearance: base)
├── typography.css # Text rendering consistency
└── ...