subjects / SUB-008
●   SUB-008

showcase (site a / m4).

open opened 2026-05-06 · touched 2026-05-06 · m4
#site#infra#m4#showcase#spec

# SUB-008 — Showcase site

> Paste SUB-008 into chat to context-shift here.

What it is

Showcase is the Sett UX team's internal documentation site. A team-facing surface that browses every artifact the team produces: design system (Apollo + Cosmo), prototype gallery, glossary, JTBD per role, problem catalogue, milestone board, daily digest archive, design specs.

Lives at sites/showcase/ (not yet scaffolded). Static Astro build. Reads vault directly at build time. Deployed under Cloudflare Access, @sett.ai only.

Sister site = Studio (SUB-001 / Site B / M5) which is Ishai-only personal hub. Don't merge. Two distinct audiences = two sites. (See SUB-006 for the two-site decision.)

Why

  • Sett UX produces lots of artifacts (specs, prototypes, decisions, research, DS components, daily digests). Scattered across vault folders, prototype HTML, Figma, Notion, Slack.
  • No single surface lets a non-vault user (or even a vault user looking for "what was the latest") see it organized.
  • Showcase is that surface. Show-and-tell, not control panel.
  • Doubles as recruiting / show-and-tell artifact for occasional outside viewers.

Audience

| Tier | Who | Use | |------|-----|-----| | Primary | Sett UX team (Ishai, future hires) | Browse work, reference glossary, find specs | | Secondary | Sett product/eng (Sergey, Duskin, Yuval, Gili, Maya, Harel) | Lookup "where is X", "what did design produce on Y" | | Tertiary | Occasional show-and-tell w/ co-workers, acquaintances, recruiting candidates | Casual browsing, design-system reference |

NOT for: clients, public, anonymous viewers. Cloudflare Access SSO restricted to @sett.ai.

Features (v1 scope)

| # | Feature | Source | Status | |---|---------|--------|--------| | F1 | Landing / index — editorial hero, recently-updated table, activity feed, weekly-digest callout | aggregated | not started | | F2 | Prototype Gallery — tile grid w/ thumbnail, status pill, surface badge, last-updated, "open in new tab", spec link | cosmo-design/screens/prototypes/ + screens/explorations/ + apollo/screens/ | not started | | F3 | Prototype Detail — per-prototype: embed iframe, decisions log, linked specs, linked terms, comments thread, changelog | per-prototype | not started | | F4 | Design System showcase — Cosmo + Apollo tokens, components, anatomy diagrams, variants, props tables | cosmo-design/design-system/ + apollo/design-system/ | not started | | F5 | Glossary — A→Z list + term detail w/ ambiguous-meaning callouts, used-by list, edit history | vault/98-References/glossary.md | not started | | F6 | Roles (JTBD) — per-role: definition, day-in-the-life, JTBD list, pain points, tools touched | vault/02-Users/*.md | not started | | F7 | Problems catalogue — per-problem: filterable by surface/role, links to specs that address it | vault/05-Problems/*.md | not started | | F8 | Milestones board — per-milestone progress chart (Recharts donut), days remaining, Active Board items | vault/00-Milestones.md + vault/00-Action-Items.md | not started | | F9 | Daily Digest archive — reverse-chrono feed, per-day card | vault/10-Activity-Log/_daily-ingest-summary.md | not started | | F10 | Specs index — list view by surface w/ tags (locked/draft/superseded) | vault/08-Design-specs/*.md | not started | | F11 | Comments via Giscus — GitHub-backed, per-page | infra | not started | | F12 | Search (Pagefind) | static index | not started | | F13 | Cloudflare Access auth + deploy | infra | not started |

Detailed feature specs

F2 · Prototype Gallery (key v1 component)

Per-tile data:

  • Thumbnail — auto-generated 16:9 screenshot, refreshed on rebuild (headless chromium against Cloudflare Pages deploy)
  • Title — prototype name (weekly, air, auditor-priority-v4)
  • Surface badge — Cosmo (accent color) / Apollo (neutral) / shared
  • Status pill — active · superseded · snapshot (frozen) · production
  • Last updated — date (from git log of source file)
  • Changed in last 7 days — short list of commit subjects affecting this file
  • Spec link — opens matching vault/08-Design-specs/.md page
  • Open in new tab — direct link to live HTML at cosmo-design.pages.dev/screens/prototypes/.html
  • Tags — concept (A/B/C), surface, audience

Sort options: recently-updated · alphabetical · grouped by surface.

Tile spacing: connected (1px gridlines per Variant B styling).

F3 · Prototype Detail

Layout per prototype:

  • Breadcrumbs: prototypes /
  • Title block: name + status + surface tag + serif description
  • Two-column metadata strip: owner, last-updated, links (figma / repo / live), related JTBDs
  • Embedded prototype iframe (16:9)
  • Sections: Background · Decisions log (timestamped) · Linked specs (cards) · Linked terms (chips → glossary) · Comments (Giscus thread) · Changelog (table)

F11 · Comments (Giscus)

  • GitHub Discussions backend (free, no DB)
  • Per-page mapping: each page → one Discussion thread
  • Reactions enabled
  • Lazy-loaded (only when scrolled into view)

Architecture

  • Framework: Astro 4 (static, MDX support)
  • Visual identity: TBD — variant B handoff is current candidate (warm dark + amber + Bricolage Grotesque + sidebar) but Showcase may want different brand than Studio. Decide before v1.
  • Build: static, rebuilds on push to main; daily rebuild for time-derived data (last-updated, days remaining)
  • Deploy: Cloudflare Pages, separate project from Studio
  • Auth: Cloudflare Access, Google SSO @sett.ai only
  • Charts: Recharts (per workspace standard)
  • Search: Pagefind (static client-side, fast, no JS framework)
  • Comments: Giscus (GitHub Discussions backend)

Scope

v1 (target 2026-06-01, M4 milestone)

  • F1 (landing), F2 (gallery), F3 (detail), F4 (DS), F5 (glossary), F6 (roles), F11 (Giscus), F12 (search), F13 (auth)

v2 (deferred)

  • F7 (problems catalogue)
  • F8 (milestones board)
  • F9 (daily digest archive)
  • F10 (specs index)
  • Performance / observability dashboards
  • Public access (intentionally never)
  • Editing surface (vault is the source)
  • Multi-author / activity feed of contributors
  • Mobile-first layout (laptop primary; mobile read-only fallback)
  • Interactive design-tokens playground

Decisions made

  • 2026-05-06. Audience locked: internal Sett team only. NOT public, NOT client-facing.
  • 2026-05-06. Auth: Cloudflare Access SSO restricted to @sett.ai emails.
  • 2026-05-06. Stack: Astro + MDX. Same as Studio (shared infra, separate deploy).
  • 2026-05-06. Comments via Giscus (free, GitHub-backed).
  • 2026-05-06. Action-rich prototype hub (cloud + local + Figma + push status) lives on Studio NOT Showcase. Showcase keeps a read-only prototype gallery.
  • 2026-05-06. v1 sections locked: Glossary, Design System, Prototype Gallery, JTBD. Milestone board + Digest archive deferred to v2.

Open threads

  • Decide visual direction — adopt Variant B (Bricolage + amber + sidebar)? Or different brand? (AB-011)
  • Decide subdomain — ux.sett.ai? inside.sett.ai? showcase.sett.ai?
  • Decide Apollo vs Cosmo split in Design System section — separate top-level pages or one DS section w/ surface filter
  • Activity feed source — git commit history (cheap), or write-time index (richer)?
  • Prototype embeds — direct iframe, or wrapper component w/ consistent chrome?
  • Versioning — track which prototype version is "shipped" vs "snapshot"? Probably yes for DS pages.
  • Persona photos for Roles pages — placeholder or request real photos before launch?

Status

| Date | What shipped | |------|--------------| | 2026-05-06 | Design brief written (vault/08-Design-specs/sett-ux-showcase-site.md). Six Pencil pages drafted via Claude Design (design_handoff_sett_ux_docs/). Subject filed. v1 not yet started. |

Next milestone: M4 v1 target 2026-06-01. Sequence: M1 (V2 + Apollo) ships 2026-05-11 → M2 (Cosmo pages) 2026-05-25 → M4 (Showcase) 2026-06-01 → M5 (Studio v1) 2026-06-15.

Raw refs

  • Design brief (canonical): vault/08-Design-specs/sett-ux-showcase-site.md
  • Variant A handoff (chartreuse + serif + topbar): design_handoff_sett_ux_docs/
  • Variant B handoff (amber + Bricolage + sidebar): design_handoff_sett_ux_docs_B/
  • Action items: AB-011 (write brief — done), AB-041 (Giscus comments wiring)
  • Sister site: SUB-001 — Studio (Site B / M5)
  • Two-site decision rationale: SUB-006
context-shift paste this id into chat to resume on this thread