alice.pds.demo.boltless.dev
This repository has no description
1{{ define "title" }}Brand · Tangled{{ end }}
2
3{{ define "content" }}
4<div class="grid grid-cols-10">
5 <header class="col-span-full md:col-span-10 px-6 py-2 mb-4">
6 <h1 class="text-2xl font-bold dark:text-white mb-1">Brand</h1>
7 <p class="text-gray-500 dark:text-gray-300 mb-1">
8 Assets and guidelines for using Tangled's logo and brand elements.
9 </p>
10 </header>
11
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-12">
14
15 <!-- introduction section -->
16 <section>
17 <p class="text-gray-500 dark:text-gray-300 mb-2">
18 Tangled's logo and mascot is <strong>Dolly</strong>, the first ever <em>cloned</em> mammal. Please
19 follow the below guidelines when using Dolly and the logotype.
20 </p>
21 </section>
22
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") }}
28 </div>
29 </div>
30 <div class="order-1">
31 <h2 class="text-xl font-semibold dark:text-white mb-3">Black logotype</h2>
32 <p class="text-gray-500 dark:text-gray-300 mb-4">For use on light-colored backgrounds.</p>
33 <p class="text-gray-700 dark:text-gray-300 mb-4">
34 This is the preferred version of the logotype, featuring dark text and elements, ideal for light
35 backgrounds and designs.
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>
40 </div>
41 </section>
42
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") }}
48 </div>
49 </div>
50 <div class="order-1">
51 <h2 class="text-xl font-semibold dark:text-white mb-3">White logotype</h2>
52 <p class="text-gray-500 dark:text-gray-300 mb-4">For use on dark-colored backgrounds.</p>
53 <p class="text-gray-700 dark:text-gray-300 mb-4">
54 This version features white text and elements, ideal for dark backgrounds
55 and inverted designs.
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>
60 </div>
61 </section>
62
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") }}
69 </div>
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") }}
72 </div>
73 </div>
74 </div>
75 <div class="order-1">
76 <h2 class="text-xl font-semibold dark:text-white mb-3">Mark only</h2>
77 <p class="text-gray-500 dark:text-gray-300 mb-4">
78 When a smaller 1:1 logo or icon is needed, Dolly's face may be used on its own.
79 </p>
80 <p class="text-gray-700 dark:text-gray-300 mb-4">
81 <strong class="font-semibold">Note</strong>: for situations where the background
82 is unknown, use the black version for ideal contrast in most environments.
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>
92 </div>
93 </section>
94
95 <!-- colored backgrounds section -->
96 <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
97 <div class="order-2">
98 <div class="grid grid-cols-2 gap-2">
99 <div class="bg-green-500 p-8 sm:p-12 rounded">
100 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
101 </div>
102 <div class="bg-blue-500 p-8 sm:p-12 rounded">
103 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
104 </div>
105 <div class="bg-yellow-500 p-8 sm:p-12 rounded">
106 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
107 </div>
108 <div class="bg-red-500 p-8 sm:p-12 rounded">
109 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
110 </div>
111 </div>
112 </div>
113 <div class="order-1">
114 <h2 class="text-xl font-semibold dark:text-white mb-3">Colored backgrounds</h2>
115 <p class="text-gray-500 dark:text-gray-300 mb-4">
116 White logo mark on colored backgrounds.
117 </p>
118 <p class="text-gray-700 dark:text-gray-300 mb-4">
119 The white logo mark provides contrast on colored backgrounds.
120 Perfect for more fun design contexts.
121 </p>
122 </div>
123 </section>
124
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">
128 <div class="grid grid-cols-2 gap-2">
129 <div class="bg-green-200 p-8 sm:p-12 rounded">
130 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
131 </div>
132 <div class="bg-blue-200 p-8 sm:p-12 rounded">
133 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
134 </div>
135 <div class="bg-yellow-200 p-8 sm:p-12 rounded">
136 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
137 </div>
138 <div class="bg-pink-200 p-8 sm:p-12 rounded">
139 {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
140 </div>
141 </div>
142 </div>
143 <div class="order-1">
144 <h2 class="text-xl font-semibold dark:text-white mb-3">Lighter backgrounds</h2>
145 <p class="text-gray-500 dark:text-gray-300 mb-4">
146 Dark logo mark on lighter, pastel backgrounds.
147 </p>
148 <p class="text-gray-700 dark:text-gray-300 mb-4">
149 The dark logo mark works beautifully on pastel backgrounds,
150 providing crisp contrast.
151 </p>
152 </div>
153 </section>
154
155 <!-- recoloring section -->
156 <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
157 <div class="order-2">
158 <div class="bg-yellow-100 border border-yellow-200 p-8 sm:p-16 rounded">
159 {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto opacity-60 sepia contrast-75 saturate-50" "FillColor" "black") }}
160 </div>
161 </div>
162 <div class="order-1">
163 <h2 class="text-xl font-semibold dark:text-white mb-3">Recoloring</h2>
164 <p class="text-gray-500 dark:text-gray-300 mb-4">
165 Custom coloring of the logotype is permitted.
166 </p>
167 <p class="text-gray-700 dark:text-gray-300 mb-4">
168 Recoloring the logotype is allowed as long as readability is maintained.
169 </p>
170 <p class="text-gray-700 dark:text-gray-300 text-sm">
171 <strong>Example:</strong> Gray/sand colored logotype on a light yellow/tan background.
172 </p>
173 </div>
174 </section>
175
176 </div>
177 </main>
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>
212{{ end }}