Organisms — Brandforge

Top nav bar

Horizontal navigation bar with logo, links, and a CTA button. Collapses to a hamburger on mobile — the demo shows the desktop state only.

metanoia

<header class="topnav">
  <a href="/" class="topnav-logo" aria-label="Home">
    <svg class="logo-mark" width="31" height="20" viewBox="0 0 206.995 135.041">
      <!-- right arm: fill="var(--logo-accent)" -->
      <!-- left arm:  fill="var(--logo-mark)" -->
    </svg>
    <span class="topnav-wordmark">metanoia</span>
  </a>
  <nav class="topnav-links" aria-label="Primary">
    <a href="#" class="topnav-link topnav-link--active" aria-current="page">Design</a>
    <a href="#" class="topnav-link">Tokens</a>
  </nav>
  <div class="topnav-actions">
    <button type="button" class="btn btn--primary btn--sm">Get started</button>
  </div>
</header>

Hero

Full-width page header with headline, subtext, and optional CTA pair. Use for landing pages and top-level section entry points. No decorative gradients or textures.

Design system

Build with confidence, ship with consistency.

metanoia gives your team a shared visual language — from token primitives to fully composable components, ready for web, email, and slides.

<div class="hero">
  <div class="hero-content">
    <p class="hero-eyebrow">Eyebrow label</p>
    <h1 class="hero-headline">Headline copy.</h1>
    <p class="hero-subtext">Supporting description.</p>
    <div class="hero-actions">
      <button class="btn btn--primary">Primary CTA</button>
      <button class="btn btn--secondary">Secondary CTA</button>
    </div>
  </div>
</div>

Modal

Focused dialog for confirmations and forms. Shown in open state below. Use role="dialog", aria-modal="true", and trap focus inside. Close on Escape and backdrop click.

<div class="modal-backdrop" role="presentation">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <div class="modal-header">
      <h2 class="modal-title" id="modal-title">Dialog title</h2>
      <button type="button" class="modal-close" aria-label="Close dialog">
        <svg ...></svg>
      </button>
    </div>
    <div class="modal-body">Content</div>
    <div class="modal-footer">
      <button class="btn btn--secondary">Cancel</button>
      <button class="btn btn--primary">Confirm</button>
    </div>
  </div>
</div>

Data table

Structured grid for token or component data. Always use scope="col" on header cells. Zebra striping uses --bg-subtle to stay token-correct.

Client	Project	Status	Value	Owner
Aether Studios	Brand refresh	Active	$42,000	Sarah K.
Helio Health	Campaign assets	In review	$18,500	Marcus T.
Vantage Group	Annual report	Complete	$9,200	Sarah K.
Forge Creative	UI kit build	Active	$31,000	Jordan L.
Luma Publishing	Guidelines doc	On hold	$5,800	Marcus T.

<div class="table-wrap">
  <table class="data-table">
    <thead>
      <tr>
        <th scope="col">Client</th>
        <th scope="col">Project</th>
        <th scope="col">Status</th>
        <th scope="col">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Empty state

Placeholder shown when a list, table, or section has no content. Use a Lucide icon (2px stroke, 40px) for the illustration slot. Keep copy actionable — tell the user what to do next.

No components yet

Add a component to your library to get started. Your changes sync with Figma automatically.

<div class="empty-state">
  <div class="empty-icon">
    <svg ...></svg>
  </div>
  <h3 class="empty-title">No items yet</h3>
  <p class="empty-body">Actionable description.</p>
  <button type="button" class="btn btn--primary">CTA</button>
</div>