Components

Component Library

All UI primitives are pure HTML + CSS. Copy-paste any component into your pages.

Buttons

Three semantic variants. All meet 44×44px minimum touch target. Use cursor:pointer and touch-action:manipulation for best mobile UX.

html
<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>
<!-- Sizes: btn--sm, btn--lg -->

Badges

Inline labels for status, category, or count. Always pair with text — never rely on color alone.

Default Accent Success Warning Danger
html
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--danger">Danger</span>

Callouts

Highlight important information. Use sparingly — callouts lose impact when overused.

ℹ️
Info

Useful background information for the reader.

✅
Success

Action completed successfully.

⚠️
Warning

Proceed with caution.

🚨
Danger

This is a destructive action.

html
<div class="callout callout--warning">
  <div class="callout__icon" aria-hidden="true">⚠️</div>
  <div class="callout__content">
    <div class="callout__title">Warning</div>
    <p class="callout__body">Your message here.</p>
  </div>
</div>

Avatars

JD
AB
WD
MK
LS
html
<div class="avatar avatar--sm">JD</div>  <!-- 32px -->
<div class="avatar">AB</div>           <!-- 40px -->
<div class="avatar avatar--lg">WD</div>  <!-- 56px -->

Toggles

html
<label class="toggle">
  <input type="checkbox" checked>
  <div class="toggle__track">
    <div class="toggle__thumb"></div>
  </div>
  <span class="toggle__label">Enable feature</span>
</label>

Forms

All inputs have visible labels (never placeholder-only). Error messages appear near the relevant field.

As it appears on your ID

html
<div class="form-group">
  <label class="form-label" for="email">Email</label>
  <input class="form-input" type="email" id="email"
         aria-describedby="email-hint">
  <p class="form-hint" id="email-hint">
    We never share your email.
  </p>
</div>

Alerts

Your settings have been saved successfully.
html
<div class="alert alert--success" role="status">
  <!-- SVG icon -->
  <span>Your message here.</span>
</div>

Cards

🚀
Getting Started

Step-by-step guide to set up your first project.
📖
Documentation

Comprehensive reference for all features and APIs.
🎨
Design System

Colors, typography, spacing, and component tokens.
html
<div class="card-grid">
  <a href="page.html" class="card">
    <div class="card__icon">🚀</div>
    <div class="card__title">Title</div>
    <p class="card__desc">Description text.</p>
  </a>
</div>