Runway

Near-monochrome by design. A true-black #000000 canvas (the dominant measured surface) carries near-white #ffffff foreground type, with a single #e5e7eb-tier 1px hairline doing the structural work. De-emphasis descends through a neutral gray ladder — #6b7280 → #999999 → #404040 → #1a1a1a. There is no saturated brand accent in the capture; saturation is delegated entirely to the 16:9 video stills.

• True-black #000000 is the canvas (the most frequent measured surface, 1218 occurrences) — a gallery wall for video stills, not a soft dark-mode gray
• Near-white #ffffff foreground for primary type, maintaining maximal contrast against the black canvas (~21:1)
• Hairline border at the #e5e7eb tier (high-frequency border token, 866 occurrences) — 1px solid, used to imply cards and structure without fill or shadow
• Neutral gray ladder #6b7280 / #999999 / #404040 / #1a1a1a for captions, metadata, and de-emphasized labels — strictly achromatic
• NO saturated accent fill exists in the capture — do not invent one. Emphasis comes from the serif display face and from the imagery, never from a colored chip or button fill

linear-gradient(to right, rgb(255, 255, 255), rgba(0, 0, 0, 0))
linear-gradient(to left, rgb(255, 255, 255), rgba(0, 0, 0, 0))

• Two families, two registers. Display/editorial: timesNow (a Times Now / Times-lineage serif, self-hosted .otf, font-display swap) for art-directed headlines. UI/body: abcNormal (ABC Normal grotesque, self-hosted .woff2) for everything operational.
• ABC Normal weight ladder: 400 (reading + most headings) / 500 (UI headings, +0.35px tracking) / 600 (dense UI labels, captions). The 300 'Book' cut is preloaded but reserve it for large soft display only.
• Display tracking is negative and px-based, tightening as size grows: -1.2px on 48px (heading-1), -0.9px on 36px (heading-2). Body 13px uses -0.26px; UI 14px headings use a positive +0.35px to open dense labels.
• Headings sit tight: unitless line-height 1.0 at 36-48px display sizes (48/48, 36/36, 24/24, 20/20). Body relaxes to ~1.25-1.5 (16/24, 13/16.9, 14/17.5).
• Captured size ladder: 11 / 13 / 14 / 16 / 20 / 24 / 36 / 40 / 48 px. The 11px caption (weight 450, line-height 14.3px) is the floor — never go smaller.
• Reserve the serif (timesNow) for headline and pull-quote moments only — it is the curatorial voice. Never set body copy or UI controls in the serif; ABC Normal carries all functional text.
• Body 16px / line-height 24px / weight 400 is the default reading layer; UI labels run 14px / 20px at weight 500-600.

• 4px base unit. Captured scale: 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32 / 40 px. The 8px (129 occurrences) and 16px (52) steps dominate; 4px (76) handles micro-gaps.
• Container max-width is wide and cinematic: 1600px primary rail (container-md) for full-bleed widescreen content; 512px secondary rail (container-sm) for narrow text clusters.
• Flex/grid gutters captured at 8 / 28 / 80 px — 8px for tight clusters, 28px for card rows, 80px for the large editorial section gaps that give frames room to breathe.
• Section vertical rhythm leans generous (28-40px+ blocks) so 16:9 stills are never crowded — let the imagery dominate the fold.
• Card padding pulls from the scale (16-24px typical); never use magic numbers outside the 4/6/8/10/12/14/16/20/24/28/32/40 ladder.

• No drop shadows — the capture contains zero box-shadow tokens. Structure is delivered by the 1px solid hairline border (#e5e7eb-tier) alone.
• Cards and panels are implied by border + the black canvas, not by fill or elevation. Layering is achieved through the imagery sitting on black, not through stacked surfaces.
• Depth comes from the video stills themselves (luminous frames against #000000), not from any UI shadow or glow.
• Focus and hover states shift border color or opacity — never introduce a shadow bloom.

• Radius scale is tight: 4 / 6 / 8 px only. The capture shows no large or pill radii — corners stay subtle so frames read as frames.
• Buttons and inputs default to 6-8px; small chips/tags to 4px. No `rounded-full` decorative pills in the source.
• Icons are stroke-based / linear at hairline-to-1.5px weight to match the 1px border language — no filled or duotone variants.
• Tap targets follow the spacing ladder; keep interactive minimums at 40×40 (pointer) / 44×44 (touch) even though the source is desktop-led.

• button-primary

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  8px

  padding

  10px 20px

  border

  1px solid transparent

  boxShadow

  none

  fontFamily

  abcNormal, sans-serif

  fontWeight

  500

  fontSize

  14px

  lineHeight

  20px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-2 rounded-[8px] border border-transparent bg-white px-5 py-2.5 text-[14px] font-medium leading-5 text-black transition-[background-color,opacity] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white

• button-secondary

  backgroundColor

  transparent

  textColor

  #ffffff

  radius

  8px

  padding

  10px 20px

  border

  1px solid #e5e7eb

  boxShadow

  none

  fontFamily

  abcNormal, sans-serif

  fontWeight

  500

  fontSize

  14px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-2 rounded-[8px] border border-[#e5e7eb]/30 bg-transparent px-5 py-2.5 text-[14px] font-medium text-white transition-[border-color,background-color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-[#e5e7eb]/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white

• card-frame

  backgroundColor

  #000000

  textColor

  #ffffff

  radius

  8px

  padding

  16px

  border

  1px solid #1a1a1a

  boxShadow

  none

  aspectRatio

  16 / 9

  Tailwind

  Copy

  overflow-hidden rounded-[8px] border border-[#1a1a1a] bg-black p-4 text-white transition-[border-color] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-[#404040]

• heading-display

  fontFamily

  timesNow, Times, serif

  color

  #ffffff

  fontWeight

  400

  fontSize

  48px

  lineHeight

  48px

  letterSpacing

  -1.2px

  Tailwind

  Copy

  font-[timesNow,Times,serif] text-[48px] font-normal leading-[48px] tracking-[-1.2px] text-white

• input-field

  backgroundColor

  #000000

  textColor

  #ffffff

  radius

  6px

  padding

  8px 12px

  border

  1px solid #404040

  boxShadow

  none

  fontFamily

  abcNormal, sans-serif

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  w-full rounded-[6px] border border-[#404040] bg-black px-3 py-2 text-[16px] leading-6 text-white placeholder:text-[#6b7280] transition-[border-color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] focus-visible:border-white focus-visible:outline-none

• link-inline

  color

  #ffffff

  textDecoration

  underline

  textDecorationColor

  #6b7280

  textUnderlineOffset

  2px

  transition

  text-decoration-color 200ms linear

  Tailwind

  Copy

  text-white underline decoration-[#6b7280] underline-offset-2 transition-[text-decoration-color] duration-200 ease-linear hover:decoration-white focus-visible:outline-none focus-visible:decoration-white

• Primary easing: cubic-bezier(0.4, 0, 0.2, 1) — the standard material ease-in-out, carrying 43 of the captured transitions. Use it for all interactive state changes.
• Secondary easing: linear (20 occurrences) — reserved for color/opacity cross-fades where a constant rate reads cleaner than an eased one.
• Three captured durations: 0.15s (primary state change, 26×), 0.2s (color/opacity/all transitions, 36×), 0.5s (rare atmospheric reveal, 1×). Most interaction sits at 0.15-0.2s; 0.5s is the ceiling and is for ambience only.
• Motion level is expressive because the product is generative video — the page choreography is itself a demo. But choreography stays deterministic (cubic-bezier / linear), never springy.
• useReducedMotion mandatory: all animation collapses to opacity-only or disables. The expressive budget assumes a creative-workstation baseline; everyone else gets the static cut.
• GSAP and Framer Motion coexist — GSAP for scroll-pinned cinematic beats, Framer Motion for component interaction. Do not duplicate the same animation across both.
• No loop animations except explicit loaders; let the generated video stills provide the ambient movement.

• Navigation is minimal and text-forward — a thin Header/Nav over the black canvas, no heavy chrome competing with the imagery.
• Hover reveals on cards shift border color/opacity rather than lifting with shadow — stay inside the flat hairline language.
• Video stills act as primary affordances — hovering or entering a frame is the interaction; treat the imagery as clickable surface, not decoration.
• Tooltips and secondary controls appear on hover + focus; dismiss instantly on blur. Keep them sparse so the screening-room mood holds.
• Modals for focused actions; avoid nested overlays that break the cinematic full-bleed flow.
• Empty/loading states: a thin caption + the brand serif for the headline moment; no illustrations competing with real generated frames.
• Section transitions are scroll-choreographed (GSAP) — entering a section fades/reveals its widescreen still as the dominant event.

Desktop-first because the audience is creative professionals on wide displays evaluating 16:9 output — the container extends to 1600px to give widescreen stills full breadth. Mobile reflows the same screening-room language into a narrower rail without inventing an alternate architecture: the frame stays 16:9, the type stays serif-display + grotesque-UI, the canvas stays black.

• Breakpoints captured: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536, plus bespoke 1200 and 1600 media queries for the wide editorial rail.
• Container max-width steps 512 → 1600 px; the 1600 rail is the signature wide canvas, do not collapse it to a generic 1280.
• 16:9 stays the composition unit at every tier — scale the frame, never crop it to a different aspect.
• Typography scales down with the display tracking easing off: 48px heading-1 (-1.2px) descends through 36px (-0.9px) to body sizes where tracking returns toward normal.
• Tap target minimum 44×44 on touch, 40×40 on pointer — even though the source is desktop-led.

• Contrast is the page's great strength: #ffffff on #000000 is ~21:1 (AAA). Keep body text on the black canvas at or near this — never let de-emphasis gray (#6b7280 ≈ 5.6:1 on black) carry essential reading content below AA.
• focus-visible: a 1px white ring/border replaces the default outline (matching the hairline language) — mandatory on every interactive element.
• All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions, especially since video stills double as affordances.
• Every video still and image needs a meaningful `alt`; decorative frames use `alt=""`. The source ships several empty-alt hero images — fix this, don't replicate it.
• Motion respects prefers-reduced-motion — the expressive GSAP/Framer layer collapses to opacity-only or disables entirely. This is critical given the heavy motion budget.
• ARIA labels on icon-only controls; aria-live='polite' on async status; aria-expanded on any collapsible region.
• Tap targets minimum 44×44 on touch; 40×40 on pointer.
• Never signal state with the gray ladder alone (color-only) — pair with weight, border, or icon, since the palette is achromatic.

Motion is split across two libraries observed in the runtime: Framer Motion (window.MotionIsMounted) for component interaction and GSAP (window._gsap) for scroll-pinned cinematic beats. Video stills are served from Mux (image.mux.com thumbnails at 16:9), implying Mux-hosted playback for the live frames. Images are webp-dominant (8 of 12), eager-loaded above the fold (zero lazy-loading observed — a deliberate cinematic choice, but audit it for performance).

• Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true }}` for component reveals; constants only — `ease: [0.4, 0, 0.2, 1]`, `duration: 0.15` / `0.2` / `0.5`
• GSAP ScrollTrigger for section-level cinematic choreography (pin + fade widescreen stills); keep it on the 0.4/0/0.2/1 or linear timing to match the CSS layer
• Mux <MuxPlayer> or mux image thumbnails (image.mux.com/<id>/thumbnail.webp) for 16:9 video stills; provide a `srcset` ladder (480/640/960/1280/1600/1920w as captured)
• Next/Image with `sizes` always set and `priority` on the LCP hero still; reconsider eager-loading every frame (source ships zero lazy) to protect mobile
• useReducedMotion guard wraps every animation primitive in both libraries — no exceptions

• Keep the canvas true #000000 so every video still reads as a projected frame — black is the gallery wall, not a soft dark gray.
• Split voice across two families: timesNow serif for art-directed headlines, abcNormal grotesque (400/500/600) for all UI and body.
• Deliver structure with the 1px solid hairline border (#e5e7eb-tier) — reach for border before anything else; there are no shadows in the source.
• Compose around 16:9 widescreen stills at the 1600px rail; let imagery dominate the fold and use 80px section gaps to give frames room.
• Default interactive motion to cubic-bezier(0.4, 0, 0.2, 1) at 0.15-0.2s; reserve 0.5s for atmospheric reveals only.
• Delegate all saturation to the generated frames — keep the UI achromatic (black/white/gray ladder).
• Pass every page through useReducedMotion before shipping — the expressive GSAP/Framer budget demands a robust static fallback.

• Never invent a saturated brand accent — the capture is achromatic (black/white + #6b7280/#999999/#404040/#1a1a1a gray ladder + #e5e7eb hairline). Color belongs to the imagery, not to a chip or button fill.
• Never introduce drop shadows — the source has zero box-shadow tokens; elevation is hairline + luminous-frame-on-black only.
• Never set body copy or UI controls in the serif (timesNow) — it is the curatorial display voice; abcNormal carries all functional text.
• Never coarsen the radius scale beyond 4/6/8px or add decorative pills — corners stay subtle so frames read as frames.
• Never invent durations or easings outside the captured set {0.15s, 0.2s, 0.5s} and {cubic-bezier(0.4, 0, 0.2, 1), linear}; no springs.
• Never use em for display tracking — the negative px scale (-1.2px @48 / -0.9px @36 / -0.26px @13) is an optical constant.
• Never crop the 16:9 frame to a different aspect to fit a layout — scale the composition around the frame instead.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Spacing base 4px, scale 4/6/8/10/12/14/16/20/24/28/32/40.
• Container max 1600px (wide cinematic rail) + 512px narrow rail — do not collapse to a generic 1280.
• Two families only: timesNow (serif display) + abcNormal (grotesque UI/body). Weight ladder 400/500/600 (plus 300 'Book' for large soft display).
• Palette is achromatic: #000000 canvas, #ffffff foreground, #e5e7eb-tier hairline, gray ladder #6b7280/#999999/#404040/#1a1a1a. No saturated accent.
• Motion: three captured durations (0.15 / 0.2 / 0.5 s) and two easings (cubic-bezier(0.4, 0, 0.2, 1) primary, linear secondary). No springs.
• Radius scale: 4 / 6 / 8 px. Border: 1px solid only. No drop shadows.

• Canvas audit: primary background is true #000000, not a softened dark gray.
• Color audit: no saturated accent hex anywhere — only #000000 / #ffffff / #e5e7eb / #6b7280 / #999999 / #404040 / #1a1a1a appear as UI color; all saturation lives in imagery.
• Font-family grep: headlines use timesNow (serif), UI/body uses abcNormal; weights restricted to 400 / 500 / 600 (and 300 for large display only).
• Spacing grep: no values outside the 4/6/8/10/12/14/16/20/24/28/32/40 ladder.
• Container width: wide content reaches the 1600px rail; narrow clusters cap at 512px; no generic 1280 default.
• Shadow audit: zero box-shadow declarations — every delimiter is a 1px solid hairline border.
• Radius grep: only 4 / 6 / 8 px corner radii appear.
• Transition grep: timing-function values draw from {cubic-bezier(0.4, 0, 0.2, 1), linear}; durations from {0.15s, 0.2s, 0.5s} with 0.5s reserved for ambience.
• Aspect audit: hero and feature media compose at 16:9 (1920×1080 / 2048×1152), never re-cropped.
• Tracking audit: display headings use px-based negative tracking (-1.2px @48 / -0.9px @36), not em.
• Contrast audit: body text on the black canvas is at or near 21:1; de-emphasis gray never carries essential reading below 4.5:1.
• Motion audit: prefers-reduced-motion collapses the GSAP + Framer Motion layer to opacity-only or off.