@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/dock/captures/2/measure.json

@@ -0,0 +1,206 @@
+{
+  "url": "https://dock.us/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#121722",
+    "accent": "#0068f9",
+    "fontDisplay": "Roobert, sans-serif",
+    "fontBody": "Roobert, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "",
+      "class": "nav--bound",
+      "top": 70,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "section-10",
+      "top": 70,
+      "height": 850,
+      "animations": [
+        {
+          "target": "span.deal-cur deal-cur--cfo is-click",
+          "timeline": "document",
+          "range": null,
+          "duration": 650
+        },
+        {
+          "target": "span.deal-cur deal-cur--cfo is-click",
+          "timeline": "document",
+          "range": null,
+          "duration": 650
+        },
+        {
+          "target": "span.deal-cur deal-cur--ceo is-on",
+          "timeline": "document",
+          "range": null,
+          "duration": 720
+        },
+        {
+          "target": "div.slack-note slack-in",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        }
+      ]
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "_w-full header--bg hide",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-cs--wrapper",
+      "top": 960,
+      "height": 589,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container",
+      "top": 1629,
+      "height": 3266,
+      "animations": [
+        {
+          "target": "div.tabs--tab",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "div.tabs--tab is--active",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "div.feature--documents--sidebar--item",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "div.feature--documents--sidebar--item is--active",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "svg.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "div.flicker",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "div.progress--bar--indicator",
+          "timeline": "document",
+          "range": null,
+          "duration": 5000
+        }
+      ]
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-playbook--wrapper",
+      "top": 4965,
+      "height": 829,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-playbook--wrapper",
+      "top": 5944,
+      "height": 700,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-pipeline--wrapper",
+      "top": 6724,
+      "height": 885,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-integrations--wrapper",
+      "top": 9920,
+      "height": 793,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-security--wrapper",
+      "top": 10863,
+      "height": 740,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container s-get_started--wrapper",
+      "top": 11683,
+      "height": 553,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container c-call_to_action",
+      "top": 12316,
+      "height": 482,
+      "animations": []
+    },
+    {
+      "index": 12,
+      "tag": "section",
+      "id": "",
+      "class": "_w-container c-footer",
+      "top": 12878,
+      "height": 334,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/dock/entry.md

@@ -0,0 +1,62 @@
+---
+slug: dock
+title: 'Dock: revenue enablement platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://dock.us/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-16'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/dock-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 21750
+    - method: both
+      input: https://dock.us/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 21750
+roles: [hero, capability, proof, feature]
+feel: [light, saas, premium, depth, cold]
+palette:
+  canvas: '#ffffff'
+  ink: '#121722'
+  accent: '#0068f9'
+type:
+  display: Roobert, sans-serif
+  body: Roobert, sans-serif
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. The hero introduces a deal-room interface, then the recording pans through success criteria, next steps, and collaborative message states. Individual interactions are not visible.
+ported_from: null
+---
+
+## What it does
+
+Dock presents a revenue-enablement workspace for buyers and sellers to collaborate around a deal.
+
+## Section roster
+
+1. Hero with the revenue-enablement promise and an active deal room.
+2. Success criteria and next-step interface view.
+3. Customer outcomes and proof metrics.
+4. Collaborative message and content views.
+
+## Why it works
+
+The page moves from a simple value statement into a specific shared workspace, so the product is understandable before the proof metrics appear. The very light visual system makes the blue edge treatment do much of the brand work.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://dock.us/ supplies the current site URL and layout reference.

package/entries/dub/captures/2/measure.json

@@ -0,0 +1,37 @@
+{
+  "url": "https://dub.co/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#fafafa",
+    "ink": "#0a0a0a",
+    "accent": "#737373",
+    "fontDisplay": "satoshi, \"satoshi Fallback\", system-ui, sans-serif",
+    "fontBody": "Inter, \"Inter Fallback\", system-ui, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "footer",
+      "id": "",
+      "class": "",
+      "top": 11719,
+      "height": 402,
+      "animations": [
+        {
+          "target": "div.absolute inset-0 m-auto size-2 animate-ping items-center justify-center rounded-full group-hover:animate-none bg-green-500",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        }
+      ]
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/dub/entry.md

@@ -0,0 +1,61 @@
+---
+slug: dub
+title: 'Dub: affiliate management platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://dub.co/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-16'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/dub-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 40983
+    - method: both
+      input: https://dub.co/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 40983
+roles: [hero, feature, proof]
+feel: [light, saas, minimal, cold, depth]
+palette:
+  canvas: '#fafafa'
+  ink: '#0a0a0a'
+  accent: '#737373'
+type:
+  display: satoshi, "satoshi Fallback", system-ui, sans-serif
+  body: Inter, "Inter Fallback", system-ui, sans-serif
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. The partner-program dashboard enters as a central product scene, then the recording changes through overview and payout states while the surrounding hero stays sparse; individual interface triggers are not visible.
+ported_from: null
+---
+
+## What it does
+
+Dub presents a platform for affiliate programs, conversion analytics, and short links.
+
+## Section roster
+
+1. Product-led hero with a central partner-program dashboard.
+2. Overview and payout interface states.
+3. Customer-logo proof field.
+
+## Why it works
+
+The generous near-white surface puts all attention on the product screen, making a complex administrative interface feel calm and credible. Its sparse composition offers little narrative context until the interface changes.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://dub.co/ supplies the current site URL and layout reference.

package/entries/duolingo/captures/2/measure.json

@@ -0,0 +1,138 @@
+{
+  "url": "https://duolingo.com/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#3c3c3c",
+    "accent": "#a5ed6e",
+    "fontDisplay": "duolingo-sans, sans-serif",
+    "fontBody": "duolingo-sans, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "",
+      "class": "_39290",
+      "top": 0,
+      "height": 900,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "div",
+      "id": "",
+      "class": "_2huhH",
+      "top": 900,
+      "height": 3601,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "uU0-M",
+      "top": 900,
+      "height": 2312,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "_3k9io",
+      "top": 996,
+      "height": 530,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "_36L7f _3k9io",
+      "top": 1526,
+      "height": 530,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "_3k9io",
+      "top": 2056,
+      "height": 530,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "_36L7f _3k9io",
+      "top": 2586,
+      "height": 530,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "Gijhh",
+      "top": 3212,
+      "height": 1289,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "LlPOq",
+      "top": 4501,
+      "height": 900,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "",
+      "class": "_3dG3I",
+      "top": 5401,
+      "height": 722,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "section",
+      "id": "",
+      "class": "_3k9io",
+      "top": 5497,
+      "height": 530,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "section",
+      "id": "",
+      "class": "F71XF",
+      "top": 6123,
+      "height": 853,
+      "animations": []
+    },
+    {
+      "index": 12,
+      "tag": "footer",
+      "id": "",
+      "class": "_1nNuk",
+      "top": 6976,
+      "height": 827,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/duolingo/entry.md

@@ -0,0 +1,65 @@
+---
+slug: duolingo
+title: 'Duolingo: playful language-learning landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://duolingo.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-16'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/duolingo-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 37617
+    - method: both
+      input: https://duolingo.com/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 37617
+roles: [hero, explainer, capability, feature, offer, closing, footer]
+feel: [light, playful, minimal, warm]
+palette:
+  canvas: '#ffffff'
+  ink: '#3c3c3c'
+  accent: '#a5ed6e'
+type:
+  display: duolingo-sans, sans-serif
+  body: duolingo-sans, sans-serif
+motion:
+  devices: [reveal, pan, drift, stagger]
+  notes: 'The Refero recording moves in distinct illustrated chapters: character groups and phones enter as a composition, the light-blue app chapter expands around floating icons and devices, and the deep-indigo Super Duolingo panel resets the pace before the closing offer. Objects appear to drift at different speeds while copy and illustration arrive as staged groups. The live capture confirms the same chapter sequence and composition, but no CSS animation inventory or interaction trigger was exposed.'
+ported_from: null
+---
+
+## What it does
+
+Duolingo introduces language learning through a bright, illustration-led product story. It pairs simple benefits with expressive characters, small device scenes, a premium-plan interruption, test and school offers, then a large green conversion close.
+
+## Section roster
+
+1. Minimal header, language selector, and a hero with a character cluster, short promise, and two actions.
+2. “Free. fun. effective.” overview with a phone and progress illustration.
+3. Science, motivation, and personalized-learning chapters, each paired with a distinct character vignette.
+4. Pale-blue “learn anytime, anywhere” app/download scene with phones and floating icons.
+5. Deep-indigo Super Duolingo offer break.
+6. English-test, schools, and ABC product offers.
+7. Large green language-learning close and an extensive multi-column footer.
+
+## Why it works
+
+The page makes an education product feel low-pressure by keeping each idea to a short, friendly headline and one memorable illustration. White space gives the saturated green room to work as the action color, while the pale-blue and indigo chapters make the long page easy to navigate. The repeated mascot world gives many product offers one coherent voice.
+
+## Sources
+
+The Refero Styles page supplied the 37.62-second MP4 at https://images.refero.design/styles/refero.design/video/b8a0d888-eae3-45f1-9ef1-dc4e56c66aef.mp4. It provides the longer illustrated sequence, chapter hand-offs, and Super Duolingo treatment. The live capture at https://duolingo.com/ records the current desktop and mobile layouts, measured Duolingo Sans stack and color tokens, plus the current navigation and footer. Both sources show the same core marketing structure.