@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,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: seline-analytics
|
|
3
|
+
title: 'Seline Analytics: illustrated privacy-first analytics landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://seline.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/ac54e960-7d18-45cb-a64b-d31e9991e255.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/seline-analytics/1/strip.webp
|
|
18
|
+
bytes: 203852
|
|
19
|
+
sha256: 20488a43c7a9c9a124a43a89d3d6f493a91b5d82d7d3a1064e27481dfa5391fd
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 28817
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://seline.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/seline-analytics/2/strip.webp
|
|
27
|
+
bytes: 240988
|
|
28
|
+
sha256: 4c6213527b0b12559b592db1de5671feed0beaf7af09192f7076691989a22c41
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/seline-analytics/2/measure.json
|
|
31
|
+
bytes: 3277
|
|
32
|
+
sha256: 04127f8f044918aea4c8f71b018264d5d78a2e9aa7ad2996c0e75a7f62eaa672
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/seline-analytics/2/screen-1440.png
|
|
35
|
+
bytes: 244752
|
|
36
|
+
sha256: 9fff0459f0960fa5ad2a81bf26a2cf5fe41b871f5473a1b69dc5e4018abaca54
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/seline-analytics/2/screen-390.png
|
|
39
|
+
bytes: 103378
|
|
40
|
+
sha256: fc97e2478669d715c94a445f92f752a6f29951a7c0b35102c7d32ce5126448f5
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 28817
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- proof
|
|
48
|
+
- feature
|
|
49
|
+
- capability
|
|
50
|
+
- testimonial
|
|
51
|
+
- faq
|
|
52
|
+
- closing
|
|
53
|
+
- footer
|
|
54
|
+
feel:
|
|
55
|
+
- light
|
|
56
|
+
- saas
|
|
57
|
+
- playful
|
|
58
|
+
- minimal
|
|
59
|
+
- warm
|
|
60
|
+
palette:
|
|
61
|
+
canvas: '#fbfbf8'
|
|
62
|
+
ink: '#171717'
|
|
63
|
+
accent: '#36b8f4'
|
|
64
|
+
type:
|
|
65
|
+
display: friendly neo-grotesk sans, bold weight, compact leading
|
|
66
|
+
body: neutral sans, regular weight, readable product-documentation measure
|
|
67
|
+
motion:
|
|
68
|
+
devices:
|
|
69
|
+
- reveal
|
|
70
|
+
- pan
|
|
71
|
+
- stagger
|
|
72
|
+
- drift
|
|
73
|
+
notes: >-
|
|
74
|
+
Eyeballed from 36 sampled frames, not measured. The analytics dashboard rises beneath a concise hero while
|
|
75
|
+
hand-drawn characters and thin colored trails drift around the page edges. Feature cards reveal in a staggered
|
|
76
|
+
masonry rhythm, customer quotes interrupt the product grid, and later setup, principles, integrations, FAQ, and
|
|
77
|
+
closing panels arrive with restrained vertical reveals. The current live page closely matches the recording after
|
|
78
|
+
redirecting from seline.so to seline.com; exact illustration loops, hover states, and carousel timing are not
|
|
79
|
+
measurable from sampled frames.
|
|
80
|
+
ported_from: null
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## What it does
|
|
84
|
+
|
|
85
|
+
A privacy-first analytics landing page that makes a technical alternative feel small, human, and understandable. Real dashboard views carry the proof while hand-drawn people, highlighted phrases, and conversational testimonials soften the software presentation.
|
|
86
|
+
|
|
87
|
+
## Section roster
|
|
88
|
+
|
|
89
|
+
1. Compact navigation and trial action.
|
|
90
|
+
2. Outcome-led hero with dashboard overview and customer logos.
|
|
91
|
+
3. Customer quotation pair and live product demonstration.
|
|
92
|
+
4. Feature grid for visitor monitoring, profiles, funnels, attribution, and filters.
|
|
93
|
+
5. Founder-led Why Seline explanation and additional product evidence.
|
|
94
|
+
6. Quick setup scene and purpose-built product principles.
|
|
95
|
+
7. Integration proof, founder note, FAQ, closing trial panel, and footer.
|
|
96
|
+
|
|
97
|
+
## Why it works
|
|
98
|
+
|
|
99
|
+
The page shows the actual product early and repeatedly, then uses annotations and illustrations to direct attention without making the interface feel heavy. Blue highlights create a consistent reading path through a mostly white canvas. The cost is that pale borders and small screenshots can lose clarity on compact displays unless responsive crops and contrast are carefully maintained.
|
|
100
|
+
|
|
101
|
+
## Sources
|
|
102
|
+
|
|
103
|
+
- [Refero style page](https://styles.refero.design/style/7967c6d9-e50c-42b5-b4d1-74003ba41781) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/ac54e960-7d18-45cb-a64b-d31e9991e255.mp4) supply the full dashboard, feature grid, testimonials, setup illustration, principles, integrations, FAQ, and footer sequence.
|
|
104
|
+
- The submitted live URL https://seline.so/ redirects to the current site at https://seline.com/, which supplies current content, responsive screenshots, and measured layout.
|
|
105
|
+
- The sources agree closely. Trust the recording for intermediate illustration and reveal states and the live page for current URLs and copy.
|
|
106
|
+
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: sequel
|
|
3
|
+
title: 'Sequel: cinematic private-investment collective'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://sequel.co/
|
|
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/b4825b5e-44c5-4b86-8e67-b97307cedd93.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/sequel/1/strip.webp
|
|
18
|
+
bytes: 163370
|
|
19
|
+
sha256: 9319c5872ed54155267caf064e0198f220b29464c29e7e4b7f3fa69f7e37c0d4
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 43100
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://sequel.co/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/sequel/2/strip.webp
|
|
27
|
+
bytes: 122792
|
|
28
|
+
sha256: ab299039cee275fa23c7e4ac8950a35bfc3e011baf5980844fee00df631cdb43
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/sequel/2/measure.json
|
|
31
|
+
bytes: 3168
|
|
32
|
+
sha256: 6b3cfbd73db0699819d49062f33581a29b7607ed47e82179b26ab57d83087af1
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/sequel/2/screen-1440.png
|
|
35
|
+
bytes: 497006
|
|
36
|
+
sha256: 892635006d6e56f8ed46455aaa2c9b972d430937c2e7f15eb8eb9906911a9e3b
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/sequel/2/screen-390.png
|
|
39
|
+
bytes: 27093
|
|
40
|
+
sha256: 8111065c0c97aae9430d735719c035e63d7f5f6ddc84dd3c72f67848be902490
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 43100
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- proof
|
|
49
|
+
- capability
|
|
50
|
+
- testimonial
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- dark
|
|
55
|
+
- premium
|
|
56
|
+
- editorial
|
|
57
|
+
- minimal
|
|
58
|
+
- warm
|
|
59
|
+
- depth
|
|
60
|
+
palette:
|
|
61
|
+
canvas: '#080808'
|
|
62
|
+
ink: '#f1efeb'
|
|
63
|
+
accent: '#c9b69a'
|
|
64
|
+
type:
|
|
65
|
+
display: large editorial serif and neutral sans, restrained leading
|
|
66
|
+
body: small neutral sans, regular weight, cinematic measure
|
|
67
|
+
motion:
|
|
68
|
+
devices:
|
|
69
|
+
- reveal
|
|
70
|
+
- pan
|
|
71
|
+
- parallax
|
|
72
|
+
- spotlight
|
|
73
|
+
- stagger
|
|
74
|
+
notes: >-
|
|
75
|
+
Eyeballed from 36 sampled frames, not measured. A dark architectural film transitions into portraits of athletes,
|
|
76
|
+
artists, and founders. Sparse serif statements reveal over dim footage while member stories and investment proof
|
|
77
|
+
move through isolated media windows; counters and partner marks appear late in the sequence. Exact film playback,
|
|
78
|
+
scroll synchronization, portrait hover behavior, and reduced-motion behavior are not measurable from sampled frames.
|
|
79
|
+
ported_from: null
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## What it does
|
|
83
|
+
|
|
84
|
+
A cinematic investment collective landing page connecting founders with athletes, artists, and entrepreneurs. It uses portrait film, architectural light, and spare editorial copy to make network access feel personal and exclusive.
|
|
85
|
+
|
|
86
|
+
## Section roster
|
|
87
|
+
|
|
88
|
+
1. Dark architectural hero and film action.
|
|
89
|
+
2. Digital family office positioning.
|
|
90
|
+
3. Founder and member paths.
|
|
91
|
+
4. People stories and selective portrait footage.
|
|
92
|
+
5. Belief statement and investment thesis.
|
|
93
|
+
6. Portfolio, network scale, and partner proof.
|
|
94
|
+
7. Membership or founder closing prompt and footer.
|
|
95
|
+
|
|
96
|
+
## Why it works
|
|
97
|
+
|
|
98
|
+
The slow visual pace gives each person and claim room to register, while restrained proof grounds an otherwise atmospheric story. The cost is that dim footage and small copy require strong accessibility controls and a readable static state.
|
|
99
|
+
|
|
100
|
+
## Sources
|
|
101
|
+
|
|
102
|
+
- [Refero style page](https://styles.refero.design/style/1bd3b2ba-9ad9-44ed-9130-03f9d94de821) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/b4825b5e-44c5-4b86-8e67-b97307cedd93.mp4) supply the film, portrait, proof, and closing sequence.
|
|
103
|
+
- The live capture at https://www.sequel.co/ supplies current copy, responsive screenshots, and measured layout; https://sequel.co/ redirects there.
|
|
104
|
+
- The sources use the same cinematic system. Trust the recording for the full motion story and the live site for current membership and founder language.
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: slash
|
|
3
|
+
title: 'Slash: dark editorial business-banking platform'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.slash.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/0af8133f-9c6c-42a2-95c7-fd4f62fe9f90.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/slash/1/strip.webp
|
|
18
|
+
bytes: 240852
|
|
19
|
+
sha256: 4bf9b1c9f318e8ac83d26265d55ed065dbaba2b71ff074af134ae509e8507616
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 29733
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.slash.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/slash/2/strip.webp
|
|
27
|
+
bytes: 266686
|
|
28
|
+
sha256: 619cf5724a05ebe0d6cd5c8e22cda652ec37766df956f1707658c427ffc14340
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/slash/2/measure.json
|
|
31
|
+
bytes: 6548
|
|
32
|
+
sha256: ed4929e66b3968e4768c1a3a3d08e6cc7c7ed9952a59d8d35228f0858403a5f5
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/slash/2/screen-1440.png
|
|
35
|
+
bytes: 605022
|
|
36
|
+
sha256: cdff0d4653d05be5c4c527f2e67ab40cb08dce01409f13cc6d90a1e0bd16c6fc
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/slash/2/screen-390.png
|
|
39
|
+
bytes: 133335
|
|
40
|
+
sha256: 94a547aea228ba003b34402fbf0cfd817cbd6927f85c0014ae99ee003b47a473
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 29733
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- proof
|
|
48
|
+
- feature
|
|
49
|
+
- capability
|
|
50
|
+
- testimonial
|
|
51
|
+
- offer
|
|
52
|
+
- faq
|
|
53
|
+
- closing
|
|
54
|
+
- footer
|
|
55
|
+
feel:
|
|
56
|
+
- dark
|
|
57
|
+
- premium
|
|
58
|
+
- editorial
|
|
59
|
+
- saas
|
|
60
|
+
- depth
|
|
61
|
+
- minimal
|
|
62
|
+
palette:
|
|
63
|
+
canvas: '#050505'
|
|
64
|
+
ink: '#f2f0ec'
|
|
65
|
+
accent: '#c7a76d'
|
|
66
|
+
type:
|
|
67
|
+
display: high-contrast editorial serif, large scale, tight leading
|
|
68
|
+
body: compact neutral sans, regular weight, restrained measure
|
|
69
|
+
motion:
|
|
70
|
+
devices:
|
|
71
|
+
- reveal
|
|
72
|
+
- pin
|
|
73
|
+
- pan
|
|
74
|
+
- spotlight
|
|
75
|
+
- stagger
|
|
76
|
+
- drift
|
|
77
|
+
notes: >-
|
|
78
|
+
Eyeballed from 36 sampled frames, not measured. The black-on-black product hero uses narrow moving light to reveal
|
|
79
|
+
the card, phone, and stone pedestal while a persistent navigation and announcement rail hold position. Product UI
|
|
80
|
+
panels and customer portraits reveal in measured groups; oversized serif statements arrive between dense capability
|
|
81
|
+
grids, proof metrics, security details, pricing, FAQ, and insight cards. Small interface glows and floating controls
|
|
82
|
+
drift inside panels, but exact pointer tracking, hover response, carousel timing, and reduced-motion behavior are
|
|
83
|
+
not measurable from sampled frames.
|
|
84
|
+
ported_from: null
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## What it does
|
|
88
|
+
|
|
89
|
+
A premium business-banking landing page that treats finance software like a luxury physical product. It combines low-key product photography, editorial serif headlines, and compact interface evidence to position a broad banking platform as controlled, secure, and unusually polished.
|
|
90
|
+
|
|
91
|
+
## Section roster
|
|
92
|
+
|
|
93
|
+
1. Funding announcement, compact navigation, sign-in, and start action.
|
|
94
|
+
2. Dark product hero with email conversion and card-and-phone still life.
|
|
95
|
+
3. Customer stories and operating metrics.
|
|
96
|
+
4. Financial-foundation capabilities for treasury and working capital.
|
|
97
|
+
5. Modern software tools, APIs, virtual accounts, analytics, and transfers.
|
|
98
|
+
6. Testimonial, aggregate proof, and security architecture.
|
|
99
|
+
7. Pricing comparison, FAQ, banking insights, closing application prompt, and legal footer.
|
|
100
|
+
|
|
101
|
+
## Why it works
|
|
102
|
+
|
|
103
|
+
The restrained black field gives every illuminated product fragment authority, while the serif voice differentiates the page from conventional fintech dashboards. Alternating evidence grids and spacious statements keeps a long capability story legible. The cost is a very dark visual system whose product details, focus states, and low-contrast supporting copy need careful accessibility checks.
|
|
104
|
+
|
|
105
|
+
## Sources
|
|
106
|
+
|
|
107
|
+
- [Refero style page](https://styles.refero.design/style/7c38e84b-aea0-4c8f-b3e9-60b994ee6c6b) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/0af8133f-9c6c-42a2-95c7-fd4f62fe9f90.mp4) supply the complete dark product narrative, capability grids, proof, pricing, FAQ, and closing sequence.
|
|
108
|
+
- The live capture at https://www.slash.com/ supplies the current funding announcement, product positioning, responsive screenshots, and measured layout.
|
|
109
|
+
- The sources agree closely. Trust the recording for intermediate lighting and motion states and the live page for current copy and claims.
|
|
110
|
+
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: supabase
|
|
3
|
+
title: 'Supabase: dark developer-platform landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://supabase.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/41184fa6-d5a2-44c3-85bf-83d3eccb0c29.mp4'
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/supabase/1/strip.webp
|
|
18
|
+
bytes: 175484
|
|
19
|
+
sha256: 70ee71c9615968c50cfa0d4f40a34bb19223a6c598cfb8b26aa36e60c51d7867
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 36
|
|
22
|
+
duration_ms: 18800
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://supabase.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/supabase/2/strip.webp
|
|
27
|
+
bytes: 208636
|
|
28
|
+
sha256: 2e84d50e686c5c9102241af2896ae17dbfbe0641a06a1fc3e8c87a47bfb491e2
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/supabase/2/measure.json
|
|
31
|
+
bytes: 6924
|
|
32
|
+
sha256: 1327e08dbba9b554f1259f7a0ff3b71a0760433b5dc0cf483b17e3db15a94a36
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/supabase/2/screen-1440.png
|
|
35
|
+
bytes: 156623
|
|
36
|
+
sha256: 561e65c820539de209782c0efee295f78f918bea0a2674fc6ba8c16891765366
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/supabase/2/screen-390.png
|
|
39
|
+
bytes: 70318
|
|
40
|
+
sha256: d925ae6a6b39b12b593929875df6dc671ed5cad524fd65688abf142c126694f5
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 36
|
|
44
|
+
duration_ms: 18800
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- capability
|
|
48
|
+
- feature
|
|
49
|
+
- proof
|
|
50
|
+
- testimonial
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- dark
|
|
55
|
+
- cold
|
|
56
|
+
- saas
|
|
57
|
+
- brutalist
|
|
58
|
+
- depth
|
|
59
|
+
- minimal
|
|
60
|
+
palette:
|
|
61
|
+
canvas: '#111111'
|
|
62
|
+
ink: '#ededed'
|
|
63
|
+
accent: '#3ecf8e'
|
|
64
|
+
type:
|
|
65
|
+
display: neutral developer sans, medium weight, compact technical cadence
|
|
66
|
+
body: neutral sans and monospace labels, regular weight, dense product copy
|
|
67
|
+
motion:
|
|
68
|
+
devices:
|
|
69
|
+
- reveal
|
|
70
|
+
- stagger
|
|
71
|
+
- pan
|
|
72
|
+
- tabs
|
|
73
|
+
- stack
|
|
74
|
+
notes: >-
|
|
75
|
+
Eyeballed from 36 sampled frames, not measured. The Refero recording captures an earlier dark homepage where a fixed
|
|
76
|
+
green-accent navigation frames a dense bento grid of database, authentication, storage, realtime, vector, and API
|
|
77
|
+
cards. Cards reveal and brighten in sequence, framework marks pan across a rail, customer logos populate a modular
|
|
78
|
+
proof field, and starter examples stack before a dashboard-led closing chapter. The current live page has shifted to
|
|
79
|
+
a mostly white editorial system with larger product demonstrations and community cards. Exact tab interaction, code
|
|
80
|
+
animation, pointer behavior, and hover response are not measurable from sampled frames.
|
|
81
|
+
ported_from: null
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## What it does
|
|
85
|
+
|
|
86
|
+
A developer-platform landing page that explains a broad backend product through modular capability cards and concrete dashboard evidence. The recorded dark version behaves like an expandable technical map; the current light version keeps the same product breadth but uses larger editorial demonstrations and more open spacing.
|
|
87
|
+
|
|
88
|
+
## Section roster
|
|
89
|
+
|
|
90
|
+
1. Event announcement, developer navigation, sign-in, and project action.
|
|
91
|
+
2. Build-in-a-weekend hero with database-led conversion choices.
|
|
92
|
+
3. Capability grid for database, authentication, functions, storage, realtime, vectors, and APIs.
|
|
93
|
+
4. Integrated-platform and framework compatibility proof.
|
|
94
|
+
5. Dashboard productivity demonstration.
|
|
95
|
+
6. Production-ready starter templates and industry customer stories.
|
|
96
|
+
7. Community proof, open-source statement, closing project prompt, and deep footer.
|
|
97
|
+
|
|
98
|
+
## Why it works
|
|
99
|
+
|
|
100
|
+
The card grid turns a technically broad platform into a system that developers can scan by capability, while code, schema diagrams, and dashboard fragments provide immediate product evidence. The green accent consistently marks action and system state. The cost is high information density: small technical labels and many simultaneous modules require careful hierarchy and responsive simplification.
|
|
101
|
+
|
|
102
|
+
## Sources
|
|
103
|
+
|
|
104
|
+
- [Refero style page](https://styles.refero.design/style/632249f1-fd78-4c77-9b34-7bae37ff3e9b) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/41184fa6-d5a2-44c3-85bf-83d3eccb0c29.mp4) supply the earlier dark bento system, capability reveals, framework rail, customer grid, starter cards, and dashboard closing.
|
|
105
|
+
- The live capture at https://supabase.com/ supplies the current light redesign, product demonstrations, customer stories, community content, responsive screenshots, and measured layout.
|
|
106
|
+
- The sources represent different visual generations. Trust the live page for current design and content; use the recording as a complete archived reference for the dark modular system.
|
|
107
|
+
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: t1-energy
|
|
3
|
+
title: 'T1 Energy: industrial solar-manufacturing landing'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://t1energy.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/4004d7ac-01a0-4d61-997c-eace7a73c6da.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/t1-energy/1/strip.webp
|
|
18
|
+
bytes: 239510
|
|
19
|
+
sha256: 77c2affef2bf720db5b4ba04af9af2b0498220c3fb360d57f45d0bbd9b76d72e
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 28
|
|
22
|
+
duration_ms: 13900
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://t1energy.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/t1-energy/2/strip.webp
|
|
27
|
+
bytes: 239052
|
|
28
|
+
sha256: 9269239f0bd86b9e1fa1149e236009ff12357523c9086869f968a1083d2bfa75
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/t1-energy/2/measure.json
|
|
31
|
+
bytes: 3934
|
|
32
|
+
sha256: 4f9bb0800194671ed97e6daf78a212f0bfdc4b0b63963d99d8ce3cee949b0d3a
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/t1-energy/2/screen-1440.png
|
|
35
|
+
bytes: 1096127
|
|
36
|
+
sha256: 537b7c6344ee33e8eab0f4579646375183f784c31be750535fcbd51d7c7ab315
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/t1-energy/2/screen-390.png
|
|
39
|
+
bytes: 266869
|
|
40
|
+
sha256: 451c072166a8b467a82ad4d5860e307e240365f195968cf885f388d9f2f8971c
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 28
|
|
44
|
+
duration_ms: 13900
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- capability
|
|
49
|
+
- proof
|
|
50
|
+
- feature
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- light
|
|
55
|
+
- minimal
|
|
56
|
+
- editorial
|
|
57
|
+
- cold
|
|
58
|
+
- premium
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#f5f5f1'
|
|
61
|
+
ink: '#202525'
|
|
62
|
+
accent: '#9ab1b4'
|
|
63
|
+
type:
|
|
64
|
+
display: restrained neutral sans, light weight, generous leading
|
|
65
|
+
body: compact neutral sans, technical editorial measure
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- reveal
|
|
69
|
+
- pan
|
|
70
|
+
- stagger
|
|
71
|
+
- count
|
|
72
|
+
notes: >-
|
|
73
|
+
Eyeballed from 28 sampled frames, not measured. Factory footage opens the page before white editorial sections
|
|
74
|
+
reveal solar-cell and battery manufacturing details. Product renders pan through a sparse technical grid; large
|
|
75
|
+
financial and capacity figures count into view before project imagery and the footer. Exact video timing, counter
|
|
76
|
+
interpolation, hover response, and reduced-motion behavior are not measurable from sampled frames.
|
|
77
|
+
ported_from: null
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## What it does
|
|
81
|
+
|
|
82
|
+
An industrial energy landing page that grounds a large manufacturing ambition in real facilities, technical products, and measurable capacity. Cool imagery and generous white space make the hardware feel precise rather than abstract.
|
|
83
|
+
|
|
84
|
+
## Section roster
|
|
85
|
+
|
|
86
|
+
1. Factory film and Advanced American Solar and Storage hero.
|
|
87
|
+
2. Manufacturing overview and facility photography.
|
|
88
|
+
3. Solar-cell and module product chapters.
|
|
89
|
+
4. Technical renderings and product specifications.
|
|
90
|
+
5. Investment and production metrics.
|
|
91
|
+
6. Project imagery, company links, and footer.
|
|
92
|
+
|
|
93
|
+
## Why it works
|
|
94
|
+
|
|
95
|
+
The factory footage establishes physical credibility immediately, then product renders and metrics explain scale with a calm visual rhythm. The cost is that pale captions and large video assets need careful contrast, compression, and static fallbacks.
|
|
96
|
+
|
|
97
|
+
## Sources
|
|
98
|
+
|
|
99
|
+
- [Refero style page](https://styles.refero.design/style/e79b761d-f476-4c5d-8943-e31a58664e4d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/4004d7ac-01a0-4d61-997c-eace7a73c6da.mp4) supply the factory opening, product sequence, metrics, and closing.
|
|
100
|
+
- The live capture at https://t1energy.com/ supplies current positioning, responsive screenshots, and measured layout.
|
|
101
|
+
- The sources agree on the core design; trust the recording for transition continuity and the live page for current announcements and figures.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: vana
|
|
3
|
+
title: 'Vana: personal data infrastructure'
|
|
4
|
+
tier: inspiration
|
|
5
|
+
source:
|
|
6
|
+
kind: public-site
|
|
7
|
+
url: https://www.vana.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/a3563017-dcef-4a36-bd07-9f638e3e4fdf.mp4
|
|
16
|
+
artifacts:
|
|
17
|
+
- key: entries/vana/1/strip.webp
|
|
18
|
+
bytes: 129848
|
|
19
|
+
sha256: 3ed79e491c42f46490b0aee20cec99e99b83319c848a2c307b794610e755d7f2
|
|
20
|
+
uploaded: true
|
|
21
|
+
frames: 18
|
|
22
|
+
duration_ms: 8783
|
|
23
|
+
- method: both
|
|
24
|
+
input: https://www.vana.com/
|
|
25
|
+
artifacts:
|
|
26
|
+
- key: entries/vana/2/strip.webp
|
|
27
|
+
bytes: 261970
|
|
28
|
+
sha256: 0a1eb61643cfe6475cb92a903344deb022bb44e30d53b408946a1d14969097d3
|
|
29
|
+
uploaded: true
|
|
30
|
+
- key: entries/vana/2/measure.json
|
|
31
|
+
bytes: 1554
|
|
32
|
+
sha256: ad5962af583cfc2489fee5073cd43acb5a3e6fc3712857381715b0367bc75af2
|
|
33
|
+
uploaded: true
|
|
34
|
+
- key: entries/vana/2/screen-1440.png
|
|
35
|
+
bytes: 509200
|
|
36
|
+
sha256: 35e85bd7c81da6402dc39c9f07100b9174c50ea1c54c38c2b8acbd5f3cf19b12
|
|
37
|
+
uploaded: true
|
|
38
|
+
- key: entries/vana/2/screen-390.png
|
|
39
|
+
bytes: 353891
|
|
40
|
+
sha256: cfda7194da8a0482b9e58a3d40dc06edf62fbe2ed37f9c5bea362c3a8cb004e2
|
|
41
|
+
uploaded: true
|
|
42
|
+
media:
|
|
43
|
+
frames: 18
|
|
44
|
+
duration_ms: 8783
|
|
45
|
+
roles:
|
|
46
|
+
- hero
|
|
47
|
+
- explainer
|
|
48
|
+
- capability
|
|
49
|
+
- feature
|
|
50
|
+
- proof
|
|
51
|
+
- closing
|
|
52
|
+
- footer
|
|
53
|
+
feel:
|
|
54
|
+
- dark
|
|
55
|
+
- cold
|
|
56
|
+
- saas
|
|
57
|
+
- depth
|
|
58
|
+
- premium
|
|
59
|
+
palette:
|
|
60
|
+
canvas: '#090a13'
|
|
61
|
+
ink: '#f1f1fc'
|
|
62
|
+
accent: '#6959ff'
|
|
63
|
+
type:
|
|
64
|
+
display: large neutral sans, tight leading
|
|
65
|
+
body: compact neutral sans, technical data measure
|
|
66
|
+
motion:
|
|
67
|
+
devices:
|
|
68
|
+
- reveal
|
|
69
|
+
- pan
|
|
70
|
+
- stagger
|
|
71
|
+
- spotlight
|
|
72
|
+
notes: >-
|
|
73
|
+
Eyeballed from 18 sampled frames, not measured. The Refero recording opens on a dark globe and purple data points,
|
|
74
|
+
then pans through ownership cards, a developer stack diagram, and a bright protocol chapter. The current site at
|
|
75
|
+
vana.org has a lavender hero and redesigned content grid. Exact map dynamics, card interactions, pointer response,
|
|
76
|
+
and reduced-motion behavior are not measurable from sampled frames.
|
|
77
|
+
ported_from: null
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## What it does
|
|
81
|
+
|
|
82
|
+
An archived data-ownership infrastructure story that argues people should control and reuse the information they create. Dark global imagery and modular cards visualize an otherwise invisible data layer.
|
|
83
|
+
|
|
84
|
+
## Section roster
|
|
85
|
+
|
|
86
|
+
1. Dark globe and AI ownership claim.
|
|
87
|
+
2. Personal data use cases.
|
|
88
|
+
3. Developer and participation paths.
|
|
89
|
+
4. Protocol stack diagram.
|
|
90
|
+
5. Open-data chapter and closing.
|
|
91
|
+
|
|
92
|
+
## Why it works
|
|
93
|
+
|
|
94
|
+
The globe and layered cards turn a policy-like subject into a spatial system, while a bright final chapter gives the technical story a clear turn. The cost is that abstract imagery and small labels need plain-language support and strong contrast.
|
|
95
|
+
|
|
96
|
+
## Sources
|
|
97
|
+
|
|
98
|
+
- [Refero style page](https://styles.refero.design/style/2a3cdb2e-effe-406b-932e-37e4dc88ab1d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a3563017-dcef-4a36-bd07-9f638e3e4fdf.mp4) supply the sampled motion and section sequence.
|
|
99
|
+
- The live capture at https://vana.org/ supplies current copy, responsive screenshots, and measured layout.
|
|
100
|
+
- The submitted vana.com redirects to vana.org. The live site is a substantial lavender redesign, so trust the recording for this archived dark visual system and vana.org for current positioning.
|