Visual language
Glass + drifting cloud-duo gradient — the recipe Bifrost uses for premium CTAs and lead cards. Two adoption mixins: glass-cloud-card and glass-cloud-button.
Bifrost has a single canonical recipe for surfaces that need lead-card or premium-CTA prominence: a frosted-glass blur on top of a slowly drifting two-colour gradient (“cloud-duo”). The recipe is centralised in two mixins so adopters never reinvent the background treatment.
| Mixin | Shape | Use for |
|---|---|---|
glass-cloud-card | Card | Lead cards on section landings, reading-path tiles, lead Dispatch on /news/. |
glass-cloud-button | Button | In-content CTAs that should feel premium (“Read in Book”, utility footers). |
Both expose two CSS custom properties (--cloud-a, --cloud-b) that adopters override per instance to pick a duo from the Bifrost 300-tier palette. Pick a duo that fits the prominence and mood of the surface — cool/quiet duos for utility, vibrant duos for lead positions.
- glass-cloud-card Frosted glass + drifting cloud-duo gradient. The Bifrost mixin that lead cards on /read/, /articles/, and /news/ share.
- glass-cloud-button Glass-cloud-card scaled to button affordances. Used for in-content CTAs that should feel premium and match the lead-card visual language.