Fitune Design System · Layer 1 — Atom

AlwaysAvailableCard

Tag + name + description card for the "Always available" plan-benefits section below a pricing/plan grid. Single variant, non-interactive beyond a subtle border-color hover.

States · default + hover (hover the cards)

Usage example · always-available benefits grid below a plan grid

Tokens consumed

Root (via Card)

bg-elevated · border-stroke-1 · border-border-default · rounded-lg · shadow-elevation-sm

Root · hover + motion

hover:border-border-strong · transition-colors duration-fast ease-in-out

Eyebrow tag

.t-eyebrow · text-text-brand

Feature name

.t-h3 · text-text-primary

Description

.t-body-sm · text-text-secondary

Geometry (intrinsic · primitive-direct)

gap-2 (tag → name → description stack)