Athena UI

Typography

Type scale, headings, lists, colours, positioning, and responsive column patterns.

New Page

Headings and Type Scale

Heading One

<h1>

Heading Two

<h2>

Heading Three

<h3>

Display Heading

.display-6

Lead text introduces a page, panel, or workflow.

.lead

Small interface text for dense metadata.

.fs-7

Extra-small helper text for compact labels.

.fs-8

Inline Styling

Strong text, emphasised text, marked text, small text, and linked text.

Secondary text is used for descriptions, metadata, and supporting copy.

Inline code and Ctrl + K are available for technical admin screens.

Use typography to make dense interfaces scan quickly.

Athena UI guidance

Unordered List

Label every control clearly.
Keep headings in document order.
Use metadata text sparingly.

Ordered List

Review content hierarchy.
Check contrast and focus.
Test responsive wrapping.

Icon List

Readable line length
Visible text hierarchy
No negative letter spacing

Colour Tokens

Athena uses Bootstrap status colours plus CSS custom properties for surfaces, borders, text, navigation, and charts.

Primary.bg-primary

Success.bg-success

Warning.bg-warning

Danger.bg-danger

Info.bg-info

Soft Surface--athena-surface-soft

Positioning

Use Bootstrap utilities for sticky, absolute, relative, and translated placement.

Top Start Top End Bottom Centre

Centred

Spacing and Alignment

Combine gap, margin, padding, alignment, and flex utilities for dense admin layouts.

p-3

px-4 py-2

ms-auto

Responsive Columns

These examples use Bootstrap's grid without custom compilation.

col-12 col-md-6 col-xl-3

col-12 col-lg-8

col-12 col-lg-4

<section class="row g-4 mb-4">
      <div class="col-12 col-xl-7">
        <article class="athena-card p-4 h-100">
          <h2 class="h4">Headings and Type Scale</h2>
          <div class="athena-type-scale">
            <div class="athena-type-sample"><p class="h1 mb-1">Heading One</p><code>&lt;h1&gt;</code></div>
            <div class="athena-type-sample"><p class="h2 mb-1">Heading Two</p><code>&lt;h2&gt;</code></div>
            <div class="athena-type-sample"><p class="h3 mb-1">Heading Three</p><code>&lt;h3&gt;</code></div>
            <div class="athena-type-sample"><p class="display-6 mb-1">Display Heading</p><code>.display-6</code></div>
            <div class="athena-type-sample"><p class="lead mb-1">Lead text introduces a page, panel, or workflow.</p><code>.lead</code></div>
            <div class="athena-type-sample"><p class="fs-7 mb-1">Small interface text for dense metadata.</p><code>.fs-7</code></div>
            <div class="athena-type-sample"><p class="fs-8 mb-1">Extra-small helper text for compact labels.</p><code>.fs-8</code></div>
          </div>
        </article>
      </div>
      <div class="col-12 col-xl-5">
        <article class="athena-card p-4 h-100">
          <h2 class="h4">Inline Styling</h2>
          <p><strong>Strong text</strong>, <em>emphasised text</em>, <mark>marked text</mark>, <small>small text</small>, and <a href="../docs/index.html">linked text</a>.</p>
          <p class="text-secondary">Secondary text is used for descriptions, metadata, and supporting copy.</p>
          <p><code>Inline code</code> and <kbd>Ctrl</kbd> + <kbd>K</kbd> are available for technical admin screens.</p>
          <blockquote class="blockquote border-start border-primary ps-3">
            <p>Use typography to make dense interfaces scan quickly.</p>
            <footer class="blockquote-footer">Athena UI guidance</footer>
          </blockquote>
        </article>
      </div>
      <div class="col-12 col-xl-4"><article class="athena-card p-4 h-100"><h2 class="h4">Unordered List</h2><ul><li>Label every control clearly.</li><li>Keep headings in document order.</li><li>Use metadata text sparingly.</li></ul></article></div>
      <div class="col-12 col-xl-4"><article class="athena-card p-4 h-100"><h2 class="h4">Ordered List</h2><ol><li>Review content hierarchy.</li><li>Check contrast and focus.</li><li>Test responsive wrapping.</li></ol></article></div>
      <div class="col-12 col-xl-4"><article class="athena-card p-4 h-100"><h2 class="h4">Icon List</h2><ul class="athena-check-list"><li><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>Readable line length</span></li><li><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>Visible text hierarchy</span></li><li><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>No negative letter spacing</span></li></ul></article></div>
    </section>

    <section class="athena-card p-4 mb-4">
      <h2 class="h4">Colour Tokens</h2>
      <p class="text-secondary">Athena uses Bootstrap status colours plus CSS custom properties for surfaces, borders, text, navigation, and charts.</p>
      <div class="athena-swatch-grid" aria-label="Colour token examples">
        <article class="athena-swatch"><div class="athena-swatch-colour bg-primary"></div><div class="athena-swatch-body"><strong>Primary</strong><code class="d-block">.bg-primary</code></div></article>
        <article class="athena-swatch"><div class="athena-swatch-colour bg-success"></div><div class="athena-swatch-body"><strong>Success</strong><code class="d-block">.bg-success</code></div></article>
        <article class="athena-swatch"><div class="athena-swatch-colour bg-warning"></div><div class="athena-swatch-body"><strong>Warning</strong><code class="d-block">.bg-warning</code></div></article>
        <article class="athena-swatch"><div class="athena-swatch-colour bg-danger"></div><div class="athena-swatch-body"><strong>Danger</strong><code class="d-block">.bg-danger</code></div></article>
        <article class="athena-swatch"><div class="athena-swatch-colour bg-info"></div><div class="athena-swatch-body"><strong>Info</strong><code class="d-block">.bg-info</code></div></article>
        <article class="athena-swatch"><div class="athena-swatch-colour" style="background:var(--athena-surface-soft)"></div><div class="athena-swatch-body"><strong>Soft Surface</strong><code class="d-block">--athena-surface-soft</code></div></article>
      </div>
    </section>

    <section class="row g-4 mb-4">
      <div class="col-12 col-xl-6">
        <article class="athena-card p-4 h-100">
          <h2 class="h4">Positioning</h2>
          <p class="text-secondary">Use Bootstrap utilities for sticky, absolute, relative, and translated placement.</p>
          <div class="athena-demo-frame position-relative" style="min-height: 14rem;">
            <span class="badge text-bg-primary position-absolute top-0 start-0 m-3">Top Start</span>
            <span class="badge text-bg-success position-absolute top-0 end-0 m-3">Top End</span>
            <span class="badge text-bg-warning position-absolute bottom-0 start-50 translate-middle-x mb-3">Bottom Centre</span>
            <div class="position-absolute top-50 start-50 translate-middle athena-demo-box px-3">Centred</div>
          </div>
        </article>
      </div>
      <div class="col-12 col-xl-6">
        <article class="athena-card p-4 h-100">
          <h2 class="h4">Spacing and Alignment</h2>
          <p class="text-secondary">Combine gap, margin, padding, alignment, and flex utilities for dense admin layouts.</p>
          <div class="athena-demo-frame d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="athena-demo-box p-3">p-3</div>
            <div class="athena-demo-box px-4 py-2">px-4 py-2</div>
            <div class="athena-demo-box ms-auto p-3">ms-auto</div>
          </div>
        </article>
      </div>
    </section>

    <section class="athena-card p-4">
      <h2 class="h4">Responsive Columns</h2>
      <p class="text-secondary">These examples use Bootstrap's grid without custom compilation.</p>
      <div class="row g-3">
        <div class="col-12 col-md-6 col-xl-3"><div class="athena-demo-box">col-12 col-md-6 col-xl-3</div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="athena-demo-box">col-12 col-md-6 col-xl-3</div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="athena-demo-box">col-12 col-md-6 col-xl-3</div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="athena-demo-box">col-12 col-md-6 col-xl-3</div></div>
        <div class="col-12 col-lg-8"><div class="athena-demo-box">col-12 col-lg-8</div></div>
        <div class="col-12 col-lg-4"><div class="athena-demo-box">col-12 col-lg-4</div></div>
      </div>
    </section>