Index close - footnote and statement

The prompt that produced this. Re-run it to generate more in the same taste.

Aesthetic

instrument / viewfinder - hard edges, mono readouts, one gold accent on near-black, hairline rules, no radius, no card chrome

Reference

https://lab.juniegrat.com/ - the index this closes, whose HUD language (corner brackets, mono micro-labels, gold on near-black) it inherits

Intent

the last thing a recruiter or collaborator feels should be an invitation to make contact, not a locked door. The index it replaced ended on the one project nobody could open, followed by a two-item footer with no name and no positioning. Peak-end says that last beat counts far more than its size.

Guardrails

always radius 0 everywhere, exactly one accent colour, and nothing else tinted, the withheld item is demoted out of the numbered run so the run ends on something openable, the closing line is the second-largest type on the page, one action left to take

never em-dashes, a second accent, card chrome, a solid accent chip on the least useful item, invented claims about availability or clients

pnpm dlx shadcn@latest add http://localhost:3040/r/lab-index-close.json

Meta block and library type import stripped - this is what pastes cleanly elsewhere.

/*
 * The accent is #f2c14e, written literally at its three use sites below.
 * Two things this deliberately is not:
 *   - a JS constant interpolated into className. Tailwind extracts classes by scanning
 *     source text, so `hover:${ACCENT}` never appears as a literal and the utility is
 *     never generated.
 *   - `text-[color:var(--accent)]`. That data-type hint is Tailwind v3 syntax; under v4 it
 *     silently fails to match and the word renders in the inherited text colour.
 * Three literal occurrences, matching how every other design in this library does it.
 */

export default function LabIndexClose() {
  return (
    <div className="bg-background text-foreground">
      {/*
        The withheld piece, out of the numbered run on purpose. Inside the run it ended the
        index on the one thing nobody can open, and a filled accent chip made it the loudest
        element on a page whose real calls to action are 12px mono. Outlined and demoted, it
        still gets offered.
      */}
      <aside className="mx-auto grid max-w-[92rem] grid-cols-1 items-baseline gap-x-12 gap-y-4 border-t border-border px-5 py-8 sm:grid-cols-[minmax(0,1fr)_auto] sm:px-12">
        <div>
          <h2 className="flex flex-wrap items-center gap-3 text-base font-semibold tracking-[-0.01em]">
            Crash Test
            <span className="border border-muted-foreground/70 px-2 py-[5px] font-mono text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
              not listed
            </span>
          </h2>
          <p className="mt-2 max-w-[52ch] text-[0.95rem] text-muted-foreground">
            A short game about a project going into a wall. Not public yet, but the link exists if
            you want it.
          </p>
        </div>
        <a
          href="mailto:hello@example.com?subject=Crash%20Test"
          className="group -my-3 whitespace-nowrap py-3 font-mono text-xs uppercase tracking-[0.16em] text-muted-foreground transition-colors duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-foreground active:opacity-70"
        >
          Ask for it{' '}
          <span className="inline-block transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:translate-x-[5px] motion-reduce:transition-none motion-reduce:group-hover:translate-x-0">
            &rarr;
          </span>
        </a>
      </aside>

      {/* The close. Second-largest type on the page and exactly one thing left to do. */}
      <footer className="border-t border-border">
        <div className="mx-auto max-w-[92rem] px-5 pb-10 pt-20 sm:px-12 sm:pb-16 sm:pt-40">
          <span className="font-mono text-xs uppercase tracking-[0.2em] text-muted-foreground">
            End of the index
          </span>

          <h2 className="mt-6 max-w-[19ch] text-pretty text-[clamp(1.9rem,4.2vw,3.3rem)] font-semibold leading-[1.04] tracking-[-0.038em]">
            Most of these started as a question I could not answer by{' '}
            <span className="text-[#f2c14e]">reading</span>.
          </h2>

          <a
            href="mailto:hello@example.com"
            className="group mt-8 inline-flex items-center gap-4 py-2.5 text-[clamp(1.1rem,2.3vw,1.65rem)] font-medium tracking-[-0.02em] transition-[color,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-[#f2c14e] active:scale-[0.99] motion-reduce:transition-colors motion-reduce:active:scale-100 sm:mt-12"
          >
            hello@example.com
            <span className="inline-block text-[#f2c14e] transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:translate-x-[5px] motion-reduce:transition-none motion-reduce:group-hover:translate-x-0">
              &rarr;
            </span>
          </a>

          <div className="mt-12 flex flex-wrap justify-between gap-5 border-t border-border pt-5 font-mono text-xs tracking-[0.08em] text-muted-foreground sm:mt-24">
            <span className="uppercase tracking-[0.18em]">studio / lab</span>
            <nav className="flex gap-6">
              <a
                href="https://example.com/design"
                className="inline-block py-3 transition-colors duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-foreground"
              >
                design
              </a>
              <a
                href="https://example.com/github"
                className="inline-block py-3 transition-colors duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-foreground"
              >
                github
              </a>
            </nav>
          </div>
        </div>
      </footer>
    </div>
  )
}