blob: 575718a373f3fe19a674ead96c0f45796e757e12 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import ColorSwatch from '@/components/ColorSwatch.astro'
import PageHead from '@/components/PageHead.astro'
import Layout from '@/layouts/Layout.astro'
---
<Layout class="max-w-3xl">
<PageHead slot="head" title="Assets and Style Guide" />
<Breadcrumbs
items={[{ label: 'Assets and Style Guide', icon: 'lucide:palette' }]}
/>
<article class="prose mx-auto mt-6 flex w-full max-w-4xl flex-col gap-6">
<h1>Assets and Style Guide</h1>
<section>
<h2>Logo</h2>
<img src="/static/logo.svg" alt="Logo" height={200} class="h-20" />
<ul>
<li>
<a href="/staic/logo.svg" download="fosscet-logo.svg">
SVG, logo only
</a>
</li>
<li>
<a
href="/static/web-app-manifest-192x192.png"
download="fosscet-logo-192.svg"
>
PNG 192x192, logo only
</a>
</li>
<li>
<a
href="/static/web-app-manifest-512x512.png"
download="fosscet-logo-512.svg"
>
PNG 512x512, logo only
</a>
</li>
</ul>
</section>
<section>
<h2>Logo and Word Mark</h2>
<img
src="/static/1200x630.png"
alt="Logo and word mark"
height={200}
class="h-30"
/>
<ul>
<li>
<a href="/static/1200x630.png" download="fosscet-logo-wordmark.png">
PNG 1200x630, logo and word mark
</a>
</li>
</ul>
</section>
<section>
<h2>Fonts</h2>
<div
class="grid grid-cols-1 items-center justify-center gap-x-8 gap-y-4 md:grid-cols-2 md:gap-y-8"
>
<div
class="border-border from-primary/10 to-primary/2 flex h-full items-center justify-center rounded border bg-linear-to-bl px-6 py-2 text-center font-mono text-4xl"
>
0xProto
</div>
<p>
Tailwind class <code>font-mono</code>.
<br />
Use for headings, code blocks, and aesthetic details.
<br />
Download from <a href="https://github.com/0xType/0xProto/releases">
GitHub: 0xType/0xProto
</a>
</p>
<div
class="border-border flex h-full items-center justify-center rounded border px-6 py-2 text-center font-sans text-4xl"
>
Geist
</div>
<p>
Tailwind class <code>font-sans</code>.
<br />
Use for text everywhere else.
<br />
Download from <a href="https://fonts.google.com/specimen/Geist">
Google Fonts: Geist
</a>
</p>
</div>
</section>
<section class="mt-10">
<h2>Colours</h2>
<p>
General guidelines:
<ul>
<li>
Use the <code>primary</code> colour sparingly, for design elements and
accents. Avoid using it for text.
</li>
<li>
Use <code>foreground</code> for headings, navigation elements, and text
that stands out.
</li>
<li>
Use <code>muted-foreground</code> for paragraphs.
</li>
</ul>
</p>
<div class="flex flex-1 flex-col gap-4 md:flex-row">
<ColorSwatch
color="primary"
class="bg-primary text-primary-foreground"
/>
<ColorSwatch color="foreground" class="bg-foreground text-background" />
<ColorSwatch
color="muted-foreground"
class="bg-muted-foreground text-muted"
/>
<ColorSwatch color="muted" class="bg-muted text-muted-foreground" />
<ColorSwatch color="background" class="bg-background text-foreground" />
</div>
</section>
</article>
</Layout>
|
