@adres/brand-mgda

MGDA brand theme for the Adres design system.

| Role | Colour | HSL | Hex | |------|--------|-----|-----| | Primary | Vivid blue | hsl(208 100% 50%) | #0088FF | | Secondary | Pale cyan | hsl(184 100% 64%) | #47F3FF | | Accent | Gold | hsl(38 90% 55%) | #F4A825 | | Neutrals | Cool blue-gray | hsl(220 20% 45%) | #5C6B8A |

Type: Gilroy, self-hosted via @adres/fonts/gilroy: "var(--font-gilroy)", "Gilroy", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

A Next.js app must render the loader's .variable className on <html> (or an ancestor) so --font-gilroy resolves:

import { gilroy } from "@adres/fonts/gilroy"

<html lang="en" data-brand="mgda" className={gilroy.variable}>

and add @adres/fonts to transpilePackages in next.config.mjs. Storybook (Vite, can't run next/font/local) instead loads Gilroy from the Fontshare CDN in preview-head.html.

Usage

1. Install the package: @adres/brand-mgda (workspace or file:/published dep).
2. Import the theme once, alongside the DS styles, in your global stylesheet:

   @import "@adres/brand-mgda/theme.css";

3. Activate it by setting the attribute on <html>:

   <html data-brand="mgda">

   Dark mode: add class="dark" (or data-theme="dark") on the same element.

The theme only defines tokens (:root[data-brand="mgda"]); all components come from @adres/design-system and re-skin automatically.

The accent colour is not part of the original brief and was derived to pair with the primary/secondary hues; adjust --accent-* in src/theme.css if a different accent is specified later.