Skip to content

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Solid Colors

Simple solid color background.

Single-Page Nav/Search Colors

Use hero.colors.nav* / hero.colors.search* to style topbar and search box.

Gradient

Linear / radial / conic gradient backgrounds.

Color Background

Use solid or gradient colors as hero background.

Pages

  • - Basic solid color background
  • - Modern gradient contract + legacy compatibility
  • - Light/dark mode colors

Use hero.colors.nav* and hero.colors.search* to style topbar + search on color background pages.

yaml
hero:
    colors:
        navText: "rgba(255, 255, 255, 1)"
        navTextScrolled: "rgba(26, 26, 46, 1)"
        navTextHover: "rgba(255, 255, 255, 1)"
        navBackground: "rgba(30,45,90,0.72)"
        searchBackground: "rgba(255,255,255,0.16)"
        searchHoverBackground: "rgba(255,255,255,0.22)"
        searchText: "rgba(255, 255, 255, 1)"
        searchTextMuted: "rgba(255,255,255,0.92)"
        searchBorder: "rgba(255,255,255,0.36)"
        searchKeyBackground: "rgba(255,255,255,0.12)"
        searchKeyText: "rgba(255,255,255,0.9)"
Key Group Keys
Nav (hero.colors) navText, navTextScrolled, navTextHover, navTextHoverScrolled, navBackground, navBackgroundScrolled
Search (hero.colors) searchBackground, searchBackgroundScrolled, searchHoverBackground, searchHoverBackgroundScrolled, searchText, searchTextScrolled, searchTextMuted, searchTextMutedScrolled, searchBorder, searchBorderScrolled, searchKeyBackground, searchKeyBackgroundScrolled, searchKeyText, searchKeyTextScrolled