@yojahny/wp-design-library 1.1.1 → 1.3.0

package/entries/dimension/entry.md

@@ -0,0 +1,106 @@
+---
+slug: dimension
+title: 'Dimension: interactive AI-coworker landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://dimension.dev/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/5e6bb7ce-2176-4671-a7a2-ff51befd2f02.mp4'
+      artifacts:
+        - key: entries/dimension/1/strip.webp
+          bytes: 231780
+          sha256: e1b553a2c438d301de110eb1105232749fbee1e3387b2bb7502827be749de4ac
+          uploaded: true
+      frames: 30
+      duration_ms: 15217
+    - method: both
+      input: https://dimension.dev/
+      artifacts:
+        - key: entries/dimension/2/strip.webp
+          bytes: 264224
+          sha256: 60af2f6a669fc2c8f173baf856e9af60eef2782c44a47cc86b624cec9077319a
+          uploaded: true
+        - key: entries/dimension/2/measure.json
+          bytes: 790
+          sha256: bd6878e8d822fff79ae350b28c43782e4bca01c33826f1fddd53c5e4bbfcb33e
+          uploaded: true
+        - key: entries/dimension/2/screen-1440.png
+          bytes: 440621
+          sha256: 93be2ec8ee9b95a4a95eb95556f8393c502c6ce9cef4e1d666fd6ddf284df561
+          uploaded: true
+        - key: entries/dimension/2/screen-390.png
+          bytes: 134250
+          sha256: 0186540afe7eb13420e959bb57c2ae02b3247f0670fa42455daa4b8d99039077
+          uploaded: true
+media:
+  frames: 30
+  duration_ms: 15217
+roles:
+  - hero
+  - explainer
+  - process
+  - feature
+  - offer
+  - footer
+feel:
+  - light
+  - premium
+  - saas
+  - playful
+  - minimal
+  - depth
+palette:
+  canvas: '#7398d2'
+  ink: '#f7f8fb'
+  accent: '#ef2b2d'
+type:
+  display: rounded neutral sans, medium weight, compact leading
+  body: neutral sans, regular weight, concise interface labels
+motion:
+  devices:
+    - tabs
+    - pan
+    - reveal
+    - stack
+    - spotlight
+  notes: >-
+    Eyeballed from 30 to 36 sampled frames, not measured. The page behaves as a single interactive product simulation
+    rather than a conventional vertical landing page. A cursor selects connected apps, then task panels expand for
+    morning briefing, catch-up, action plans, deep work, inbox, meeting prep, and daily recap. Messages type into dark
+    windows, completion states animate, suggested tasks stack, and a glowing status pill reports what the coworker is
+    doing. Pointer clicks and hover targets are visible in the recording, but exact hit areas, easing,
+    automated-versus-user-driven timing, and keyboard behavior are not measurable.
+ported_from: null
+---
+
+## What it does
+
+An interactive AI-coworker landing page that demonstrates the product by running a simulated workday. Rather than separating features into static sections, it keeps one translucent operating surface in view and lets tasks, messages, plans, and connected apps become the narrative.
+
+## Section roster
+
+1. Winding-down announcement and split hero promise.
+2. Connected-app selector for mail, calendar, chat, files, and notes.
+3. Persistent status pill showing current automated work.
+4. Morning briefing and catch-up message demonstration.
+5. Action-plan creation with suggested tasks and completion states.
+6. Deep-work and inbox sequence.
+7. Meeting-prep and daily-recap states with persistent compact navigation.
+
+## Why it works
+
+The product demonstration and marketing page are the same surface, so the promise of cross-app work becomes concrete immediately. Soft blue-and-peach gradients keep dense interface states calm, while red notification badges provide clear progress cues. The cost is reliance on scripted pointer choreography; without robust accessibility and static fallbacks, the story may be difficult to navigate or understand.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/fbcf9cbb-7c6b-449d-862a-bce521a8ab1d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/5e6bb7ce-2176-4671-a7a2-ff51befd2f02.mp4) supply the complete pointer-led app selection, messaging, task planning, completion, and status choreography.
+- The live capture at https://www.dimension.dev/ supplies the current page and its notice that Dimension is winding down on May 20, 2026, plus responsive screenshots and measured layout.
+- Trust the Refero recording for the full interactive sequence and the live page for current service status.
+

package/entries/dovetail/entry.md

@@ -0,0 +1,108 @@
+---
+slug: dovetail
+title: 'Dovetail: dark customer-insights platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://dovetail.com/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/81283453-1408-4ae1-9955-a4a6bba7cbb0.mp4'
+      artifacts:
+        - key: entries/dovetail/1/strip.webp
+          bytes: 228500
+          sha256: 849adbc8e9d156aa7baa61397486f08f23c742cf1ccc5347485cb6d3d8696e44
+          uploaded: true
+      frames: 36
+      duration_ms: 22333
+    - method: both
+      input: https://dovetail.com/
+      artifacts:
+        - key: entries/dovetail/2/strip.webp
+          bytes: 242304
+          sha256: a3df9244d4f4eff8230014e1cf56f9567fb2927f0c31eed2945cff58e5152bd8
+          uploaded: true
+        - key: entries/dovetail/2/measure.json
+          bytes: 7279
+          sha256: 3ba34913992bef7e90c0d5913ad138643d96f8a5d57dd8f0d049330022d3d3ff
+          uploaded: true
+        - key: entries/dovetail/2/screen-1440.png
+          bytes: 180063
+          sha256: 42bae2e7862302d148c44e112e21d5355b4273294919d33b7313f87f98c10b41
+          uploaded: true
+        - key: entries/dovetail/2/screen-390.png
+          bytes: 46169
+          sha256: 6576d2f0c31b4431ffca9576d1a9587daa7821982d7903fc99ec82e70f00507e
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 22333
+roles:
+  - hero
+  - proof
+  - explainer
+  - capability
+  - feature
+  - testimonial
+  - closing
+  - footer
+feel:
+  - dark
+  - premium
+  - saas
+  - depth
+  - minimal
+  - brutalist
+palette:
+  canvas: '#0a0a0a'
+  ink: '#f5f5f5'
+  accent: '#4e6cff'
+type:
+  display: bold grotesk sans with editorial serif and mono interruptions
+  body: compact neutral sans, regular weight, dense product captions
+motion:
+  devices:
+    - reveal
+    - pin
+    - pan
+    - parallax
+    - stagger
+    - spotlight
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. The hero reveals a blue hand icon inside the headline while faint
+    grid marks drift behind it; logos and product evidence then pan into an ROI proof statement whose metrics stagger
+    across the dark field. Centralize, Analyze, Query, and Act sections alternate pinned copy with product cards that
+    slide, scale, and spotlight active UI regions, followed by a large audience-role list and trust grid before the
+    closing statement. Cursor-like blue markers appear as graphic direction, but actual pointer tracking and hover
+    states cannot be confirmed from the recording.
+ported_from: null
+---
+
+## What it does
+
+Dovetail explains an AI-assisted customer-insights platform through evidence-led claims, integrations, analysis workflows, product surfaces, role-based use cases, trust controls, and customer proof.
+
+## Section roster
+
+1. Dark hero with facts-not-vibes positioning and dual conversion actions.
+2. Customer-logo proof and product overview.
+3. ROI metrics and enterprise testimonial.
+4. Centralize capability with integration constellation.
+5. Analyze feature with dashboards and customer evidence.
+6. Query and Act workflows across chat, search, agents, and documents.
+7. Role-based applications, trust capabilities, customer stories, and closing CTA.
+
+## Why it works
+
+The severe black grid, bright product evidence, and numbered capability sequence make a broad AI platform feel ordered and credible, while testimonials interrupt the technical density with outcomes. The cost to weigh is that the long dark page and repeated product-card choreography can feel dense without strong pacing and accessible contrast checks.
+
+## Sources
+
+- The [Refero style page](https://styles.refero.design/style/108e2695-6970-47d5-b5b0-eea8fc34e048) and its MP4 supply the full capability sequence, product-card choreography, metric reveals, role-list transition, and closing handoff.
+- The live capture at https://dovetail.com/ supplies current positioning, integrations, customer evidence, responsive screenshots, and measured layout.
+- The sources agree on the main structure; the live page is trusted for current product claims and the recording for motion and intermediate UI states.

package/entries/ease-health/entry.md

@@ -0,0 +1,105 @@
+---
+slug: ease-health
+title: 'Ease Health: mint clinical-operations platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://easehealth.com/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/a4599c6d-f344-4f70-8c33-038a01b114e6.mp4'
+      artifacts:
+        - key: entries/ease-health/1/strip.webp
+          bytes: 141318
+          sha256: 5676ddac2501e37817aca5a0d3747163884edde8077f10a7ba859e2e65e846c5
+          uploaded: true
+      frames: 36
+      duration_ms: 21117
+    - method: both
+      input: https://easehealth.com/
+      artifacts:
+        - key: entries/ease-health/2/strip.webp
+          bytes: 107544
+          sha256: abbe0d14ff439fc3bbcb87db5a85165e903ed9a3032ac3d0232d1262e3636b93
+          uploaded: true
+        - key: entries/ease-health/2/measure.json
+          bytes: 11212
+          sha256: 99e7a4efe79cfc8285249bfca535d231244a63b7b879372c3f3317316bcdb39f
+          uploaded: true
+        - key: entries/ease-health/2/screen-1440.png
+          bytes: 144473
+          sha256: 9424ca4255843cb4d52f6a1e89ab0e29477b24b192781465c2829fc33ab189e9
+          uploaded: true
+        - key: entries/ease-health/2/screen-390.png
+          bytes: 34948
+          sha256: 1e68f01e82405362e70901af79bff2bbb4a8e1e63bc017792f947ac5dfc7d872
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 21117
+roles:
+  - hero
+  - proof
+  - explainer
+  - capability
+  - feature
+  - closing
+  - footer
+feel:
+  - light
+  - warm
+  - editorial
+  - minimal
+  - premium
+  - saas
+palette:
+  canvas: '#fbfbf6'
+  ink: '#124728'
+  accent: '#b4ddbf'
+type:
+  display: soft editorial serif, regular weight, generous leading
+  body: neutral sans, regular weight, calm clinical measure
+motion:
+  devices:
+    - reveal
+    - wipe
+    - pan
+    - stagger
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. Mint and powder-blue hero panels reveal patient, clinical, and
+    revenue interface cards before customer logos hand off to a behavioral-health category selector. Thin parallel rules
+    converge into a single line across the problem-to-solution transition. Product cards then pan and stagger through
+    EHR, admissions, and billing examples, followed by quiet expert proof and a mint closing grid. Exact selector
+    interaction, line interpolation, hover states, and responsive timing are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A clinical-operations platform landing page that presents CRM, EHR, and revenue workflows as one calm system. Soft healthcare color, editorial type, and concrete patient records turn an operationally dense product into an approachable care narrative.
+
+## Section roster
+
+1. Minimal navigation and demo action.
+2. Split hero with care outcome, conversion action, and three product-interface cards.
+3. Behavioral-health customer proof and category selector.
+4. Problem statement with financial and claims metrics.
+5. Converging-line transition into the unified system.
+6. Product chapters for clinical records, admissions, and billing.
+7. Expert-built proof, patient-care closing panel, and footer.
+
+## Why it works
+
+The mint palette signals care without defaulting to sterile blue, while serif headlines slow the page and create reassurance. Interface evidence remains large enough to be legible, and the converging-line motif gives the consolidation promise a clear visual metaphor. The cost is that pale panels and fine rules need careful contrast and may lose impact on small screens.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/e9f5e976-53f7-42f5-a882-4e63b3c2f734) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a4599c6d-f344-4f70-8c33-038a01b114e6.mp4) supply the category selector, converging-line transition, product-card sequence, expert proof, and closing layout.
+- The live capture at https://easehealth.com/ supplies current behavioral-health positioning, responsive screenshots, and measured layout.
+- The sources agree closely. Trust the recording for motion continuity and the live page for current copy and product scope.
+

package/entries/factory-ai/entry.md

@@ -0,0 +1,106 @@
+---
+slug: factory-ai
+title: 'Factory: terminal-style agentic-development platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://factory.com/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-23'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/5f549df2-68fd-40b5-9061-19ed52da3077.mp4
+      artifacts:
+        - key: entries/factory-ai/1/strip.webp
+          bytes: 167318
+          sha256: a944233ced26afab9988c8ce3d397e68db08f4ff7d14db9cdaa7de0fa34b9bf2
+          uploaded: true
+      frames: 36
+      duration_ms: 28983
+    - method: both
+      input: https://factory.com/
+      artifacts:
+        - key: entries/factory-ai/2/strip.webp
+          bytes: 208458
+          sha256: d01483962069f239271b616029955084e6949ca6ea8b82d6205ab47520aef343
+          uploaded: true
+        - key: entries/factory-ai/2/measure.json
+          bytes: 11723
+          sha256: 5c1a0867dfd16265094933a65ce10a6b85a1f5dce17a3eee3315f8f13ebeb2f0
+          uploaded: true
+        - key: entries/factory-ai/2/screen-1440.png
+          bytes: 236348
+          sha256: dac204a9325dd05573810e535da79a7f71c2ffadbec2bc7c1de3e188b4d5a1d2
+          uploaded: true
+        - key: entries/factory-ai/2/screen-390.png
+          bytes: 62693
+          sha256: f1eeef630ebfa791daad7c24f8dade540b9f34c70fb77ddad5806e0299d6a1b8
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 28983
+roles:
+  - hero
+  - proof
+  - feature
+  - capability
+  - explainer
+  - closing
+  - footer
+feel:
+  - dark
+  - brutalist
+  - cold
+  - saas
+  - depth
+  - minimal
+palette:
+  canvas: '#080808'
+  ink: '#ededed'
+  accent: '#ed5b2f'
+type:
+  display: wide grotesk sans, bold weight, tight leading
+  body: compact neutral sans and monospace, technical measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - stagger
+    - spotlight
+    - stack
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. The Refero recording uses a black terminal-like canvas where command
+    lines type, product windows rise, and agent workflows pan through planning, coding, review, and governance states.
+    Monochrome metrics and customer marks stagger between dense interface chapters, with orange accents reserved for
+    active controls and calls to action. The current live redesign is predominantly white and materially different.
+    Exact terminal typing, cursor behavior, interactive demos, hover states, and reduced-motion behavior are not
+    measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A recorded agentic-development platform story built like a software terminal, showing how AI agents plan, implement, review, and maintain code. Dense product evidence and austere typography position the system as serious engineering infrastructure rather than a generic assistant.
+
+## Section roster
+
+1. Dark terminal hero and primary product action.
+2. Enterprise and engineering-team proof.
+3. Agent workflow from planning through implementation.
+4. Code, review, governance, and knowledge capabilities.
+5. Product dashboard, automation modules, and integration evidence.
+6. Customer results, operational metrics, and technical resources.
+7. Build-your-software-factory closing prompt and footer.
+
+## Why it works
+
+The terminal aesthetic makes the developer audience and product category clear immediately, while large workflow views demonstrate more than the headline promises. Sparse orange controls create hierarchy inside a nearly monochrome system, and metrics break up long technical passages. The cost is that dense dark UI, code-sized labels, and automated terminal sequences require excellent contrast, responsive simplification, and accessible playback controls.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/13d6fc89-eba2-4724-ac37-20f4f2e5efec) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/5f549df2-68fd-40b5-9061-19ed52da3077.mp4) supply the dark terminal design, agent workflow, product UI, proof, metrics, and closing sequence.
+- The submitted https://factory.ai/ address redirects to https://factory.com/, which supplies the current responsive screenshots and measured layout.
+- The sources represent different design generations: the current live page is a light redesign led by “Make your software improve itself.” Trust the recording for the archived dark motion system and the live site for current positioning.

package/entries/flighty/entry.md

@@ -0,0 +1,105 @@
+---
+slug: flighty
+title: 'Flighty: data-rich flight-tracking product story'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://flighty.com/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/a920b110-3e2c-4c8b-9369-0cd9c7c0daca.mp4
+      artifacts:
+        - key: entries/flighty/1/strip.webp
+          bytes: 291106
+          sha256: 4b35252e922e8bf2f1a197694abad3fd40ff8e4c693208f53c3baa36d435a131
+          uploaded: true
+      frames: 34
+      duration_ms: 17080
+    - method: both
+      input: https://flighty.com/
+      artifacts:
+        - key: entries/flighty/2/strip.webp
+          bytes: 290740
+          sha256: 5e88fa51791225aeacffd022e67f836572afafc7fbd4ab9f6718bb37e58ef012
+          uploaded: true
+        - key: entries/flighty/2/measure.json
+          bytes: 714
+          sha256: 3104cb9250c763a0bacb34c9b81c8b922781023e3a4fa14d62c916e70d1659b8
+          uploaded: true
+        - key: entries/flighty/2/screen-1440.png
+          bytes: 313988
+          sha256: 5508844c335c0d3edfb404db96af5d3d9c32fb43f843ca945077b9ad26c56d85
+          uploaded: true
+        - key: entries/flighty/2/screen-390.png
+          bytes: 159791
+          sha256: 30cce52ae196232db648f28f3e5d6f198887cb39e87befcc70fd915f9914ea28
+          uploaded: true
+media:
+  frames: 34
+  duration_ms: 17080
+roles:
+  - hero
+  - proof
+  - feature
+  - capability
+  - explainer
+  - closing
+  - footer
+feel:
+  - light
+  - dark
+  - premium
+  - saas
+  - depth
+  - cold
+palette:
+  canvas: '#ffffff'
+  ink: '#171624'
+  accent: '#2827b7'
+type:
+  display: bold neutral sans, tight leading
+  body: neutral sans, short data-led product measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - parallax
+    - stagger
+    - stack
+  notes: >-
+    Eyeballed from 34 sampled frames, not measured. Flight maps and alert cards rise around a central phone mockup, then
+    deep violet sections pan through delay predictions, aircraft tracking, and airport intelligence. Press proof and
+    family-sharing examples separate the dark product chapters; compact feature cards stack near the end. Exact map
+    animation, notification timing, swipe behavior, pointer response, and reduced-motion behavior are not measurable
+    from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A flight-tracking app landing page that turns live travel data into clear decisions. A central phone and surrounding alerts show the product's value quickly, while darker chapters make complex airport and route information feel focused.
+
+## Section roster
+
+1. Flight-status hero with phone and real-time alerts.
+2. App awards and press proof.
+3. Delay predictions and aircraft tracking.
+4. Airport and gate intelligence.
+5. Family and friend flight sharing.
+6. Feature cards and travel examples.
+7. Download prompt and footer.
+
+## Why it works
+
+The phone UI and alert examples demonstrate the service immediately, and the light-to-dark chapters separate practical benefits without losing continuity. The cost is that data-rich screens and moving maps need readable crops and reduced-motion support.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/0d0de64c-1891-4984-9e12-8976e042ce11) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a920b110-3e2c-4c8b-9369-0cd9c7c0daca.mp4) supply the phone, map, alert, proof, sharing, and closing sequence.
+- The live capture at https://flighty.com/ supplies current positioning, responsive screenshots, and measured layout.
+- The sources agree on the product system. Trust the recording for motion continuity and the live page for current features and awards.

package/entries/frame-io/entry.md

@@ -0,0 +1,108 @@
+---
+slug: frame-io
+title: 'Frame.io: dark creative-workflow platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://frame.io/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-23'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/983a4e28-7471-4e8e-93ee-12c7a88931f2.mp4
+      artifacts:
+        - key: entries/frame-io/1/strip.webp
+          bytes: 228582
+          sha256: 22ae209fee3004a1c37dd6b10cc7784c9603dc4426875e800b162e496778af69
+          uploaded: true
+      frames: 36
+      duration_ms: 23400
+    - method: both
+      input: https://frame.io/
+      artifacts:
+        - key: entries/frame-io/2/strip.webp
+          bytes: 213704
+          sha256: ccc458910dfdcf2d3411a5640ab7d63c86c1aedfa82169cbe602e6e50e0aceb6
+          uploaded: true
+        - key: entries/frame-io/2/measure.json
+          bytes: 4781
+          sha256: 5ed11f5cad84cc45e76ae22b966773a59b209d8b13081bbf2a99df7e42cdaaf1
+          uploaded: true
+        - key: entries/frame-io/2/screen-1440.png
+          bytes: 502663
+          sha256: 305b572d26330fc3f84b9b384cc62326335062612d29ad0818b4029f112211a4
+          uploaded: true
+        - key: entries/frame-io/2/screen-390.png
+          bytes: 161090
+          sha256: 500df96f8ea96736f947e8a842bd6fcfbbdfc49656b9692d8b81329cd1352f1f
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 23400
+roles:
+  - hero
+  - proof
+  - feature
+  - capability
+  - explainer
+  - testimonial
+  - closing
+  - footer
+feel:
+  - dark
+  - premium
+  - saas
+  - depth
+  - cold
+  - minimal
+palette:
+  canvas: '#090711'
+  ink: '#f3f1fa'
+  accent: '#6c4df7'
+type:
+  display: neutral geometric sans, medium weight, compact leading
+  body: neutral sans, regular weight, concise product measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - parallax
+    - spotlight
+    - stagger
+    - stack
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. A dark product workspace rises behind the hero while violet and cyan
+    light arcs drift across the canvas. Interface panels pan and stack to demonstrate upload, review, approval, and
+    presentation workflows; isolated controls brighten under spotlights before customer stories and pricing cards
+    stagger into place. Large gradient rings bridge chapters without replacing the product evidence. Exact timeline
+    scrubbing, media playback, review-control interaction, hover states, and reduced-motion behavior are not measurable
+    from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A dark creative-workflow landing page that presents Frame.io as one system for moving media from upload through review and delivery. Large, legible product views keep collaboration mechanics visible while cinematic color and customer work give the operational story emotional weight.
+
+## Section roster
+
+1. Product navigation, trial action, and dark hero with workspace preview.
+2. Creative-team positioning and customer-logo proof.
+3. Upload, organize, and media-management workflow.
+4. Review and approval tools with precise comments and playback controls.
+5. Presentation, sharing, and secure delivery capabilities.
+6. Customer stories and production examples.
+7. Plan comparison, start-free closing prompt, and footer.
+
+## Why it works
+
+The page lets product UI carry the explanation, then uses violet light fields to separate stages of the workflow and preserve a premium film-production tone. Full-width interface views make technical features credible, while recognizable customer work supplies human proof. The cost is a dense, low-light presentation that needs disciplined contrast, loading strategy, and responsive cropping to keep controls readable.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/30c3aa18-4323-4448-8ddd-3ca933fe5780) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/983a4e28-7471-4e8e-93ee-12c7a88931f2.mp4) supply the complete product-workspace, upload, review, presentation, customer-proof, plan, and closing sequence.
+- The live capture at https://frame.io/ supplies current positioning, responsive screenshots, and measured layout.
+- The sources agree on the dark product-led system. Trust the recording for intermediate UI and lighting states and the live page for current product language and offers.