forked from
margin.at/margin
(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
brand page
+257
-2
+248
web/src/pages/brand.astro
+248
web/src/pages/brand.astro
···
1
+
---
2
+
import BaseLayout from '../layouts/StaticLayout.astro';
3
+
4
+
const sections = [
5
+
{ id: 'logo', title: 'Logo' },
6
+
{ id: 'colors', title: 'Colors' },
7
+
{ id: 'typography', title: 'Typography' },
8
+
{ id: 'usage', title: 'Usage guidelines' },
9
+
];
10
+
---
11
+
12
+
<BaseLayout title="Brand — Margin" description="Margin brand guidelines">
13
+
<div class="min-h-screen bg-surface-100 dark:bg-surface-900">
14
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 md:pt-14 pb-20">
15
+
<a href="/home" class="inline-flex items-center gap-1.5 text-sm font-medium text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white transition-colors mb-8">
16
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
17
+
Back
18
+
</a>
19
+
20
+
<div class="lg:grid lg:grid-cols-[minmax(0,1fr)_200px] lg:gap-12">
21
+
<div class="bg-white dark:bg-surface-800 rounded-2xl px-5 sm:px-8 lg:px-12 py-10 md:py-14 lg:min-w-0">
22
+
<header class="mb-12">
23
+
<p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Brand</p>
24
+
<h1 class="font-display font-bold text-3xl md:text-4xl text-surface-900 dark:text-white tracking-tight mb-2">Brand Guidelines</h1>
25
+
<p class="text-[15px] text-surface-500 dark:text-surface-400">Assets and rules for representing Margin in third-party contexts.</p>
26
+
</header>
27
+
28
+
<details class="lg:hidden mb-10 rounded-xl border border-surface-200 dark:border-surface-700/60 overflow-hidden">
29
+
<summary class="cursor-pointer px-4 py-3 text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider bg-surface-50 dark:bg-surface-900/40">On this page</summary>
30
+
<ol class="px-4 py-3 space-y-0.5 text-sm">
31
+
{sections.map((s) => (
32
+
<li><a href={`#${s.id}`} class="block py-1 text-surface-600 dark:text-surface-400">{s.title}</a></li>
33
+
))}
34
+
</ol>
35
+
</details>
36
+
37
+
<div class="space-y-14">
38
+
39
+
<section id="logo" data-toc-section class="scroll-mt-6">
40
+
<h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Logo</h2>
41
+
<p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Use the SVG whenever possible. Do not alter the shape, proportions, or color.</p>
42
+
43
+
<div class="grid sm:grid-cols-2 gap-3 mb-6">
44
+
<div class="rounded-xl border border-surface-200 dark:border-surface-700/60 bg-white flex items-center justify-center h-36">
45
+
<svg width="56" height="49" viewBox="0 0 265 231" fill="#027bff" xmlns="http://www.w3.org/2000/svg">
46
+
<path d="M0 230 V0 H199 V65.7156 H149.5 V115.216 H182.5 L199 131.716 V230 Z"/>
47
+
<path d="M215 214.224 V230 H264.5 V0 H215 V16.2242 H248.5 V214.224 H215 Z"/>
48
+
</svg>
49
+
</div>
50
+
<div class="rounded-xl border border-surface-700/60 bg-surface-900 flex items-center justify-center h-36">
51
+
<svg width="56" height="49" viewBox="0 0 265 231" fill="#027bff" xmlns="http://www.w3.org/2000/svg">
52
+
<path d="M0 230 V0 H199 V65.7156 H149.5 V115.216 H182.5 L199 131.716 V230 Z"/>
53
+
<path d="M215 214.224 V230 H264.5 V0 H215 V16.2242 H248.5 V214.224 H215 Z"/>
54
+
</svg>
55
+
</div>
56
+
</div>
57
+
58
+
<div class="flex flex-wrap gap-3 mb-8">
59
+
<a href="/logo.svg" download class="inline-flex items-center gap-1.5 text-sm font-medium text-surface-600 dark:text-surface-300 border border-surface-200 dark:border-surface-700 rounded-lg px-3 py-1.5 hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
60
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
61
+
SVG
62
+
</a>
63
+
<a href="/logo.png" download class="inline-flex items-center gap-1.5 text-sm font-medium text-surface-600 dark:text-surface-300 border border-surface-200 dark:border-surface-700 rounded-lg px-3 py-1.5 hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
64
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
65
+
PNG
66
+
</a>
67
+
</div>
68
+
69
+
<div class="space-y-2 text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed">
70
+
<p class="font-medium text-surface-900 dark:text-white text-sm">Do not:</p>
71
+
<ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600">
72
+
<li>Recolor the logo to anything other than <span class="font-mono text-[13px] px-1 py-0.5 rounded bg-surface-100 dark:bg-surface-900">#027bff</span>, white, or black.</li>
73
+
<li>Stretch, rotate, or otherwise distort the mark.</li>
74
+
<li>Place the logo on a background that reduces legibility.</li>
75
+
<li>Add effects such as shadows, gradients, or outlines.</li>
76
+
<li>Use the logo in a way that implies an official partnership or endorsement without written permission from Padding Labs LLC.</li>
77
+
</ul>
78
+
</div>
79
+
</section>
80
+
81
+
<section id="colors" data-toc-section class="scroll-mt-6">
82
+
<h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Colors</h2>
83
+
<p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Use <span class="font-mono text-[13px] px-1 py-0.5 rounded bg-surface-100 dark:bg-surface-900">#027bff</span> to match the logo. Use <span class="font-mono text-[13px] px-1 py-0.5 rounded bg-surface-100 dark:bg-surface-900">#2563eb</span> for interactive UI elements such as buttons and links.</p>
84
+
85
+
<div class="space-y-8">
86
+
<div>
87
+
<p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Brand</p>
88
+
<div class="flex flex-wrap gap-3">
89
+
<div class="flex flex-col gap-1.5">
90
+
<div class="w-16 h-16 rounded-xl shadow-sm" style="background:#027bff;"></div>
91
+
<p class="text-xs font-mono text-surface-600 dark:text-surface-400">#027bff</p>
92
+
<p class="text-xs text-surface-500 dark:text-surface-500">Brand Blue</p>
93
+
</div>
94
+
</div>
95
+
</div>
96
+
97
+
<div>
98
+
<p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Primary (UI)</p>
99
+
<div class="flex flex-wrap gap-3">
100
+
{[
101
+
{ hex: '#dbeafe', label: '100' },
102
+
{ hex: '#93c5fd', label: '300' },
103
+
{ hex: '#3b82f6', label: '500' },
104
+
{ hex: '#2563eb', label: '600' },
105
+
{ hex: '#1d4ed8', label: '700' },
106
+
{ hex: '#1e3a8a', label: '900' },
107
+
].map(({ hex, label }) => (
108
+
<div class="flex flex-col gap-1.5">
109
+
<div class="w-12 h-12 rounded-xl shadow-sm border border-black/5" style={`background:${hex};`}></div>
110
+
<p class="text-xs font-mono text-surface-600 dark:text-surface-400">{hex}</p>
111
+
<p class="text-xs text-surface-500 dark:text-surface-500">{label}</p>
112
+
</div>
113
+
))}
114
+
</div>
115
+
</div>
116
+
117
+
<div>
118
+
<p class="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-3">Surface (Neutral)</p>
119
+
<div class="flex flex-wrap gap-3">
120
+
{[
121
+
{ hex: '#f4f4f5', label: '100' },
122
+
{ hex: '#e4e4e7', label: '200' },
123
+
{ hex: '#a1a1aa', label: '400' },
124
+
{ hex: '#71717a', label: '500' },
125
+
{ hex: '#3f3f46', label: '700' },
126
+
{ hex: '#27272a', label: '800' },
127
+
{ hex: '#18181b', label: '900' },
128
+
].map(({ hex, label }) => (
129
+
<div class="flex flex-col gap-1.5">
130
+
<div class="w-12 h-12 rounded-xl shadow-sm border border-black/5" style={`background:${hex};`}></div>
131
+
<p class="text-xs font-mono text-surface-600 dark:text-surface-400">{hex}</p>
132
+
<p class="text-xs text-surface-500 dark:text-surface-500">{label}</p>
133
+
</div>
134
+
))}
135
+
</div>
136
+
</div>
137
+
</div>
138
+
</section>
139
+
140
+
<section id="typography" data-toc-section class="scroll-mt-6">
141
+
<h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Typography</h2>
142
+
<p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Two typefaces, both from Google Fonts.</p>
143
+
144
+
<div class="space-y-5">
145
+
<div class="rounded-xl border border-surface-200 dark:border-surface-700/60 p-5">
146
+
<p class="text-xs font-semibold text-surface-400 dark:text-surface-500 uppercase tracking-wider mb-2">Display — Outfit</p>
147
+
<p class="font-display font-bold text-4xl text-surface-900 dark:text-white tracking-tight leading-tight">Annotate the web.</p>
148
+
<p class="text-xs text-surface-500 dark:text-surface-400 mt-3">Used for headings and display text. Weights 500, 600, 700.</p>
149
+
</div>
150
+
<div class="rounded-xl border border-surface-200 dark:border-surface-700/60 p-5">
151
+
<p class="text-xs font-semibold text-surface-400 dark:text-surface-500 uppercase tracking-wider mb-2">Body — Inter</p>
152
+
<p class="text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed">Margin is an open-source web annotation tool built on the AT Protocol. Highlight, bookmark, and annotate any page, then share with the network.</p>
153
+
<p class="text-xs text-surface-500 dark:text-surface-400 mt-3">Used for body copy and UI. Weights 400, 500, 600, 700.</p>
154
+
</div>
155
+
</div>
156
+
</section>
157
+
158
+
<section id="usage" data-toc-section class="scroll-mt-6">
159
+
<h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-1">Usage guidelines</h2>
160
+
<p class="text-sm text-surface-500 dark:text-surface-400 mb-6">Rules for referencing Margin in third-party apps, integrations, and content.</p>
161
+
162
+
<div class="space-y-6 text-[15px] text-surface-700 dark:text-surface-300 leading-relaxed">
163
+
<div>
164
+
<p class="font-medium text-surface-900 dark:text-white text-sm mb-2">Name</p>
165
+
<ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600">
166
+
<li>Write the product name as <strong>Margin</strong>, capitalized, with no prefix or suffix.</li>
167
+
<li>Do not write "margin", "MarginApp", "MarginAt", or similar variants.</li>
168
+
<li>On first reference, "Margin" is sufficient. You do not need to append "by Padding Labs" unless legal context requires it.</li>
169
+
</ul>
170
+
</div>
171
+
172
+
<div>
173
+
<p class="font-medium text-surface-900 dark:text-white text-sm mb-2">Permitted uses</p>
174
+
<ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600">
175
+
<li>Referring to Margin by name in editorial content, blog posts, and documentation.</li>
176
+
<li>Using the phrase "Works with Margin", "Built for Margin", or "Powered by Margin" in product descriptions.</li>
177
+
<li>Using the logo in "Works with" or "Get it on" badge contexts, unmodified and at a reasonable size.</li>
178
+
</ul>
179
+
</div>
180
+
181
+
<div>
182
+
<p class="font-medium text-surface-900 dark:text-white text-sm mb-2">Prohibited uses</p>
183
+
<ul class="list-disc pl-5 space-y-1.5 marker:text-surface-400 dark:marker:text-surface-600">
184
+
<li>Using the Margin name or logo as the primary element of a third-party product name or domain.</li>
185
+
<li>Implying affiliation, sponsorship, or endorsement by Padding Labs LLC without prior written consent.</li>
186
+
<li>Using brand assets in a way that is misleading, defamatory, or that violates any applicable law.</li>
187
+
</ul>
188
+
</div>
189
+
190
+
<p>For permissions beyond these guidelines, contact <a href="mailto:hello@margin.at" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">hello@margin.at</a>.</p>
191
+
</div>
192
+
</section>
193
+
194
+
</div>
195
+
</div>
196
+
197
+
<aside class="hidden lg:block">
198
+
<details class="sticky top-6 group" open>
199
+
<summary class="cursor-pointer list-none flex items-center gap-1.5 py-2 text-[11px] font-semibold text-surface-400 dark:text-surface-500 uppercase tracking-[0.12em] hover:text-surface-700 dark:hover:text-surface-200 transition-colors">
200
+
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-open:rotate-90"><path d="m9 18 6-6-6-6"/></svg>
201
+
On this page
202
+
</summary>
203
+
<ol class="mt-3 space-y-0.5 text-[13px]">
204
+
{sections.map((s) => (
205
+
<li>
206
+
<a href={`#${s.id}`} data-toc-link={s.id} class="toc-link block py-1 text-surface-500 dark:text-surface-500 hover:text-surface-900 dark:hover:text-white transition-colors leading-snug">{s.title}</a>
207
+
</li>
208
+
))}
209
+
</ol>
210
+
</details>
211
+
</aside>
212
+
</div>
213
+
</div>
214
+
</div>
215
+
216
+
<script>
217
+
const links = document.querySelectorAll<HTMLAnchorElement>('[data-toc-link]');
218
+
const sections = document.querySelectorAll<HTMLElement>('[data-toc-section]');
219
+
if (links.length && sections.length) {
220
+
const setActive = (id: string) => {
221
+
links.forEach((l) => {
222
+
if (l.dataset.tocLink === id) {
223
+
l.classList.add('text-primary-600', 'dark:text-primary-400', 'font-medium');
224
+
l.classList.remove('text-surface-500', 'dark:text-surface-500');
225
+
} else {
226
+
l.classList.remove('text-primary-600', 'dark:text-primary-400', 'font-medium');
227
+
l.classList.add('text-surface-500', 'dark:text-surface-500');
228
+
}
229
+
});
230
+
};
231
+
let current = sections[0].id;
232
+
setActive(current);
233
+
const obs = new IntersectionObserver(
234
+
(entries) => {
235
+
const visible = entries
236
+
.filter((e) => e.isIntersecting)
237
+
.sort((a, b) => (a.target as HTMLElement).offsetTop - (b.target as HTMLElement).offsetTop);
238
+
if (visible.length > 0) {
239
+
current = visible[0].target.id;
240
+
setActive(current);
241
+
}
242
+
},
243
+
{ rootMargin: '-15% 0px -70% 0px', threshold: 0 }
244
+
);
245
+
sections.forEach((s) => obs.observe(s));
246
+
}
247
+
</script>
248
+
</BaseLayout>
+1
-1
web/src/pages/privacy.astro
+1
-1
web/src/pages/privacy.astro
···
44
44
</ol>
45
45
</details>
46
46
47
-
<div class="space-y-12 max-w-2xl">
47
+
<div class="space-y-12">
48
48
<section id="overview" data-toc-section class="scroll-mt-6">
49
49
<h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-2">Overview</h2>
50
50
<p class="text-sm italic text-surface-500 dark:text-surface-400 mb-4">Padding Labs LLC is the controller. We process the minimum needed to run Margin and do not sell your data.</p>
+1
-1
web/src/pages/terms.astro
+1
-1
web/src/pages/terms.astro
···
43
43
</ol>
44
44
</details>
45
45
46
-
<div class="space-y-12 max-w-2xl">
46
+
<div class="space-y-12">
47
47
<section id="agreement" data-toc-section class="scroll-mt-6">
48
48
<h2 class="font-display font-bold text-xl text-surface-900 dark:text-white tracking-tight mb-2">Agreement</h2>
49
49
<p class="text-sm italic text-surface-500 dark:text-surface-400 mb-4">These Terms govern your use of Margin. Using it means you accept them.</p>
+6
web/src/views/About.tsx
+6
web/src/views/About.tsx
···
787
787
{t("about.footer.terms")}
788
788
</a>
789
789
<a
790
+
href="/brand"
791
+
className="hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
792
+
>
793
+
Brand
794
+
</a>
795
+
<a
790
796
href="https://github.com/margin-at"
791
797
target="_blank"
792
798
rel="noreferrer"