@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,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: busuu
|
|
3
|
+
title: 'Busuu: language-learning platform'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://busuu.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/11eeccae-bb34-4a7d-b863-37d5458af067.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/busuu/1/strip.webp
|
|
18
|
+
bytes: 165942
|
|
19
|
+
sha256: 3271f6c9a3ea346e7e90da062b07e8821506c9e942f5c29b3017e4eceb652958
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 22
|
|
22
|
+
duration_ms: 10967
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://busuu.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/busuu/2/strip.webp
|
|
27
|
+
bytes: 216990
|
|
28
|
+
sha256: 82810a6f56559b43a8ea981a9d96a0002cb1dc1ef838d82ef3ba58c55873f472
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/busuu/2/measure.json
|
|
31
|
+
bytes: 1894
|
|
32
|
+
sha256: 40c9fd812c749d48183e1991341811c23a12d76bbcbf75d5db5b73850caa62b6
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/busuu/2/screen-1440.png
|
|
35
|
+
bytes: 420720
|
|
36
|
+
sha256: 82d7a89e84078e5adfbe754faa810ff48fa1c2492f710a9945bcba56637e1080
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/busuu/2/screen-390.png
|
|
39
|
+
bytes: 179528
|
|
40
|
+
sha256: c6b67b27454be26068e8812ffddd29a0fb96ceaf07a0c6122390bb3a70443fb2
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 22
|
|
44
|
+
duration_ms: 10967
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- proof
|
|
48
|
+
- feature
|
|
49
|
+
- capability
|
|
50
|
+
- testimonial
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- light
|
|
55
|
+
- playful
|
|
56
|
+
- saas
|
|
57
|
+
- warm
|
|
58
|
+
palette:
|
|
59
|
+
canvas: '#ffffff'
|
|
60
|
+
ink: '#22223e'
|
|
61
|
+
accent: '#6633f2'
|
|
62
|
+
type:
|
|
63
|
+
display: bold rounded sans, friendly leading
|
|
64
|
+
body: neutral sans, concise learning-product measure
|
|
65
|
+
motion:
|
|
66
|
+
devices:
|
|
67
|
+
- reveal
|
|
68
|
+
- pan
|
|
69
|
+
- stagger
|
|
70
|
+
- stack
|
|
71
|
+
notes: >-
|
|
72
|
+
Eyeballed from 22 sampled frames, not measured. A blue-purple hero reveals illustrated learner avatars and global
|
|
73
|
+
speech bubbles. Lesson cards, pronunciation practice, native-speaker feedback, and app screens stack through light
|
|
74
|
+
chapters before community proof and a joining action. Exact lesson interactions, avatar motion, pointer response,
|
|
75
|
+
and reduced-motion behavior are not measurable from sampled frames.
|
|
76
|
+
ported_from: null
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## What it does
|
|
80
|
+
|
|
81
|
+
A language-learning landing page that connects compact expert lessons with a community of native speakers. Bright illustration and mobile UI make speaking practice feel accessible and social.
|
|
82
|
+
|
|
83
|
+
## Section roster
|
|
84
|
+
|
|
85
|
+
1. New-language hero and start action.
|
|
86
|
+
2. Community learning explanation.
|
|
87
|
+
3. Expert-created course chapters.
|
|
88
|
+
4. Speaking and pronunciation examples.
|
|
89
|
+
5. Learner proof and app screens.
|
|
90
|
+
6. Final joining prompt and footer.
|
|
91
|
+
|
|
92
|
+
## Why it works
|
|
93
|
+
|
|
94
|
+
The illustrated people and speech bubbles make the global community visible, while UI examples show how daily practice works. The cost is that small lesson screenshots need readable mobile treatment and a clear static path.
|
|
95
|
+
|
|
96
|
+
## Sources
|
|
97
|
+
|
|
98
|
+
- [Refero style page](https://styles.refero.design/style/72b85d0a-1ff8-4dd3-b33a-f55aad6df5c9) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/11eeccae-bb34-4a7d-b863-37d5458af067.mp4) supply the sampled motion and section sequence.
|
|
99
|
+
- The live capture at https://www.busuu.com/ supplies current copy, responsive screenshots, and measured layout.
|
|
100
|
+
- Busuu redirects to www.busuu.com. The live page matches the recorded language-learning proposition; trust it for current course and community claims.
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: caldera
|
|
3
|
+
title: 'Caldera: bold multi-chain ecosystem landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://caldera.xyz/
|
|
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/1d960984-8d35-437b-a69d-0d353852772b.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/caldera/1/strip.webp
|
|
18
|
+
bytes: 389108
|
|
19
|
+
sha256: 66e32426c8a5de56fc214654969620334dd837ef4a0851e2871a622c1a51e5ab
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 28767
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://caldera.xyz/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/caldera/2/strip.webp
|
|
27
|
+
bytes: 209286
|
|
28
|
+
sha256: 6241c155791e2ece72cd9f9838ee6ef901ddcbd12734d8e9d84e514f4c0a77f8
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/caldera/2/measure.json
|
|
31
|
+
bytes: 533
|
|
32
|
+
sha256: 900fc026ea0d9640f2747ce7834e30edc986501eb44e9c216c47aed1ecc65018
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/caldera/2/screen-1440.png
|
|
35
|
+
bytes: 36578
|
|
36
|
+
sha256: ad144dea0e23c6954344aec0ff1e3d845b6a7446c0b338108302830a42976e68
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/caldera/2/screen-390.png
|
|
39
|
+
bytes: 26742
|
|
40
|
+
sha256: df5d4105e595728807f1771190e1d7412b2614e2fd3bf7f4e3c2055e2bdd0d11
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 28767
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- proof
|
|
48
|
+
- capability
|
|
49
|
+
- feature
|
|
50
|
+
- explainer
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- light
|
|
55
|
+
- brutalist
|
|
56
|
+
- playful
|
|
57
|
+
- editorial
|
|
58
|
+
- depth
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#e5e6e1'
|
|
61
|
+
ink: '#080808'
|
|
62
|
+
accent: '#ff4b10'
|
|
63
|
+
type:
|
|
64
|
+
display: ultra-bold grotesk sans, tight tracking, compressed leading
|
|
65
|
+
body: neutral grotesk sans, regular weight, compact editorial measure
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- reveal
|
|
69
|
+
- wipe
|
|
70
|
+
- pan
|
|
71
|
+
- stagger
|
|
72
|
+
- tabs
|
|
73
|
+
- marquee
|
|
74
|
+
notes: >-
|
|
75
|
+
Eyeballed from 36 sampled frames, not measured. An orange-and-purple dithered world wipes into the oversized hero
|
|
76
|
+
before counters reveal across a compact proof bar. Ecosystem cards pan horizontally, black-and-orange technical
|
|
77
|
+
illustrations stagger through infrastructure chapters, and vertical tabs switch between gaming, AI, and DeFi
|
|
78
|
+
examples. News cards, community metrics, and backer logos complete the sequence with restrained marquee movement.
|
|
79
|
+
Exact tab behavior, carousel dragging, counter interpolation, pointer response, and reduced-motion behavior are not
|
|
80
|
+
measurable from sampled frames.
|
|
81
|
+
ported_from: null
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## What it does
|
|
85
|
+
|
|
86
|
+
A bold multi-chain ecosystem landing page that presents Caldera as infrastructure for connected rollups and onchain applications. Brutalist typography, dithered color, and diagram-like illustration turn an abstract protocol story into a visible world of networks, applications, and communities.
|
|
87
|
+
|
|
88
|
+
## Section roster
|
|
89
|
+
|
|
90
|
+
1. Utility navigation and dithered multi-chain hero.
|
|
91
|
+
2. Network, transaction, value, and application metrics.
|
|
92
|
+
3. Multi-chain ecosystem explanation and partner cards.
|
|
93
|
+
4. Technical infrastructure chapters with black-and-orange illustrations.
|
|
94
|
+
5. Vertical use-case tabs for gaming, AI, DeFi, and adjacent applications.
|
|
95
|
+
6. News and product-update cards.
|
|
96
|
+
7. Community metrics, backers, joining prompt, and footer.
|
|
97
|
+
|
|
98
|
+
## Why it works
|
|
99
|
+
|
|
100
|
+
Oversized black type gives a complex infrastructure claim immediate force, while orange and purple dithered scenes provide a recognizable visual language for interconnected networks. Metrics and application tabs connect the broad ecosystem promise to concrete evidence. The cost is that huge type, fine texture, and horizontal card motion need careful responsive art direction and contrast preservation.
|
|
101
|
+
|
|
102
|
+
## Sources
|
|
103
|
+
|
|
104
|
+
- [Refero style page](https://styles.refero.design/style/fe8cdcf9-c850-4d52-be07-5ad269bf9ebf) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/1d960984-8d35-437b-a69d-0d353852772b.mp4) supply the dithered hero, metric bar, ecosystem cards, technical illustrations, use-case tabs, news, community, and backer sequence.
|
|
105
|
+
- The live capture at https://caldera.xyz/ supplies current ecosystem copy, responsive screenshots, and measured layout.
|
|
106
|
+
- The sources agree closely. Trust the recording for tab, card, and transition continuity and the live page for current metrics and ecosystem membership.
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: calendly
|
|
3
|
+
title: 'Calendly: feature-led scheduling platform'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://calendly.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/861ee373-0add-466f-845e-47296e9e4d20.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/calendly/1/strip.webp
|
|
18
|
+
bytes: 235404
|
|
19
|
+
sha256: bd3b3214c0ae8b27246e33b1ccb439c44cfc7edf802aa10f32b6398987cf70de
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 31233
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://calendly.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/calendly/2/strip.webp
|
|
27
|
+
bytes: 202020
|
|
28
|
+
sha256: f2df07fe99408b9e31005044a11a770c3566498e530d772e6ef3ea37dd95dff6
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/calendly/2/measure.json
|
|
31
|
+
bytes: 3922
|
|
32
|
+
sha256: f80be8d3727da78505b49196ba1548d9f24d0e93151568e02ac0d8587cab1a91
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/calendly/2/screen-1440.png
|
|
35
|
+
bytes: 735553
|
|
36
|
+
sha256: f896db999253efc1e82c2267ce5fa3c91549f7ac21efc170bac4b6d384ac6049
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/calendly/2/screen-390.png
|
|
39
|
+
bytes: 184979
|
|
40
|
+
sha256: 0ed5a9b02760c1b15236b4e272843c175c1a2f3347cc7b75cdd1b8c50aa88d77
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 31233
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- feature
|
|
48
|
+
- capability
|
|
49
|
+
- proof
|
|
50
|
+
- offer
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- light
|
|
55
|
+
- saas
|
|
56
|
+
- minimal
|
|
57
|
+
- playful
|
|
58
|
+
- premium
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#ffffff'
|
|
61
|
+
ink: '#0b3558'
|
|
62
|
+
accent: '#006bff'
|
|
63
|
+
type:
|
|
64
|
+
display: rounded humanist sans, bold weight, compact line height
|
|
65
|
+
body: neutral sans, regular weight, open product-marketing measure
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- reveal
|
|
69
|
+
- pan
|
|
70
|
+
- tabs
|
|
71
|
+
- stagger
|
|
72
|
+
- drift
|
|
73
|
+
notes: >-
|
|
74
|
+
Eyeballed from 36 sampled frames, not measured. The Refero recording advances through an earlier page with soft
|
|
75
|
+
geometric blobs behind scheduling UI, alternating copy-and-product panels, progressive integration reveals, pricing
|
|
76
|
+
columns, outcome cards, and a restrained footer handoff. The current live page uses a richer gradient hero and
|
|
77
|
+
scroll-triggered feature demonstrations whose active tab, illustration, and supporting copy change together;
|
|
78
|
+
testimonial and integration sections reveal in large paced blocks. Exact easing, carousel autoplay, hover states,
|
|
79
|
+
and pointer response cannot be established from sampled frames.
|
|
80
|
+
ported_from: null
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## What it does
|
|
84
|
+
|
|
85
|
+
A product-led scheduling landing page that turns an abstract promise—less work around meetings—into a sequence of recognizable UI moments. It balances friendly color, compact copy, and concrete workflow demonstrations so the breadth of the platform stays approachable.
|
|
86
|
+
|
|
87
|
+
## Section roster
|
|
88
|
+
|
|
89
|
+
1. Utility announcement, compact navigation, sign-in, and free-start actions.
|
|
90
|
+
2. Outcome-led hero with account sign-up choices and a large scheduling-product demonstration.
|
|
91
|
+
3. Meeting-management promise with a four-part book, prep, capture, and follow-up model.
|
|
92
|
+
4. Feature walkthroughs pairing short explanations with gradient-backed interface cards.
|
|
93
|
+
5. Automated recaps, conversational scheduling, and workflow capability panels.
|
|
94
|
+
6. Customer proof and integration ecosystem.
|
|
95
|
+
7. Closing conversion prompt and deep navy sitemap footer.
|
|
96
|
+
|
|
97
|
+
## Why it works
|
|
98
|
+
|
|
99
|
+
The page repeatedly anchors benefits in small, legible pieces of product UI, while pale surfaces and blue-to-pink gradients soften a potentially administrative category. Clear headings, limited copy, and generous vertical spacing keep the long capability story easy to scan. The cost is that repeated white sections and pastel demonstrations depend on precise pacing and contrast to avoid feeling washed out.
|
|
100
|
+
|
|
101
|
+
## Sources
|
|
102
|
+
|
|
103
|
+
- [Refero style page](https://styles.refero.design/style/9946887b-ffa9-4276-af81-ae6352795afb) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/861ee373-0add-466f-845e-47296e9e4d20.mp4) supply the earlier full-page sequence, integration reveal, plan comparison, proof cards, and footer transition.
|
|
104
|
+
- The live capture at https://calendly.com/ supplies the current gradient-led redesign, AI scheduling story, responsive screenshots, and measured layout.
|
|
105
|
+
- The sources differ substantially in visual treatment and section order. Trust the live page for current content and design; trust the Refero recording only for the earlier page's complete scroll sequence.
|
|
106
|
+
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: custo
|
|
3
|
+
title: 'Custo: minimal smart-mailbox product story'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://custo.io/
|
|
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/474f2297-7f04-4fd1-b764-9fb2d6f83d23.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/custo/1/strip.webp
|
|
18
|
+
bytes: 118056
|
|
19
|
+
sha256: 3b8a6a343f2bc0470c2814685eaebb9da1d756e2f79ae2856f6dfced3d228c49
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 16
|
|
22
|
+
duration_ms: 7800
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://custo.io/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/custo/2/strip.webp
|
|
27
|
+
bytes: 213428
|
|
28
|
+
sha256: ddc5e2aafbd8da913c3f1c5ed0c5565fbe6df322898b194740f6370fcf926e90
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/custo/2/measure.json
|
|
31
|
+
bytes: 3249
|
|
32
|
+
sha256: c7f3c88481fd64f962fce3578a93bb9bf417d4303736fc01d91ad91d394d465c
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/custo/2/screen-1440.png
|
|
35
|
+
bytes: 148604
|
|
36
|
+
sha256: 74f92363aef6647bbcb425082b1ebdf8c369039a9584991d20836aa8dd4b1b57
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/custo/2/screen-390.png
|
|
39
|
+
bytes: 75191
|
|
40
|
+
sha256: 91126d5ee0a393ee7b614037fcaead933ee6600e71b15b340e7049b928695245
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 16
|
|
44
|
+
duration_ms: 7800
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- feature
|
|
49
|
+
- capability
|
|
50
|
+
- closing
|
|
51
|
+
- footer
|
|
52
|
+
feel:
|
|
53
|
+
- light
|
|
54
|
+
- minimal
|
|
55
|
+
- editorial
|
|
56
|
+
- premium
|
|
57
|
+
- cold
|
|
58
|
+
palette:
|
|
59
|
+
canvas: '#d4d9d7'
|
|
60
|
+
ink: '#ffffff'
|
|
61
|
+
accent: '#323736'
|
|
62
|
+
type:
|
|
63
|
+
display: oversized neutral sans, bold weight, tight leading
|
|
64
|
+
body: compact neutral sans, short product measure
|
|
65
|
+
motion:
|
|
66
|
+
devices:
|
|
67
|
+
- reveal
|
|
68
|
+
- pan
|
|
69
|
+
- wipe
|
|
70
|
+
- stagger
|
|
71
|
+
notes: >-
|
|
72
|
+
Eyeballed from 16 sampled frames, not measured. A giant CUSTO wordmark overlaps the mailbox product on a cool grey
|
|
73
|
+
field. As the page moves, the product slides into lifestyle and delivery scenes, then dark app panels reveal parcel
|
|
74
|
+
status and access details. The short recording ends before every live section is visible. Exact product rotation,
|
|
75
|
+
app interaction, pointer behavior, and reduced-motion behavior are not measurable from sampled frames.
|
|
76
|
+
ported_from: null
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## What it does
|
|
80
|
+
|
|
81
|
+
A minimal smart-mailbox product story that explains the value of receiving deliveries without waiting at home. The large physical object and oversized wordmark make a simple household utility feel like a designed consumer product.
|
|
82
|
+
|
|
83
|
+
## Section roster
|
|
84
|
+
|
|
85
|
+
1. Grey hero with mailbox render and large wordmark.
|
|
86
|
+
2. Delivery inconvenience and product promise.
|
|
87
|
+
3. Package scanning and unattended drop-off explanation.
|
|
88
|
+
4. Outdoor placement and lifestyle imagery.
|
|
89
|
+
5. App status, personal assistant, and account panels.
|
|
90
|
+
6. Ordering prompt and footer.
|
|
91
|
+
|
|
92
|
+
## Why it works
|
|
93
|
+
|
|
94
|
+
The product is unmistakable within seconds, and each later section answers a practical concern about parcels, couriers, and remote access. The cost is that oversized branding and pale grey surfaces need responsive cropping and careful contrast.
|
|
95
|
+
|
|
96
|
+
## Sources
|
|
97
|
+
|
|
98
|
+
- [Refero style page](https://styles.refero.design/style/3ad131ed-b603-49a3-9491-7407db6cb423) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/474f2297-7f04-4fd1-b764-9fb2d6f83d23.mp4) supply the sampled hero, delivery, product, and app-panel motion.
|
|
99
|
+
- The live capture at https://custo.io/ supplies current explanation, responsive screenshots, and measured layout.
|
|
100
|
+
- The short recording does not cover every live section; trust the live page for the full current feature and ordering story.
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: dayos-ai
|
|
3
|
+
title: 'Dayos AI: modular agentic-work platform'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.dayos.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/43c95884-3095-4b8a-a10b-455116ae014b.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/dayos-ai/1/strip.webp
|
|
18
|
+
bytes: 288202
|
|
19
|
+
sha256: 8a123c13dc6c2390662281ec1587ca0813265ec5a98ea337652301bba027185e
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 33
|
|
22
|
+
duration_ms: 16300
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.dayos.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/dayos-ai/2/strip.webp
|
|
27
|
+
bytes: 300512
|
|
28
|
+
sha256: 25e35c8ef6e39c991fbe1030beb1e3c0abb568e2897e8c3d2abfae00a7a4e38c
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/dayos-ai/2/measure.json
|
|
31
|
+
bytes: 4193
|
|
32
|
+
sha256: bb209573cf378946c46521a9e91f11f7415a32ab15081b8c7f8a702f3a9ff98c
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/dayos-ai/2/screen-1440.png
|
|
35
|
+
bytes: 367643
|
|
36
|
+
sha256: e13281b33201dd3d512bcbed69f55e0662720b188285f969d2cfc30e14b0158d
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/dayos-ai/2/screen-390.png
|
|
39
|
+
bytes: 130430
|
|
40
|
+
sha256: 4469ad345e00bf835c160e8891b15f463c3a914ec27126248de65b5e3e83934e
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 33
|
|
44
|
+
duration_ms: 16300
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- process
|
|
49
|
+
- capability
|
|
50
|
+
- proof
|
|
51
|
+
- offer
|
|
52
|
+
- closing
|
|
53
|
+
- footer
|
|
54
|
+
feel:
|
|
55
|
+
- light
|
|
56
|
+
- dark
|
|
57
|
+
- brutalist
|
|
58
|
+
- playful
|
|
59
|
+
- editorial
|
|
60
|
+
- depth
|
|
61
|
+
palette:
|
|
62
|
+
canvas: '#e8e8e6'
|
|
63
|
+
ink: '#050505'
|
|
64
|
+
accent: '#f2e600'
|
|
65
|
+
type:
|
|
66
|
+
display: ultra-condensed grotesk sans, black weight, tight leading
|
|
67
|
+
body: compact neutral sans, regular weight, narrow explanatory columns
|
|
68
|
+
motion:
|
|
69
|
+
devices:
|
|
70
|
+
- reveal
|
|
71
|
+
- pin
|
|
72
|
+
- drift
|
|
73
|
+
- tilt
|
|
74
|
+
- parallax
|
|
75
|
+
- stagger
|
|
76
|
+
notes: >-
|
|
77
|
+
Eyeballed from 36 sampled frames, not measured. A large modular 3D tower remains the hero's active counterweight
|
|
78
|
+
while branded blocks rotate, detach, orbit, and rebuild into changing configurations. Scrolling carries the
|
|
79
|
+
composition from a pale hero into a black argument section, then reveals oversized statements, product-window
|
|
80
|
+
evidence, and small capability modules in staggered groups. The live capture confirms continuous autonomous block
|
|
81
|
+
motion and pointer-sensitive depth around the hero object, but exact tracking strength, physics, timing, and
|
|
82
|
+
reduced-motion behavior are not measurable from the samples.
|
|
83
|
+
ported_from: null
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## What it does
|
|
87
|
+
|
|
88
|
+
A confrontational AI-services landing page built around a modular 3D metaphor. Enterprise systems appear as labeled blocks that can be rearranged around a central agent, making integration and orchestration visible before the page explains the product in detail.
|
|
89
|
+
|
|
90
|
+
## Section roster
|
|
91
|
+
|
|
92
|
+
1. Floating pill navigation and high-contrast demo action.
|
|
93
|
+
2. Split hero with an oversized four-line claim and animated 3D integration tower.
|
|
94
|
+
3. Black problem statement organized around the AI gap and its closure.
|
|
95
|
+
4. Large manifesto explaining the replacement of repetitive enterprise work.
|
|
96
|
+
5. Hero product introduction with dark conversational UI.
|
|
97
|
+
6. ERP and HCM capability blocks supported by modular 3D objects.
|
|
98
|
+
7. Answers, actions, and experts model followed by proof and conversion content.
|
|
99
|
+
|
|
100
|
+
## Why it works
|
|
101
|
+
|
|
102
|
+
The condensed typography and grayscale field provide a rigid editorial frame for playful, tactile 3D objects. That contrast gives an unfamiliar service a memorable visual model, while the light-to-black transition creates a decisive narrative chapter break. The cost is a demanding 3D hero whose performance, loading state, and accessible fallback must be carefully engineered.
|
|
103
|
+
|
|
104
|
+
## Sources
|
|
105
|
+
|
|
106
|
+
- [Refero style page](https://styles.refero.design/style/ee403055-480e-4bd4-9216-07c9ae2dde2e) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/43c95884-3095-4b8a-a10b-455116ae014b.mp4) supply the hero transformation, light-to-dark handoff, manifesto, product evidence, and capability sequence.
|
|
107
|
+
- The live capture at https://www.dayos.com/ supplies the current hero, responsive screenshots, pointer-aware 3D state, and measured layout.
|
|
108
|
+
- The sources closely agree on the hero system. Trust the recording for the complete motion progression and the live page for current copy and rendering behavior.
|
|
109
|
+
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: dimension
|
|
3
|
+
title: 'Dimension: interactive AI-coworker landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://dimension.dev/
|
|
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/5e6bb7ce-2176-4671-a7a2-ff51befd2f02.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/dimension/1/strip.webp
|
|
18
|
+
bytes: 231780
|
|
19
|
+
sha256: e1b553a2c438d301de110eb1105232749fbee1e3387b2bb7502827be749de4ac
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 30
|
|
22
|
+
duration_ms: 15217
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://dimension.dev/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/dimension/2/strip.webp
|
|
27
|
+
bytes: 264224
|
|
28
|
+
sha256: 60af2f6a669fc2c8f173baf856e9af60eef2782c44a47cc86b624cec9077319a
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/dimension/2/measure.json
|
|
31
|
+
bytes: 790
|
|
32
|
+
sha256: bd6878e8d822fff79ae350b28c43782e4bca01c33826f1fddd53c5e4bbfcb33e
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/dimension/2/screen-1440.png
|
|
35
|
+
bytes: 440621
|
|
36
|
+
sha256: 93be2ec8ee9b95a4a95eb95556f8393c502c6ce9cef4e1d666fd6ddf284df561
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/dimension/2/screen-390.png
|
|
39
|
+
bytes: 134250
|
|
40
|
+
sha256: 0186540afe7eb13420e959bb57c2ae02b3247f0670fa42455daa4b8d99039077
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 30
|
|
44
|
+
duration_ms: 15217
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- process
|
|
49
|
+
- feature
|
|
50
|
+
- offer
|
|
51
|
+
- footer
|
|
52
|
+
feel:
|
|
53
|
+
- light
|
|
54
|
+
- premium
|
|
55
|
+
- saas
|
|
56
|
+
- playful
|
|
57
|
+
- minimal
|
|
58
|
+
- depth
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#7398d2'
|
|
61
|
+
ink: '#f7f8fb'
|
|
62
|
+
accent: '#ef2b2d'
|
|
63
|
+
type:
|
|
64
|
+
display: rounded neutral sans, medium weight, compact leading
|
|
65
|
+
body: neutral sans, regular weight, concise interface labels
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- tabs
|
|
69
|
+
- pan
|
|
70
|
+
- reveal
|
|
71
|
+
- stack
|
|
72
|
+
- spotlight
|
|
73
|
+
notes: >-
|
|
74
|
+
Eyeballed from 30 to 36 sampled frames, not measured. The page behaves as a single interactive product simulation
|
|
75
|
+
rather than a conventional vertical landing page. A cursor selects connected apps, then task panels expand for
|
|
76
|
+
morning briefing, catch-up, action plans, deep work, inbox, meeting prep, and daily recap. Messages type into dark
|
|
77
|
+
windows, completion states animate, suggested tasks stack, and a glowing status pill reports what the coworker is
|
|
78
|
+
doing. Pointer clicks and hover targets are visible in the recording, but exact hit areas, easing,
|
|
79
|
+
automated-versus-user-driven timing, and keyboard behavior are not measurable.
|
|
80
|
+
ported_from: null
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## What it does
|
|
84
|
+
|
|
85
|
+
An interactive AI-coworker landing page that demonstrates the product by running a simulated workday. Rather than separating features into static sections, it keeps one translucent operating surface in view and lets tasks, messages, plans, and connected apps become the narrative.
|
|
86
|
+
|
|
87
|
+
## Section roster
|
|
88
|
+
|
|
89
|
+
1. Winding-down announcement and split hero promise.
|
|
90
|
+
2. Connected-app selector for mail, calendar, chat, files, and notes.
|
|
91
|
+
3. Persistent status pill showing current automated work.
|
|
92
|
+
4. Morning briefing and catch-up message demonstration.
|
|
93
|
+
5. Action-plan creation with suggested tasks and completion states.
|
|
94
|
+
6. Deep-work and inbox sequence.
|
|
95
|
+
7. Meeting-prep and daily-recap states with persistent compact navigation.
|
|
96
|
+
|
|
97
|
+
## Why it works
|
|
98
|
+
|
|
99
|
+
The product demonstration and marketing page are the same surface, so the promise of cross-app work becomes concrete immediately. Soft blue-and-peach gradients keep dense interface states calm, while red notification badges provide clear progress cues. The cost is reliance on scripted pointer choreography; without robust accessibility and static fallbacks, the story may be difficult to navigate or understand.
|
|
100
|
+
|
|
101
|
+
## Sources
|
|
102
|
+
|
|
103
|
+
- [Refero style page](https://styles.refero.design/style/fbcf9cbb-7c6b-449d-862a-bce521a8ab1d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/5e6bb7ce-2176-4671-a7a2-ff51befd2f02.mp4) supply the complete pointer-led app selection, messaging, task planning, completion, and status choreography.
|
|
104
|
+
- The live capture at https://www.dimension.dev/ supplies the current page and its notice that Dimension is winding down on May 20, 2026, plus responsive screenshots and measured layout.
|
|
105
|
+
- Trust the Refero recording for the full interactive sequence and the live page for current service status.
|
|
106
|
+
|