Ethical Tech CoLab — Design System
Living style guide · replicable spec

Emerging tech,
human condition.

Every color, typeface, effect, and route on the ETC website — recorded with its rationale so the identity can be rebuilt in any codebase. The palette mirrors the Summer ’26 Tech Rehearsal deck: a near-black purple ground, a signature lime accent, an electric-violet glow. Dark is the flagship; light is a daylight inversion that keeps the same identity.

Next.js · Tailwind v4 Bebas Neue + Space Mono Dark-first · themed 25 routes
01

Color

Defined as CSS custom properties, read through the @theme mapping — never as raw hex. Toggle the theme above to see every token re-resolve. The accent is the one loud element; everything else stays quiet.

Core tokens (current theme)

Chart series validated per-theme against --card

Demo posters intentionally NOT themed — artwork doesn’t invert

02

Typography

Two faces. A condensed display face for every heading, and — unusually — a monospace as the body and UI font. That mono body is a deliberate editorial signature, not a fallback.

Display · headings
Bebas Neue
Weight 400, letter-spacing .02em, uppercase. Used on h1–h3 and the fluid display classes. (This page renders a condensed system stack; production loads the real Bebas Neue.)
Body · UI · data
Space Mono
400 / 700, normal + italic. It is --font-sans — there’s no separate sans face. Everything you’re reading is set in it.
.fluid-heroclamp(3.25rem,11vw,9rem) · lh .9
Human condition
.fluid-h2clamp(2rem,4.6vw,3.5rem) · lh .98
The research, written up
Body1rem · Space Mono
Turning fragmented crisis signals into decisions, so responders and residents can act before information gaps cost lives.
Muted.85rem · --muted
NYU SPS · CGA · Microsoft · New York — four cohorts, est. 2024–2026.
03

Atmosphere

The layer that kills the flat, templated look. Film grain over everything, one drifting aura per hero, frosted glass on the nav, a lime cursor-glow on cards. Easing signature: cubic-bezier(.16,1,.3,1). Hover the cards.

Card glow

Lime radial follows the cursor via --mx/--my, no re-render. Move your pointer across this card.

Frosted glass

backdrop-filter: blur(14px) saturate(1.3) — the sticky nav and floating cards. Solid fallback where unsupported.

Film grain

A tiled SVG turbulence texture at opacity 0.04, mix-blend: overlay — it’s on this whole page.

CTA sweep

A light layer wipes across on hover.
Contact →

04

Layout

A tight container ladder. Reading copy sits at max-w-2xl to hold ~65 characters; chrome and galleries widen to max-w-6xl. Padding is a steady px-6.

max-w-2xl
max-w-4xl
max-w-6xl

Radii: pills (rounded-full) for nav items & CTAs, rounded-xl for menus and cards. Z-index ladder: site-bg -1 · content/aura 0 · nav 50 · grain 60.

05

Site map

Content-driven from src/content/site.ts. Top nav is Home · Portfolio · Team plus a Contact pill; Portfolio is the parent for Live Demos, Publications, and Media — shown both as a header dropdown and a section-tabs bar on the pages.

  • /  Home hero · mission/vision · research questions · cohorts · newsletter
    • /portfolioresearch questions → projects explorer
      • /demosLive Demos catalogue · poster rail · theme + semester filters
      • /publicationscatalogue, filtered by topic — 17 report pages
        /after-the-corridor /what-is-ethical-ai /ai-carbon-footprint /ai-models-research /ai-research-assistant /cerai /digital-provenance-passport /diplomatic-simulator /ercf /erus /evacuation-inform-index /evacuation-simulation /forced-labor-structural-risk-index /haste /mariupol-severity-model /provenance-search /vango
      • /mediamedia & moments · past events
    • /teamteam grid + alumni
      • /team/[slug]individual member · dynamic route
    • /contactheader CTA button
    • /aboutpreserved but hidden from nav