# House Pour — Lucian Labs look B

A letterpressed card on ivory stock. Warm, quiet, expensive. Shipped in
DrinkTix. Read `AGENT.md` first — the ban list there applies to this look.

- Stylesheet: `https://lucianlabs.ca/branding/house-pour.css`
- Reference render: `https://lucianlabs.ca/branding/house-pour.html`
- Tokens as JSON: `https://lucianlabs.ca/branding/brands.json`

## Use it for

Events, menus, kiosks, checkout, invitations, tickets, RSVPs — anything a guest
touches once, on a phone or tablet, standing up. If the session is measured in
minutes and the user did not choose to be there, this is the look.

Do not use it for tools someone lives in all day — that's Console.

## The three rules that make it this look

1. **Ivory, never white.** `--bg` is `#f7f5ef` and `--panel` is `#fffefa`. Pure
   `#fff` appears nowhere except inside a QR code's quiet zone. Same on the
   other end: text is `--ink` `#262319`, a warm charcoal, never `#000`.
2. **The serif does the numbers.** Money, totals, quantities and any figure the
   user is meant to *feel* are set in Cormorant Garamond (`--font-display`) at
   size, with lining numerals. Sans-serif prices look like a database. Serif
   prices look like a menu. This is the single highest-leverage rule here.
3. **Pills and one long shadow.** Buttons are `999px`, cards are `16px`, and
   raised surfaces carry exactly one shadow: `var(--shadow)` — a 1px contact
   line plus a wide soft cast. No second shadow, no glow, no ring.

## Type ramp

| Role | Face | Size | Treatment |
| --- | --- | --- | --- |
| wordmark | brand (Kaushan Script) | 3rem | as-is, never uppercase |
| h1 | display serif | 2.1rem | weight 600 |
| h2 | display serif | 1.6rem | weight 600 |
| section mark (h3) | body sans | 0.7rem | uppercase, 0.22em, trailing hairline |
| field label | body sans | 0.66rem | uppercase, 0.18em, `--muted` |
| button | body sans | 0.78rem | uppercase, 0.14em, weight 700 |
| body | body sans | 1rem / 1.5 | — |
| figure | display serif | 3.6rem | lining-nums |
| code / ids | mono | 0.9em | `--muted` |

Note the inversion from a normal site: the *headings* are serif and large, the
*labels* are tiny letterspaced sans. Do not set a section heading as a big bold
sans — that is the generic look this brand exists to avoid.

## Accent budget

`--accent` (champagne gold `#a4813b`) carries two things and nothing else:

1. **One primary action per view** — the `.btn.primary` that commits, pays, or
   confirms.
2. **Numeric totals** — the sum line in `.totals`, and gold-tinted `.pill.gold`
   status marks.

Everything else is `--ink` or `--muted`. A view with three gold buttons has no
primary action.

`.btn.accent` (charcoal) is the heavy secondary — scan, open camera, switch
mode. It reads as weight without competing for the gold.

`--violet` `#8f6fc7` exists only for the `x` in the DrinkTix wordmark. If you
are not rendering that wordmark, this token does not appear in your CSS.

## Spacing rhythm

Cards pad `20px` and stack with `16px` gaps. The app column is `max-width:
540px` with `14px` side padding. List rows are `14px 0` with a hairline between.
Stay on 4px multiples.

Whitespace is generous here, unlike Console. One decision per screen. If a view
has more than about seven interactive elements, split it.

## Layout

Single column, thumb-reachable, sticky translucent topbar with wordmark left and
a status pill right. Primary action sits at the bottom of the card it belongs
to, full width. Nothing side-by-side except a `.btn-row` of two.

Touch targets are 40px minimum (the `.stepper` circles set the floor). Inputs
are `1rem` font-size or larger so iOS doesn't zoom on focus.

## Motion

150ms ease on colour and filter. `:active` presses down 1px on buttons — that is
the only transform in the look. Toasts fade, they don't slide. Nothing animates
on page load.

## Voice

Warm, spare, hospitality register. Short declaratives. It should read like a
card printed for the event, not an app talking.

- Buttons: `Open Tab`, `Top Up`, `Charge`, `Scan Ticket` — title case, verb-first.
- Balances: `$42.50 remaining` — not "You have $42.50 left in your account!"
- Empty states: `No tabs open yet.` — full stop, no encouragement.
- Errors: `Not enough on this tab.` — state it, don't apologise.
- Never "Oops", never emoji, never an exclamation mark.

## Components in the stylesheet

`.app` `.topbar` `.row` · `.card` `.list-item` · `.btn` `.btn.primary`
`.btn.accent` `.btn.ghost` `.btn.danger` `.btn.sm` `.btn-row` · `input`
`label.field` · `.figure` `.amount` `.totals` · `.pill` `.pill.gold` `.pill.bad`
· `.tabs` · `.stepper` · `.toast` · `.wordmark` `.brand` `.muted` `.center` ·
bare `a` (gold, underlined — inline links are self-limiting and don't count
against the accent budget).

## Filling gaps

If you need a component that isn't listed, follow the procedure in `AGENT.md`
step 4. For this look specifically:

- **Modal** — a `.card` centred with `var(--shadow)` deepened, over a
  `rgba(38,35,25,0.4)` scrim. Never a dark modal.
- **Receipt / summary** — `.list-item` rows closed by a `.totals` line. The sum
  is serif and gold; the line items are sans and ink.
- **Segmented control** — use `.tabs`. Do not build a second one.
- **Badge on an avatar or ticket** — `.pill`, gold variant only if it denotes
  value or entitlement.
- **QR panel** — white `#fff` plate, `12px` padding, `14px` radius, 1px `--line`
  border, soft shadow. The plate is the one place pure white is allowed, because
  scanners need the contrast.
- **Chart** — rare in this look. If needed: ink bars on ivory, gold for the one
  series that matters, hairline axes, serif numerals on the value axis.