@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.
Files changed (54) hide show
  1. package/README.md +26 -5
  2. package/bin/library.mjs +1 -0
  3. package/entries/aker/entry.md +107 -0
  4. package/entries/amrit-palace/entry.md +105 -0
  5. package/entries/apple-airpods-5/entry.md +110 -0
  6. package/entries/apple-airpods-pro/entry.md +106 -0
  7. package/entries/apple-watch-se-3/entry.md +107 -0
  8. package/entries/apple-watch-series-12/entry.md +108 -0
  9. package/entries/arsenijs-fabrica/entry.md +100 -0
  10. package/entries/augen-pro/entry.md +100 -0
  11. package/entries/auros/entry.md +110 -0
  12. package/entries/awe-network/entry.md +101 -0
  13. package/entries/ayocin/entry.md +101 -0
  14. package/entries/bmw/entry.md +101 -0
  15. package/entries/busuu/entry.md +100 -0
  16. package/entries/caldera/entry.md +106 -0
  17. package/entries/calendly/entry.md +106 -0
  18. package/entries/custo/entry.md +100 -0
  19. package/entries/dayos-ai/entry.md +109 -0
  20. package/entries/dimension/entry.md +106 -0
  21. package/entries/dovetail/entry.md +108 -0
  22. package/entries/ease-health/entry.md +105 -0
  23. package/entries/factory-ai/entry.md +106 -0
  24. package/entries/flighty/entry.md +105 -0
  25. package/entries/frame-io/entry.md +108 -0
  26. package/entries/hungry-tiger/entry.md +106 -0
  27. package/entries/hyer-aviation/entry.md +108 -0
  28. package/entries/impilo/entry.md +108 -0
  29. package/entries/monad/entry.md +108 -0
  30. package/entries/n8n/entry.md +108 -0
  31. package/entries/palais/entry.md +100 -0
  32. package/entries/partiful/entry.md +104 -0
  33. package/entries/phantom/entry.md +105 -0
  34. package/entries/podia/entry.md +102 -0
  35. package/entries/posthog/entry.md +101 -0
  36. package/entries/redbrick-coffee/entry.md +98 -0
  37. package/entries/samara/entry.md +107 -0
  38. package/entries/sauce-labs/entry.md +110 -0
  39. package/entries/seline-analytics/entry.md +106 -0
  40. package/entries/sequel/entry.md +104 -0
  41. package/entries/slash/entry.md +110 -0
  42. package/entries/supabase/entry.md +107 -0
  43. package/entries/t1-energy/entry.md +101 -0
  44. package/entries/vana/entry.md +100 -0
  45. package/entries/veed/entry.md +98 -0
  46. package/entries/webflow/entry.md +108 -0
  47. package/entries/zkpass/entry.md +103 -0
  48. package/package.json +2 -1
  49. package/src/cli/upload.mjs +57 -0
  50. package/src/ingest/save.mjs +28 -6
  51. package/src/ingest/upload.mjs +110 -0
  52. package/src/mcp/http.mjs +21 -0
  53. package/src/mcp/prompts.mjs +71 -10
  54. 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.