# landingBandTone

> Paints a landing band's background: a quiet neutral tint (`--ui-landing-band-tint`, `-tint-dark`, and `--ui-landing-band-glow`, `none` to drop it), a hairline grid, an inverted solid, the brand solid, a page-supplied gradient, or nothing for `"plain"`.

```ts
import { landingBandTone } from "@sdxc/ui/styles";
```

Paints a landing band's background: a quiet neutral tint (`--ui-landing-band-tint`,
`-tint-dark`, and `--ui-landing-band-glow`, `none` to drop it), a hairline grid, an
inverted solid, the brand solid, a page-supplied gradient, or nothing for `"plain"`.
Inverse and brand bands re-point the neutral tokens at the fill's foreground; on a
dark page an inverse band renders as a raised surface with hairlines and the glow.

## Signature

```ts
landingBandTone<Node extends Element = Element>(tone?: LandingBandTone): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>
```

Returns: A `css()` mixin ready for a band host's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `tone?` | `"plain" \| "tinted" \| "grid" \| "inverse" \| "brand" \| "gradient"` | Which fill to apply. Defaults to `"plain"`. |

## Examples

```tsx
<section mix={[landingBandTone("tinted"), landingSectionSpace()]}>{children}</section>;
```

```tsx
<section mix={[landingBandTone("brand")]} style="--ui-landing-band-gradient: …">…</section>;
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/styles` too.

### LandingSectionSpacing

How much block padding a landing band leaves around its content.
`"hero"` is the first viewport, `"normal"` the repeating mid-page rhythm,
`"compact"` a tighter strip such as a proof row, `"cta"` a closing band.

#### Signature

```ts
type LandingSectionSpacing = "hero" | "normal" | "compact" | "cta"
```

One of `"hero"`, `"normal"`, `"compact"`, `"cta"`.

### LandingBandTone

What sits behind a landing band: nothing, a quiet tint, a faded grid, an
inverted solid, the brand solid, or a gradient the page supplies through
`--ui-landing-band-gradient`.

#### Signature

```ts
type LandingBandTone = "plain" | "tinted" | "grid" | "inverse" | "brand" | "gradient"
```

One of `"plain"`, `"tinted"`, `"grid"`, `"inverse"`, `"brand"`, `"gradient"`.

### LandingDisplayLevel

Outline depth displayHeading sizes for: `1` is the page H1,
`2` a section chapter, `3` a quieter in-band title.

#### Signature

```ts
type LandingDisplayLevel = 1 | 2 | 3
```

### LandingLeadStep

Which lead landingLead sizes: a band's, or the larger hero step.

#### Signature

```ts
type LandingLeadStep = "band" | "hero"
```

One of `"band"`, `"hero"`.

### LandingEyebrowVariant

How an eyebrow reads: `mono` a quiet uppercase label for section headers,
`quiet` a hairline pill for hero announcements, `soft` a filled muted pill,
`pill` the brand pill, `numbered` a brand-ringed pill led by its index.

#### Signature

```ts
type LandingEyebrowVariant = "mono" | "quiet" | "soft" | "pill" | "numbered"
```

One of `"mono"`, `"quiet"`, `"soft"`, `"pill"`, `"numbered"`.