Hero

The page-top title region .hero stacks three layers vertically — eyebrow, H1, and lead — over a gradient wash background. The dark mode wash is isolated as a separate override; only token variables are used.

Default

Light wash linear-gradient(to bottom, var(--c-sky-light), var(--c-canvas)), padding 104px 0 80px. Eyebrow 16/400 primary, H1 clamp(34px, 7.5vw, 56px)/800 ink-deep, lead 18/400 body text. No <br> in lead — let the container width handle line breaks naturally.

Social Solidarity Bank

Building a Sustainable Future Together

Social Solidarity Bank supports financial independence and growth alongside those excluded from mainstream finance.

Dark

In dark mode, the bright sky-light wash is replaced (LIGHT×LIGHT is not allowed) with linear-gradient(to bottom, #102a44, var(--c-canvas)). :global(html[data-theme="dark"]) .hero handles the override in a single scoped rule; the eyebrow color automatically shifts from primary to sky.

Social Solidarity Bank

Building a Sustainable Future Together

Social Solidarity Bank supports financial independence and growth alongside those excluded from mainstream finance.

Rules

Guardrails that must be followed when using the Hero component.

  • Padding is fixed at 104px 0 80px — never reduce it arbitrarily or mix it with section padding (88/72).
  • Eyebrow must use font-weight: 400 (normal). Do not bold it.
  • H1 color is --c-ink-deep. Do not use the primary color on headings.
  • No <br> in lead — let the container width handle line breaks naturally.
  • Gradient wash is LIGHT×LIGHT only. Do not reuse the light wash on a dark background — always override with #102a44 → --c-canvas.
  • All colors, fonts, and spacing must come from tokens.css variables only. Arbitrary HEX values and arbitrary px values are not allowed.