Theming

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

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

Colors

On surfaces (backgrounds):

• --text-on-surface-primary - Primary text color
• --text-on-surface-secondary - Secondary text color
• --text-on-surface-tertiary - Tertiary text color
• --text-on-surface-disabled - Disabled text color
• --text-on-surface-inverted - Inverted text color

On media (images/videos):

• --text-on-media-primary - Primary text on media
• --text-on-media-secondary - Secondary text on media
• --text-on-media-tertiary - Tertiary text on media
• --text-on-media-disabled - Disabled text on media
• --text-on-media-inverted - Inverted text on media

Base surfaces:

• --surface-base - Base background color
• --surface-base-inverted - Inverted base color

Elevated surfaces:

• --surface-elevated-a - Elevated surface level A
• --surface-elevated-max - Maximum elevation surface

On media surfaces:

• --surface-on-media-elevated-a - Elevated surface on media
• --surface-on-media-elevated-max - Maximum elevation on media

System surfaces:

• --surface-system-disabled - Disabled state surface

• --border-strong - Strong border color

• --border-soft - Soft border color

• --border-inverted - Inverted border color

• --border-accented - Brand accent border (varies by brand)

Brand-specific (overridden per brand):

• --color-accented-primary - Primary brand accent color
• --color-accented-secondary - Secondary brand accent color
• --color-on-accented-primary-surface - Text color on primary accent
• --color-on-accented-secondary-surface - Text color on secondary accent
• --surface-accented-primary-strong - Strong primary accent surface
• --surface-accented-secondary-strong - Strong secondary accent surface

Typography

Google Fonts used: Oswald and Gabarito

• --font-family-display - Display/hero text

• --font-family-heading - Heading text

• --font-family-title - Title text

• --font-family-body - Body/paragraph text

• --font-family-label - Label text

• --font-family-supporting - Supporting/auxiliary text

• --font-family-button - Button text

• --font-weight-display - Display weight

• --font-weight-heading - Heading weight

• --font-weight-title - Title weight

• --font-weight-body-regular - Body regular weight

• --font-weight-label-regular - Label regular weight

• --font-weight-label-medium - Label medium weight

• --font-weight-label-heavy - Label heavy/semibold weight

• --font-weight-supporting - Supporting regular weight

• --font-weight-supporting-alt - Supporting alternate/medium weight

• --font-weight-button - Button weight

Border Radius

• --radius-zero - No radius (0px)
• --radius-xs - Extra small (8px)
• --radius-s - Small (10px)
• --radius-l - Large (16px)
• --radius-xl - Extra large (30px)
• --radius-max - Maximum/pill-shaped (6000px)

Shadows

• --shadow-sm - Small shadow
• --shadow-md - Medium shadow
• --shadow-lg - Large shadow
• --shadow-xl - Extra large shadow
• --shadow-xl-negative - Extra large negative shadow