@conduction/docusaurus-preset 0.1.0

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -0,0 +1,73 @@
+/**
+ * <WidgetShelf /> styles. Header + responsive grid of widget-preview
+ * cards. Each card has a tinted panel containing the widget mock,
+ * with title + description below.
+ */
+
+.shelf {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-12) var(--space-12);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.head { max-width: 70ch; margin: 0 0 var(--space-8); }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--c-orange-knvb);
+  margin-bottom: var(--space-3);
+}
+.eyebrow .h { width: 10px; height: 12px; clip-path: var(--hex-pointy-top); background: var(--c-orange-knvb); }
+.title {
+  font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
+  line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+}
+.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+
+.grid {
+  display: grid;
+  gap: var(--space-5);
+}
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+
+.card {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel {
+  background: var(--c-cobalt-50);
+  padding: var(--space-5);
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* Widget mocks (.w, .w-*) get a max-width so they don't stretch
+   awkwardly inside the card. */
+.panel > * { width: 100%; max-width: 280px; }
+
+.cardTitle {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  padding: var(--space-4) var(--space-5) 0;
+}
+
+.cardDesc {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+  margin: 0;
+  padding: var(--space-2) var(--space-5) var(--space-5);
+}

package/src/components/index.js

@@ -0,0 +1,96 @@
+/**
+ * @conduction/docusaurus-preset/components
+ *
+ * Public React components for use in MDX, JSX pages, and theme
+ * swizzles. Each component mirrors a section in the design-system
+ * kit (preview/components/<name>.html) so the visual is the source
+ * of truth and the React code follows.
+ *
+ * Usage in MDX:
+ *
+ *   import { Hero, StatsStrip, CtaBanner } from '@conduction/docusaurus-preset/components';
+ *
+ *   <Hero
+ *     eyebrow="Twelve open-source apps · one Nextcloud"
+ *     title="Install your stack."
+ *     subtitle="In two minutes."
+ *     primaryCta={{label: "Install from Nextcloud app store"}}
+ *   />
+ *
+ *   <StatsStrip stats={[{value: '24', label: 'apps'}, ...]} />
+ *
+ *   <CtaBanner title="Ready to install?" />
+ */
+
+/* Atomic primitives, also exported as their own subpath for direct
+   `import {HexBullet} from '@conduction/docusaurus-preset/components/primitives';`
+   imports if a site only needs the atoms. */
+export * from './primitives';
+
+export {default as Hero} from './Hero/Hero.jsx';
+export {default as StatsStrip} from './StatsStrip/StatsStrip.jsx';
+export {default as CtaBanner} from './CtaBanner/CtaBanner.jsx';
+export {default as PlatformOverview} from './PlatformOverview/PlatformOverview.jsx';
+export {default as AppsPreview, AppCard} from './AppsPreview/AppsPreview.jsx';
+
+/* Card-family components (Batch 2). Each pairs with a *Grid sibling
+   that handles the surrounding layout, so callers can drop a row
+   of cards in MDX with a single import. */
+export {default as SolutionCard, SolutionGrid} from './SolutionCard/SolutionCard.jsx';
+export {default as PartnerCard, PartnerGrid, BecomePartner} from './PartnerCard/PartnerCard.jsx';
+export {default as PartnerDirectory} from './PartnerDirectory/PartnerDirectory.jsx';
+export {default as PartnerSidecard} from './PartnerSidecard/PartnerSidecard.jsx';
+export {default as ManagedCommonGround} from './ManagedCommonGround/ManagedCommonGround.jsx';
+export {default as Clients, DEFAULT_CLIENTS, DEFAULT_PARTNERS} from './Clients/Clients.jsx';
+export {default as ReferenceCard, ReferenceGrid} from './ReferenceCard/ReferenceCard.jsx';
+export {default as PairCard, PairRow} from './PairCard/PairCard.jsx';
+export {default as FeatureList, FeatureItem} from './FeatureList/FeatureList.jsx';
+export {default as HowSteps, HowStep} from './HowSteps/HowSteps.jsx';
+export {default as FAQ, FAQItem} from './FAQ/FAQ.jsx';
+export {default as EmployeeCard, TeamGrid} from './EmployeeCard/EmployeeCard.jsx';
+export {default as DetailHero} from './DetailHero/DetailHero.jsx';
+export {default as ConductionBg} from './ConductionBg/ConductionBg.jsx';
+export {default as PlatformDiagram} from './PlatformDiagram/PlatformDiagram.jsx';
+export {default as HexRain} from './HexRain/HexRain.jsx';
+export {default as Pipeline, PipelineStep, IconList} from './Pipeline/Pipeline.jsx';
+export {default as FacetedFilters, FilterChip} from './FacetedFilters/FacetedFilters.jsx';
+export {default as CookieCli} from './CookieCli/CookieCli.jsx';
+export {default as GameModal} from './GameModal/GameModal.jsx';
+
+/* Diagram-set web-component React wrappers (cn-hex, cn-hex-prism,
+   cn-platform, cn-domain-tree, cn-pipeline, cn-side-box, cn-honeycomb-bg).
+   Type-checked, autocompletable React surface for the framework-agnostic
+   diagram set in @conduction/diagrams. The bare web components still
+   work in plain HTML; the wrappers are the React-friendly version. */
+export {Hex, HexPrism, Platform, DomainTree, DiagramPipeline, SideBox, HoneycombBg} from './Diagrams/Diagrams.jsx';
+export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
+export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
+export {default as AppMock} from './AppMock/AppMock.jsx';
+export {default as HexNetwork} from './HexNetwork/HexNetwork.jsx';
+export {default as Showcase} from './Showcase/Showcase.jsx';
+export {default as RotatingCards} from './RotatingCards/RotatingCards.jsx';
+export {default as HexBackground} from './HexBackground/HexBackground.jsx';
+export {default as AgentTrace} from './AgentTrace/AgentTrace.jsx';
+export {default as ExternalAppShelf} from './ExternalAppShelf/ExternalAppShelf.jsx';
+export {default as WidgetShelf} from './WidgetShelf/WidgetShelf.jsx';
+export {default as FeatureGrid, FeatureGridGroup, FeatureItem as FeatureGridItem} from './FeatureGrid/FeatureGrid.jsx';
+
+/* Academy components (Batch 4). Card-and-chrome patterns for
+   academy.conduction.nl: a single feed of blogs, guides, case studies,
+   webinars, and tutorials. Content is MDX with a `contentType:`
+   frontmatter. The taxonomy lives in ContentTypeFilter/contentTypes.js
+   and is mirrored as JSON Schema in /schemas/academy/content.schema.json. */
+export {default as ContentCard, ContentCardGrid} from './ContentCard/ContentCard.jsx';
+export {default as FeaturedCard} from './FeaturedCard/FeaturedCard.jsx';
+export {
+  default as ContentTypeFilter,
+  CONTENT_TYPES,
+  CONTENT_TYPE_PLURAL_LABELS,
+} from './ContentTypeFilter/ContentTypeFilter.jsx';
+export {
+  CONTENT_TYPE_LABELS,
+  CONTENT_TYPE_BULLET_COLOR,
+} from './ContentTypeFilter/contentTypes.js';
+export {default as NewsletterCta} from './NewsletterCta/NewsletterCta.jsx';
+export {default as RelatedPosts} from './RelatedPosts/RelatedPosts.jsx';
+export {default as ContentDetailHero} from './ContentDetailHero/ContentDetailHero.jsx';

package/src/components/primitives/AuthorByline.jsx

@@ -0,0 +1,85 @@
+/**
+ * <AuthorByline />
+ *
+ * The author + date line that appears on every academy card and at the
+ * top of every content detail page. Avatar circle (initials or photo)
+ * + name + bullet separator + formatted date.
+ *
+ * Mirrors the meta line in the academy "Keep learning…" cards and the
+ * header byline on detail pages.
+ *
+ * Usage:
+ *
+ *   <AuthorByline name="Ruben van der Linde" date="2026-05-05" />
+ *
+ *   <AuthorByline
+ *     name="Mike Goldsmith"
+ *     date="2026-05-04"
+ *     avatarSrc="/img/team/mike.jpg"
+ *     locale="en"
+ *   />
+ *
+ * The component derives initials from the name when no avatarSrc is
+ * provided. Date is formatted with `Intl.DateTimeFormat(locale, {
+ * day: 'numeric', month: 'long', year: 'numeric' })`. Pass a
+ * pre-formatted string in `dateLabel` to override.
+ */
+
+import React from 'react';
+import styles from './AuthorByline.module.css';
+
+function initialsFor(name) {
+  if (!name) return '';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+function formatDate(date, locale) {
+  if (!date) return '';
+  const d = date instanceof Date ? date : new Date(date);
+  if (Number.isNaN(d.getTime())) return String(date);
+  try {
+    return new Intl.DateTimeFormat(locale || 'nl-NL', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(d);
+  } catch (_) {
+    return d.toISOString().slice(0, 10);
+  }
+}
+
+export default function AuthorByline({
+  name,
+  date,
+  dateLabel,
+  avatarSrc,
+  initials,
+  locale,
+  tone = 'default',
+  className,
+  ...rest
+}) {
+  const composed = [
+    styles.byline,
+    styles['tone-' + tone],
+    className,
+  ].filter(Boolean).join(' ');
+
+  const computedInitials = initials || initialsFor(name);
+  const formattedDate = dateLabel || formatDate(date, locale);
+
+  return (
+    <span className={composed} {...rest}>
+      <span className={styles.avatar} aria-hidden="true">
+        {avatarSrc
+          ? <img src={avatarSrc} alt="" />
+          : computedInitials}
+      </span>
+      {name && <span className={styles.name}>{name}</span>}
+      {name && formattedDate && <span className={styles.sep}>·</span>}
+      {formattedDate && <span className={styles.date}>{formattedDate}</span>}
+    </span>
+  );
+}

package/src/components/primitives/AuthorByline.module.css

@@ -0,0 +1,57 @@
+/**
+ * <AuthorByline /> styles. The compact author + date line used on
+ * cards and detail headers.
+ */
+
+.byline {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--c-cobalt-100);
+  color: var(--c-cobalt-700);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.name { font-weight: 500; }
+
+.sep { opacity: 0.6; }
+
+.date { }
+
+/* Tones for placement on different grounds. */
+.tone-default .name { color: var(--c-cobalt-700); }
+.tone-default .date,
+.tone-default .sep,
+.tone-default        { color: var(--c-cobalt-400); }
+
+.tone-on-dark .name  { color: white; }
+.tone-on-dark .date,
+.tone-on-dark .sep,
+.tone-on-dark        { color: var(--c-cobalt-200); }
+.tone-on-dark .avatar { background: var(--c-cobalt-700); color: white; }
+
+.tone-muted .name    { color: var(--c-cobalt-700); }
+.tone-muted .date,
+.tone-muted .sep,
+.tone-muted          { color: var(--c-cobalt-300); }

package/src/components/primitives/BrandCitation.jsx

@@ -0,0 +1,71 @@
+/**
+ * Brand-citation primitives: <NextBlue/>, <CgYellow/>, <KnvbOrange/>,
+ * <CommonGroundPlus/>.
+ *
+ * Thin wrappers around the brand-citation classes from css/brand.css.
+ * They render an inline <span> with the right colour for the brand
+ * they cite, so consumers don't have to remember the global class name
+ * (or which colour goes with which brand).
+ *
+ * The classes still ship as plain global CSS in brand.css so the
+ * preview pages and any plain HTML can use them directly. These
+ * components are the type-checked, autocompletable React surface.
+ *
+ * Usage in MDX:
+ *
+ *   import {NextBlue, CgYellow, KnvbOrange, CommonGroundPlus} from '@conduction/docusaurus-preset/components';
+ *
+ *   Twelve apps · one <NextBlue>Nextcloud</NextBlue> workspace.
+ *   Built on <CgYellow>Common Ground</CgYellow> with one <KnvbOrange>orange</KnvbOrange> accent.
+ *   The productized offering is <CommonGroundPlus/>.
+ *
+ * Per huisstijl:
+ *   - <NextBlue>          cites Nextcloud (the platform); colour --c-nextcloud-blue
+ *   - <CgYellow>          cites Common Ground (the ecosystem); colour --c-commonground-yellow
+ *   - <KnvbOrange>        KNVB-orange highlight; colour --c-orange-knvb
+ *   - <CommonGroundPlus>  the Common Ground+ brand mark, tri-colour: "Common"
+ *                         in Conduction cobalt, "Ground" in CG-yellow, "+" in
+ *                         Nextcloud blue. Use this for product-brand surfaces
+ *                         (navbar wordmark, hero eyebrow, doors). For editorial
+ *                         references to the official Dutch Common Ground
+ *                         ecosystem, use <CgYellow>Common Ground</CgYellow>.
+ *
+ * One orange per screen: KnvbOrange should be reserved for highlights,
+ * never primary fills, per the design-system rule.
+ */
+
+import React from 'react';
+
+export function NextBlue({as: Tag = 'span', children, className, ...rest}) {
+  return (
+    <Tag className={['next-blue', className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export function CgYellow({as: Tag = 'span', children, className, ...rest}) {
+  return (
+    <Tag className={['cg-yellow', className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export function KnvbOrange({as: Tag = 'span', children, className, ...rest}) {
+  return (
+    <Tag className={['knvb-orange', className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export function CommonGroundPlus({as: Tag = 'span', className, ...rest}) {
+  return (
+    <Tag className={['cg-plus', className].filter(Boolean).join(' ')} {...rest}>
+      <span className="cg-plus-common">Common</span>{' '}
+      <span className="cg-yellow">Ground</span>
+      <span className="cg-plus-plus">+</span>
+    </Tag>
+  );
+}

package/src/components/primitives/Button.jsx

@@ -0,0 +1,46 @@
+/**
+ * <Button />
+ *
+ * Three brand variants (primary / secondary / ghost) used across hero,
+ * cta-banner, top-navbar, game-modal, and per-page CTA rows.
+ *
+ * Renders as <a> when href is provided, <button> otherwise. Inherits
+ * the brand transition (140ms ease) and KNVB-orange focus ring from
+ * brand.css.
+ *
+ * Variants:
+ *   - primary:    cobalt fill, white text
+ *   - secondary:  white bg, cobalt-200 border, cobalt text
+ *   - ghost:      plain text + arrow
+ *   - on-dark:    primary variant inverted for use inside cobalt CTA panels
+ *
+ * Usage:
+ *
+ *   <Button href="/apps">Install</Button>
+ *   <Button variant="secondary" href="/partners">Get a demo</Button>
+ *   <Button variant="ghost" href="https://github.com/...">View on GitHub →</Button>
+ */
+
+import React from 'react';
+import styles from './Button.module.css';
+
+export default function Button({
+  variant = 'primary',
+  href,
+  size = 'md',
+  className,
+  children,
+  ...rest
+}) {
+  const composed = [
+    styles.btn,
+    styles['v-' + variant],
+    styles['s-' + size],
+    className,
+  ].filter(Boolean).join(' ');
+
+  if (href) {
+    return <a href={href} className={composed} {...rest}>{children}</a>;
+  }
+  return <button type="button" className={composed} {...rest}>{children}</button>;
+}

package/src/components/primitives/Button.module.css

@@ -0,0 +1,88 @@
+/**
+ * <Button /> styles. Mirrors btn-primary / btn-secondary / btn-ghost
+ * rules duplicated in hero.html, top-navbar.html, platform-overview.html,
+ * cta-banner block, app-detail header.
+ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.s-sm { padding: 9px 14px; font-size: 13px; }
+.s-md { padding: 13px 22px; font-size: 15px; }
+.s-lg { padding: 16px 28px; font-size: 16px; }
+
+.v-primary {
+  background: var(--c-blue-cobalt);
+  color: white;
+  border-color: var(--c-blue-cobalt);
+}
+.v-primary:hover {
+  background: var(--c-cobalt-700);
+  border-color: var(--c-cobalt-700);
+  color: white;
+  text-decoration: none;
+}
+
+.v-secondary {
+  background: white;
+  color: var(--c-blue-cobalt);
+  border-color: var(--c-cobalt-200);
+}
+.v-secondary:hover {
+  border-color: var(--c-blue-cobalt);
+  color: var(--c-blue-cobalt);
+  background: white;
+  text-decoration: none;
+}
+
+.v-ghost {
+  background: transparent;
+  color: var(--c-cobalt-700);
+  padding-inline: 4px;
+  font-size: 14px;
+}
+.v-ghost:hover {
+  color: var(--c-orange-knvb);
+  background: transparent;
+  text-decoration: none;
+}
+
+/* For use inside cobalt CTA panels (inverse surfaces) */
+.v-on-dark-primary {
+  background: white;
+  color: var(--c-blue-cobalt);
+  border-color: white;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 14px;
+  font-weight: 600;
+}
+.v-on-dark-primary:hover { opacity: 0.92; color: var(--c-blue-cobalt); }
+
+.v-on-dark-secondary {
+  background: transparent;
+  color: white;
+  border-color: rgba(255, 255, 255, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 14px;
+  font-weight: 600;
+}
+.v-on-dark-secondary:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: white;
+  color: white;
+}
+
+.v-on-dark-primary :global(.next-blue),
+.v-primary :global(.next-blue) { color: var(--c-nextcloud-cyan); }

package/src/components/primitives/Card.jsx

@@ -0,0 +1,42 @@
+/**
+ * <Card />
+ *
+ * The white container with cobalt-100 border, radius-lg corners, and
+ * 20-28px internal padding that recurs in pair-cards.html, solution-
+ * cards.html, reference-cards.html, partner-cards.html, employee-
+ * cards.html, apps-grid.html.
+ *
+ * Variants:
+ *   - tone="surface"  (default) white bg, cobalt-100 border
+ *   - tone="ghost"    transparent bg, cobalt-100 dashed border
+ *   - tone="inverse"  cobalt-900 bg, white type
+ *
+ * Renders as <a> when href is provided (so cards are clickable
+ * affordances without nested-link issues).
+ */
+
+import React from 'react';
+import styles from './Card.module.css';
+
+export default function Card({
+  tone = 'surface',
+  href,
+  to,
+  padding = 'md',
+  className,
+  children,
+  ...rest
+}) {
+  const composed = [
+    styles.card,
+    styles['tone-' + tone],
+    styles['pad-' + padding],
+    href || to ? styles.link : null,
+    className,
+  ].filter(Boolean).join(' ');
+
+  if (href) {
+    return <a href={href} className={composed} {...rest}>{children}</a>;
+  }
+  return <div className={composed} {...rest}>{children}</div>;
+}

package/src/components/primitives/Card.module.css

@@ -0,0 +1,42 @@
+/**
+ * <Card /> styles. Recurring shape across six component files.
+ */
+
+.card {
+  position: relative;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--c-cobalt-100);
+  background: white;
+  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
+  font-family: var(--conduction-typography-font-family-body);
+  color: var(--c-cobalt-700);
+}
+
+.tone-surface { background: white; }
+.tone-ghost {
+  background: transparent;
+  border-style: dashed;
+  border-color: var(--c-cobalt-200);
+}
+.tone-inverse {
+  background: var(--c-cobalt-900);
+  color: white;
+  border-color: var(--c-cobalt-700);
+}
+
+.pad-sm { padding: 16px; }
+.pad-md { padding: 20px; }
+.pad-lg { padding: 28px; }
+.pad-xl { padding: 32px; }
+
+.link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  display: block;
+}
+.link:hover {
+  border-color: var(--c-blue-cobalt);
+  text-decoration: none;
+  color: inherit;
+}

package/src/components/primitives/Eyebrow.jsx

@@ -0,0 +1,37 @@
+/**
+ * <Eyebrow />
+ *
+ * Uppercase Plex Mono caption sitting above section headings.
+ *   - 12px, letter-spacing 0.1em, --c-cobalt-400
+ *   - Optional leading <HexBullet/> in KNVB orange
+ *
+ * Mirrors the .eyebrow rule duplicated across hero.html, platform-
+ * overview.html, pipeline-flow.html, feature-grid.html, apps-grid.css,
+ * employee-cards.css. The 6+ duplications pay for the extraction.
+ *
+ * Usage in MDX:
+ *
+ *   <Eyebrow>The platform</Eyebrow>
+ *   <Eyebrow bullet={false}>No bullet</Eyebrow>
+ *   <Eyebrow as="span">Inline variant</Eyebrow>
+ */
+
+import React from 'react';
+import HexBullet from './HexBullet';
+import styles from './Eyebrow.module.css';
+
+export default function Eyebrow({
+  bullet = true,
+  bulletColor,
+  as: Tag = 'div',
+  className,
+  children,
+  ...rest
+}) {
+  return (
+    <Tag className={[styles.eyebrow, className].filter(Boolean).join(' ')} {...rest}>
+      {bullet && <HexBullet size="md" color={bulletColor} />}
+      <span className={styles.label}>{children}</span>
+    </Tag>
+  );
+}

package/src/components/primitives/Eyebrow.module.css

@@ -0,0 +1,19 @@
+/**
+ * <Eyebrow /> styles. Mirrors .eyebrow rules in hero.html, platform-
+ * overview.html, pipeline-flow.html, feature-grid.html, apps-grid.css.
+ */
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 24px;
+}
+
+.label :global(.next-blue) { color: var(--c-nextcloud-blue); }
+.label :global(.cg-yellow) { color: var(--c-commonground-yellow); }