@yojahny/wp-design-library 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/entries/aker/entry.md +107 -0
  2. package/entries/amrit-palace/entry.md +105 -0
  3. package/entries/apple-airpods-5/entry.md +110 -0
  4. package/entries/apple-airpods-pro/entry.md +106 -0
  5. package/entries/apple-watch-se-3/entry.md +107 -0
  6. package/entries/apple-watch-series-12/entry.md +108 -0
  7. package/entries/arsenijs-fabrica/entry.md +100 -0
  8. package/entries/augen-pro/entry.md +100 -0
  9. package/entries/auros/entry.md +110 -0
  10. package/entries/awe-network/entry.md +101 -0
  11. package/entries/ayocin/entry.md +101 -0
  12. package/entries/bmw/entry.md +101 -0
  13. package/entries/busuu/entry.md +100 -0
  14. package/entries/caldera/entry.md +106 -0
  15. package/entries/calendly/entry.md +106 -0
  16. package/entries/custo/entry.md +100 -0
  17. package/entries/dayos-ai/entry.md +109 -0
  18. package/entries/dimension/entry.md +106 -0
  19. package/entries/dovetail/entry.md +108 -0
  20. package/entries/ease-health/entry.md +105 -0
  21. package/entries/factory-ai/entry.md +106 -0
  22. package/entries/flighty/entry.md +105 -0
  23. package/entries/frame-io/entry.md +108 -0
  24. package/entries/hungry-tiger/entry.md +106 -0
  25. package/entries/hyer-aviation/entry.md +108 -0
  26. package/entries/impilo/entry.md +108 -0
  27. package/entries/monad/entry.md +108 -0
  28. package/entries/n8n/entry.md +108 -0
  29. package/entries/palais/entry.md +100 -0
  30. package/entries/partiful/entry.md +104 -0
  31. package/entries/phantom/entry.md +105 -0
  32. package/entries/podia/entry.md +102 -0
  33. package/entries/posthog/entry.md +101 -0
  34. package/entries/redbrick-coffee/entry.md +98 -0
  35. package/entries/samara/entry.md +107 -0
  36. package/entries/sauce-labs/entry.md +110 -0
  37. package/entries/seline-analytics/entry.md +106 -0
  38. package/entries/sequel/entry.md +104 -0
  39. package/entries/slash/entry.md +110 -0
  40. package/entries/supabase/entry.md +107 -0
  41. package/entries/t1-energy/entry.md +101 -0
  42. package/entries/vana/entry.md +100 -0
  43. package/entries/veed/entry.md +98 -0
  44. package/entries/webflow/entry.md +108 -0
  45. package/entries/zkpass/entry.md +103 -0
  46. package/package.json +1 -1
@@ -0,0 +1,105 @@
1
+ ---
2
+ slug: phantom
3
+ title: 'Phantom: playful crypto-trading platform'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://phantom.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-23'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/8903f0a2-7b50-4724-a90c-4b9fffd78827.mp4
16
+ artifacts:
17
+ - key: entries/phantom/1/strip.webp
18
+ bytes: 212080
19
+ sha256: 09a7a841a83b9309e331e0a22094c231415cb53ad94c42870bc2a434374a2fac
20
+ uploaded: true
21
+ frames: 35
22
+ duration_ms: 17500
23
+ - method: both
24
+ input: https://phantom.com/
25
+ artifacts:
26
+ - key: entries/phantom/2/strip.webp
27
+ bytes: 239130
28
+ sha256: 15c710ac9873ea949f3f352944616d91f65e32c10cd28b3f3c64188c145c3042
29
+ uploaded: true
30
+ - key: entries/phantom/2/measure.json
31
+ bytes: 2602
32
+ sha256: 9244150841020dba93331069b53771ff49a692474d41e86766cb6b48ae8fcc0d
33
+ uploaded: true
34
+ - key: entries/phantom/2/screen-1440.png
35
+ bytes: 216974
36
+ sha256: 7dc7116caad6ae91067c148c32eef7cfa3923e4ef5590d8aebc49ceb09bc310b
37
+ uploaded: true
38
+ - key: entries/phantom/2/screen-390.png
39
+ bytes: 44089
40
+ sha256: 8ca8383cc59c904d88c05deb1595081e09bb019459a689d1b9500c956d5fce3c
41
+ uploaded: true
42
+ media:
43
+ frames: 35
44
+ duration_ms: 17500
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - capability
49
+ - proof
50
+ - offer
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - light
55
+ - playful
56
+ - premium
57
+ - minimal
58
+ - depth
59
+ palette:
60
+ canvas: '#f3f0ff'
61
+ ink: '#302447'
62
+ accent: '#9c83ef'
63
+ type:
64
+ display: rounded geometric sans, bold weight, compact leading
65
+ body: neutral sans, regular weight, friendly product measure
66
+ motion:
67
+ devices:
68
+ - kinetic
69
+ - wipe
70
+ - pan
71
+ - stack
72
+ - reveal
73
+ - parallax
74
+ notes: >-
75
+ Eyeballed from 35 sampled frames, not measured. Colorful abstract ribbons fold, slide, and morph around the opening
76
+ copy before product cards fan into trading, prediction, and token views. Lavender feature chapters pan through buy,
77
+ swap, spend, send, and save states with playful illustrations and stacked phone frames. A deep-purple security
78
+ chapter slows the rhythm before the pale download close. Exact ribbon physics, carousel controls, transaction
79
+ interactions, pointer response, and reduced-motion behavior are not measurable from sampled frames.
80
+ ported_from: null
81
+ ---
82
+
83
+ ## What it does
84
+
85
+ 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.
86
+
87
+ ## Section roster
88
+
89
+ 1. Utility navigation and abstract animated hero with download action.
90
+ 2. Trading-tools introduction with stacked market and token cards.
91
+ 3. Buy, swap, and prediction capabilities.
92
+ 4. Spend, send, and save product chapter.
93
+ 5. Deep-purple self-custody and security explanation.
94
+ 6. Editorial cards for product education and updates.
95
+ 7. Download prompt, email capture, social links, and footer.
96
+
97
+ ## Why it works
98
+
99
+ 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.
100
+
101
+ ## Sources
102
+
103
+ - [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.
104
+ - The live capture at https://phantom.com/ supplies the current page, responsive screenshots, and measured layout.
105
+ - 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.
@@ -0,0 +1,102 @@
1
+ ---
2
+ slug: podia
3
+ title: 'Podia: creator business platform'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.podia.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/fb192965-8ef9-4865-8ba2-f56f963bcd86.mp4
16
+ artifacts:
17
+ - key: entries/podia/1/strip.webp
18
+ bytes: 357222
19
+ sha256: 46c7dff966c2d12dc8af6aedc48e5807755f548c320fd4ffd8b46136eeea9518
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 21667
23
+ - method: both
24
+ input: https://www.podia.com/
25
+ artifacts:
26
+ - key: entries/podia/2/strip.webp
27
+ bytes: 299286
28
+ sha256: a4e2a8b604bd9f08675c92a7e9ea8d54f0697c0042617705efa8b00d1e02ea2b
29
+ uploaded: true
30
+ - key: entries/podia/2/measure.json
31
+ bytes: 4006
32
+ sha256: 0b9d9094adde2266a1961e07c3790ca70715daddb3b1484d7da2e8d5dd4974b2
33
+ uploaded: true
34
+ - key: entries/podia/2/screen-1440.png
35
+ bytes: 466602
36
+ sha256: 4515e628a022d7f521cc14f355f9d593ff121b7dfd3dbe37b304a780658adfcc
37
+ uploaded: true
38
+ - key: entries/podia/2/screen-390.png
39
+ bytes: 153885
40
+ sha256: 44df399f54c640df87753c9c8d5a219c73f633f03f13ba2abeadea1612798572
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 21667
45
+ roles:
46
+ - hero
47
+ - proof
48
+ - explainer
49
+ - capability
50
+ - feature
51
+ - testimonial
52
+ - closing
53
+ - footer
54
+ feel:
55
+ - light
56
+ - playful
57
+ - saas
58
+ - warm
59
+ - editorial
60
+ palette:
61
+ canvas: '#fffaf0'
62
+ ink: '#242221'
63
+ accent: '#f5c52b'
64
+ type:
65
+ display: oversized friendly grotesk, bold weight
66
+ body: neutral sans, conversational creator-business measure
67
+ motion:
68
+ devices:
69
+ - reveal
70
+ - pan
71
+ - stagger
72
+ - stack
73
+ - count
74
+ notes: >-
75
+ Eyeballed from 36 sampled frames, not measured. A bold white hero with yellow accents reveals creator portraits and
76
+ large proof figures. Interface windows for community, email, courses, coaching, and website tools stack through
77
+ alternating pastel chapters; testimonials and a trial action close the journey.
78
+ ported_from: null
79
+ ---
80
+
81
+ ## What it does
82
+
83
+ 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.
84
+
85
+ ## Section roster
86
+
87
+ 1. Creator promise and free-trial action.
88
+ 2. Creator earnings and customer counts.
89
+ 3. All-in-one business explanation.
90
+ 4. Community and email product examples.
91
+ 5. Course, coaching, and website chapters.
92
+ 6. Testimonials and final trial action.
93
+
94
+ ## Why it works
95
+
96
+ 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.
97
+
98
+ ## Sources
99
+
100
+ - [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.
101
+ - The live capture at https://www.podia.com/ supplies current copy, responsive screenshots, and measured layout.
102
+ - 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.
@@ -0,0 +1,101 @@
1
+ ---
2
+ slug: posthog
3
+ title: 'PostHog: playful developer-analytics platform'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://posthog.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/86dc175b-fd41-405a-960b-4400d250540e.mp4
16
+ artifacts:
17
+ - key: entries/posthog/1/strip.webp
18
+ bytes: 182992
19
+ sha256: 41bf7a215cdcee44b9cd758dd14118f903059e77535fbbb4485fdbea68931d01
20
+ uploaded: true
21
+ frames: 13
22
+ duration_ms: 6650
23
+ - method: both
24
+ input: https://posthog.com/
25
+ artifacts:
26
+ - key: entries/posthog/2/strip.webp
27
+ bytes: 476606
28
+ sha256: 4bc75a2a6765381e9751ba764bf7e9dff139857550f75eb3e5dbc69888483130
29
+ uploaded: true
30
+ - key: entries/posthog/2/measure.json
31
+ bytes: 2277
32
+ sha256: 5f9277a4665ba3bbd382695bb2a578921bcae362bc4f25ddba73b2272f0da463
33
+ uploaded: true
34
+ - key: entries/posthog/2/screen-1440.png
35
+ bytes: 544785
36
+ sha256: 03bcf2877daa16698ee7e45529991fd6d712df7389d571f1ee9fd7fd38c58e8f
37
+ uploaded: true
38
+ - key: entries/posthog/2/screen-390.png
39
+ bytes: 127819
40
+ sha256: 3bac37abd600d61f7daae468ce8138eec2dd2b4e30e86b9f6194a529cddd68fa
41
+ uploaded: true
42
+ media:
43
+ frames: 13
44
+ duration_ms: 6650
45
+ roles:
46
+ - hero
47
+ - capability
48
+ - feature
49
+ - proof
50
+ - closing
51
+ - footer
52
+ feel:
53
+ - light
54
+ - playful
55
+ - saas
56
+ - brutalist
57
+ - depth
58
+ palette:
59
+ canvas: '#d9e6b8'
60
+ ink: '#182016'
61
+ accent: '#f7a832'
62
+ type:
63
+ display: bold neutral sans, compact leading
64
+ body: small neutral sans and monospace, developer-product measure
65
+ motion:
66
+ devices:
67
+ - reveal
68
+ - pan
69
+ - stagger
70
+ - stack
71
+ notes: >-
72
+ Eyeballed from 13 sampled frames, not measured. The short recording concentrates on a desk-like green canvas with
73
+ product panels, setup steps, and illustrated controls. Windows stack and stagger around the primary action, making
74
+ the product interface itself the visual center. The live page retains the playful desktop metaphor but now
75
+ emphasizes a self-driving product story. Exact panel dragging, simulated setup flow, pointer behavior, and
76
+ reduced-motion behavior are not measurable from sampled frames.
77
+ ported_from: null
78
+ ---
79
+
80
+ ## What it does
81
+
82
+ 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.
83
+
84
+ ## Section roster
85
+
86
+ 1. Desktop-like hero and product claim.
87
+ 2. Setup wizard and getting-started actions.
88
+ 3. Product interface windows and feature examples.
89
+ 4. Developer workflow and terminal path.
90
+ 5. Team proof and product links.
91
+ 6. Closing setup action and footer navigation.
92
+
93
+ ## Why it works
94
+
95
+ 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.
96
+
97
+ ## Sources
98
+
99
+ - [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.
100
+ - The live capture at https://posthog.com/ supplies the current self-driving product positioning, responsive screenshots, and measured layout.
101
+ - The short recording covers only the opening product presentation. Trust the live site for current scope and later content.
@@ -0,0 +1,98 @@
1
+ ---
2
+ slug: redbrick-coffee
3
+ title: 'Redbrick Coffee: expressive retail editorial'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://redbrick.coffee/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/a96dc854-f163-4261-b506-bc6d0a8e96ae.mp4
16
+ artifacts:
17
+ - key: entries/redbrick-coffee/1/strip.webp
18
+ bytes: 251862
19
+ sha256: 73ee800ea5ec866a9c8512ee680f5d1808e0792455ea02507d9ade14d2101b65
20
+ uploaded: true
21
+ frames: 20
22
+ duration_ms: 10133
23
+ - method: both
24
+ input: https://redbrick.coffee/
25
+ artifacts:
26
+ - key: entries/redbrick-coffee/2/strip.webp
27
+ bytes: 383530
28
+ sha256: 736682fc274f29c913d90c6c5efb34dfbb23bb3989495ac9b61f1286b7da091a
29
+ uploaded: true
30
+ - key: entries/redbrick-coffee/2/measure.json
31
+ bytes: 3400
32
+ sha256: 61ca4984febd2325b0b012934236ae24c0349da2226bfbae4934a601b9a0aae7
33
+ uploaded: true
34
+ - key: entries/redbrick-coffee/2/screen-1440.png
35
+ bytes: 689952
36
+ sha256: c96bbac643fd4623cd5a814c6087024e7b96aeff49b8c548764a0fb2ca8a358a
37
+ uploaded: true
38
+ - key: entries/redbrick-coffee/2/screen-390.png
39
+ bytes: 186827
40
+ sha256: c53021b24c7e1ea14f91f907370b1bfcd07cdd0f3e1f892e3330d6ef8ac23c61
41
+ uploaded: true
42
+ media:
43
+ frames: 20
44
+ duration_ms: 10133
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - offer
49
+ - explainer
50
+ - closing
51
+ - footer
52
+ feel:
53
+ - light
54
+ - playful
55
+ - editorial
56
+ - warm
57
+ - premium
58
+ palette:
59
+ canvas: '#ffffff'
60
+ ink: '#e43132'
61
+ accent: '#ef3334'
62
+ type:
63
+ display: oversized high-contrast serif, light weight, generous scale
64
+ body: compact neutral sans, editorial product measure
65
+ motion:
66
+ devices:
67
+ - reveal
68
+ - pan
69
+ - stagger
70
+ - marquee
71
+ notes: >-
72
+ Eyeballed from 20 sampled frames, not measured. A huge red serif hero sits beside styled coffee imagery, then pastel
73
+ bag tiles pan across blend and single-origin rows. Subscriptions, barista training, and wholesale imagery reveal in
74
+ alternating editorial columns; the recording shows an earlier product mix than the current live hero.
75
+ ported_from: null
76
+ ---
77
+
78
+ ## What it does
79
+
80
+ 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.
81
+
82
+ ## Section roster
83
+
84
+ 1. Oversized red coffee headline and hero photography.
85
+ 2. Color-coded blend and single-origin product rows.
86
+ 3. Subscription and merchandise sections.
87
+ 4. Barista training and wholesale stories.
88
+ 5. Email capture and footer.
89
+
90
+ ## Why it works
91
+
92
+ 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.
93
+
94
+ ## Sources
95
+
96
+ - [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.
97
+ - The live capture at https://redbrick.coffee/ supplies current copy, responsive screenshots, and measured layout.
98
+ - 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.
@@ -0,0 +1,107 @@
1
+ ---
2
+ slug: samara
3
+ title: 'Samara: warm architectural ADU showcase'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://samara.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/104d32b8-cce2-4649-9403-52d859992090.mp4
16
+ artifacts:
17
+ - key: entries/samara/1/strip.webp
18
+ bytes: 396266
19
+ sha256: 3c22a4fbba9fc4f1fec2fa63d0bab5649164e2b11f374e1c715eaf0147386722
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 31040
23
+ - method: both
24
+ input: https://samara.com/
25
+ artifacts:
26
+ - key: entries/samara/2/strip.webp
27
+ bytes: 639892
28
+ sha256: 7955604a6c5331143a7a41c57657f433d54ddfc6c96a8294fc288790c9be6512
29
+ uploaded: true
30
+ - key: entries/samara/2/measure.json
31
+ bytes: 656
32
+ sha256: 7bc9a53f6e3ce5981e7d8bb32f628156b485687b7c48e0c439f38dfba57d68eb
33
+ uploaded: true
34
+ - key: entries/samara/2/screen-1440.png
35
+ bytes: 1366986
36
+ sha256: 8d56000c95bae054cee4617742b310b33de168bb2b743893b99d22f059c49735
37
+ uploaded: true
38
+ - key: entries/samara/2/screen-390.png
39
+ bytes: 334684
40
+ sha256: 71bf711d1ef4b1a991cf948a9d8c1dbed780356a572852bf6d9116f8bc869e43
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 31040
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - feature
49
+ - capability
50
+ - proof
51
+ - offer
52
+ - closing
53
+ - footer
54
+ feel:
55
+ - light
56
+ - warm
57
+ - premium
58
+ - editorial
59
+ - minimal
60
+ - depth
61
+ palette:
62
+ canvas: '#f9f8f4'
63
+ ink: '#20201c'
64
+ accent: '#1693dd'
65
+ type:
66
+ display: large clean grotesk, light weight, spacious leading
67
+ body: neutral sans, calm architectural measure
68
+ motion:
69
+ devices:
70
+ - reveal
71
+ - pan
72
+ - parallax
73
+ - stagger
74
+ - tabs
75
+ notes: >-
76
+ Eyeballed from 36 sampled frames, not measured. A wide home photograph anchors the opening before a small blue
77
+ accent tracks navigation and calls to action. Architectural images pan between model descriptions, a lifestyle film,
78
+ and a house-size selector; product elevations, interiors, and process details reveal in measured chapters. The
79
+ current live home page has broader Backyard and Locale navigation than the recorded Backyard-focused page. Exact
80
+ model-selector interaction, film timing, pointer response, and reduced-motion behavior are not measurable from
81
+ sampled frames.
82
+ ported_from: null
83
+ ---
84
+
85
+ ## What it does
86
+
87
+ 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.
88
+
89
+ ## Section roster
90
+
91
+ 1. Landscape home hero and main action.
92
+ 2. Backyard ADU premise and lifestyle imagery.
93
+ 3. Exterior and interior design details.
94
+ 4. Model and floor-plan selector.
95
+ 5. Flexible uses and resident stories.
96
+ 6. Delivery, site, and purchase process.
97
+ 7. Design consultation prompt and footer.
98
+
99
+ ## Why it works
100
+
101
+ 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.
102
+
103
+ ## Sources
104
+
105
+ - [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.
106
+ - The submitted https://samara.com/ redirects to https://www.samara.com/, which supplies current responsive screenshots and measured layout.
107
+ - 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.
@@ -0,0 +1,110 @@
1
+ ---
2
+ slug: sauce-labs
3
+ title: 'Sauce Labs: continuous-quality platform'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://saucelabs.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-22'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: 'https://images.refero.design/styles/refero.design/video/afdb4e59-2d97-43f4-8102-b93c8395353b.mp4'
16
+ artifacts:
17
+ - key: entries/sauce-labs/1/strip.webp
18
+ bytes: 216994
19
+ sha256: cf173f18cbf989c688473773a51226373ae5d2d7e78bfa981b53bd7f7f8698f3
20
+ uploaded: true
21
+ frames: 24
22
+ duration_ms: 11800
23
+ - method: both
24
+ input: https://saucelabs.com/
25
+ artifacts:
26
+ - key: entries/sauce-labs/2/strip.webp
27
+ bytes: 343474
28
+ sha256: dda46e611b1af2785d1ea498c4d75ac5ffca5464ac447707fc643daae089a215
29
+ uploaded: true
30
+ - key: entries/sauce-labs/2/measure.json
31
+ bytes: 3379
32
+ sha256: 021b632b9d2f241907b4a8e124bec3c007f4f02bada8ecf3f3be21a27ce9db82
33
+ uploaded: true
34
+ - key: entries/sauce-labs/2/screen-1440.png
35
+ bytes: 372576
36
+ sha256: 49f608c53013d7405caef6288cb8fc610bbb4747bc71cbc4b37d877fcf370f7b
37
+ uploaded: true
38
+ - key: entries/sauce-labs/2/screen-390.png
39
+ bytes: 125467
40
+ sha256: 5bc9201f501ee8cc6784fc2db597a70b0cd6ced8d8f0857d542c9cd19c814ae6
41
+ uploaded: true
42
+ media:
43
+ frames: 24
44
+ duration_ms: 11800
45
+ roles:
46
+ - hero
47
+ - proof
48
+ - explainer
49
+ - capability
50
+ - feature
51
+ - testimonial
52
+ - faq
53
+ - closing
54
+ - footer
55
+ feel:
56
+ - light
57
+ - dark
58
+ - premium
59
+ - editorial
60
+ - saas
61
+ - depth
62
+ palette:
63
+ canvas: '#f3f4ed'
64
+ ink: '#15372d'
65
+ accent: '#b9ee6c'
66
+ type:
67
+ display: editorial display serif, regular weight, tight multiline leading
68
+ body: neutral sans, regular weight, compact enterprise copy
69
+ motion:
70
+ devices:
71
+ - reveal
72
+ - pan
73
+ - stagger
74
+ - spotlight
75
+ - stack
76
+ - parallax
77
+ notes: >-
78
+ Eyeballed from 24 to 36 sampled frames, not measured. The Refero recording captures the prior dark green platform
79
+ page: a lifecycle diagram holds beside the hero, large rounded product panels reveal by capability, a bright
80
+ testimonial field wipes in, and automation-tool cards stack toward a yellow closing band. The current AURA page uses
81
+ subtler pixel-animal imagery, pale editorial cards, staggered outcome metrics, and long pinned-feeling section
82
+ transitions. Exact video controls, hover states, scrub thresholds, and cursor behavior cannot be established from
83
+ sampled frames.
84
+ ported_from: null
85
+ ---
86
+
87
+ ## What it does
88
+
89
+ An enterprise quality-platform landing page that combines editorial typography with technical proof. Its current design frames AI release assurance through a pixel-built animal motif, measurable outcomes, audience-specific arguments, and a structured capability system.
90
+
91
+ ## Section roster
92
+
93
+ 1. Promotion rail, wide product navigation, login, and demo action.
94
+ 2. Editorial hero with dual conversion actions and a pixel cheetah centerpiece.
95
+ 3. AURA explainer media and quantified impact cards.
96
+ 4. Audience-specific outcomes for engineering leaders, developers, and QA teams.
97
+ 5. Six-card operational capability grid.
98
+ 6. Release-assurance platform explanation and ecosystem integrations.
99
+ 7. Scale metrics, security proof, FAQ, and closing conversion rail.
100
+
101
+ ## Why it works
102
+
103
+ The serif voice raises the product above routine SaaS presentation, while pixel imagery connects automation to speed without relying on generic AI visuals. Alternating pale panels and concentrated accent fields make a long technical story easier to segment. The cost is that the dense proof architecture and decorative pixel treatments require disciplined responsive behavior to preserve hierarchy.
104
+
105
+ ## Sources
106
+
107
+ - [Refero style page](https://styles.refero.design/style/d271a6c4-942f-4abf-a3de-66795f15f031) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/afdb4e59-2d97-43f4-8102-b93c8395353b.mp4) supply the previous dark-green platform story, capability panels, testimonial transition, automation ecosystem, and yellow closing sequence.
108
+ - The live capture at https://saucelabs.com/ supplies the current AURA redesign, pixel cheetah, outcome cards, responsive screenshots, and measured layout.
109
+ - The sources represent different site generations. Trust the live page for current visual language and content; use the recording as an archived motion reference for the prior design.
110
+