Internal · QA

Component playground

Isolated preview of the unified glass iOS component set. Use this page to visually diff rest / hover / active / focus / disabled states across every reusable primitive.

Buttons

Tab to each button to verify focus rings. Hover, then press+hold to check the spring scale.

Primary
Ghost
Accent
Glass ink
Glass
Glass accent
Toggle
Inputs

Focus to verify accent ring; blur with invalid content to see the error state.

Text
Error

That doesn't look like a valid email.

Disabled
Cards

Layout parity for glass surfaces used across Work, Pricing, About, Creators.

Card

ios-card

Frosted paper surface, subtle inner highlight, soft shadow. Used for principle blocks, pricing tiers, and feature callouts.

Card

glass

Higher-blur variant for floating chrome — nav, toggles, chips.

QA checklist

Run through every state, at 1440 / 1024 / 768 / 375px.

  • Rest: gradient/border matches spec; no layout shift on hover.
  • Hover: translateY(-1px), no color change on ink, brightness bump on accent.
  • Active: scale(0.96–0.97), springy release.
  • Focus-visible: 2px offset ring in --accent (primary/accent) or --ink/30 (ghost).
  • Disabled: opacity ~0.6, cursor not-allowed, no hover transform.
  • Reduced motion: transforms suppressed; states remain visible via color/border only.