Monorepo for Tangled
appview/pages: rework brand page
use the blessed logotype
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jun 15, 2026, 10:38 AM +0100)
97e8ed99
82899c63
+93
-85
+93
-85
appview/pages/templates/brand/brand.html
+93
-85
appview/pages/templates/brand/brand.html
···
10
10
</header>
11
11
12
12
<main class="col-span-full md:col-span-10 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10">
13
-
<div class="space-y-16">
13
+
<div class="space-y-12">
14
14
15
-
<!-- Introduction Section -->
15
+
<!-- introduction section -->
16
16
<section>
17
17
<p class="text-gray-500 dark:text-gray-300 mb-2">
18
18
Tangled's logo and mascot is <strong>Dolly</strong>, the first ever <em>cloned</em> mammal. Please
19
19
follow the below guidelines when using Dolly and the logotype.
20
20
</p>
21
-
<p class="text-gray-500 dark:text-gray-300 mb-2">
22
-
All assets are served as SVGs, and can be downloaded by right-clicking and clicking "Save image as".
23
-
</p>
24
21
</section>
25
22
26
-
<!-- Black Logotype Section -->
27
-
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
28
-
<div class="order-2 lg:order-1">
29
-
<div class="border border-gray-200 dark:border-gray-700 p-8 sm:p-16 bg-gray-50 dark:bg-gray-100 rounded">
30
-
<img src="https://assets.tangled.network/tangled_logotype_black_on_trans.svg"
31
-
alt="Tangled logo - black version"
32
-
class="w-full max-w-sm mx-auto" />
23
+
<!-- black logotype section -->
24
+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
25
+
<div class="order-2">
26
+
<div id="asset-logotype-black" data-filename="tangled_logotype_black.svg" class="border border-gray-200 dark:border-gray-700 p-8 sm:p-16 bg-gray-50 dark:bg-gray-100 rounded">
27
+
{{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto" "FillColor" "black") }}
33
28
</div>
34
29
</div>
35
-
<div class="order-1 lg:order-2">
30
+
<div class="order-1">
36
31
<h2 class="text-xl font-semibold dark:text-white mb-3">Black logotype</h2>
37
32
<p class="text-gray-500 dark:text-gray-300 mb-4">For use on light-colored backgrounds.</p>
38
-
<p class="text-gray-700 dark:text-gray-300">
33
+
<p class="text-gray-700 dark:text-gray-300 mb-4">
39
34
This is the preferred version of the logotype, featuring dark text and elements, ideal for light
40
35
backgrounds and designs.
41
36
</p>
37
+
<button type="button" data-download="#asset-logotype-black" class="btn flex items-center gap-2 w-fit">
38
+
{{ i "download" "w-4 h-4" }} Download SVG
39
+
</button>
42
40
</div>
43
41
</section>
44
42
45
-
<!-- White Logotype Section -->
46
-
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
47
-
<div class="order-2 lg:order-1">
48
-
<div class="bg-black p-8 sm:p-16 rounded">
49
-
<img src="https://assets.tangled.network/tangled_logotype_white_on_trans.svg"
50
-
alt="Tangled logo - white version"
51
-
class="w-full max-w-sm mx-auto" />
43
+
<!-- white logotype section -->
44
+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
45
+
<div class="order-2">
46
+
<div id="asset-logotype-white" data-filename="tangled_logotype_white.svg" class="bg-black p-8 sm:p-16 rounded">
47
+
{{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto" "FillColor" "white") }}
52
48
</div>
53
49
</div>
54
-
<div class="order-1 lg:order-2">
50
+
<div class="order-1">
55
51
<h2 class="text-xl font-semibold dark:text-white mb-3">White logotype</h2>
56
52
<p class="text-gray-500 dark:text-gray-300 mb-4">For use on dark-colored backgrounds.</p>
57
-
<p class="text-gray-700 dark:text-gray-300">
53
+
<p class="text-gray-700 dark:text-gray-300 mb-4">
58
54
This version features white text and elements, ideal for dark backgrounds
59
55
and inverted designs.
60
56
</p>
57
+
<button type="button" data-download="#asset-logotype-white" class="btn flex items-center gap-2 w-fit">
58
+
{{ i "download" "w-4 h-4" }} Download SVG
59
+
</button>
61
60
</div>
62
61
</section>
63
62
64
-
<!-- Mark Only Section -->
65
-
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
66
-
<div class="order-2 lg:order-1">
67
-
<div class="grid grid-cols-2 gap-2">
68
-
<!-- Black mark on light background -->
69
-
<div class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-100 p-8 sm:p-12 rounded">
70
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg"
71
-
alt="Dolly face - black version"
72
-
class="w-full max-w-16 mx-auto" />
63
+
<!-- mark only section -->
64
+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
65
+
<div class="order-2 h-full">
66
+
<div class="grid grid-cols-2 gap-2 h-full">
67
+
<div id="asset-face-black" data-filename="tangled_dolly_face_black.svg" class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-100 p-8 sm:p-12 rounded flex items-center justify-center">
68
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
73
69
</div>
74
-
<!-- White mark on dark background -->
75
-
<div class="bg-black p-8 sm:p-12 rounded">
76
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg"
77
-
alt="Dolly face - white version"
78
-
class="w-full max-w-16 mx-auto" />
70
+
<div id="asset-face-white" data-filename="tangled_dolly_face_white.svg" class="bg-black p-8 sm:p-12 rounded flex items-center justify-center">
71
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
79
72
</div>
80
73
</div>
81
74
</div>
82
-
<div class="order-1 lg:order-2">
75
+
<div class="order-1">
83
76
<h2 class="text-xl font-semibold dark:text-white mb-3">Mark only</h2>
84
77
<p class="text-gray-500 dark:text-gray-300 mb-4">
85
78
When a smaller 1:1 logo or icon is needed, Dolly's face may be used on its own.
···
88
81
<strong class="font-semibold">Note</strong>: for situations where the background
89
82
is unknown, use the black version for ideal contrast in most environments.
90
83
</p>
84
+
<div class="flex flex-wrap gap-2">
85
+
<button type="button" data-download="#asset-face-black" class="btn flex items-center gap-2 w-fit">
86
+
{{ i "download" "w-4 h-4" }} Black on white
87
+
</button>
88
+
<button type="button" data-download="#asset-face-white" class="btn flex items-center gap-2 w-fit">
89
+
{{ i "download" "w-4 h-4" }} White on black
90
+
</button>
91
+
</div>
91
92
</div>
92
93
</section>
93
94
94
-
<!-- Colored Backgrounds Section -->
95
-
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
96
-
<div class="order-2 lg:order-1">
95
+
<!-- colored backgrounds section -->
96
+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
97
+
<div class="order-2">
97
98
<div class="grid grid-cols-2 gap-2">
98
-
<!-- Pastel Green background -->
99
99
<div class="bg-green-500 p-8 sm:p-12 rounded">
100
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg"
101
-
alt="Tangled logo on pastel green background"
102
-
class="w-full max-w-16 mx-auto" />
100
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
103
101
</div>
104
-
<!-- Pastel Blue background -->
105
102
<div class="bg-blue-500 p-8 sm:p-12 rounded">
106
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg"
107
-
alt="Tangled logo on pastel blue background"
108
-
class="w-full max-w-16 mx-auto" />
103
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
109
104
</div>
110
-
<!-- Pastel Yellow background -->
111
105
<div class="bg-yellow-500 p-8 sm:p-12 rounded">
112
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg"
113
-
alt="Tangled logo on pastel yellow background"
114
-
class="w-full max-w-16 mx-auto" />
106
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
115
107
</div>
116
-
<!-- Pastel Red background -->
117
108
<div class="bg-red-500 p-8 sm:p-12 rounded">
118
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg"
119
-
alt="Tangled logo on pastel red background"
120
-
class="w-full max-w-16 mx-auto" />
109
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
121
110
</div>
122
111
</div>
123
112
</div>
124
-
<div class="order-1 lg:order-2">
113
+
<div class="order-1">
125
114
<h2 class="text-xl font-semibold dark:text-white mb-3">Colored backgrounds</h2>
126
115
<p class="text-gray-500 dark:text-gray-300 mb-4">
127
116
White logo mark on colored backgrounds.
···
133
122
</div>
134
123
</section>
135
124
136
-
<!-- Black Logo on Pastel Backgrounds Section -->
137
-
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
138
-
<div class="order-2 lg:order-1">
125
+
<!-- black logo on pastel backgrounds section -->
126
+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
127
+
<div class="order-2">
139
128
<div class="grid grid-cols-2 gap-2">
140
-
<!-- Pastel Green background -->
141
129
<div class="bg-green-200 p-8 sm:p-12 rounded">
142
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg"
143
-
alt="Tangled logo on pastel green background"
144
-
class="w-full max-w-16 mx-auto" />
130
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
145
131
</div>
146
-
<!-- Pastel Blue background -->
147
132
<div class="bg-blue-200 p-8 sm:p-12 rounded">
148
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg"
149
-
alt="Tangled logo on pastel blue background"
150
-
class="w-full max-w-16 mx-auto" />
133
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
151
134
</div>
152
-
<!-- Pastel Yellow background -->
153
135
<div class="bg-yellow-200 p-8 sm:p-12 rounded">
154
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg"
155
-
alt="Tangled logo on pastel yellow background"
156
-
class="w-full max-w-16 mx-auto" />
136
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
157
137
</div>
158
-
<!-- Pastel Pink background -->
159
138
<div class="bg-pink-200 p-8 sm:p-12 rounded">
160
-
<img src="https://assets.tangled.network/tangled_dolly_face_only_black_on_trans.svg"
161
-
alt="Tangled logo on pastel pink background"
162
-
class="w-full max-w-16 mx-auto" />
139
+
{{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
163
140
</div>
164
141
</div>
165
142
</div>
166
-
<div class="order-1 lg:order-2">
143
+
<div class="order-1">
167
144
<h2 class="text-xl font-semibold dark:text-white mb-3">Lighter backgrounds</h2>
168
145
<p class="text-gray-500 dark:text-gray-300 mb-4">
169
146
Dark logo mark on lighter, pastel backgrounds.
···
175
152
</div>
176
153
</section>
177
154
178
-
<!-- Recoloring Section -->
179
-
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
180
-
<div class="order-2 lg:order-1">
155
+
<!-- recoloring section -->
156
+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
157
+
<div class="order-2">
181
158
<div class="bg-yellow-100 border border-yellow-200 p-8 sm:p-16 rounded">
182
-
<img src="https://assets.tangled.network/tangled_logotype_black_on_trans.svg"
183
-
alt="Recolored Tangled logotype in gray/sand color"
184
-
class="w-full max-w-sm mx-auto opacity-60 sepia contrast-75 saturate-50" />
159
+
{{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto opacity-60 sepia contrast-75 saturate-50" "FillColor" "black") }}
185
160
</div>
186
161
</div>
187
-
<div class="order-1 lg:order-2">
162
+
<div class="order-1">
188
163
<h2 class="text-xl font-semibold dark:text-white mb-3">Recoloring</h2>
189
164
<p class="text-gray-500 dark:text-gray-300 mb-4">
190
165
Custom coloring of the logotype is permitted.
···
201
176
</div>
202
177
</main>
203
178
</div>
179
+
180
+
<script>
181
+
(function () {
182
+
function downloadSvg(svg, filename) {
183
+
var clone = svg.cloneNode(true);
184
+
// strip tailwind utility classes — they're meaningless in a standalone file
185
+
clone.removeAttribute('class');
186
+
clone.querySelectorAll('[class]').forEach(function (el) { el.removeAttribute('class'); });
187
+
if (!clone.getAttribute('xmlns')) {
188
+
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
189
+
}
190
+
var data = '<?xml version="1.0" encoding="UTF-8"?>\n' + new XMLSerializer().serializeToString(clone);
191
+
var url = URL.createObjectURL(new Blob([data], { type: 'image/svg+xml' }));
192
+
var a = document.createElement('a');
193
+
a.href = url;
194
+
a.download = filename || 'tangled.svg';
195
+
document.body.appendChild(a);
196
+
a.click();
197
+
a.remove();
198
+
URL.revokeObjectURL(url);
199
+
}
200
+
201
+
document.querySelectorAll('[data-download]').forEach(function (btn) {
202
+
btn.addEventListener('click', function () {
203
+
var container = document.querySelector(btn.dataset.download);
204
+
if (!container) return;
205
+
var svg = container.querySelector('svg');
206
+
if (!svg) return;
207
+
downloadSvg(svg, container.dataset.filename);
208
+
});
209
+
});
210
+
})();
211
+
</script>
204
212
{{ end }}