Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
358 lines (331 loc) · 29.8 KB
/
Copy pathindex.html
File metadata and controls
358 lines (331 loc) · 29.8 KB
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!doctype html>
<html lang="en" data-lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-en="SwiftGG — Brand Guidelines" data-zh="SwiftGG — 品牌使用规范">SwiftGG — Brand Guidelines</title>
<meta name="description" content="Official brand & logo guidelines for SwiftGG. Logo, color, typography, clear space and a downloadable press kit.">
<link rel="icon" href="assets/logos/mark-color.svg">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- ============ NAV ============ -->
<header class="nav">
<div class="wrap">
<a class="brand" href="#top" aria-label="SwiftGG">
<img src="assets/logos/mark-black.svg" alt="SwiftGG" style="height:30px">
</a>
<nav class="links">
<a href="#logo"><span class="en">Logo</span><span class="zh">标志</span></a>
<a href="#variations"><span class="en">Variations</span><span class="zh">变体</span></a>
<a href="#clearspace"><span class="en">Clear Space</span><span class="zh">安全空间</span></a>
<a href="#color"><span class="en">Color</span><span class="zh">色彩</span></a>
<a href="#type"><span class="en">Type</span><span class="zh">字体</span></a>
<a href="#misuse"><span class="en">Misuse</span><span class="zh">错误用法</span></a>
<a href="#downloads"><span class="en">Downloads</span><span class="zh">下载</span></a>
</nav>
<div class="tools">
<div class="langtoggle" role="group" aria-label="Language">
<button data-lang="en" class="active">EN</button>
<button data-lang="zh">中文</button>
</div>
<a class="btn" href="downloads/swiftgg-press-kit.zip" download>
<span class="en">Press Kit</span><span class="zh">素材包</span>
</a>
</div>
</div>
</header>
<span id="top"></span>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="wrap">
<img class="lockup" src="assets/logos/lockup-horizontal-color.svg" alt="SwiftGG logo">
<div class="kicker"><span class="en">Brand Guidelines</span><span class="zh">品牌使用规范</span></div>
<h1><span class="en">A little bird,<br>used with care.</span><span class="zh">一只小鸟,<br>请用心对待。</span></h1>
<p class="lead">
<span class="en">These guidelines show how to use the SwiftGG mark, wordmark, colors and typeface so the brand stays consistent everywhere it appears.</span>
<span class="zh">本规范说明如何正确使用 SwiftGG 的图标、文字标志、品牌色与字体,确保品牌在任何场景下都保持一致。</span>
</p>
<div class="meta">
<span class="en">Version 1.0 · 2026</span><span class="zh">版本 1.0 · 2026</span>
<span class="en">For partners, press & community</span><span class="zh">面向合作伙伴、媒体与社区</span>
<span class="en">Questions → hello@swiftgg.team</span><span class="zh">咨询 → hello@swiftgg.team</span>
</div>
</div>
</section>
<!-- ============ INTRO ============ -->
<section class="section" id="intro">
<div class="wrap grid cols-2" style="align-items:start">
<div>
<div class="kicker"><span class="en">01 — Introduction</span><span class="zh">01 — 引言</span></div>
<h2 class="title"><span class="en">Our mark is a promise</span><span class="zh">标志是一种承诺</span></h2>
</div>
<div>
<p><span class="en">SwiftGG is a community and platform for Swift developers. Our logo is a friendly bird — open, curious and quick. Treat it as the signature of everything we make.</span>
<span class="zh">SwiftGG 是面向 Swift 开发者的社区与平台。我们的标志是一只友善的小鸟——开放、好奇、敏捷。请把它视为我们一切作品的签名。</span></p>
<p><span class="en">Consistency builds trust. When you reach for the logo, follow the rules here: don't redraw it, don't recolor it, and always give it room to breathe.</span>
<span class="zh">一致性建立信任。使用标志时请遵循以下规则:不要重绘、不要改色,并始终为它留出呼吸的空间。</span></p>
<div class="note"><span class="en"><b>The short version:</b> use the supplied files, keep the two brand colors, give it clear space, and never stretch or rotate it.</span>
<span class="zh"><b>一句话总结:</b>使用提供的源文件,保留两种品牌色,留足安全空间,绝不拉伸或旋转。</span></div>
</div>
</div>
</section>
<!-- ============ THE LOGO ============ -->
<section class="section" id="logo">
<div class="wrap">
<div class="kicker"><span class="en">02 — The Logo</span><span class="zh">02 — 标志</span></div>
<h2 class="title"><span class="en">Anatomy</span><span class="zh">标志解剖</span></h2>
<p class="lead"><span class="en">The logo has three parts: the bird mark, the wordmark, and the lockups that combine them.</span>
<span class="zh">标志由三部分组成:小鸟图标、文字标志,以及二者组合而成的锁定版式。</span></p>
<div class="grid cols-3" style="margin-top:40px">
<div class="card">
<div class="stage"><img src="assets/logos/mark-color.svg" alt="mark"></div>
<div class="pad">
<h3><span class="en">The Mark</span><span class="zh">图标</span></h3>
<p class="small"><span class="en">The bird. A blue outline body, an orange belly, and a blue eye. Use alone for avatars, app icons and favicons.</span>
<span class="zh">小鸟本体:蓝色描边身体、桔红色肚子、蓝色眼睛。可单独用于头像、应用图标与站点图标。</span></p>
</div>
</div>
<div class="card">
<div class="stage"><img src="assets/logos/wordmark-color.svg" alt="wordmark"></div>
<div class="pad">
<h3><span class="en">The Wordmark</span><span class="zh">文字标志</span></h3>
<p class="small"><span class="en">“SwiftGG” set in Dongle. <b>Swift</b> is always Swift Blue; <b>GG</b> is always GG Orange. Never re-typeset it in another font.</span>
<span class="zh">使用 Dongle 字体的 “SwiftGG”。<b>Swift</b> 恒为 Swift 蓝,<b>GG</b> 恒为 GG 桔。切勿用其它字体重排。</span></p>
</div>
</div>
<div class="card">
<div class="stage" style="flex-direction:column;gap:20px">
<img src="assets/logos/lockup-horizontal-color.svg" alt="horizontal lockup" style="max-height:38px">
<div style="width:64%;height:1px;background:var(--line)"></div>
<img src="assets/logos/lockup-stacked-color.svg" alt="stacked lockup" style="max-height:74px">
</div>
<div class="pad">
<h3><span class="en">The Lockup</span><span class="zh">组合锁定</span></h3>
<p class="small"><span class="en">Mark + wordmark in a fixed relationship — available <b>both horizontal and stacked</b>. Horizontal for wide spaces, stacked for square ones. Don't rebuild the spacing yourself.</span>
<span class="zh">图标与文字以固定关系组合——<b>横版与竖版均提供</b>。横版用于宽幅场景,竖版用于方形场景。请勿自行调整间距。</span></p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ VARIATIONS ============ -->
<section class="section" id="variations">
<div class="wrap">
<div class="kicker"><span class="en">03 — Variations</span><span class="zh">03 — 变体</span></div>
<h2 class="title"><span class="en">Pick the right version</span><span class="zh">选择正确的版本</span></h2>
<p class="lead"><span class="en">Four official versions cover every background. The full-color mark is primary — reach for it first.</span>
<span class="zh">四个官方版本覆盖所有背景。彩色版为主版本,请优先使用。</span></p>
<div class="grid cols-4" style="margin-top:40px">
<div class="card">
<div class="stage"><img src="assets/logos/mark-color.svg" alt=""></div>
<div class="pad"><h3><span class="en">Full Color</span><span class="zh">彩色(主)</span></h3>
<span class="tag ok"><span class="en">Primary</span><span class="zh">首选</span></span>
<p class="small"><span class="en">On white or light, calm backgrounds.</span><span class="zh">用于白色或浅色、干净的背景。</span></p></div>
</div>
<div class="card">
<div class="stage dark"><img src="assets/logos/mark-mono-sticker.svg" alt=""></div>
<div class="pad"><h3><span class="en">Sticker / Mono</span><span class="zh">贴纸 / 单色</span></h3>
<span class="tag"><span class="en">Dark & photos</span><span class="zh">深色与照片</span></span>
<p class="small"><span class="en">For dark or photographic backgrounds. An outline wraps the bird and the body is filled, like a die-cut sticker — so it never disappears into a plain white blob.</span>
<span class="zh">用于深色或照片背景。轮廓描边包裹小鸟、内部填充,形成模切贴纸的效果——避免变成一团纯白。</span></p></div>
</div>
<div class="card">
<div class="stage"><img src="assets/logos/mark-black.svg" alt=""></div>
<div class="pad"><h3><span class="en">All Black</span><span class="zh">纯黑</span></h3>
<span class="tag"><span class="en">One color</span><span class="zh">单色印刷</span></span>
<p class="small"><span class="en">Single-color print, engraving, stamps, faxes.</span><span class="zh">单色印刷、雕刻、印章等受限场景。</span></p></div>
</div>
<div class="card">
<div class="stage blue"><img src="assets/logos/mark-white.svg" alt=""></div>
<div class="pad"><h3><span class="en">All White</span><span class="zh">纯白</span></h3>
<span class="tag"><span class="en">On brand color</span><span class="zh">品牌色之上</span></span>
<p class="small"><span class="en">Reversed out of a solid brand color or solid dark.</span><span class="zh">反白置于纯品牌色或纯深色之上。</span></p></div>
</div>
</div>
<div class="note warn" style="margin-top:30px"><span class="en"><b>Why the sticker?</b> A flat white bird on a busy photo loses its eye and belly and reads as a smudge. The sticker outline keeps the shape legible on any background.</span>
<span class="zh"><b>为什么用贴纸版?</b>纯白小鸟放在复杂照片上会丢失眼睛与肚子,看起来像一团污渍。贴纸描边能让形状在任何背景上都清晰可辨。</span></div>
</div>
</section>
<!-- ============ CLEAR SPACE ============ -->
<section class="section" id="clearspace">
<div class="wrap">
<div class="kicker"><span class="en">04 — Clear Space</span><span class="zh">04 — 安全空间</span></div>
<h2 class="title"><span class="en">Give it room</span><span class="zh">留出空间</span></h2>
<p class="lead"><span class="en">Keep other graphics, type and edges at least <b>x</b> away from the logo, where <b>x</b> equals half the height of the mark.</span>
<span class="zh">其他图形、文字与边缘应与标志至少保持 <b>x</b> 的距离,其中 <b>x</b> 等于图标高度的一半。</span></p>
<div class="diagram" style="margin-top:34px">
<svg viewBox="0 0 820 460" xmlns="http://www.w3.org/2000/svg" aria-label="Clear space diagram">
<!-- dashed clear-space boundary -->
<rect x="225" y="60" width="370" height="340" fill="none" stroke="#2782FB" stroke-width="2" stroke-dasharray="7 7"/>
<!-- mark bounding box -->
<rect x="305" y="140" width="210" height="180" fill="none" stroke="#C9CDD6" stroke-width="1.5"/>
<image href="assets/logos/mark-color.svg" x="312" y="146" width="196" height="168"/>
<!-- x measure top -->
<line x1="410" y1="60" x2="410" y2="140" stroke="#FB6131" stroke-width="2"/>
<text x="424" y="105" fill="#FB6131" font-family="Dongle,sans-serif" font-size="40">x</text>
<!-- x measure left -->
<line x1="225" y1="230" x2="305" y2="230" stroke="#FB6131" stroke-width="2"/>
<text x="255" y="222" fill="#FB6131" font-family="Dongle,sans-serif" font-size="40">x</text>
<!-- big x reference on the right -->
<line x1="690" y1="140" x2="690" y2="320" stroke="#9aa0ad" stroke-width="2"/>
<line x1="682" y1="140" x2="698" y2="140" stroke="#9aa0ad" stroke-width="2"/>
<line x1="682" y1="320" x2="698" y2="320" stroke="#9aa0ad" stroke-width="2"/>
<text x="708" y="225" fill="#737682" font-family="Dongle,sans-serif" font-size="40">2x = mark height</text>
</svg>
</div>
<p class="small" style="margin-top:14px"><span class="en">When in doubt, use more space rather than less.</span><span class="zh">拿不准时,宁可多留空间,不要更少。</span></p>
</div>
</section>
<!-- ============ MINIMUM SIZE ============ -->
<section class="section" id="minsize">
<div class="wrap">
<div class="kicker"><span class="en">05 — Minimum Size</span><span class="zh">05 — 最小尺寸</span></div>
<h2 class="title"><span class="en">Stay legible</span><span class="zh">保持可辨识</span></h2>
<p class="lead"><span class="en">Below these sizes the eye and belly start to merge. Don't go smaller.</span>
<span class="zh">小于以下尺寸,眼睛与肚子会糊在一起。请勿再缩小。</span></p>
<div class="grid cols-3" style="margin-top:40px">
<div class="card"><div class="stage"><img src="assets/logos/mark-color.svg" style="max-height:60px"></div>
<div class="pad"><h3><span class="en">Mark — digital</span><span class="zh">图标 — 数字端</span></h3><p class="small"><span class="en">Minimum 24 px wide</span><span class="zh">最小宽 24 px</span></p></div></div>
<div class="card"><div class="stage"><img src="assets/logos/lockup-horizontal-color.svg" style="max-height:44px"></div>
<div class="pad"><h3><span class="en">Lockup — digital</span><span class="zh">组合 — 数字端</span></h3><p class="small"><span class="en">Minimum 28 px tall</span><span class="zh">最小高 28 px</span></p></div></div>
<div class="card"><div class="stage"><img src="assets/logos/mark-color.svg" style="max-height:60px"></div>
<div class="pad"><h3><span class="en">Mark — print</span><span class="zh">图标 — 印刷</span></h3><p class="small"><span class="en">Minimum 8 mm</span><span class="zh">最小 8 mm</span></p></div></div>
</div>
</div>
</section>
<!-- ============ COLOR ============ -->
<section class="section" id="color">
<div class="wrap">
<div class="kicker"><span class="en">06 — Color</span><span class="zh">06 — 色彩</span></div>
<h2 class="title"><span class="en">Two colors carry the brand</span><span class="zh">两种颜色撑起整个品牌</span></h2>
<p class="lead"><span class="en">Swift Blue and GG Orange. Click any swatch to copy its hex.</span>
<span class="zh">Swift 蓝 与 GG 桔。点击任意色块即可复制 HEX。</span></p>
<div class="grid cols-2" style="margin-top:40px">
<div class="swatch" data-copy="#2782FB">
<div class="chip" style="background:#2782FB"></div>
<div class="info"><div class="name">Swift Blue</div><div class="hex">#2782FB · <span class="en">tap to copy</span><span class="zh">点击复制</span></div>
<div class="row"><span>RGB 39 · 130 · 251</span><span>CMYK 84 · 48 · 0 · 0</span></div>
<div class="row"><span>HSL 215 · 96% · 57%</span><span>Pantone 2727 C</span></div></div>
</div>
<div class="swatch" data-copy="#FB6131">
<div class="chip" style="background:#FB6131"></div>
<div class="info"><div class="name">GG Orange</div><div class="hex">#FB6131 · <span class="en">tap to copy</span><span class="zh">点击复制</span></div>
<div class="row"><span>RGB 251 · 97 · 49</span><span>CMYK 0 · 76 · 86 · 0</span></div>
<div class="row"><span>HSL 14 · 96% · 59%</span><span>Pantone 171 C</span></div></div>
</div>
</div>
<h3 style="margin-top:46px;font-size:30px"><span class="en">Neutrals</span><span class="zh">中性色</span></h3>
<div class="grid cols-4" style="margin-top:16px">
<div class="swatch" data-copy="#0B0B0F"><div class="chip" style="background:#0B0B0F;height:96px"></div><div class="info"><div class="name" style="font-size:24px">Ink</div><div class="hex">#0B0B0F</div></div></div>
<div class="swatch" data-copy="#737682"><div class="chip" style="background:#737682;height:96px"></div><div class="info"><div class="name" style="font-size:24px">Slate</div><div class="hex">#737682</div></div></div>
<div class="swatch" data-copy="#F5F6F8"><div class="chip" style="background:#F5F6F8;height:96px;border-bottom:1px solid #E4E7EC"></div><div class="info"><div class="name" style="font-size:24px">Mist</div><div class="hex">#F5F6F8</div></div></div>
<div class="swatch" data-copy="#FFFFFF"><div class="chip" style="background:#FFFFFF;height:96px;border-bottom:1px solid #E4E7EC"></div><div class="info"><div class="name" style="font-size:24px">Paper</div><div class="hex">#FFFFFF</div></div></div>
</div>
<div class="note" style="margin-top:30px"><span class="en"><b>Balance:</b> let blue lead and orange accent. A rough 70 / 30 split keeps the palette confident, not loud.</span>
<span class="zh"><b>配比:</b>以蓝为主、桔为点缀。大约 70 / 30 的比例能让配色稳重而不喧闹。</span></div>
</div>
</section>
<!-- ============ TYPOGRAPHY ============ -->
<section class="section" id="type">
<div class="wrap">
<div class="kicker"><span class="en">07 — Typography</span><span class="zh">07 — 字体</span></div>
<h2 class="title"><span class="en">Dongle for the logo, system sans for the rest</span><span class="zh">标志用 Dongle,正文用系统字体</span></h2>
<p class="lead"><span class="en">Dongle is the <b>logotype</b> typeface — it draws the “SwiftGG” wordmark and nothing else. Running text (this page included) uses the native system sans.</span>
<span class="zh">Dongle 是<b>文字标志</b>专用字体——只用来书写 “SwiftGG” 字标,不用于其它地方。正文(包括本页)一律使用系统无衬线字体。</span></p>
<div class="grid cols-2" style="margin-top:34px;align-items:start">
<!-- LOGOTYPE typeface -->
<div class="specimen">
<div class="tag"><span class="en">Logotype typeface</span><span class="zh">文字标志字体</span></div>
<div class="big" style="margin-top:10px"><span style="color:#2782FB">Swift</span><span style="color:#FB6131">GG</span></div>
<div class="glyphset">Dongle Regular · 400<br>A B C D E F G a b c d e f g 0 1 2 3 4 5</div>
<div class="divider"></div>
<p class="small" style="margin-top:0"><span class="en"><b>Dongle Regular (400)</b> — rounded and friendly. Use it <b>only</b> for the logotype; never set body copy in it.</span>
<span class="zh"><b>Dongle Regular (400)</b>——圆润亲切。<b>仅</b>用于文字标志,切勿用于正文排版。</span></p>
<p class="small"><span class="en">Download (free, OFL): </span><span class="zh">下载(免费,OFL):</span><a href="https://fonts.google.com/specimen/Dongle" style="color:#2782FB">fonts.google.com/specimen/Dongle</a></p>
</div>
<!-- INTERFACE typeface -->
<div class="specimen">
<div class="tag"><span class="en">Interface / text typeface</span><span class="zh">界面 / 正文字体</span></div>
<div style="margin-top:14px">
<div style="font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.1"><span class="en">Build with Swift</span><span class="zh">用 Swift 构建</span></div>
<div style="font-size:24px;font-weight:600;color:#33363f;margin-top:10px"><span class="en">A community for Swift developers</span><span class="zh">面向 Swift 开发者的社区</span></div>
<div style="font-size:16px;color:#5a5d66;margin-top:10px;line-height:1.6"><span class="en">Friendly, clear and quick to read on any screen — at any size.</span><span class="zh">在任意屏幕、任意字号下都清晰、易读、亲切。</span></div>
</div>
<div class="divider"></div>
<p class="small" style="margin-top:0"><span class="en"><b>System UI sans</b> — San Francisco (Apple), Segoe UI (Windows), <b>PingFang SC</b> for Chinese. No webfont needed; it’s already on the device.</span>
<span class="zh"><b>系统无衬线字体</b>——San Francisco(Apple)、Segoe UI(Windows),中文使用 <b>PingFang SC</b>。无需加载网页字体,设备自带。</span></p>
</div>
</div>
</div>
</section>
<!-- ============ BACKGROUNDS ============ -->
<section class="section" id="backgrounds">
<div class="wrap">
<div class="kicker"><span class="en">08 — Backgrounds</span><span class="zh">08 — 背景</span></div>
<h2 class="title"><span class="en">On any surface</span><span class="zh">置于各种背景</span></h2>
<div class="grid cols-4" style="margin-top:36px">
<div class="card do"><div class="stage"><span class="badge ok">✓</span><img src="assets/logos/mark-color.svg" alt=""></div><div class="pad"><p class="small"><span class="en">Color on white / mist.</span><span class="zh">彩色置于白 / 浅灰。</span></p></div></div>
<div class="card do"><div class="stage blue"><span class="badge ok">✓</span><img src="assets/logos/mark-white.svg" alt=""></div><div class="pad"><p class="small"><span class="en">White on Swift Blue.</span><span class="zh">纯白置于 Swift 蓝。</span></p></div></div>
<div class="card do"><div class="stage dark"><span class="badge ok">✓</span><img src="assets/logos/mark-mono-sticker.svg" alt=""></div><div class="pad"><p class="small"><span class="en">Sticker on dark.</span><span class="zh">贴纸置于深色。</span></p></div></div>
<div class="card do"><div class="stage" style="background-image:url('assets/img/noise.svg');background-size:cover"><span class="badge ok">✓</span><img src="assets/logos/mark-mono-sticker.svg" alt=""></div><div class="pad"><p class="small"><span class="en">Sticker on photo.</span><span class="zh">贴纸置于照片。</span></p></div></div>
</div>
</div>
</section>
<!-- ============ MISUSE ============ -->
<section class="section" id="misuse">
<div class="wrap">
<div class="kicker"><span class="en">09 — Misuse</span><span class="zh">09 — 错误用法</span></div>
<h2 class="title"><span class="en">Please don't</span><span class="zh">请勿这样做</span></h2>
<p class="lead"><span class="en">Eight things that break the brand. If you've done one of these, reach for an original file instead.</span>
<span class="zh">以下八种做法会破坏品牌。若你这样做了,请改用官方源文件。</span></p>
<div class="grid cols-4 dont" style="margin-top:40px">
<div class="card"><div class="stage"><span class="badge no">✕</span><img src="assets/logos/lockup-horizontal-color.svg" style="transform:scaleX(1.45);max-height:54px"></div><div class="pad"><p class="small"><span class="en">Don't stretch or squash.</span><span class="zh">不要拉伸或压扁。</span></p></div></div>
<div class="card"><div class="stage"><span class="badge no">✕</span><img src="assets/logos/mark-color.svg" style="transform:rotate(-18deg)"></div><div class="pad"><p class="small"><span class="en">Don't rotate or tilt.</span><span class="zh">不要旋转或倾斜。</span></p></div></div>
<div class="card"><div class="stage"><span class="badge no">✕</span><img src="assets/logos/mark-color.svg" style="filter:hue-rotate(115deg) saturate(1.3)"></div><div class="pad"><p class="small"><span class="en">Don't recolor.</span><span class="zh">不要更改颜色。</span></p></div></div>
<div class="card"><div class="stage"><span class="badge no">✕</span><img src="assets/logos/mark-color.svg" style="filter:drop-shadow(6px 8px 6px rgba(0,0,0,.45))"></div><div class="pad"><p class="small"><span class="en">Don't add shadows or effects.</span><span class="zh">不要添加阴影或特效。</span></p></div></div>
<div class="card"><div class="stage" style="background-image:url('assets/img/noise.svg');background-size:cover"><span class="badge no">✕</span><img src="assets/logos/mark-white.svg" alt=""></div><div class="pad"><p class="small"><span class="en">Don't drop a flat white bird on a photo — use the sticker.</span><span class="zh">不要把纯白小鸟直接放到照片上——请用贴纸版。</span></p></div></div>
<div class="card"><div class="stage" style="background:#3f74c9"><span class="badge no">✕</span><img src="assets/logos/mark-color.svg" alt=""></div><div class="pad"><p class="small"><span class="en">Don't use on low-contrast / clashing color.</span><span class="zh">不要置于低对比或冲突的色彩上。</span></p></div></div>
<div class="card"><div class="stage"><span class="badge no">✕</span><div style="display:flex;align-items:center;font-family:Dongle,sans-serif;font-size:64px;letter-spacing:-2px"><span style="color:#FB6131">GG</span><span style="color:#2782FB">Swift</span></div></div><div class="pad"><p class="small"><span class="en">Don't reorder or recolor the wordmark.</span><span class="zh">不要调换或改色文字标志。</span></p></div></div>
<div class="card"><div class="stage"><span class="badge no">✕</span><img src="assets/logos/mark-color.svg" style="outline:4px solid #111;outline-offset:8px;border-radius:4px"></div><div class="pad"><p class="small"><span class="en">Don't box, outline or add containers.</span><span class="zh">不要加框、描边或容器。</span></p></div></div>
</div>
</div>
</section>
<!-- ============ DOWNLOADS ============ -->
<section class="section" id="downloads">
<div class="wrap">
<div class="kicker"><span class="en">10 — Downloads</span><span class="zh">10 — 下载</span></div>
<h2 class="title"><span class="en">Press Kit</span><span class="zh">素材包</span></h2>
<p class="lead"><span class="en">Everything you need — logos in SVG, the Dongle font, and this guideline — in one zip.</span>
<span class="zh">你需要的一切——SVG 标志、Dongle 字体以及本规范——打包在一个 zip 中。</span></p>
<a class="btn lg" style="margin-top:22px" href="downloads/swiftgg-press-kit.zip" download>
↓ <span class="en">Download Press Kit (.zip)</span><span class="zh">下载素材包(.zip)</span>
</a>
<div class="grid cols-2" style="margin-top:36px;gap:14px">
<a class="dl" href="assets/logos/mark-color.svg" download><div class="ic"><img src="assets/logos/mark-color.svg" style="height:28px"></div><div class="grow"><div class="t"><span class="en">Color Mark</span><span class="zh">彩色图标</span></div><div class="d">SVG · mark-color.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="assets/logos/mark-mono-sticker.svg" download><div class="ic" style="background:#111"><img src="assets/logos/mark-mono-sticker.svg" style="height:28px"></div><div class="grow"><div class="t"><span class="en">Sticker / Mono Mark</span><span class="zh">贴纸 / 单色图标</span></div><div class="d">SVG · mark-mono-sticker.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="assets/logos/mark-black.svg" download><div class="ic"><img src="assets/logos/mark-black.svg" style="height:28px"></div><div class="grow"><div class="t"><span class="en">Black Mark</span><span class="zh">纯黑图标</span></div><div class="d">SVG · mark-black.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="assets/logos/mark-white.svg" download><div class="ic" style="background:#111"><img src="assets/logos/mark-white.svg" style="height:28px"></div><div class="grow"><div class="t"><span class="en">White Mark</span><span class="zh">纯白图标</span></div><div class="d">SVG · mark-white.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="assets/logos/lockup-horizontal-color.svg" download><div class="ic"><img src="assets/logos/lockup-horizontal-color.svg" style="height:22px"></div><div class="grow"><div class="t"><span class="en">Horizontal Lockup</span><span class="zh">横版组合</span></div><div class="d">SVG · lockup-horizontal-color.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="assets/logos/lockup-stacked-color.svg" download><div class="ic"><img src="assets/logos/lockup-stacked-color.svg" style="height:34px"></div><div class="grow"><div class="t"><span class="en">Stacked Lockup</span><span class="zh">竖版组合</span></div><div class="d">SVG · lockup-stacked-color.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="assets/logos/wordmark-color.svg" download><div class="ic"><img src="assets/logos/wordmark-color.svg" style="height:18px"></div><div class="grow"><div class="t"><span class="en">Wordmark</span><span class="zh">文字标志</span></div><div class="d">SVG · wordmark-color.svg</div></div><div class="small">↓</div></a>
<a class="dl" href="https://fonts.google.com/specimen/Dongle"><div class="ic" style="font-family:Dongle;font-size:30px;color:#2782FB">Aa</div><div class="grow"><div class="t"><span class="en">Dongle Typeface</span><span class="zh">Dongle 字体</span></div><div class="d">Google Fonts · OFL</div></div><div class="small">↗</div></a>
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer>
<div class="wrap">
<div class="row">
<a class="brand" href="#top"><img src="assets/logos/mark-black.svg" alt=""><b>SwiftGG</b></a>
<div class="links">
<a href="https://swiftgg.team">swiftgg.team</a>
<a href="mailto:hello@swiftgg.team">hello@swiftgg.team</a>
</div>
</div>
<div class="copy">© 2026 SwiftGG · <span class="en">Brand Guidelines v1.0</span><span class="zh">品牌使用规范 v1.0</span></div>
</div>
</footer>
<script src="assets/js/main.js"></script>
</body>
</html>