# Button

The Postie button: a pill, charcoal by default, oxblood for the one action that matters, with a single-letter key-hint after the label so a power user learns the shortcut without a tooltip.

```html
<button class="postie-btn postie-btn--primary">Get an account</button>
<button class="postie-btn postie-btn--brand">Compose <span class="postie-btn__hint">C</span></button>
<button class="postie-btn postie-btn--ghost">Sign in</button>
<button class="postie-btn postie-btn--quiet postie-btn--sm">Archive <span class="postie-btn__hint">E</span></button>
<button class="postie-btn postie-btn--text">Full log</button>
```

**Which variant.** `primary` is the signal: the landing CTA, the mobile "Hold to speak", the auth Continue. `brand` is the everyday workhorse on the working surface: Compose, Send, Connect an account. It is charcoal in both themes — do not lighten it on light. `ghost` sits beside a primary. `quiet` is for toolbars (Archive · Snooze · Move at `sm`). `text` is a link-shaped action.

**Key-hint.** Pass `hint` for anything with a shortcut. It renders in the muted face of the ground the button sits on. A hint is a letter or a chord (`⌘↵`), never a word.

**Never.**
- Never two primaries in one view. The oxblood is ≈5% of any screen; a second primary halves the signal.
- Never a shadow, a glow, a gradient or a square corner (brief: crisp machined pill; never soft-glow, never wellness-serene).
- Never oxblood text on a charcoal button and never charcoal ink on an oxblood fill — the fill always carries `#F6EDED`.
- Never a spinner inside a button ("no spinner you ever notice") — disable it, keep the label, let the result arrive.
- Never an exclamation mark or a rocket / bolt icon in a label (brief `never`: trying-too-hard playful, speed clichés).
- Never fade a disabled button with opacity; it goes tonal (raised fill, muted ink).