@yojahny/wp-design-library 1.1.1 → 1.3.0

package/entries/partiful/entry.md

@@ -0,0 +1,104 @@
+---
+slug: partiful
+title: 'Partiful: playful event-invitation platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://partiful.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/fc92eb58-1002-4f75-ba36-47a0397aca51.mp4
+      artifacts:
+        - key: entries/partiful/1/strip.webp
+          bytes: 320848
+          sha256: 3655f5eb1779ddee43141b0b9bd839201f600347067b04588601725692b0c779
+          uploaded: true
+      frames: 36
+      duration_ms: 26720
+    - method: both
+      input: https://partiful.com/
+      artifacts:
+        - key: entries/partiful/2/strip.webp
+          bytes: 250332
+          sha256: a4b6585921a36ce412aaaa331f781daf9f8d436fd3d38a2756fbc7b9e3010cbb
+          uploaded: true
+        - key: entries/partiful/2/measure.json
+          bytes: 851
+          sha256: 0b34251e7d0390cacce126c6b6844fd57f30a68d25ca223bee5ec960a7113d6c
+          uploaded: true
+        - key: entries/partiful/2/screen-1440.png
+          bytes: 2024185
+          sha256: 5664307a1ad9061b4fcca8b641f549201f9484cc46ecf441a47c19be8ce7b19b
+          uploaded: true
+        - key: entries/partiful/2/screen-390.png
+          bytes: 454621
+          sha256: 08a2dbe10e20e174429ae8db4b99a6b525fb0ea94d551a6057dca34cedf1da88
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 26720
+roles:
+  - hero
+  - feature
+  - proof
+  - capability
+  - explainer
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - warm
+  - depth
+  - saas
+palette:
+  canvas: '#f7f6ff'
+  ink: '#181527'
+  accent: '#a946e7'
+type:
+  display: bold rounded sans, compact leading
+  body: neutral sans, short friendly measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - stagger
+    - stack
+    - marquee
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. A pink-purple party hero gives way to animated invitation cards and
+    a shifting gradient canvas. Card stacks fan through birthdays, event types, RSVP tools, and social proof; press
+    quotations repeat across a moving rail. Product tiles and party photography alternate before the final invitation
+    prompt. Exact template selection, card hover response, carousel dragging, and reduced-motion behavior are not
+    measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A social event platform landing page that demonstrates how a digital invitation can look and how guests respond. Bright gradients, party photography, and colorful template cards make the product feel like the start of the event itself.
+
+## Section roster
+
+1. Party photography hero and create-invite action.
+2. Invitation design examples and customization controls.
+3. Press and user proof.
+4. Event type and template gallery.
+5. RSVP, guest communication, and hosting tools.
+6. Real party imagery and organization features.
+7. App prompt and footer.
+
+## Why it works
+
+The invitation examples act as immediate product evidence while gradients and real people establish a celebratory mood. Short sections let visitors understand the tool without reading a long feature list. The cost is that many moving colorful cards need stable focus order, contrast, and restrained motion on mobile.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/6db1057d-3457-4173-9184-df160415f060) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fc92eb58-1002-4f75-ba36-47a0397aca51.mp4) supply the invitation cards, social proof, product chapters, and closing sequence.
+- The live capture at https://partiful.com/ supplies current event categories, responsive screenshots, and measured layout.
+- The sources agree on the colorful product system. Trust the recording for card motion and the live page for current features.

package/entries/phantom/entry.md

@@ -0,0 +1,105 @@
+---
+slug: phantom
+title: 'Phantom: playful crypto-trading platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://phantom.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/8903f0a2-7b50-4724-a90c-4b9fffd78827.mp4
+      artifacts:
+        - key: entries/phantom/1/strip.webp
+          bytes: 212080
+          sha256: 09a7a841a83b9309e331e0a22094c231415cb53ad94c42870bc2a434374a2fac
+          uploaded: true
+      frames: 35
+      duration_ms: 17500
+    - method: both
+      input: https://phantom.com/
+      artifacts:
+        - key: entries/phantom/2/strip.webp
+          bytes: 239130
+          sha256: 15c710ac9873ea949f3f352944616d91f65e32c10cd28b3f3c64188c145c3042
+          uploaded: true
+        - key: entries/phantom/2/measure.json
+          bytes: 2602
+          sha256: 9244150841020dba93331069b53771ff49a692474d41e86766cb6b48ae8fcc0d
+          uploaded: true
+        - key: entries/phantom/2/screen-1440.png
+          bytes: 216974
+          sha256: 7dc7116caad6ae91067c148c32eef7cfa3923e4ef5590d8aebc49ceb09bc310b
+          uploaded: true
+        - key: entries/phantom/2/screen-390.png
+          bytes: 44089
+          sha256: 8ca8383cc59c904d88c05deb1595081e09bb019459a689d1b9500c956d5fce3c
+          uploaded: true
+media:
+  frames: 35
+  duration_ms: 17500
+roles:
+  - hero
+  - feature
+  - capability
+  - proof
+  - offer
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - premium
+  - minimal
+  - depth
+palette:
+  canvas: '#f3f0ff'
+  ink: '#302447'
+  accent: '#9c83ef'
+type:
+  display: rounded geometric sans, bold weight, compact leading
+  body: neutral sans, regular weight, friendly product measure
+motion:
+  devices:
+    - kinetic
+    - wipe
+    - pan
+    - stack
+    - reveal
+    - parallax
+  notes: >-
+    Eyeballed from 35 sampled frames, not measured. Colorful abstract ribbons fold, slide, and morph around the opening
+    copy before product cards fan into trading, prediction, and token views. Lavender feature chapters pan through buy,
+    swap, spend, send, and save states with playful illustrations and stacked phone frames. A deep-purple security
+    chapter slows the rhythm before the pale download close. Exact ribbon physics, carousel controls, transaction
+    interactions, pointer response, and reduced-motion behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A playful crypto-wallet landing page that frames trading, predictions, payments, and asset management as approachable everyday actions. Soft lavender, friendly illustration, and oversized mobile product cards make a technically complex category feel accessible without losing security proof.
+
+## Section roster
+
+1. Utility navigation and abstract animated hero with download action.
+2. Trading-tools introduction with stacked market and token cards.
+3. Buy, swap, and prediction capabilities.
+4. Spend, send, and save product chapter.
+5. Deep-purple self-custody and security explanation.
+6. Editorial cards for product education and updates.
+7. Download prompt, email capture, social links, and footer.
+
+## Why it works
+
+The abstract hero creates instant motion identity, while consistent lavender surfaces connect very different wallet tasks into one friendly system. Large phone cards reveal enough interface detail to make the product tangible, and the dark security chapter provides needed gravity. The cost is that elastic ribbons and overlapping card stacks need careful performance, focus order, and reduced-motion alternatives.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/6144c3ae-fc57-4efe-b6ed-2b5eab2dc108) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/8903f0a2-7b50-4724-a90c-4b9fffd78827.mp4) supply the animated ribbons, trading cards, spend-send-save sequence, security chapter, editorial cards, and closing flow.
+- The live capture at https://phantom.com/ supplies the current page, responsive screenshots, and measured layout.
+- The live page may show a consent dialog depending on browser state; the captured library strip is unobstructed. Trust the recording for continuous hero and card choreography and the live page for current product claims.

package/entries/podia/entry.md

@@ -0,0 +1,102 @@
+---
+slug: podia
+title: 'Podia: creator business platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.podia.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/fb192965-8ef9-4865-8ba2-f56f963bcd86.mp4
+      artifacts:
+        - key: entries/podia/1/strip.webp
+          bytes: 357222
+          sha256: 46c7dff966c2d12dc8af6aedc48e5807755f548c320fd4ffd8b46136eeea9518
+          uploaded: true
+      frames: 36
+      duration_ms: 21667
+    - method: both
+      input: https://www.podia.com/
+      artifacts:
+        - key: entries/podia/2/strip.webp
+          bytes: 299286
+          sha256: a4e2a8b604bd9f08675c92a7e9ea8d54f0697c0042617705efa8b00d1e02ea2b
+          uploaded: true
+        - key: entries/podia/2/measure.json
+          bytes: 4006
+          sha256: 0b9d9094adde2266a1961e07c3790ca70715daddb3b1484d7da2e8d5dd4974b2
+          uploaded: true
+        - key: entries/podia/2/screen-1440.png
+          bytes: 466602
+          sha256: 4515e628a022d7f521cc14f355f9d593ff121b7dfd3dbe37b304a780658adfcc
+          uploaded: true
+        - key: entries/podia/2/screen-390.png
+          bytes: 153885
+          sha256: 44df399f54c640df87753c9c8d5a219c73f633f03f13ba2abeadea1612798572
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 21667
+roles:
+  - hero
+  - proof
+  - explainer
+  - capability
+  - feature
+  - testimonial
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - saas
+  - warm
+  - editorial
+palette:
+  canvas: '#fffaf0'
+  ink: '#242221'
+  accent: '#f5c52b'
+type:
+  display: oversized friendly grotesk, bold weight
+  body: neutral sans, conversational creator-business measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - stagger
+    - stack
+    - count
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. A bold white hero with yellow accents reveals creator portraits and
+    large proof figures. Interface windows for community, email, courses, coaching, and website tools stack through
+    alternating pastel chapters; testimonials and a trial action close the journey.
+ported_from: null
+---
+
+## What it does
+
+A creator-business landing page that presents courses, community, coaching, email, and a website as one connected system. The page balances friendly people photography with concrete interface examples.
+
+## Section roster
+
+1. Creator promise and free-trial action.
+2. Creator earnings and customer counts.
+3. All-in-one business explanation.
+4. Community and email product examples.
+5. Course, coaching, and website chapters.
+6. Testimonials and final trial action.
+
+## Why it works
+
+Proof figures establish scale early, then large product panels demonstrate how the tools fit together. The cost is that many pastel UI windows and counters need careful hierarchy on narrow screens.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/342f1c3b-a123-49b6-a980-3491bc7793db) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fb192965-8ef9-4865-8ba2-f56f963bcd86.mp4) supply the sampled motion and section sequence.
+- The live capture at https://www.podia.com/ supplies current copy, responsive screenshots, and measured layout.
+- The current live site retains the all-in-one creator message but has updated proof figures and interface examples. Trust the recording for sequence and the live page for current numbers.

package/entries/posthog/entry.md

@@ -0,0 +1,101 @@
+---
+slug: posthog
+title: 'PostHog: playful developer-analytics platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://posthog.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/86dc175b-fd41-405a-960b-4400d250540e.mp4
+      artifacts:
+        - key: entries/posthog/1/strip.webp
+          bytes: 182992
+          sha256: 41bf7a215cdcee44b9cd758dd14118f903059e77535fbbb4485fdbea68931d01
+          uploaded: true
+      frames: 13
+      duration_ms: 6650
+    - method: both
+      input: https://posthog.com/
+      artifacts:
+        - key: entries/posthog/2/strip.webp
+          bytes: 476606
+          sha256: 4bc75a2a6765381e9751ba764bf7e9dff139857550f75eb3e5dbc69888483130
+          uploaded: true
+        - key: entries/posthog/2/measure.json
+          bytes: 2277
+          sha256: 5f9277a4665ba3bbd382695bb2a578921bcae362bc4f25ddba73b2272f0da463
+          uploaded: true
+        - key: entries/posthog/2/screen-1440.png
+          bytes: 544785
+          sha256: 03bcf2877daa16698ee7e45529991fd6d712df7389d571f1ee9fd7fd38c58e8f
+          uploaded: true
+        - key: entries/posthog/2/screen-390.png
+          bytes: 127819
+          sha256: 3bac37abd600d61f7daae468ce8138eec2dd2b4e30e86b9f6194a529cddd68fa
+          uploaded: true
+media:
+  frames: 13
+  duration_ms: 6650
+roles:
+  - hero
+  - capability
+  - feature
+  - proof
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - saas
+  - brutalist
+  - depth
+palette:
+  canvas: '#d9e6b8'
+  ink: '#182016'
+  accent: '#f7a832'
+type:
+  display: bold neutral sans, compact leading
+  body: small neutral sans and monospace, developer-product measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - stagger
+    - stack
+  notes: >-
+    Eyeballed from 13 sampled frames, not measured. The short recording concentrates on a desk-like green canvas with
+    product panels, setup steps, and illustrated controls. Windows stack and stagger around the primary action, making
+    the product interface itself the visual center. The live page retains the playful desktop metaphor but now
+    emphasizes a self-driving product story. Exact panel dragging, simulated setup flow, pointer behavior, and
+    reduced-motion behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A developer analytics landing page that presents the product as an approachable working desktop. Layered interface windows and small playful illustrations make a broad technical tool set feel explorable.
+
+## Section roster
+
+1. Desktop-like hero and product claim.
+2. Setup wizard and getting-started actions.
+3. Product interface windows and feature examples.
+4. Developer workflow and terminal path.
+5. Team proof and product links.
+6. Closing setup action and footer navigation.
+
+## Why it works
+
+Showing the interface immediately reduces abstraction, while the soft green canvas and playful controls make technical adoption less intimidating. The cost is that multiple small overlapping windows need a clear reading order and mobile simplification.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/56cd3725-3ff0-459e-894d-5da58d1fc549) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/86dc175b-fd41-405a-960b-4400d250540e.mp4) supply the sampled desktop, interface, and setup movement.
+- The live capture at https://posthog.com/ supplies the current self-driving product positioning, responsive screenshots, and measured layout.
+- The short recording covers only the opening product presentation. Trust the live site for current scope and later content.

package/entries/redbrick-coffee/entry.md

@@ -0,0 +1,98 @@
+---
+slug: redbrick-coffee
+title: 'Redbrick Coffee: expressive retail editorial'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://redbrick.coffee/
+  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/a96dc854-f163-4261-b506-bc6d0a8e96ae.mp4
+      artifacts:
+        - key: entries/redbrick-coffee/1/strip.webp
+          bytes: 251862
+          sha256: 73ee800ea5ec866a9c8512ee680f5d1808e0792455ea02507d9ade14d2101b65
+          uploaded: true
+      frames: 20
+      duration_ms: 10133
+    - method: both
+      input: https://redbrick.coffee/
+      artifacts:
+        - key: entries/redbrick-coffee/2/strip.webp
+          bytes: 383530
+          sha256: 736682fc274f29c913d90c6c5efb34dfbb23bb3989495ac9b61f1286b7da091a
+          uploaded: true
+        - key: entries/redbrick-coffee/2/measure.json
+          bytes: 3400
+          sha256: 61ca4984febd2325b0b012934236ae24c0349da2226bfbae4934a601b9a0aae7
+          uploaded: true
+        - key: entries/redbrick-coffee/2/screen-1440.png
+          bytes: 689952
+          sha256: c96bbac643fd4623cd5a814c6087024e7b96aeff49b8c548764a0fb2ca8a358a
+          uploaded: true
+        - key: entries/redbrick-coffee/2/screen-390.png
+          bytes: 186827
+          sha256: c53021b24c7e1ea14f91f907370b1bfcd07cdd0f3e1f892e3330d6ef8ac23c61
+          uploaded: true
+media:
+  frames: 20
+  duration_ms: 10133
+roles:
+  - hero
+  - feature
+  - offer
+  - explainer
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - editorial
+  - warm
+  - premium
+palette:
+  canvas: '#ffffff'
+  ink: '#e43132'
+  accent: '#ef3334'
+type:
+  display: oversized high-contrast serif, light weight, generous scale
+  body: compact neutral sans, editorial product measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - stagger
+    - marquee
+  notes: >-
+    Eyeballed from 20 sampled frames, not measured. A huge red serif hero sits beside styled coffee imagery, then pastel
+    bag tiles pan across blend and single-origin rows. Subscriptions, barista training, and wholesale imagery reveal in
+    alternating editorial columns; the recording shows an earlier product mix than the current live hero.
+ported_from: null
+---
+
+## What it does
+
+A coffee commerce landing page that turns blends, subscriptions, merchandise, and wholesale services into a bright editorial catalog. Red typography provides a distinctive system while product photography keeps the buying paths concrete.
+
+## Section roster
+
+1. Oversized red coffee headline and hero photography.
+2. Color-coded blend and single-origin product rows.
+3. Subscription and merchandise sections.
+4. Barista training and wholesale stories.
+5. Email capture and footer.
+
+## Why it works
+
+The strong red system makes every section recognizably part of one brand, while pastel packs make product choice quick to scan. The cost is that very large serif lines and sticky navigation need careful mobile cropping and contrast.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/9307193e-7ce3-48c1-b650-8ab77aa83c3f) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a96dc854-f163-4261-b506-bc6d0a8e96ae.mp4) supply the sampled motion and section sequence.
+- The live capture at https://redbrick.coffee/ supplies current copy, responsive screenshots, and measured layout.
+- The live hero now features people and merchandise, while the recording starts with a styled product still. Trust the recording for the sampled motion and the live capture for current product assortment.

package/entries/samara/entry.md

@@ -0,0 +1,107 @@
+---
+slug: samara
+title: 'Samara: warm architectural ADU showcase'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://samara.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/104d32b8-cce2-4649-9403-52d859992090.mp4
+      artifacts:
+        - key: entries/samara/1/strip.webp
+          bytes: 396266
+          sha256: 3c22a4fbba9fc4f1fec2fa63d0bab5649164e2b11f374e1c715eaf0147386722
+          uploaded: true
+      frames: 36
+      duration_ms: 31040
+    - method: both
+      input: https://samara.com/
+      artifacts:
+        - key: entries/samara/2/strip.webp
+          bytes: 639892
+          sha256: 7955604a6c5331143a7a41c57657f433d54ddfc6c96a8294fc288790c9be6512
+          uploaded: true
+        - key: entries/samara/2/measure.json
+          bytes: 656
+          sha256: 7bc9a53f6e3ce5981e7d8bb32f628156b485687b7c48e0c439f38dfba57d68eb
+          uploaded: true
+        - key: entries/samara/2/screen-1440.png
+          bytes: 1366986
+          sha256: 8d56000c95bae054cee4617742b310b33de168bb2b743893b99d22f059c49735
+          uploaded: true
+        - key: entries/samara/2/screen-390.png
+          bytes: 334684
+          sha256: 71bf711d1ef4b1a991cf948a9d8c1dbed780356a572852bf6d9116f8bc869e43
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 31040
+roles:
+  - hero
+  - explainer
+  - feature
+  - capability
+  - proof
+  - offer
+  - closing
+  - footer
+feel:
+  - light
+  - warm
+  - premium
+  - editorial
+  - minimal
+  - depth
+palette:
+  canvas: '#f9f8f4'
+  ink: '#20201c'
+  accent: '#1693dd'
+type:
+  display: large clean grotesk, light weight, spacious leading
+  body: neutral sans, calm architectural measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - parallax
+    - stagger
+    - tabs
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. A wide home photograph anchors the opening before a small blue
+    accent tracks navigation and calls to action. Architectural images pan between model descriptions, a lifestyle film,
+    and a house-size selector; product elevations, interiors, and process details reveal in measured chapters. The
+    current live home page has broader Backyard and Locale navigation than the recorded Backyard-focused page. Exact
+    model-selector interaction, film timing, pointer response, and reduced-motion behavior are not measurable from
+    sampled frames.
+ported_from: null
+---
+
+## What it does
+
+An architectural housing page that sells a customizable backyard home through real environments, model choices, and a visible buying process. Warm photography carries the aspiration while clean diagrams and concise steps make the purchase feel manageable.
+
+## Section roster
+
+1. Landscape home hero and main action.
+2. Backyard ADU premise and lifestyle imagery.
+3. Exterior and interior design details.
+4. Model and floor-plan selector.
+5. Flexible uses and resident stories.
+6. Delivery, site, and purchase process.
+7. Design consultation prompt and footer.
+
+## Why it works
+
+The housing imagery makes scale and material quality tangible, while the model selector and process sections answer practical questions at the right time. The cost is that full-width photography and subtle copy need careful mobile cropping and contrast.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/934a61aa-50ff-4e90-852b-4ad0b8262d54) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/104d32b8-cce2-4649-9403-52d859992090.mp4) supply the Backyard product story, model chooser, design details, process, and close.
+- The submitted https://samara.com/ redirects to https://www.samara.com/, which supplies current responsive screenshots and measured layout.
+- The current live home page adds broader Locale and multifamily paths. Trust the recording for the Backyard motion sequence and the live page for current product scope.