<!-- Design Lounge Nº 090 · "Agency landing with case wall" · designlounge.vercel.app -->

# Agency landing with case wall

> **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them.

## What it is

The landing page of a fictional four-person Leeds studio, North Yard. The first frame is a huge uppercase lockup — "We show *the* **work.**" — over a 2×2 case wall with 2px black rules and square corners. Hovering or selecting a case inverts it to black with white type. A 56px sticky bar in signal orange sits on the bottom edge of the viewport with the only CTA: "Start a project". This is not a project list and not a marquee. The wall is the work.

## Reference behaviour

1. Initial state: case 01 "Pier Ledger" has `aria-current="true"` and is inverted (black fill, white type, orange outline on its 110×110 mark). The other three cases are white with black type.
2. Hover any case: invert to black / white over 0ms colour (no fade). The 110px art tile gets a 2px orange outline, 3px offset.
3. Click a case: it becomes current; the previous current returns to the default (unless hovered). Only one case is current.
4. Hover "Start a project": the button flips from black-on-orange-bar to white fill / black type over 140ms.
5. Nav links turn orange on hover. Focus-visible on every control is a 3px orange outline, −3px offset (sits inside the hard edge).
6. The CTA bar is `position: fixed; bottom: 0; height: 56px`. Body has `padding-bottom: 56px` so the wall is not hidden behind it.
7. Reduced motion: the 140ms button colour change becomes 1ms. Inversion stays instant.

## Structure

```
1280 × 800
┌────────────────────────────────────────────────────────────────────────┐
│ NORTH YARD          LEEDS · EST. 2016          WORK  STUDIO  CONTACT   │ 48, 2px rule
├────────────────────────────────────────────────────────────────────────┤
│ WE SHOW THE WORK. (88px Archivo Black)   Identity, type and wayfinding │
│ "the" is outlined; "work." is orange     Open Q1 2027     12 cases     │ ~200
├────────────────────────────────────────────────────────────────────────┤
│ 01 / HALL            ▪  │ 02 / TYPE            ▪                       │
│ PIER LEDGER             │ CIVIC CUT                                    │ 248
│ Port of Goole · 2026    │ Leeds Libraries · 2025                       │
├─────────────────────────┼──────────────────────────────────────────────┤
│ 03 / SIGN            ▪  │ 04 / MARK            ▪                       │
│ VOLT SHED               │ HARBOUR INDEX                                │ 248
│ Grid North · 2025       │ Humber Trust · 2024                          │
├─────────────────────────┴──────────────────────────────────────────────┤
│ NORTH YARD        AVAILABLE FROM JANUARY 2027        [ START A PROJECT]│ 56 fixed orange
└────────────────────────────────────────────────────────────────────────┘
  All rules 2px black. Radius 0. Art tiles 110×110, top-right of each case.
```

- `<nav aria-label="Primary">` — 48px, 3 equal columns: wordmark, location, three links.
- `<header class="hero">` — 2 columns, `1fr 220px`, 20px side pad. `h1` 88px / 0.84. Aside 13px + a 2px-ruled tag row.
- `<section class="wall" id="wall" aria-label="Case wall">` — 2×2. Each cell is a `<button class="case">` min-height 248px.
- `<div class="bar" role="region" aria-label="Start a project">` — 3 columns: name / availability / CTA link.

## Tokens

```css
:root {
  --bg: #ffffff;
  --ink: #000000;
  --ink-2: #555555;
  --line: #000000;
  --orange: #ff4d00;      /* signal — the only accent */

  --display: "Archivo Black", Impact, sans-serif;
  --sans: "Archivo", Helvetica, Arial, sans-serif;

  --nav: 48px;
  --cta: 56px;
  --case-min: 248px;
  --art: 110px;
  --rule: 2px;

  --t: 140ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
```

## Typography

| Role | Family | Size | Weight | Line-height | Tracking | Case |
|------|--------|-----:|-------:|------------:|---------:|------|
| Lockup | Archivo Black | 88px | 400 | 0.84 | −0.03em | UPPERCASE |
| Case title | Archivo Black | 36px | 400 | 0.90 | −0.02em | UPPERCASE |
| Wordmark / bar name | Archivo Black | 16px | 400 | 1 | +0.04em | UPPERCASE |
| Nav / tags / CTA | Archivo | 11–12px | 600 | 1 | +0.08–0.14em | UPPERCASE |
| Aside / client line | Archivo | 13px | 400 | 1.4 | 0 | sentence |

Lockup treatment: "the" is `color: transparent; -webkit-text-stroke: 2px #000`. "work." is `#FF4D00` with no stroke.

## Motion

| Element | Trigger | Property | From → To | Duration | Easing | Notes |
|---------|---------|----------|-----------|---------:|--------|-------|
| `.case` | hover / current | background, color | white/black ↔ black/white | 0 | — | instant invert |
| `.art` | hover / current | outline | none → 2px orange | 0 | — | |
| `.bar .go` | hover | background, color | ink/bg ↔ bg/ink | 140ms | `--ease` | the only eased colour |

Reduced motion: `--t` to 1ms. Inversion remains a hard cut.

## States

- **Case default:** white, 2px black edges, 13px `--ink-2` client line.
- **Case hover / current:** black fill, white type, client line `#C8C8C8`, art outlined in orange.
- **CTA default:** 36px tall, black fill, white type, on the orange bar.
- **CTA hover:** white fill, black type.
- **Nav hover:** orange type.
- **Focus-visible:** 3px orange, offset −3px.

## Accessibility

- Cases are `<button>`. Current case uses `aria-current="true"` (a selected item in a set of destinations).
- The bar is a `role="region"` with an accessible name. The CTA is a link, 36px tall, ≥ 44px wide with 16px padding.
- Focus order: logo, 3 nav links, 4 cases, CTA.
- Contrast: black on white 21:1; orange `#FF4D00` on white ≈ 3.7:1 — orange is used at 88px and 16px display sizes only, never as 14px body. Black on orange ≈ 6.4:1.
- Do not rely on hover alone: click and keyboard set `aria-current`.

## Responsive rules

- ≥ 1280: as specified. Lockup 88px. Wall 2×2. Bar 3 columns.
- 900–1279: lockup 72px if it wraps to three lines; wall stays 2×2.
- < 900: lockup 64px. Hero stacks. Wall becomes 1 column; each case keeps the 2px bottom rule; drop the right rule. Bar hides the centre availability string.

## Acceptance checklist

- [ ] Lockup is 88px Archivo Black; "the" is outlined, "work." is `#FF4D00`.
- [ ] Case wall is exactly 2×2 with 2px black rules and 0 radius.
- [ ] Each case is ≥ 248px tall and contains a 110×110 geometric art tile.
- [ ] Hover and `aria-current` invert the case to black/white.
- [ ] Only one case is current; 01 starts current.
- [ ] Sticky bar is 56px, `#FF4D00`, `position: fixed; bottom: 0`, 2px black top rule.
- [ ] CTA reads "Start a project" and inverts on hover in 140ms.
- [ ] Body has 56px bottom padding so the last row is not covered.
- [ ] First 800px includes the lockup, all four cases, and the bar.
- [ ] Focus outline is 3px orange, inset.
- [ ] `prefers-reduced-motion: reduce` does not remove the invert, only the 140ms fade.
- [ ] No marquee, no project table, no second accent.

## Implementation notes

**Hard edges are the style.** Do not radius the cases, the bar, or the CTA. Rules are 2px, not 1px.

```css
.wall { display: grid; grid-template-columns: 1fr 1fr; }
.case { min-height: 248px; border-right: 2px solid #000; border-bottom: 2px solid #000; border-radius: 0; }
.case:hover, .case[aria-current="true"] { background: #000; color: #fff; }
```

**Outlined word in the lockup** uses stroke, not a second font:

```css
h1 span { color: transparent; -webkit-text-stroke: 2px #000; }
h1 b { color: #ff4d00; -webkit-text-stroke: 0; }
```

**The bar must not cover the wall.** Fix it, then pad the document:

```css
body { padding-bottom: 56px; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: #ff4d00; }
```

The four art tiles are CSS, 110×110, no SVG required:

1. Pier Ledger — `conic-gradient` in 25% slices: black / orange / black / white.
2. Civic Cut — 135° repeating bars, 10px black, 2px orange, 10px white.
3. Volt Shed — horizontal split: black 50%, 4px orange band, white below.
4. Harbour Index — orange 28% disc over 8px black/white stripes.

Orange is `#FF4D00` only. Do not introduce a second signal. The lockup uses Archivo Black at 88px; Archivo Regular is for 11–14px UI only.

Common mistakes: turning this into a project list plus marquee; using 1px grey rules; rounding the CTA into a pill; setting the lockup in Archivo Regular; adding blue or yellow as a second signal.

---

*From Design Lounge (https://designlounge.vercel.app). Live demo and source: /p/landing-agency-case-wall. Free to use in your products. Credit line: Designed using Design Lounge.*