lewis.moe
Monorepo for Tangled
1{{ define "title" }}brand{{ 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-16">
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 <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 </section>
25
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" />
33 </div>
34 </div>
35 <div class="order-1 lg:order-2">
36 <h2 class="text-xl font-semibold dark:text-white mb-3">Black logotype</h2>
37 <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">
39 This is the preferred version of the logotype, featuring dark text and elements, ideal for light
40 backgrounds and designs.
41 </p>
42 </div>
43 </section>
44
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" />
52 </div>
53 </div>
54 <div class="order-1 lg:order-2">
55 <h2 class="text-xl font-semibold dark:text-white mb-3">White logotype</h2>
56 <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">
58 This version features white text and elements, ideal for dark backgrounds
59 and inverted designs.
60 </p>
61 </div>
62 </section>
63
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" />
73 </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" />
79 </div>
80 </div>
81 </div>
82 <div class="order-1 lg:order-2">
83 <h2 class="text-xl font-semibold dark:text-white mb-3">Mark only</h2>
84 <p class="text-gray-500 dark:text-gray-300 mb-4">
85 When a smaller 1:1 logo or icon is needed, Dolly's face may be used on its own.
86 </p>
87 <p class="text-gray-700 dark:text-gray-300 mb-4">
88 <strong class="font-semibold">Note</strong>: for situations where the background
89 is unknown, use the black version for ideal contrast in most environments.
90 </p>
91 </div>
92 </section>
93
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">
97 <div class="grid grid-cols-2 gap-2">
98 <!-- Pastel Green background -->
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" />
103 </div>
104 <!-- Pastel Blue background -->
105 <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" />
109 </div>
110 <!-- Pastel Yellow background -->
111 <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" />
115 </div>
116 <!-- Pastel Red background -->
117 <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" />
121 </div>
122 </div>
123 </div>
124 <div class="order-1 lg:order-2">
125 <h2 class="text-xl font-semibold dark:text-white mb-3">Colored backgrounds</h2>
126 <p class="text-gray-500 dark:text-gray-300 mb-4">
127 White logo mark on colored backgrounds.
128 </p>
129 <p class="text-gray-700 dark:text-gray-300 mb-4">
130 The white logo mark provides contrast on colored backgrounds.
131 Perfect for more fun design contexts.
132 </p>
133 </div>
134 </section>
135
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">
139 <div class="grid grid-cols-2 gap-2">
140 <!-- Pastel Green background -->
141 <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" />
145 </div>
146 <!-- Pastel Blue background -->
147 <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" />
151 </div>
152 <!-- Pastel Yellow background -->
153 <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" />
157 </div>
158 <!-- Pastel Pink background -->
159 <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" />
163 </div>
164 </div>
165 </div>
166 <div class="order-1 lg:order-2">
167 <h2 class="text-xl font-semibold dark:text-white mb-3">Lighter backgrounds</h2>
168 <p class="text-gray-500 dark:text-gray-300 mb-4">
169 Dark logo mark on lighter, pastel backgrounds.
170 </p>
171 <p class="text-gray-700 dark:text-gray-300 mb-4">
172 The dark logo mark works beautifully on pastel backgrounds,
173 providing crisp contrast.
174 </p>
175 </div>
176 </section>
177
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">
181 <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" />
185 </div>
186 </div>
187 <div class="order-1 lg:order-2">
188 <h2 class="text-xl font-semibold dark:text-white mb-3">Recoloring</h2>
189 <p class="text-gray-500 dark:text-gray-300 mb-4">
190 Custom coloring of the logotype is permitted.
191 </p>
192 <p class="text-gray-700 dark:text-gray-300 mb-4">
193 Recoloring the logotype is allowed as long as readability is maintained.
194 </p>
195 <p class="text-gray-700 dark:text-gray-300 text-sm">
196 <strong>Example:</strong> Gray/sand colored logotype on a light yellow/tan background.
197 </p>
198 </div>
199 </section>
200
201 </div>
202 </main>
203</div>
204{{ end }}