Components.

A live demo of every reusable UI piece. Copy the markup, drop it into any page.

Buttons

Primary, secondary, ghost. All read --color-accent / --color-primary from tokens.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>

Pills

Compact rounded labels for tags, statuses, navigation chips.

Default Accent Dark 
<span class="pill">Default</span>
<span class="pill pill-accent">Accent</span>
<span class="pill pill-dark">Dark</span>

Badges

Small status markers next to titles and items.

New Coming soon Beta 
<span class="badge badge-new">New</span>
<span class="badge badge-soon">Coming soon</span>
<span class="badge badge-beta">Beta</span>

Cards

The basic content container. Three across at desktop, stacks on mobile.

Card title

Body of the card. One short paragraph.

Another card

Another short paragraph.

Third card

And a third.

Alerts

For inline messages: info, success, warning, error.

Info. Something neutral the user should know.
Success. The thing they did worked.
Warning. Something to be careful about.
Error. The thing they did did not work.
<div class="alert alert-info">
  <strong>Info.</strong> Something neutral the user should know.
</div>

Callout

A dark block to draw attention, often used inside articles.

Heads up.

A short paragraph in a dark block. Use sparingly, the impact comes from contrast.

Quote

For testimonials and pulled-out lines.

The best thing someone said about this work, in their own words.

Their Name, role and company

Form fields

Inputs, textarea, select. All inherit from tokens.