Component Demo

Visual testing page for primitive components. Toggle dark mode using the header to test both themes.

Buttons

Hover to see lift effect, click to see press effect, tab for focus ring

Sizes (Yellow)

Small Button Medium Button Large Button

Variants

Yellow Button Turquoise Button Magenta Button

Link Buttons

Yellow Link Turquoise Link Magenta Link

Cards

Cards with thick borders and offset shadows (become glows in dark mode)

Regular Cards

Yellow Card

This card has a yellow shadow in light mode and a yellow glow in dark mode.

Turquoise Card

This card has a turquoise shadow in light mode and a turquoise glow in dark mode.

Magenta Card

This card has a magenta shadow in light mode and a magenta glow in dark mode.

Stacked Cards

Stacked Yellow

Background layers create depth behind this card.

Stacked Turquoise

Background layers create depth behind this card.

Stacked Magenta

Background layers create depth behind this card.

Inputs

Tab to see WCAG 2.4.13 compliant focus rings (4px total width, high contrast)

Variants with Labels

Yellow Input

Turquoise Input

Magenta Input

Error State

Email (Required)

Email is required

Phone Number

Please enter a valid phone number

Username

Username must be at least 3 characters

Without Labels

HTML Validation Test

Required Field

Max Length (10 chars)