Foundations / Gradients

Shared gradients now have approved and library tiers.

Gradients live in the shared brand layer so every Gensudo app can access the same palette. The approved tier is the default design language, while the library tier stays available for future product use without forcing immediate adoption everywhere.

Approved shared gradients

These are the gradients shared UI and app surfaces should prefer first.

ApprovedAction

Action primary

--gradient-action-primary

Default branded actions, badges, and high-visibility product emphasis.

linear-gradient(135deg, #24364a 0%, #09b67a 100%)
ApprovedCTA

Action CTA

--gradient-action-cta

Conversion-focused calls to action and selective commerce or upgrade moments.

linear-gradient(135deg, #ff7800 0%, #edc74c 100%)
ApprovedSurface

Surface strong

--gradient-surface-strong

Hero cards, brand-forward feature panels, and strong visual framing.

linear-gradient(135deg, #24364a 0%, #6a7c90 100%)
ApprovedSoft surface

Surface soft primary

--gradient-surface-soft-primary

Marketing surfaces and light promotional backgrounds with a calm brand lift.

linear-gradient(135deg, rgba(9, 182, 122, 0.15) 0%, #ffffff 100%)
ApprovedSoft surface

Surface soft CTA

--gradient-surface-soft-cta

Warm promotional surfaces that support CTA-led content without overpowering it.

linear-gradient(135deg, rgba(255, 120, 0, 0.15) 0%, #ffffff 100%)
ApprovedSoft surface

Surface soft highlight

--gradient-surface-soft-highlight

Highlight panels and celebratory accents where yellow support feels appropriate.

linear-gradient(135deg, rgba(237, 199, 76, 0.2) 0%, #ffffff 100%)
ApprovedSoft surface

Surface soft mix

--gradient-surface-soft-mix

Blended brand moments where green and orange should appear together subtly.

linear-gradient(135deg, rgba(9, 182, 122, 0.12) 0%, rgba(255, 120, 0, 0.12) 100%)

Library gradients

These are shared and available now, but they should be promoted into the default language only when a repeat use case emerges across more than one surface or app.

LibraryLibrary

Bold accent

--gradient-library-bold-accent

Available for future emphasis patterns when green-led treatments need shared reuse.

linear-gradient(135deg, #09b67a 0%, #6a7c90 100%)
LibraryLibrary

Bold inverse

--gradient-library-bold-inverse

Available when a green-first to navy transition creates clearer contrast or motion.

linear-gradient(135deg, #09b67a 0%, #24364a 100%)
LibraryLibrary

Surface soft slate

--gradient-library-surface-soft-slate

Available for quieter neutral surfaces that still need a branded tonal wash.

linear-gradient(135deg, rgba(106, 124, 144, 0.15) 0%, #ffffff 100%)
LibraryDark mode

Surface dark

--gradient-library-surface-dark

Available for dark hero backdrops and is used by the shared marketing surface alias in dark mode.

linear-gradient(135deg, #1a252f 0%, #24364a 100%)
LibraryDark mode

Surface dark accent

--gradient-library-surface-dark-accent

Available for dark branded panels that need more green energy than the default dark surface.

linear-gradient(135deg, #24364a 0%, #09b67a 60%)
LibraryDark mode

Surface dark muted

--gradient-library-surface-dark-muted

Available for restrained dark surfaces where a lower-chroma finish is more appropriate.

linear-gradient(135deg, #24364a 0%, #323232 100%)
LibraryInteraction

Hover primary

--gradient-library-hover-primary

Available for shared primary hover treatments when a gradient hover is warranted.

linear-gradient(135deg, #1e2e3f 0%, #08a86f 100%)
LibraryInteraction

Hover CTA

--gradient-library-hover-cta

Available for CTA hover treatments where orange-led actions need a brighter hover state.

linear-gradient(135deg, #e66d00 0%, #d9b844 100%)

Compatibility aliases

Alias

Marketing surface alias

--gradient-surface-marketing

Compatibility alias used by shared marketing surfaces and mapped to the approved soft primary family.

var(--gradient-surface-soft-primary)
Alias

Legacy accent alias

--gradient-accent

Compatibility alias retained while older consumers migrate from the previous shared gradient name.

var(--gradient-action-primary)

Usage rules

  • Use approved gradients by default for shared components and common product surfaces.
  • Use library gradients only when a real UI need exists and the choice is still aligned with the brand system.
  • Promote a library gradient only after it proves useful across multiple features, routes, or apps.
  • Do not invent route-local gradients when a shared token or alias can cover the same need.