Typography

Heading — h1 / xl

Heading — h2 / lg

Heading — h3 / md

Heading — h4 / sm

Text — lg: The quick brown fox jumps over the lazy dog.

Text — base (default): The quick brown fox jumps over the lazy dog.

Text — sm / muted: supporting or secondary copy.

Text — sm / danger: used for inline error copy.

Button

As link

Badge & Tag

Badge — static status/category indicator (not interactive):

NeutralPrimarySuccessWarningDanger

Tag — removable chip, e.g. for active filters:

AutomationAI ToolsRemote

Avatar

AOLCNPMWSR

Container & Grid

Grid — responsive column layout (resize the window to see breakpoints shift):

Item 1

Item 2

Item 3

Item 4

Card

Basic card

Just body content, default padding.

With header/footer

New

This card has header and footer slots, plus hover elevation.

Form inputs

Email address

Username

Letters, numbers, and underscores only.

Password

Must be at least 8 characters.

Role

Message

Max 500 characters.

Table

Click a sortable column header to re-sort (client-side, no JS framework).

Team members
		Status
Amara Okafor	Engineer	Active
Liam Chen	Designer	Active
Nina Patel	PM	Invited

Alert

Heads up

This is an informational message.

Saved

Your changes have been saved.

Careful

This action can't easily be undone.

Error

Something went wrong. Try again.

Tooltip

Accordion

What is this component library built on?

Plain Astro components and native HTML (details/summary, dialog) wherever possible, styled with Tailwind utilities driven by the design tokens from Phase 1.

Does it ship a JS framework?

No — interactivity (Modal, Tag removal, Table sort, Alert dismiss) is handled with small, delegated vanilla JS scripts, so there's no React/Vue runtime cost.

Is it accessible by default?

Native elements are used for their built-in accessibility wherever possible: dialog for modals, details/summary for accordions, real form labels and aria-describedby for errors.