-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
executable file
·113 lines (81 loc) · 5.71 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#201A26">
<title>systemd logo</title>
<meta name="title" content="systemd logo">
<meta name="description" content="Logo and Brand Assets for systemd">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/icon.png" />
<link rel="shortcut icon" href='/favicon.png' type="image/png" sizes="16x16">
</head>
<body>
<div class="container">
<a class="page-logo" href="/">
<svg width="202" height="26" viewBox="0 0 202 26">
<use href="/assets/page-logo.svg#systemd-logo"/>
</svg>
</a>
<h2>Brand</h2>
<p>systemd is a suite of basic building blocks for building a Linux OS. It provides a system and service manager that runs as PID 1 and starts the rest of the system.</p>
<p>The logo builds on the most iconic visual artifact of system bootup on classic text terminals. The log of OS components successfully starting up, as indicated by the green <span class="ok-container">[ <span class="ok">OK</span> ]</span>, is what many people already identify systemd with. This made it a natural choice to derive our visual identity from.</p>
<p>The abstract shapes in the brackets symbolize the "OK" from the boot up screen, services running inside systemd, and our overall optimistic outlook.</p>
<p>The logo was designed by Tobias Bernard from the GNOME project in 2019. It's licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></p>
<h2>Logo</h2>
<p>The full horizontal logo should be used whenever possible. If color isn't an option, it can be used in monochrome as well.</p>
<div class="logo-grid">
<div class="logo-block">
<div class="image-container brand-white"><img src="assets/svg/systemd-light.svg"></div>
<p>Full Color Logo <a href="assets/svg/systemd-light.svg">SVG</a> <a href="assets/png/systemd-light.png">PNG</a> <a href="assets/pdf/systemd-light.pdf">PDF</a></p>
</div>
<div class="logo-block">
<div class="image-container brand-white"><img src="assets/svg/systemd-light-mono.svg"></div>
<p>Monochrome Logo <a href="assets/svg/systemd-light-mono.svg">SVG</a> <a href="assets/png/systemd-light-mono.png">PNG</a> <a href="assets/pdf/systemd-light-mono.pdf">PDF</a></p>
</div>
<div class="logo-block">
<div class="image-container brand-black"><img src="assets/svg/systemd-dark.svg"></div>
<p>Full Color Logo (dark) <a href="assets/svg/systemd-dark.svg">SVG</a> <a href="assets/png/systemd-dark.png">PNG</a> <a href="assets/pdf/systemd-dark.pdf">PDF</a></p>
</div>
<div class="logo-block">
<div class="image-container brand-black"><img src="assets/svg/systemd-dark-mono.svg"></div>
<p>Monochrome Logo (dark) <a href="assets/svg/systemd-dark-mono.svg">SVG</a> <a href="assets/png/systemd-dark-mono.png">PNG</a> <a href="assets/pdf/systemd-dark-mono.pdf">PDF</a></p>
</div>
</div>
<h2>Alternate Logos</h2>
<p>For use cases where the horizontal logo doesn't work, the vertical alternate logo can be used instead. For sizes too small for the text to be readable (e.g. avatars, icons, and the like), use the standalone logomark.</p>
<div class="logo-grid">
<div class="logo-block">
<div class="image-container brand-white"><img src="assets/svg/systemd-light-vertical-color.svg" ></div>
<p>Vertical Alternate Logo <a href="assets/svg/systemd-light-vertical-color.svg">SVG</a> <a href="assets/png/systemd-light-vertical-color.png">PNG</a> <a href="assets/pdf/systemd-light-vertical-color.pdf">PDF</a></p>
</div>
<div class="logo-block">
<div class="image-container brand-white"><img src="assets/svg/systemd-logomark.svg" ></div>
<p>Standalone Logomark <a href="assets/svg/systemd-logomark.svg">SVG</a> <a href="assets/png/systemd-logomark.png">PNG</a> <a href="assets/pdf/systemd-logomark.pdf">PDF</a></p>
</div>
</div>
<h2>Color & Typography</h2>
<p>The brand colors are <span class="palette brand-green">systemd green #30D475</span> and <span class="palette brand-black" id="clb">systemd black #201A26</span>.</p>
<p>The brand typeface is <a href="https://github.com/OdedEzer/heebo">Heebo</a>, by Oded Ezer. The logotype uses the Bold weight.</p>
<h2>Spelling</h2>
<p>Yes, it is written <strong>systemd</strong>, not <strong>system D</strong> or
<strong>System D</strong>, or even <strong>SystemD</strong>. And it isn't <strong>system d</strong>
either. Why? Because it's a system daemon, and under Unix/Linux those are in lower case, and get
suffixed with a lower case <strong>d</strong>. And since systemd manages the system, it's called
systemd. It's that simple. But then again, if all that appears too simple to you, call it (but
never spell it!) <strong>System Five Hundred</strong> since <strong>D</strong> is the roman numeral
for 500 (this also clarifies the relation to System V, right?). The only situation where we find it
OK to use an uppercase letter in the name (but don't like it either) is if you start a sentence with
<strong>systemd</strong>. On high holidays you may also spell it <em>sÿstëmd</em>. But then again,
<em><a href="https://secure.wikimedia.org/wikipedia/en/wiki/System_D">Système D</a></em> is not an
acceptable spelling and something completely different (though kinda fitting).
</p>
</div>
<footer>
<p>© systemd, 2022</p>
<p><a href="https://github.com/systemd/brand.systemd.io">Website source</a></p>
</footer>
</body>
</html>