Brand Placeholder

Everything in one page

Use this page as a single visual QA reference for typography, colors, controls, forms, and assets.

<section class="mega-hero ak-stack">
  <h1 class="ak-title-xl">Everything in one page</h1>
  <p class="ak-body">Use this page as a single visual QA reference...</p>
  <button class="ak-button ak-button--primary">Primary action</button>
  <button class="ak-button ak-button--secondary">Secondary action</button>
</section>

Typography

Headline level

Subhead level for section intros.

Body text in Inter with readable rhythm and spacing.

Body strong style for brief emphasis.

Caption for helper metadata and annotations.

<h2 class="ak-title-lg">Typography</h2>
<h3 class="ak-title-md">Headline level</h3>
<p class="ak-subhead">Subhead level for section intros.</p>
<p class="ak-body">Body text in Inter with readable rhythm and spacing.</p>
<p class="ak-body-strong">Body strong style for brief emphasis.</p>
<p class="ak-caption">Caption for helper metadata and annotations.</p>

Language Font Utilities

Use optional script helpers when your UI contains multilingual content.

Cyrillic (`.ak-lang-cyrillic`)

Пример текста для проверки скриптового шрифта.

Arabic (`.ak-lang-arabic`)

مثال نص عربي لتجربة فئة اللغة.

Japanese (`.ak-lang-japanese`)

多言語タイポグラフィの表示例です。

<p class="ak-body ak-lang-cyrillic">Пример текста...</p>
<p class="ak-body ak-lang-arabic">مثال نص عربي...</p>
<section class="ak-lang-japanese">
  <h3 class="ak-title-md">見出し</h3>
  <p class="ak-body">本文コンテンツ。</p>
</section>

Colors

#2D2DF1

#17CAC6

#001324

#FF7F48

#FFE248

#01DC94

:root {
  --ak-color-primary-blue: #2D2DF1;
  --ak-color-primary-teal: #17CAC6;
  --ak-color-text: #001324;
  --ak-color-accent-coral: #FF7F48;
  --ak-color-accent-yellow: #FFE248;
  --ak-color-accent-green: #01DC94;
}

Background Presets

Use light presets as default. Treat dark mode as optional and secondary.

Default page: bg `#FFFFFF` / text `#001324`

Surface: bg `#E9E9FD` / text `#001324`

Brand blue: text `#FFFFFF`

Brand teal: text `#001324`

Dark optional: text `#E9E9FD`

/* Recommended light defaults */
:root {
  --ak-color-bg: #FFFFFF;
  --ak-color-surface: #E9E9FD;
  --ak-color-text: #001324;
}

/* Optional dark mode */
body.theme-dark {
  --ak-color-bg: #001324;
  --ak-color-surface: #192A39;
  --ak-color-text: #E9E9FD;
  --ak-color-text-muted: #CCD0D3;
}

Approved Text/Background Pairs

These are the curated default pairings from `docs/COLOR_COMBINATIONS.md`.

Text `#001324` on `#FFFFFF`

Text `#001324` on `#E9E9FD`

Text `#FFFFFF` on `#2D2DF1`

Text `#001324` on `#17CAC6`

<!-- Approved examples -->
<div style="color:#001324;background:#FFFFFF">Body copy</div>
<div style="color:#001324;background:#E9E9FD">Card surface</div>
<button style="color:#FFFFFF;background:#2D2DF1">Primary action</button>
<span style="color:#001324;background:#17CAC6">Compact status label</span>

Navigation

<nav class="ak-nav" aria-label="Main navigation">
  <a class="ak-nav-brand" href="/">Brand</a>
  <div class="ak-nav-list">
    <a class="ak-nav-link" href="/build">Build</a>
    <a class="ak-nav-link" href="/docs" aria-current="page">Docs</a>
    <a class="ak-nav-link" href="/community">Community</a>
  </div>
</nav>

Prev 1 2 3 Next

<nav class="ak-breadcrumbs" aria-label="Breadcrumb">
  <a class="ak-breadcrumb-link" href="#">Docs</a>
  <span class="ak-breadcrumb-sep">/</span>
  <span>Navigation</span>
</nav>

<nav class="ak-sidenav">
  <a class="ak-sidenav-link" href="#" aria-current="page">Components</a>
</nav>

Forms

<form class="ak-form" novalidate>
  <div class="ak-field">
    <label class="ak-label" for="name">Full name</label>
    <input class="ak-input" id="name" type="text" />
  </div>
  <div class="ak-field">
    <label class="ak-label" for="wallet">Wallet address</label>
    <input class="ak-input" id="wallet" type="text" />
    <p class="ak-help-text">20-64 uppercase letters/numbers.</p>
  </div>
  <div class="ak-form-actions">
    <button class="ak-button ak-button--primary" type="submit">Submit</button>
    <button class="ak-button ak-button--secondary" type="button">Cancel</button>
  </div>
</form>

Links and Notifications

Use link utilities for consistent navigation styling and alerts for status/error feedback.

Primary link External reference Secondary link

Network notice

Mainnet upgrade is scheduled for 02:00 UTC.

Transaction confirmed

Your transfer has been finalized successfully.

Action needed

Please review your pending governance vote.

Submission failed

Wallet address could not be validated.

<a href="#" class="ak-link ak-link-inline">Primary link</a>
<a href="https://example.com" class="ak-link ak-link-external">External reference</a>

<article class="ak-alert ak-alert--error" role="alert">
  <h4 class="ak-alert-title">Submission failed</h4>
  <p class="ak-alert-message">Wallet address could not be validated.</p>
</article>

Extended Components

Default Success Warning Error

Upload Progress 64%

Sync Progress 42%

Transaction	Status	Amount
TX-1842	Confirmed	120 ALGO
TX-1843	Pending	38 ALGO

<span class="ak-badge ak-badge--success">Success</span>

<div class="ak-progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
  <div class="ak-progress-bar" style="width: 64%"></div>
</div>

<div class="ak-tabs" role="tablist">
  <button class="ak-tab ak-tab--active" role="tab" aria-selected="true">Activity</button>
</div>

State Patterns

Enable notifications

No results found

Try a different query or clear active filters.

1Setup

2Review

3Publish

<label class="ak-switch">
  <input type="checkbox" checked />
  <span class="ak-switch-track"></span>
  <span class="ak-switch-label">Enable notifications</span>
</label>

<section class="ak-empty">
  <h3 class="ak-empty-title">No results found</h3>
</section>

Overlays: Modal, Drawer, Tooltip, Toast

Wallet connected successfully.

Governance deadline is in 2 hours.

<span class="ak-tooltip">
  <button class="ak-button ak-button--secondary">Hover me</button>
  <span class="ak-tooltip-content">Helpful hint</span>
</span>

<div class="ak-toast-stack" aria-live="polite">
  <div class="ak-toast ak-toast--success" role="status">Saved successfully.</div>
</div>

Footer Section

<footer class="ak-footer">
  <div class="ak-footer-grid">
    <section>
      <h4 class="ak-footer-title">Product</h4>
      <div class="ak-footer-list">
        <a class="ak-footer-link" href="#">Overview</a>
      </div>
    </section>
  </div>
  <div class="ak-footer-bottom">
    <span>© 2026 Brand System</span>
  </div>
</footer>

Image Presentation

Square frame with caption

<div class="ak-gallery">
  <figure class="ak-media ak-media--16x9">
    <img src="./image.jpg" alt="Descriptive alt text" />
  </figure>
  <figure class="ak-media ak-media--1x1">
    <img src="./image-2.jpg" alt="..." />
    <figcaption class="ak-media-caption">Optional caption</figcaption>
  </figure>
</div>

Avatars

AB CD

AB CD EF GH

<span class="ak-avatar">AB</span>
<span class="ak-avatar ak-avatar--lg">
  <img src="./user.jpg" alt="User profile" />
</span>

<div class="ak-avatar-group">
  <span class="ak-avatar">AB</span>
  <span class="ak-avatar">CD</span>
</div>

Icons & Assets

<img class="mega-icon" src="../assets/icons/Security.svg" alt="Security icon" />
<img class="mega-icon" src="../assets/icons/Network.svg" alt="Network icon" />
<img src="../assets/icons/Documents.svg" alt="Generic icon" />

Shape background sample

This section demonstrates the grid shape usage as a background layer.

.mega-shape {
  background-image: url("../assets/shapes/Grid.svg");
  background-size: cover;
}

Copy-Paste Snippets

<button class="ak-button ak-button--primary">Primary action</button>
<button class="ak-button ak-button--secondary">Secondary action</button>

<form class="ak-form">
  <div class="ak-field">
    <label class="ak-label">Email</label>
    <input class="ak-input" type="email" />
  </div>
</form>

<pre class="mega-code"><code>
&lt;button class="ak-button ak-button--primary"&gt;Primary action&lt;/button&gt;
</code></pre>