@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.
- package/entries/aker/entry.md +107 -0
- package/entries/amrit-palace/entry.md +105 -0
- package/entries/apple-airpods-5/entry.md +110 -0
- package/entries/apple-airpods-pro/entry.md +106 -0
- package/entries/apple-watch-se-3/entry.md +107 -0
- package/entries/apple-watch-series-12/entry.md +108 -0
- package/entries/arsenijs-fabrica/entry.md +100 -0
- package/entries/augen-pro/entry.md +100 -0
- package/entries/auros/entry.md +110 -0
- package/entries/awe-network/entry.md +101 -0
- package/entries/ayocin/entry.md +101 -0
- package/entries/bmw/entry.md +101 -0
- package/entries/busuu/entry.md +100 -0
- package/entries/caldera/entry.md +106 -0
- package/entries/calendly/entry.md +106 -0
- package/entries/custo/entry.md +100 -0
- package/entries/dayos-ai/entry.md +109 -0
- package/entries/dimension/entry.md +106 -0
- package/entries/dovetail/entry.md +108 -0
- package/entries/ease-health/entry.md +105 -0
- package/entries/factory-ai/entry.md +106 -0
- package/entries/flighty/entry.md +105 -0
- package/entries/frame-io/entry.md +108 -0
- package/entries/hungry-tiger/entry.md +106 -0
- package/entries/hyer-aviation/entry.md +108 -0
- package/entries/impilo/entry.md +108 -0
- package/entries/monad/entry.md +108 -0
- package/entries/n8n/entry.md +108 -0
- package/entries/palais/entry.md +100 -0
- package/entries/partiful/entry.md +104 -0
- package/entries/phantom/entry.md +105 -0
- package/entries/podia/entry.md +102 -0
- package/entries/posthog/entry.md +101 -0
- package/entries/redbrick-coffee/entry.md +98 -0
- package/entries/samara/entry.md +107 -0
- package/entries/sauce-labs/entry.md +110 -0
- package/entries/seline-analytics/entry.md +106 -0
- package/entries/sequel/entry.md +104 -0
- package/entries/slash/entry.md +110 -0
- package/entries/supabase/entry.md +107 -0
- package/entries/t1-energy/entry.md +101 -0
- package/entries/vana/entry.md +100 -0
- package/entries/veed/entry.md +98 -0
- package/entries/webflow/entry.md +108 -0
- package/entries/zkpass/entry.md +103 -0
- 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
|
+
|