Docs

Card

Surfaces

Project Silica
Active

A card sits on the base-100 surface, rounds with --radius-box, and lifts with --depth.

Newsletter

Inputs and buttons share the field tier, so they line up.

ClickableCard · whole surface is a button (or render as a link)

As a link

Renders an <a>, same styling.

SelectableCard · radio group and independent checkboxes

Glass · Tier-0 frosted treatment (backdrop-filter blur + saturate, no SVG refraction)

Neutral frost

Plain glass — no color declared, so it frosts the neutral base-100 surface.

Tinted frost

bg-primary glass — same --u-accent hook soft uses, so the frost picks up primary for colored depth.