Custom CSS Tokens Layout

Clean layout structures built directly on top of modern CSS Custom Properties for typography, spacing, aspect-ratios, gradients, and shadows.

Explore Cards

Responsive Card Layouts

16:9 Aspect Ratio

Vivid Ocean Card

Utilizes `--aspect-ratio-16-9` for media scaling and `--gradient-pale-ocean` for visual presentation.

1:1 Aspect Ratio

Square Aspect Ratio

Utilizes `--aspect-ratio-square` with `--gradient-blush-light-purple` for compact visual elements.

16:9 Dusk Gradient

Luminous Dusk

Combining precise token spacing `--spacing-40` with custom gradient backgrounds for vibrant contrast.

Shadow Presets

Natural Shadow
Sharp Shadow
Outlined Shadow
Crisp Shadow