---
category: Surfaces
---

The section-scale object, and its tone is **tense**: `present` (mint) for what the
product does today, `future` (pink) for what is coming, `cool` for neutral ground.
`--r-panel` (32px) with `--space-14` padding. Swapping present and future tells the
reader a roadmap item is live — the tones are semantics, not decoration.

```tsx
<TintPanel tone="future"><Card title="Advanced analytics">…</Card></TintPanel>
```