Theming

The frontend is designed to be used by multiple brands. They share the same layouts and components, but each brand has a unique visual theme. The theme defines colors, typography, and border radii that align with the brand’s identity.

All theme and brand-specific values are implemented as CSS variables.

Theme primitives

Brand-specific

Each brand theme is built from a small set of theme-specific primitives:

• Two base colors. Other surface/text/border/overlay colors are derived from these.
• Typography choices. Each theme defines its own font family and font weights.
• Border radius. Each theme defines its own radius scale.

Shared

• Font sizes
• Spacings
• All colors except 2 base colors
• Shadows
• Breakpoints
• Grid system

Colors

Colors are grouped based on purpose into:

• Text on surfaces (backgrounds)
• Text on media (images/videos)
• Surfaces
• Borders
• Overlays

Typography

Only Google Fonts are used to ensure optimal performance and reliability. Each theme defines its own font family and weights, but all themes share the same font size scale.