@yojahny/wp-design-library 1.1.1 → 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/README.md +26 -5
- package/bin/library.mjs +1 -0
- 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 +2 -1
- package/src/cli/upload.mjs +57 -0
- package/src/ingest/save.mjs +28 -6
- package/src/ingest/upload.mjs +110 -0
- package/src/mcp/http.mjs +21 -0
- package/src/mcp/prompts.mjs +71 -10
- package/src/mcp/tools.mjs +104 -8
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: hungry-tiger
|
|
3
|
+
title: 'Hungry Tiger: kinetic sauce-product landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.eathungrytiger.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/6cd45311-6e5a-4da7-ac71-6cca8096c141.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/hungry-tiger/1/strip.webp
|
|
18
|
+
bytes: 235522
|
|
19
|
+
sha256: 75f9c20a339b1d9674c66673eb42735983ecfa686bcb14b75a2acbb45ec3f966
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 21933
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.eathungrytiger.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/hungry-tiger/2/strip.webp
|
|
27
|
+
bytes: 365430
|
|
28
|
+
sha256: ced45bf36245b9664cfe4017eb6efbb132bb405421b28a5006177e99a3fd9167
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/hungry-tiger/2/measure.json
|
|
31
|
+
bytes: 1870
|
|
32
|
+
sha256: 05f89cf64967ad35f972b45991cf9fc8511645f79a96896ba84337ec56cedb6f
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/hungry-tiger/2/screen-1440.png
|
|
35
|
+
bytes: 1427583
|
|
36
|
+
sha256: 50d9517b2d3b21b0970a7c7173355ae93db36edbef053a88b9dd0ab4401bc6c8
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/hungry-tiger/2/screen-390.png
|
|
39
|
+
bytes: 393582
|
|
40
|
+
sha256: f9dc5ae82fb749d50b5811eae1321d2905fc3b216dac46c34619be70170687f1
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 21933
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- feature
|
|
48
|
+
- explainer
|
|
49
|
+
- proof
|
|
50
|
+
- offer
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- warm
|
|
55
|
+
- playful
|
|
56
|
+
- brutalist
|
|
57
|
+
- depth
|
|
58
|
+
- editorial
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#9b3f17'
|
|
61
|
+
ink: '#ffb52e'
|
|
62
|
+
accent: '#ec3188'
|
|
63
|
+
type:
|
|
64
|
+
display: wide heavy grotesk sans, uppercase, tightly packed
|
|
65
|
+
body: compact bold sans, uppercase labels, short product copy
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- pin
|
|
69
|
+
- tilt
|
|
70
|
+
- parallax
|
|
71
|
+
- reveal
|
|
72
|
+
- wipe
|
|
73
|
+
- kinetic
|
|
74
|
+
notes: >-
|
|
75
|
+
Eyeballed from 36 sampled frames, not measured. The sauce jar remains the dominant scroll object, rotating, tilting,
|
|
76
|
+
scaling, and changing orientation as oversized claims wipe behind it. The container eventually tips and pours sauce
|
|
77
|
+
into the next chapter, creating a continuous product-led transition into ingredients, cultural story, recipes, and
|
|
78
|
+
purchase prompts. Live capture confirms the scroll-bound jar choreography and layered text occlusion; exact scrub
|
|
79
|
+
mapping, 3D implementation, pointer response, and reduced-motion fallback are not measurable from sampled frames.
|
|
80
|
+
ported_from: null
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## What it does
|
|
84
|
+
|
|
85
|
+
A single-product food landing page that turns the sauce jar into the navigation device for the story. The package rotates through bold claims, ingredient explanations, cultural context, and recipes, making the product feel tactile and energetic before asking for a purchase.
|
|
86
|
+
|
|
87
|
+
## Section roster
|
|
88
|
+
|
|
89
|
+
1. Compact pill navigation and oversized Bold Flavor hero.
|
|
90
|
+
2. Central product jar with direct purchase action.
|
|
91
|
+
3. Scroll-linked rotations around new-angle and adventure messages.
|
|
92
|
+
4. Pour transition into the ingredient chapter.
|
|
93
|
+
5. Tradition-and-creation story with cooking photography.
|
|
94
|
+
6. Ingredient and process proof.
|
|
95
|
+
7. Large product close-up, purchase prompt, and recipe-card grid.
|
|
96
|
+
|
|
97
|
+
## Why it works
|
|
98
|
+
|
|
99
|
+
A narrow palette of chili brown, turmeric yellow, black, and hot pink gives the page an unmistakable shelf identity. Keeping the jar present across multiple chapters makes the scroll feel continuous, while abrupt scale shifts preserve energy. The cost is a motion-heavy product object that must remain readable, performant, and controllable across viewport sizes and reduced-motion settings.
|
|
100
|
+
|
|
101
|
+
## Sources
|
|
102
|
+
|
|
103
|
+
- [Refero style page](https://styles.refero.design/style/47f15da7-8905-45b3-bcab-06a4277c6168) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/6cd45311-6e5a-4da7-ac71-6cca8096c141.mp4) supply the full rotating-jar choreography, typographic wipes, pour transition, and ingredient handoff.
|
|
104
|
+
- The live capture at https://www.eathungrytiger.com/ supplies current product copy, recipe content, responsive screenshots, and measured layout.
|
|
105
|
+
- The sources agree closely. Trust the recording for smooth motion continuity and the live capture for current content and final section details.
|
|
106
|
+
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: hyer-aviation
|
|
3
|
+
title: 'Hyer: editorial private-aviation landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.flyhyer.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/71a70678-43cd-4266-b12a-4b0c1d5fb295.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/hyer-aviation/1/strip.webp
|
|
18
|
+
bytes: 287986
|
|
19
|
+
sha256: 2f846fcd69ea677fdf3a3c3b828731caac9f02b52f026679da2ea240984021c9
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 22167
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.flyhyer.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/hyer-aviation/2/strip.webp
|
|
27
|
+
bytes: 272134
|
|
28
|
+
sha256: 6af2daf9ca7996847324be322ffcbe35a75f467dac68075d595f0f5ac61ad137
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/hyer-aviation/2/measure.json
|
|
31
|
+
bytes: 2011
|
|
32
|
+
sha256: b5b6231d2a1fbefe7590786c1f0f96429e46f349e2b9ce0d64c80dba540c98dd
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/hyer-aviation/2/screen-1440.png
|
|
35
|
+
bytes: 303693
|
|
36
|
+
sha256: 07584294a90adf1d62ce30e9b3547c65fad812309dd01c69aaad58e3ef91c280
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/hyer-aviation/2/screen-390.png
|
|
39
|
+
bytes: 100045
|
|
40
|
+
sha256: 5ad5666e477cd18f2902ff4fa7ad74e38739b4514037e1946e3ae9b7c4b2ab12
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 22167
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- feature
|
|
48
|
+
- explainer
|
|
49
|
+
- capability
|
|
50
|
+
- proof
|
|
51
|
+
- offer
|
|
52
|
+
- closing
|
|
53
|
+
- footer
|
|
54
|
+
feel:
|
|
55
|
+
- light
|
|
56
|
+
- premium
|
|
57
|
+
- editorial
|
|
58
|
+
- minimal
|
|
59
|
+
- warm
|
|
60
|
+
- depth
|
|
61
|
+
palette:
|
|
62
|
+
canvas: '#f5f5f2'
|
|
63
|
+
ink: '#071016'
|
|
64
|
+
accent: '#bd7558'
|
|
65
|
+
type:
|
|
66
|
+
display: oversized neo-grotesk sans, black weight, very tight tracking
|
|
67
|
+
body: neutral sans, regular weight, compact travel-editorial 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. An oversized Hyer wordmark frames a jet that glides laterally
|
|
77
|
+
through a pale sky while the Beyond Travel message remains fixed. Scrolling reveals a modular three-column travel
|
|
78
|
+
selector, destination imagery, a dark support chapter, an oversized approach statement, and a property gallery with
|
|
79
|
+
horizontal controls. Live automation confirms the page structure but a persistent cookie dialog obscures part of
|
|
80
|
+
every captured frame; trust the Refero recording for visual judgment. Exact aircraft parallax, gallery controls,
|
|
81
|
+
hover states, and pointer behavior are not measurable from sampled frames.
|
|
82
|
+
ported_from: null
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## What it does
|
|
86
|
+
|
|
87
|
+
A private-aviation and curated-stays landing page that makes travel feel personal rather than transactional. Monumental typography, spare copy, and large transport and destination imagery create a luxury editorial rhythm while modular panels explain the service model.
|
|
88
|
+
|
|
89
|
+
## Section roster
|
|
90
|
+
|
|
91
|
+
1. Oversized wordmark hero with jet imagery and a compact utility navigation.
|
|
92
|
+
2. Stays and travel choice rail.
|
|
93
|
+
3. Four-part promise covering selection, technology, flexibility, and support.
|
|
94
|
+
4. Three-panel exploration module for all solutions, travel, and stays.
|
|
95
|
+
5. Destination shortlist and city imagery.
|
|
96
|
+
6. Dark travel-support chapter with mobile boarding-pass evidence.
|
|
97
|
+
7. Hyer approach, trust principles, property gallery, closing prompt, and footer.
|
|
98
|
+
|
|
99
|
+
## Why it works
|
|
100
|
+
|
|
101
|
+
The huge wordmark and generous white space create immediate confidence, while the aircraft and property imagery give the service tangible scale. Terracotta and midnight panels introduce warmth and depth without diluting the minimal system. The cost is that oversized type and image-led transitions need strong mobile art direction, and cookie or consent UI can easily interrupt the intended composition.
|
|
102
|
+
|
|
103
|
+
## Sources
|
|
104
|
+
|
|
105
|
+
- [Refero style page](https://styles.refero.design/style/f61cf515-ccd5-4494-bdd1-be9fe4d7258c) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/71a70678-43cd-4266-b12a-4b0c1d5fb295.mp4) supply the unobstructed hero, travel selector, destination flow, support chapter, approach statement, gallery, and footer.
|
|
106
|
+
- The live capture at https://www.flyhyer.com/ supplies current content, responsive screenshots, and measured layout, but a persistent cookie dialog overlays the page.
|
|
107
|
+
- Trust the Refero recording for visual composition and motion continuity; use the live capture only for current structure and content.
|
|
108
|
+
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: impilo
|
|
3
|
+
title: 'Impilo: purple remote-care logistics landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://impilo.health/
|
|
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/0e7677aa-03f5-4b4d-96d6-341444f21281.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/impilo/1/strip.webp
|
|
18
|
+
bytes: 203332
|
|
19
|
+
sha256: 88d1521954e504cd36c305f96b732f22785c8cd8ab5fce5aae6f8af5a75282cd
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 18367
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://impilo.health/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/impilo/2/strip.webp
|
|
27
|
+
bytes: 136370
|
|
28
|
+
sha256: 5ccb6fb60e95f1ce7adcca8b1b3db86c44c65613d100fc4890d895e3bf22f703
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/impilo/2/measure.json
|
|
31
|
+
bytes: 2613
|
|
32
|
+
sha256: 938bd4b149dc36d73464efba4a3b65665fe1d6b66a3ac7482023de52f4350a08
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/impilo/2/screen-1440.png
|
|
35
|
+
bytes: 53343
|
|
36
|
+
sha256: eadecd6b59e5176a83ba04ee882ade8cebc883a548200886b4bbc0ea35b8d88e
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/impilo/2/screen-390.png
|
|
39
|
+
bytes: 48876
|
|
40
|
+
sha256: c5f9aa72fd5653acea3f6ba9a1a09c9a71e2cc2baf8588142088910f59bda9eb
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 18367
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- process
|
|
48
|
+
- capability
|
|
49
|
+
- proof
|
|
50
|
+
- feature
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- dark
|
|
55
|
+
- light
|
|
56
|
+
- cold
|
|
57
|
+
- saas
|
|
58
|
+
- depth
|
|
59
|
+
- playful
|
|
60
|
+
palette:
|
|
61
|
+
canvas: '#4539df'
|
|
62
|
+
ink: '#ffffff'
|
|
63
|
+
accent: '#30ead8'
|
|
64
|
+
type:
|
|
65
|
+
display: rounded geometric sans, bold weight, compact leading
|
|
66
|
+
body: neutral sans, regular weight, short healthcare-product measure
|
|
67
|
+
motion:
|
|
68
|
+
devices:
|
|
69
|
+
- reveal
|
|
70
|
+
- wipe
|
|
71
|
+
- pan
|
|
72
|
+
- parallax
|
|
73
|
+
- stagger
|
|
74
|
+
- count
|
|
75
|
+
notes: >-
|
|
76
|
+
Eyeballed from 36 sampled frames, not measured. A dark opening counter animates around a line-drawn remote-care
|
|
77
|
+
device before purple layers wipe into the hero. The key adjective cycles between powerful and easy while dashboard
|
|
78
|
+
panels rise behind the copy. A white process heading opens into deep navy step panels that pan through enrollment,
|
|
79
|
+
device shipping, support, and data insight, followed by white proof and integration chapters with staggered cards.
|
|
80
|
+
Exact counter logic, word-cycle timing, panel pinning, pointer response, and reduced-motion behavior are not
|
|
81
|
+
measurable from sampled frames.
|
|
82
|
+
ported_from: null
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## What it does
|
|
86
|
+
|
|
87
|
+
A remote-patient-monitoring logistics landing page that explains the service as a guided end-to-end flow. Bright violet and cyan make medical operations feel contemporary, while line illustrations and dashboard fragments connect physical devices to data and patient support.
|
|
88
|
+
|
|
89
|
+
## Section roster
|
|
90
|
+
|
|
91
|
+
1. Animated device counter and dark introductory state.
|
|
92
|
+
2. Violet hero with cycling outcome word, device illustration, and dashboard evidence.
|
|
93
|
+
3. Process handoff into patient identification and qualification.
|
|
94
|
+
4. Device packing, shipping, and patient-support steps.
|
|
95
|
+
5. Population-health, billing, and engagement data insights.
|
|
96
|
+
6. White-glove service and digital-health customer proof.
|
|
97
|
+
7. Integration capabilities, virtual-care closing prompt, and footer.
|
|
98
|
+
|
|
99
|
+
## Why it works
|
|
100
|
+
|
|
101
|
+
The strong purple field creates continuity across a complex operational story, while cyan highlights mark outcomes and important phrases. Alternating dark process panels with white proof chapters clearly separates service steps from evidence. The cost is that large pinned color fields and animated counters need careful pacing and accessible fallbacks to avoid obscuring the actual logistics model.
|
|
102
|
+
|
|
103
|
+
## Sources
|
|
104
|
+
|
|
105
|
+
- [Refero style page](https://styles.refero.design/style/b44b0bb2-4ba3-4599-9706-3c3e0c8c2522) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/0e7677aa-03f5-4b4d-96d6-341444f21281.mp4) supply the opening counter, cycling hero message, process-panel choreography, customer proof, integrations, and closing sequence.
|
|
106
|
+
- The live capture at https://impilo.health/ supplies current positioning, responsive screenshots, and measured layout.
|
|
107
|
+
- The sources agree on the core visual system, while the live hero currently emphasizes easy rather than the recording's powerful state. Trust the recording for the complete word cycle and the live page for current copy.
|
|
108
|
+
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: monad
|
|
3
|
+
title: 'Monad: soft security-data pipeline landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.monad.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/2fbbd813-c5a9-4536-aa67-3586b71cc6bb.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/monad/1/strip.webp
|
|
18
|
+
bytes: 235984
|
|
19
|
+
sha256: 6e4e7047d77101f6fc3eda5c2b0322f7ba224bb73e53e8fdb14d1907b6885419
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 22817
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.monad.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/monad/2/strip.webp
|
|
27
|
+
bytes: 230902
|
|
28
|
+
sha256: ea6538280ba8bf013db4c6444b33bb87749a6a8793eb60b48771e9b17aef0a6a
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/monad/2/measure.json
|
|
31
|
+
bytes: 2095
|
|
32
|
+
sha256: 2ca039d8d1db271d7e89b9c113f50ac78666a1b7f9d59f39242f9745d3f3a568
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/monad/2/screen-1440.png
|
|
35
|
+
bytes: 162752
|
|
36
|
+
sha256: 6d19c20aa43c73667577ae1265ab7447477884a5696c7feadd7fb497b032b36f
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/monad/2/screen-390.png
|
|
39
|
+
bytes: 81833
|
|
40
|
+
sha256: 69a1fd6f7aa56166319ddfeca7b16c44da57b23c0994bf7cc89ae05630049429
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 22817
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- proof
|
|
48
|
+
- explainer
|
|
49
|
+
- capability
|
|
50
|
+
- feature
|
|
51
|
+
- faq
|
|
52
|
+
- closing
|
|
53
|
+
- footer
|
|
54
|
+
feel:
|
|
55
|
+
- light
|
|
56
|
+
- premium
|
|
57
|
+
- minimal
|
|
58
|
+
- editorial
|
|
59
|
+
- depth
|
|
60
|
+
- cold
|
|
61
|
+
palette:
|
|
62
|
+
canvas: '#f5f2ee'
|
|
63
|
+
ink: '#1b1b19'
|
|
64
|
+
accent: '#3267e8'
|
|
65
|
+
type:
|
|
66
|
+
display: high-contrast editorial serif, medium weight, generous leading
|
|
67
|
+
body: compact monospaced sans, regular weight, technical cadence
|
|
68
|
+
motion:
|
|
69
|
+
devices:
|
|
70
|
+
- reveal
|
|
71
|
+
- pan
|
|
72
|
+
- parallax
|
|
73
|
+
- stagger
|
|
74
|
+
- spotlight
|
|
75
|
+
notes: >-
|
|
76
|
+
Eyeballed from 36 sampled frames, not measured. A radial data-pipeline diagram glows and gently shifts beneath the
|
|
77
|
+
hero while source and destination labels reveal around its hub. Subsequent capability cards use soft gradient
|
|
78
|
+
washes, small routed-data animations, and staggered product fragments; the integration field pans across a lavender
|
|
79
|
+
plane before proof cards and FAQ rows resolve with quieter reveals. Pointer movement appears to alter glow and
|
|
80
|
+
diagram emphasis on the live hero, but exact cursor mapping, easing, and reduced-motion behavior are not measurable
|
|
81
|
+
from sampled frames.
|
|
82
|
+
ported_from: null
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## What it does
|
|
86
|
+
|
|
87
|
+
A security-data infrastructure landing page that presents complex routing and transformation work as a calm visual system. Technical depth appears through labeled pipelines and product fragments, while soft gradients and editorial type keep the experience from reading like a conventional security dashboard.
|
|
88
|
+
|
|
89
|
+
## Section roster
|
|
90
|
+
|
|
91
|
+
1. Announcement rail, compact product navigation, login, and demo action.
|
|
92
|
+
2. Centered hero with trial and integration actions over a radial pipeline diagram.
|
|
93
|
+
3. Customer-logo proof strip.
|
|
94
|
+
4. Four-part workflow covering managed pipelines, transformations, routing, and deployment.
|
|
95
|
+
5. Integration landscape on a wide lavender field.
|
|
96
|
+
6. Benefit cards for cost, onboarding, developer control, and scale.
|
|
97
|
+
7. FAQ accordion, gradient closing panel, and restrained footer.
|
|
98
|
+
|
|
99
|
+
## Why it works
|
|
100
|
+
|
|
101
|
+
Serif headlines create authority while monospaced labels make the data model feel precise. Pastel glows organize dense diagrams without turning them into decoration, and the centered hero makes the many-source-to-many-destination idea understandable at a glance. The cost is very pale text and subtle boundaries that need careful contrast control, especially during fades.
|
|
102
|
+
|
|
103
|
+
## Sources
|
|
104
|
+
|
|
105
|
+
- [Refero style page](https://styles.refero.design/style/fc84e9f0-2058-4a0a-8d26-9cc1ba84ec9c) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/2fbbd813-c5a9-4536-aa67-3586b71cc6bb.mp4) supply the complete hero diagram, capability flow, integration field, benefit grid, FAQ, and closing sequence.
|
|
106
|
+
- The live capture at https://www.monad.com/ supplies the current announcement, content, responsive screenshots, pointer-reactive hero state, and measured layout.
|
|
107
|
+
- The sources agree closely. Trust the recording for intermediate animation states and the live capture for current copy and dimensions.
|
|
108
|
+
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: n8n
|
|
3
|
+
title: 'n8n: dark AI workflow-automation platform'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://n8n.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-22'
|
|
12
|
+
tool: wp-design-library@1.2.0
|
|
13
|
+
captures:
|
|
14
|
+
- method: frames
|
|
15
|
+
input: 'https://images.refero.design/styles/refero.design/video/86083271-09b7-4468-87e8-f0785a7d6a3f.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/n8n/1/strip.webp
|
|
18
|
+
bytes: 215380
|
|
19
|
+
sha256: fea333aae4f43b1687c61d82ebcffd40bf0f93c74c59a0178a3a0d30fa43240c
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 17760
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://n8n.io/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/n8n/2/strip.webp
|
|
27
|
+
bytes: 222774
|
|
28
|
+
sha256: fbabe474a58c3052eaaa6a4f3e658ce4e339ede55c24be0c9cccd7b7f5a8a7f1
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/n8n/2/measure.json
|
|
31
|
+
bytes: 6661
|
|
32
|
+
sha256: 0fe11054f8118ff31a594de93e88952835d24af938d25b1e8b4fa6b44e4372fe
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/n8n/2/screen-1440.png
|
|
35
|
+
bytes: 735183
|
|
36
|
+
sha256: 330be4d210e3cd50d1ef48dba11bf6f3f558e2a6b1c6508b2b65ec6a9a48a51b
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/n8n/2/screen-390.png
|
|
39
|
+
bytes: 168720
|
|
40
|
+
sha256: 22f7cee3d57d139622df56264e448092b51e9effabfdcf6745600c9a1228c77c
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 17760
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- capability
|
|
49
|
+
- feature
|
|
50
|
+
- proof
|
|
51
|
+
- testimonial
|
|
52
|
+
- closing
|
|
53
|
+
- footer
|
|
54
|
+
feel:
|
|
55
|
+
- dark
|
|
56
|
+
- saas
|
|
57
|
+
- depth
|
|
58
|
+
- cold
|
|
59
|
+
- premium
|
|
60
|
+
palette:
|
|
61
|
+
canvas: '#0d0818'
|
|
62
|
+
ink: '#f3eff8'
|
|
63
|
+
accent: '#ff5a2f'
|
|
64
|
+
type:
|
|
65
|
+
display: neutral geometric sans, medium weight, compact leading
|
|
66
|
+
body: neutral sans, regular weight, concise technical measure
|
|
67
|
+
motion:
|
|
68
|
+
devices:
|
|
69
|
+
- reveal
|
|
70
|
+
- pan
|
|
71
|
+
- spotlight
|
|
72
|
+
- stagger
|
|
73
|
+
- drift
|
|
74
|
+
- tabs
|
|
75
|
+
notes: >-
|
|
76
|
+
Eyeballed from 36 sampled frames, not measured. A luminous lightning sculpture anchors the hero while red and violet
|
|
77
|
+
light drifts through the black canvas. Workflow nodes connect and brighten in sequence, integration logos pan
|
|
78
|
+
through a glowing rail, and capability cards reveal with small diagrams, code fragments, and decision states. Orange
|
|
79
|
+
gradient chapters interrupt the dark field before proof cards and enterprise content settle into a warm closing
|
|
80
|
+
glow. Exact workflow-node hover response, tab switching, pointer tracking, and reduced-motion behavior are not
|
|
81
|
+
measurable from sampled frames.
|
|
82
|
+
ported_from: null
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## What it does
|
|
86
|
+
|
|
87
|
+
A dark workflow-automation landing page that makes complex AI orchestration visible through connected nodes, decision paths, and recognizable integrations. It balances technical control with high-energy lighting so the platform feels powerful without hiding how work moves through the system.
|
|
88
|
+
|
|
89
|
+
## Section roster
|
|
90
|
+
|
|
91
|
+
1. Conference announcement, product navigation, sign-in, and start action.
|
|
92
|
+
2. AI-agent hero with luminous lightning sculpture and enterprise proof.
|
|
93
|
+
3. Interactive workflow canvas for operations, security, development, and sales.
|
|
94
|
+
4. Integration ecosystem and data connection rail.
|
|
95
|
+
5. Agent-building capabilities for code, human approval, and self-hosting.
|
|
96
|
+
6. Code-or-UI chapter and fast-feedback reliability argument.
|
|
97
|
+
7. Case studies, enterprise governance, community testimonials, closing prompt, and footer.
|
|
98
|
+
|
|
99
|
+
## Why it works
|
|
100
|
+
|
|
101
|
+
The connected-node diagrams demonstrate the product model directly, while the orange-to-violet light system creates energy around otherwise dense technical content. Large statements give the eye a rest between capability grids. The cost is low-light complexity: small labels, glows, and nested diagrams require strong contrast and responsive simplification.
|
|
102
|
+
|
|
103
|
+
## Sources
|
|
104
|
+
|
|
105
|
+
- [Refero style page](https://styles.refero.design/style/8601c8ef-e1ea-4186-adb2-6f9a74caf436) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/86083271-09b7-4468-87e8-f0785a7d6a3f.mp4) supply the complete workflow, integration, capability, case-study, enterprise, and closing motion sequence.
|
|
106
|
+
- The live capture at https://n8n.io/ supplies the current conference announcement, community count, responsive screenshots, and measured layout.
|
|
107
|
+
- The sources agree closely. Trust the recording for intermediate diagram and lighting states and the live page for current content and proof.
|
|
108
|
+
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: palais
|
|
3
|
+
title: 'Pa’lais: plant-based food brand'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.palais.bio/
|
|
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/93085278-67f4-4803-84d3-35a009dcd7d9.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/palais/1/strip.webp
|
|
18
|
+
bytes: 314022
|
|
19
|
+
sha256: b15d8245da60a955186f05f36daa21cd55b03cfad80bb12e4b2b88f7792ce627
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 27
|
|
22
|
+
duration_ms: 13733
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.palais.bio/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/palais/2/strip.webp
|
|
27
|
+
bytes: 427388
|
|
28
|
+
sha256: cf9a08e98d89ac31e41b39ecf6b865a59561937588f88df92ae695d1f5a761b9
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/palais/2/measure.json
|
|
31
|
+
bytes: 8319
|
|
32
|
+
sha256: f7ddca85cc44601c5ddd7b5146a2ebcace6bf376dfe4c41d650624c1934d3a0d
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/palais/2/screen-1440.png
|
|
35
|
+
bytes: 595110
|
|
36
|
+
sha256: c99f5bd1f564fa246d0b56d2198a7b60ccd1169c7bc218d2f2a411e7ccb58ebf
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/palais/2/screen-390.png
|
|
39
|
+
bytes: 117391
|
|
40
|
+
sha256: a46dbf4f80cd7f8f44460cf874363a47fdc4da757ec6402036a4fe7e51963259
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 27
|
|
44
|
+
duration_ms: 13733
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- feature
|
|
49
|
+
- offer
|
|
50
|
+
- proof
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- light
|
|
55
|
+
- playful
|
|
56
|
+
- warm
|
|
57
|
+
- editorial
|
|
58
|
+
- depth
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#fffefa'
|
|
61
|
+
ink: '#1b4056'
|
|
62
|
+
accent: '#f7b342'
|
|
63
|
+
type:
|
|
64
|
+
display: condensed display sans and hand-drawn accent lettering
|
|
65
|
+
body: neutral sans, approachable food-product measure
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- reveal
|
|
69
|
+
- pan
|
|
70
|
+
- stagger
|
|
71
|
+
- wipe
|
|
72
|
+
notes: >-
|
|
73
|
+
Eyeballed from 27 sampled frames, not measured. Hand-drawn botanical marks surround a yellow-and-white hero; recipe
|
|
74
|
+
dishes and creamy product imagery reveal as the page scrolls. Orange, green, pink, and blue ingredient fields
|
|
75
|
+
alternate with packshots and calls to explore recipes and products.
|
|
76
|
+
ported_from: null
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## What it does
|
|
80
|
+
|
|
81
|
+
A plant-based food brand landing page that makes spreads and sauces feel creative and appetizing. Illustrations, bright color blocks, and real dishes connect ingredient values to everyday meals.
|
|
82
|
+
|
|
83
|
+
## Section roster
|
|
84
|
+
|
|
85
|
+
1. Illustrated plant-kitchen hero.
|
|
86
|
+
2. Brand purpose and ingredient story.
|
|
87
|
+
3. Recipe photography and discovery cards.
|
|
88
|
+
4. Spread and sauce product ranges.
|
|
89
|
+
5. Where to buy and professional paths.
|
|
90
|
+
6. Closing recipe prompt and footer.
|
|
91
|
+
|
|
92
|
+
## Why it works
|
|
93
|
+
|
|
94
|
+
The varied food photography shows concrete uses for unfamiliar products, while hand-drawn marks give the brand a warm signature. The cost is that many bright fields and moving dishes need disciplined spacing and text contrast.
|
|
95
|
+
|
|
96
|
+
## Sources
|
|
97
|
+
|
|
98
|
+
- [Refero style page](https://styles.refero.design/style/5ef5e1ff-3cb3-4383-9f66-26474409d9ae) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/93085278-67f4-4803-84d3-35a009dcd7d9.mp4) supply the sampled motion and section sequence.
|
|
99
|
+
- The live capture at https://www.palais.bio/ supplies current copy, responsive screenshots, and measured layout.
|
|
100
|
+
- The live page follows the same illustrated kitchen system. Trust the recording for recipe and product transitions and the live page for current products and recipes.
|