jouw-stem__design-system 0.1.0

package/src/components/CorporateFooter/CorporateFooter.scss

@@ -0,0 +1,162 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: corporate-footer;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  background-color: var(--corporateFooter-background, $corporateFooter-background);
+  color: var(--corporateFooter-text, $corporateFooter-text);
+}
+
+.#{$c}__inner {
+  width: 100%;
+  max-width: var(--corporateFooter-maxWidth, $corporateFooter-maxWidth);
+  margin: 0 auto;
+  padding: 0 var(--corporateFooter-paddingX, $corporateFooter-paddingX);
+  box-sizing: border-box;
+}
+
+.#{$c}__top {
+  padding: var(--corporateFooter-paddingY, $corporateFooter-paddingY) 0;
+}
+
+.#{$c}__top .#{$c}__inner {
+  display: grid;
+  /* auto-fit collapses the columns as width shrinks (down to a single
+     stacked column in narrow contexts) instead of overflowing + overlapping. */
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--corporateFooter-gap, $corporateFooter-gap);
+}
+
+.#{$c}__brand {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--corporateFooter-heading, $corporateFooter-heading);
+}
+
+.#{$c}__tagline {
+  margin: var(--corporateFooter-stack, $corporateFooter-stack) 0 0;
+  font-size: 14px;
+  color: var(--corporateFooter-textMuted, $corporateFooter-textMuted);
+}
+
+.#{$c}__social {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--corporateFooter-inline, $corporateFooter-inline);
+  margin-top: var(--corporateFooter-stack, $corporateFooter-stack);
+}
+
+.#{$c}__social-link,
+.#{$c}__link,
+.#{$c}__legal-link {
+  color: var(--corporateFooter-link-text, $corporateFooter-link-text);
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.#{$c}__social-link:hover,
+.#{$c}__link:hover,
+.#{$c}__legal-link:hover {
+  color: var(--corporateFooter-link-hover, $corporateFooter-link-hover);
+  text-decoration: underline;
+}
+
+.#{$c}__social-link:focus-visible,
+.#{$c}__link:focus-visible,
+.#{$c}__legal-link:focus-visible,
+.#{$c}__newsletter-input:focus-visible,
+.#{$c}__newsletter-button:focus-visible {
+  outline: 2px solid var(--corporateFooter-focusRing, $corporateFooter-focusRing);
+  outline-offset: 2px;
+}
+
+.#{$c}__col-title {
+  margin: 0 0 var(--corporateFooter-stack, $corporateFooter-stack);
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--corporateFooter-heading, $corporateFooter-heading);
+}
+
+.#{$c}__col-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--corporateFooter-stack, $corporateFooter-stack);
+}
+
+/* Newsletter */
+.#{$c}__newsletter-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--corporateFooter-heading, $corporateFooter-heading);
+  margin-bottom: var(--corporateFooter-stack, $corporateFooter-stack);
+}
+
+.#{$c}__newsletter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--corporateFooter-inline, $corporateFooter-inline);
+}
+
+.#{$c}__newsletter-input {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  font-size: 14px;
+  padding: var(--corporateFooter-input-paddingY, $corporateFooter-input-paddingY)
+    var(--corporateFooter-input-paddingX, $corporateFooter-input-paddingX);
+  background-color: var(--corporateFooter-input-background, $corporateFooter-input-background);
+  color: var(--corporateFooter-input-text, $corporateFooter-input-text);
+  border: 1px solid var(--corporateFooter-input-border, $corporateFooter-input-border);
+  border-radius: var(--corporateFooter-input-radius, $corporateFooter-input-radius);
+}
+
+.#{$c}__newsletter-button {
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  padding: var(--corporateFooter-cta-paddingY, $corporateFooter-cta-paddingY)
+    var(--corporateFooter-cta-paddingX, $corporateFooter-cta-paddingX);
+  background-color: var(--corporateFooter-cta-background, $corporateFooter-cta-background);
+  color: var(--corporateFooter-cta-text, $corporateFooter-cta-text);
+  border: none;
+  border-radius: var(--corporateFooter-cta-radius, $corporateFooter-cta-radius);
+}
+
+.#{$c}__newsletter-button:hover {
+  background-color: var(--corporateFooter-cta-hover, $corporateFooter-cta-hover);
+}
+
+/* Bottom bar */
+.#{$c}__bottom {
+  border-top: 1px solid var(--corporateFooter-border, $corporateFooter-border);
+}
+
+.#{$c}__inner--bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--corporateFooter-inline, $corporateFooter-inline);
+  min-height: var(--corporateFooter-bottom-height, $corporateFooter-bottom-height);
+}
+
+.#{$c}__copyright {
+  font-size: 13px;
+  color: var(--corporateFooter-textMuted, $corporateFooter-textMuted);
+}
+
+.#{$c}__legal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--corporateFooter-inline, $corporateFooter-inline);
+}

package/src/components/CorporateFooter/CorporateFooter.tokens.theme-dark.json

@@ -0,0 +1,39 @@
+{
+  "corporateFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Footer background (matches page; separated by the bottom-bar rule)" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Footer text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Muted footer text (tagline, copyright)" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Column titles / brand" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the bottom bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1400px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "paddingY": { "value": "{inset.xl}", "type": "dimension", "description": "Vertical padding of the top region" },
+    "gap": { "value": "{inline.xl}", "type": "dimension", "description": "Gap between footer columns" },
+    "stack": { "value": "{stack.s}", "type": "dimension", "description": "Vertical rhythm within a column" },
+    "inline": { "value": "{inline.m}", "type": "dimension", "description": "Inline gap (social, legal)" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Footer link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Footer link hover colour" }
+    },
+    "input": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Newsletter input background" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Newsletter input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Newsletter input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Newsletter input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Input horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Input vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "Subscribe button background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "Subscribe button hover" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Subscribe button label" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Subscribe button radius" },
+      "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Subscribe button horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Subscribe button vertical padding" }
+    },
+    "bottom": {
+      "height": { "value": "56px", "type": "dimension", "description": "Bottom bar min-height" }
+    }
+  }
+}

package/src/components/CorporateFooter/CorporateFooter.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,39 @@
+{
+  "corporateFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Footer background (matches page; separated by the bottom-bar rule)" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Footer text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Muted footer text (tagline, copyright)" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Column titles / brand" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the bottom bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1400px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "paddingY": { "value": "{inset.xl}", "type": "dimension", "description": "Vertical padding of the top region" },
+    "gap": { "value": "{inline.xl}", "type": "dimension", "description": "Gap between footer columns" },
+    "stack": { "value": "{stack.s}", "type": "dimension", "description": "Vertical rhythm within a column" },
+    "inline": { "value": "{inline.m}", "type": "dimension", "description": "Inline gap (social, legal)" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Footer link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Footer link hover colour" }
+    },
+    "input": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Newsletter input background" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Newsletter input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Newsletter input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Newsletter input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Input horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Input vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "Subscribe button background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "Subscribe button hover" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Subscribe button label" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Subscribe button radius" },
+      "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Subscribe button horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Subscribe button vertical padding" }
+    },
+    "bottom": {
+      "height": { "value": "56px", "type": "dimension", "description": "Bottom bar min-height" }
+    }
+  }
+}

package/src/components/CorporateFooter/CorporateFooter.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,39 @@
+{
+  "corporateFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Footer background (matches page; separated by the bottom-bar rule)" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Footer text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Muted footer text (tagline, copyright)" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Column titles / brand" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the bottom bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1400px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "paddingY": { "value": "{inset.xl}", "type": "dimension", "description": "Vertical padding of the top region" },
+    "gap": { "value": "{inline.xl}", "type": "dimension", "description": "Gap between footer columns" },
+    "stack": { "value": "{stack.s}", "type": "dimension", "description": "Vertical rhythm within a column" },
+    "inline": { "value": "{inline.m}", "type": "dimension", "description": "Inline gap (social, legal)" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Footer link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Footer link hover colour" }
+    },
+    "input": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Newsletter input background" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Newsletter input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Newsletter input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Newsletter input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Input horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Input vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "Subscribe button background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "Subscribe button hover" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Subscribe button label" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Subscribe button radius" },
+      "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Subscribe button horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Subscribe button vertical padding" }
+    },
+    "bottom": {
+      "height": { "value": "56px", "type": "dimension", "description": "Bottom bar min-height" }
+    }
+  }
+}

package/src/components/CorporateFooter/CorporateFooter.tokens.theme-light.json

@@ -0,0 +1,39 @@
+{
+  "corporateFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Footer background (matches page; separated by the bottom-bar rule)" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Footer text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Muted footer text (tagline, copyright)" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Column titles / brand" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the bottom bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1400px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "paddingY": { "value": "{inset.xl}", "type": "dimension", "description": "Vertical padding of the top region" },
+    "gap": { "value": "{inline.xl}", "type": "dimension", "description": "Gap between footer columns" },
+    "stack": { "value": "{stack.s}", "type": "dimension", "description": "Vertical rhythm within a column" },
+    "inline": { "value": "{inline.m}", "type": "dimension", "description": "Inline gap (social, legal)" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Footer link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Footer link hover colour" }
+    },
+    "input": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Newsletter input background" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Newsletter input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Newsletter input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Newsletter input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Input horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Input vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "Subscribe button background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "Subscribe button hover" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Subscribe button label" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Subscribe button radius" },
+      "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Subscribe button horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Subscribe button vertical padding" }
+    },
+    "bottom": {
+      "height": { "value": "56px", "type": "dimension", "description": "Bottom bar min-height" }
+    }
+  }
+}

package/src/components/CorporateFooter/CorporateFooter.vue

@@ -0,0 +1,114 @@
+<template>
+  <footer class="corporate-footer">
+    <div class="corporate-footer__top">
+      <div class="corporate-footer__inner">
+        <!-- Brand block + tagline + social -->
+        <div class="corporate-footer__brand-block">
+          <slot name="brand">
+            <span class="corporate-footer__brand">{{ brand }}</span>
+          </slot>
+          <p v-if="tagline" class="corporate-footer__tagline">{{ tagline }}</p>
+          <nav v-if="socialLinks.length" class="corporate-footer__social" aria-label="Social media">
+            <a
+              v-for="s in socialLinks"
+              :key="s.label"
+              :href="s.href || '#'"
+              class="corporate-footer__social-link"
+            >{{ s.label }}</a>
+          </nav>
+        </div>
+
+        <!-- Link columns -->
+        <nav
+          v-for="col in columns"
+          :key="col.title"
+          class="corporate-footer__col"
+          :aria-label="col.title"
+        >
+          <h2 class="corporate-footer__col-title">{{ col.title }}</h2>
+          <ul class="corporate-footer__col-list">
+            <li v-for="link in col.links" :key="link.label">
+              <a :href="link.href || '#'" class="corporate-footer__link">{{ link.label }}</a>
+            </li>
+          </ul>
+        </nav>
+
+        <!-- Newsletter -->
+        <form v-if="showNewsletter" class="corporate-footer__newsletter" @submit.prevent>
+          <label :for="newsletterId" class="corporate-footer__newsletter-label">{{ newsletterLabel }}</label>
+          <div class="corporate-footer__newsletter-row">
+            <input
+              :id="newsletterId"
+              type="email"
+              class="corporate-footer__newsletter-input"
+              :placeholder="newsletterPlaceholder"
+            />
+            <button type="submit" class="corporate-footer__newsletter-button">{{ newsletterCta }}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="corporate-footer__bottom">
+      <div class="corporate-footer__inner corporate-footer__inner--bottom">
+        <span class="corporate-footer__copyright">{{ copyright }}</span>
+        <nav class="corporate-footer__legal" aria-label="Legal">
+          <a
+            v-for="l in legalLinks"
+            :key="l.label"
+            :href="l.href || '#'"
+            class="corporate-footer__legal-link"
+          >{{ l.label }}</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style src="./CorporateFooter.scss"></style>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+/**
+ * CorporateFooter — a "fat footer" for corporate sites: brand block with
+ * social links, multiple link columns, a newsletter sign-up, and a legal
+ * bottom bar. Renders fully from defaults; override the brand via slot.
+ */
+interface FooterLink { label: string; href?: string }
+interface FooterColumn { title: string; links: FooterLink[] }
+
+withDefaults(
+  defineProps<{
+    brand?: string
+    tagline?: string
+    columns?: FooterColumn[]
+    socialLinks?: FooterLink[]
+    legalLinks?: FooterLink[]
+    showNewsletter?: boolean
+    newsletterLabel?: string
+    newsletterPlaceholder?: string
+    newsletterCta?: string
+    copyright?: string
+  }>(),
+  {
+    brand: 'Acme Corporation',
+    tagline: 'Enterprise software that scales with your organisation.',
+    columns: () => [
+      { title: 'Products', links: [{ label: 'Platform' }, { label: 'Integrations' }, { label: 'Pricing' }] },
+      { title: 'Solutions', links: [{ label: 'Enterprise' }, { label: 'Startups' }, { label: 'Public sector' }] },
+      { title: 'Company', links: [{ label: 'About' }, { label: 'Careers' }, { label: 'Newsroom' }] },
+      { title: 'Resources', links: [{ label: 'Docs' }, { label: 'Support' }, { label: 'Status' }] },
+    ],
+    socialLinks: () => [{ label: 'LinkedIn' }, { label: 'X' }, { label: 'GitHub' }],
+    legalLinks: () => [{ label: 'Privacy' }, { label: 'Terms' }, { label: 'Cookies' }],
+    showNewsletter: true,
+    newsletterLabel: 'Subscribe to our newsletter',
+    newsletterPlaceholder: 'you@company.com',
+    newsletterCta: 'Subscribe',
+    copyright: '© 2026 Acme Corporation. All rights reserved.',
+  }
+)
+
+const newsletterId = useId()
+</script>

package/src/components/CorporateHeader/CorporateHeader.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.corporate-header',
+  // CorporateHeader renders a full representative header from its prop
+  // defaults; the only axis worth scanning across themes is whether the
+  // thin top utility bar (dark surface) is present.
+  variants: [
+    {
+      name: 'Utility bar',
+      subvariants: [
+        { name: 'with-utility', query: { showUtilityBar: 'true' } },
+        { name: 'without-utility', query: { showUtilityBar: 'false' } },
+      ],
+    },
+  ],
+}

package/src/components/CorporateHeader/CorporateHeader.scss

@@ -0,0 +1,128 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: corporate-header;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  background-color: var(--corporateHeader-background, $corporateHeader-background);
+  color: var(--corporateHeader-text, $corporateHeader-text);
+  border-bottom: 1px solid var(--corporateHeader-border, $corporateHeader-border);
+  box-shadow: var(--corporateHeader-shadow, $corporateHeader-shadow);
+}
+
+.#{$c}__inner {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--corporateHeader-gap, $corporateHeader-gap);
+  width: 100%;
+  max-width: var(--corporateHeader-maxWidth, $corporateHeader-maxWidth);
+  margin: 0 auto;
+  padding: 0 var(--corporateHeader-paddingX, $corporateHeader-paddingX);
+  box-sizing: border-box;
+}
+
+/* Utility bar */
+.#{$c}__utility {
+  background-color: var(--corporateHeader-utility-background, $corporateHeader-utility-background);
+  color: var(--corporateHeader-utility-text, $corporateHeader-utility-text);
+  border-bottom: 1px solid var(--corporateHeader-border, $corporateHeader-border);
+}
+
+.#{$c}__utility .#{$c}__inner {
+  min-height: var(--corporateHeader-utility-height, $corporateHeader-utility-height);
+  justify-content: flex-end;
+}
+
+.#{$c}__utility-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--corporateHeader-gap, $corporateHeader-gap);
+}
+
+.#{$c}__utility-link {
+  color: var(--corporateHeader-utility-text, $corporateHeader-utility-text);
+  text-decoration: none;
+  font-size: 13px;
+  border-radius: var(--corporateHeader-link-radius, $corporateHeader-link-radius);
+}
+
+.#{$c}__utility-link:hover {
+  text-decoration: underline;
+}
+
+.#{$c}__utility-link:focus-visible {
+  outline: 2px solid var(--corporateHeader-focusRing, $corporateHeader-focusRing);
+  outline-offset: 2px;
+}
+
+/* Main bar */
+.#{$c}__bar .#{$c}__inner {
+  min-height: var(--corporateHeader-height, $corporateHeader-height);
+}
+
+.#{$c}__brand {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--corporateHeader-text, $corporateHeader-text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.#{$c}__nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--corporateHeader-gap, $corporateHeader-gap);
+}
+
+.#{$c}__link {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--corporateHeader-link-paddingY, $corporateHeader-link-paddingY)
+    var(--corporateHeader-link-paddingX, $corporateHeader-link-paddingX);
+  color: var(--corporateHeader-link-text, $corporateHeader-link-text);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: var(--corporateHeader-link-radius, $corporateHeader-link-radius);
+}
+
+.#{$c}__link:hover {
+  color: var(--corporateHeader-link-hover, $corporateHeader-link-hover);
+}
+
+.#{$c}__link:focus-visible {
+  outline: 2px solid var(--corporateHeader-focusRing, $corporateHeader-focusRing);
+  outline-offset: 2px;
+}
+
+.#{$c}__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--corporateHeader-gap, $corporateHeader-gap);
+  margin-left: auto;
+}
+
+.#{$c}__cta {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--corporateHeader-cta-paddingY, $corporateHeader-cta-paddingY)
+    var(--corporateHeader-cta-paddingX, $corporateHeader-cta-paddingX);
+  background-color: var(--corporateHeader-cta-background, $corporateHeader-cta-background);
+  color: var(--corporateHeader-cta-text, $corporateHeader-cta-text);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: var(--corporateHeader-cta-radius, $corporateHeader-cta-radius);
+}
+
+.#{$c}__cta:hover {
+  background-color: var(--corporateHeader-cta-hover, $corporateHeader-cta-hover);
+}
+
+.#{$c}__cta:focus-visible {
+  outline: 2px solid var(--corporateHeader-focusRing, $corporateHeader-focusRing);
+  outline-offset: 2px;
+}

package/src/components/CorporateHeader/CorporateHeader.tokens.theme-dark.json

@@ -0,0 +1,33 @@
+{
+  "corporateHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Main header background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Header foreground text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Hairline under the header" },
+    "shadow": { "value": "{shadow.s}", "type": "shadow", "description": "Header elevation shadow" },
+    "height": { "value": "68px", "type": "dimension", "description": "Main bar min-height" },
+    "maxWidth": { "value": "1400px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between header items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "link": {
+      "text": { "value": "{text.default}", "type": "color", "description": "Primary nav link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Primary nav link hover colour" },
+      "radius": { "value": "{radius.subtle}", "type": "dimension", "description": "Nav link radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Nav link horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Nav link vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "CTA background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "CTA hover background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "CTA label colour" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "CTA radius" },
+      "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "CTA vertical padding" }
+    },
+    "utility": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Utility bar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Utility bar text" },
+      "height": { "value": "36px", "type": "dimension", "description": "Utility bar min-height" }
+    }
+  }
+}