Chapter 1 — Foundation · Section 03

Gradients

20 canonical gradients organized into 4 groups. All brand gradients use 135° — the diagonal of the SOLIDA knot logo. Surface gradients use 180° for natural top-to-bottom depth flow. Dark mode values update automatically via CSS custom properties — no manual overrides needed in component code.

Brand

Derived from key colors at 135° — the SOLIDA knot diagonal. Use for CTAs, buttons, and deliberate brand moments.

Primary CTA

var(--grad-primary-cta)

Angle: 135°

Primary buttons, active nav pills

Secondary CTA

var(--grad-secondary-cta)

Angle: 135°

Enroll, contact, human-centric CTAs

Tertiary Deep

var(--grad-tertiary-deep)

Angle: 135°

Progress bars, success states

Knot Brand

var(--grad-knot-brand)

Angle: 135°

Logo & brand moments only — never UI chrome

Brand Tri-Color

var(--grad-brand-tri)

Angle: 135°

Hero illustrations, splash screens

Primary 45°

var(--grad-primary-45)

Angle: 45°

Diagonal accents, banners, card backgrounds

Directional

Fixed-angle variants that work well for horizontal elements, hero banners, and layout accents.

Primary Hero

var(--grad-primary-hero)

Angle: 135°

Hero sections, large banners (deep range)

Primary Horizontal

var(--grad-primary-90)

Angle: 90°

Horizontal bars, tabs, breadcrumbs

Secondary Horizontal

var(--grad-secondary-90)

Angle: 90°

Horizontal warm accents

Tertiary Horizontal

var(--grad-tertiary-90)

Angle: 90°

Horizontal progress fills

Radial / Glow

Elliptical gradients for ambient effects, spotlight highlights, and atmospheric backgrounds.

Primary Radial

var(--grad-primary-radial)

Angle: Ellipse

Background glow, welcome screen ambient

Secondary Radial

var(--grad-secondary-radial)

Angle: Ellipse

Warm feature highlights, toast backgrounds

Tertiary Radial

var(--grad-tertiary-radial)

Angle: Ellipse

Success state backgrounds, confirmations

Surface / Overlay

Neutral depth, glass effects, and overlay utilities for laying content over imagery or adding warmth.

Surface Depth

var(--grad-surface-depth)

Angle: 180°

Page section backgrounds, non-card areas

Container Lift

var(--grad-container-lift)

Angle: 180°

Modals, floating sheets

Glass / Frosted

var(--grad-glass)

Angle: 135°

Floating nav, modal overlays only

Surface Warm

var(--grad-surface-warm)

Angle: 180°

Sections with subtle terracotta warmth

Hero Overlay

var(--grad-hero-overlay)

Angle: 180°

Text legibility on top of photos/video

Mesh Primary

var(--grad-mesh-primary)

Angle: Multi

Hero section backgrounds, landing pages

Frosted Brand

var(--grad-frosted-brand)

Angle: 135°

Subtle brand tint overlay at low opacity

Usage Rules

  • • Knot Brand is reserved for the logo and special brand moments only — never apply to recurring UI (buttons, nav, cards)
  • • Never mix a brand gradient with a surface gradient on the same element
  • • Dark mode values update automatically — do not manually override gradient colors in dark-mode-specific CSS
  • • Radial gradients are for backgrounds only — never apply directly to text or icon containers