-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathbrand-guidelines.html
More file actions
921 lines (848 loc) · 51 KB
/
Copy pathbrand-guidelines.html
File metadata and controls
921 lines (848 loc) · 51 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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento | Brand guidelines | Logo, colors & typography</title>
<meta name="description" content="Official Elemento brand guidelines: logo usage, color palette, typography, and product naming for press, partners, and creators.">
<!-- Canonical URL -->
<link rel="canonical" href="https://elemento.cloud/brand-guidelines.html">
<link rel="alternate" hreflang="en" href="https://elemento.cloud/brand-guidelines.html">
<link rel="alternate" hreflang="it" href="https://elemento.cloud/it/brand-guidelines.html">
<link rel="alternate" hreflang="x-default" href="https://elemento.cloud/brand-guidelines.html">
<!-- Hreflang tags for internationalization -->
<link rel="alternate" hreflang="en" href="https://elemento.cloud/brand-guidelines.html">
<link rel="alternate" hreflang="x-default" href="https://elemento.cloud/brand-guidelines.html">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Brand guidelines - Elemento">
<meta property="og:description" content="Official Elemento brand guidelines: logo usage, color palette, typography, and product naming for press, partners, and creators.">
<meta property="og:image" content="https://elemento.cloud/assets/img/banner.webp">
<meta property="og:url" content="https://elemento.cloud/brand-guidelines.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Elemento">
<meta property="og:logo" content="/assets/logos/ElementoMCR.svg">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Brand guidelines - Elemento">
<meta name="twitter:description" content="Official Elemento brand guidelines: logo usage, color palette, typography, and product naming for press, partners, and creators.">
<meta name="twitter:image" content="https://elemento.cloud/assets/img/banner.webp">
<!-- Additional SEO Meta Tags -->
<meta name="keywords" content="Elemento brand, brand guidelines, logo, press kit, typography, color palette, Elemento Modular Cloud">
<meta name="author" content="Elemento">
<meta name="robots" content="index, follow">
<!-- AI Agent Control -->
<meta name="ai-content" content="allowed">
<meta name="ai-training" content="allowed">
<meta name="ai-access" content="public">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/favicon/favicon.svg">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<meta name="apple-mobile-web-app-title" content="Elemento">
<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#0e1119">
<meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#ffa600">
<!-- Web App Manifest -->
<link rel="manifest" href="assets/favicon/site.webmanifest">
<!-- Breadcrumb Schema Markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://elemento.cloud/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Brand guidelines",
"item": "https://elemento.cloud/brand-guidelines.html"
}
]
}
</script>
<!-- Preload critical resources with optimized loading strategy -->
<link rel="preload" href="css/style.css" as="style">
<link rel="preload" href="css/themes.css" as="style">
<!-- Preload specific stylesheets -->
<link rel="preload" href="css/brand-guidelines.css" as="style">
<!-- Preload critical fonts -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/font/ArgentPixel/Web/ArgentPixel/ArgentPixel-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/font/ArgentPixel/Web/ArgentPixel/ArgentPixel-RegularItalic.woff2" as="font" type="font/woff2" crossorigin>
<!-- Critical CSS - Inline the most critical styles to prevent FOUT -->
<style>
/* Critical rendering path styles - Load immediately to prevent font flash */
:root {
--background-color: #F5F5FA;
--text-color: #1A1C20;
--primary-color: #FFA600;
--primary-text-color: color-mix(in srgb, var(--primary-color) 50%, #1A1C20 50%);
--font-primary: 'Open Sans', sans-serif;
--font-heading: 'Red Hat Display', sans-serif;
--border-color: #e0e0e0;
--logo-filter: none;
}
/* Critical base styles */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-primary);
color: var(--text-color);
background-color: var(--background-color);
line-height: 1.6;
overflow-x: hidden;
}
/* Critical heading styles to prevent layout shifts */
h1 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-color);
font-family: var(--font-heading);
line-height: 1.2;
margin-bottom: 1rem;
}
h2 {
font-size: 2rem;
font-weight: 600;
color: var(--text-color);
font-family: var(--font-heading);
line-height: 1.3;
margin-bottom: 0.75rem;
}
h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-color);
font-family: var(--font-heading);
line-height: 1.4;
margin-bottom: 0.5rem;
}
/* Critical hero title styles */
.hero-title {
font-size: 4rem;
font-weight: 800;
color: var(--text-color);
margin-bottom: 1.5rem;
font-family: var(--font-heading);
line-height: 1.2;
}
/* Critical hero tagline styles */
.hero-tagline {
font-size: 1.1rem;
color: var(--primary-text-color);
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Critical splash screen styles */
.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.splash-screen.hidden {
opacity: 0;
visibility: hidden;
}
.splash-content {
text-align: center;
max-width: 300px;
}
.splash-logo {
margin-bottom: 2rem;
}
.splash-logo-img {
width: 120px;
height: 120px;
background-color: var(--accent-color);
mask-image: url(assets/logos/Elemento.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url(assets/logos/Elemento.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.splash-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.splash-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: splash-spin 1s linear infinite;
}
.splash-text {
font-family: var(--font-primary);
color: var(--text-color);
font-size: 1rem;
font-weight: 500;
margin: 0;
}
@keyframes splash-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Hide main content during splash screen */
body.splash-loading {
overflow: hidden;
}
body.splash-loading #main-content {
opacity: 0;
visibility: hidden;
}
/* Responsive splash screen */
@media (max-width: 768px) {
.splash-logo-img {
width: 100px;
height: 50px;
}
.splash-spinner {
width: 32px;
height: 32px;
border-width: 2px;
}
.splash-text {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.splash-logo-img {
width: 80px;
height: 40px;
}
.splash-spinner {
width: 28px;
height: 28px;
border-width: 2px;
}
.splash-text {
font-size: 0.8rem;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.splash-spinner {
animation: none;
border-top-color: var(--primary-color);
}
.splash-screen {
transition: none;
}
}
</style>
<!-- Non-critical stylesheets with optimized loading -->
<link rel="stylesheet" href="css/themes.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/style.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/atmosphere.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/planet-styles/planet-brand-guidelines.css" media="print" onload="this.media='all'">
<!-- Brand guidelines page styles -->
<link rel="stylesheet" href="css/brand-guidelines.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/breadcrumb.css" media="print" onload="this.media='all'">
<!-- Fallback for browsers that don't support onload -->
<noscript>
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/atmosphere.css">
<link rel="stylesheet" href="css/planet-styles/planet-brand-guidelines.css">
<!-- Brand guidelines page styles -->
<link rel="stylesheet" href="css/brand-guidelines.css">
</noscript>
<!-- Optimized font loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Red+Hat+Display:wght@300;400;500;600;700;800&family=Red+Hat+Mono:wght@400;500&family=Red+Hat+Text:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Red+Hat+Display:wght@300;400;500;600;700;800&family=Red+Hat+Mono:wght@400;500&family=Red+Hat+Text:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap">
</noscript>
<!-- Font Awesome with optimized loading -->
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</noscript>
<!-- PixelIconLibrary with optimized loading -->
<link rel="preload" href="assets/font/PixelIconLibrary/iconfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/font/PixelIconLibrary/iconfont.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="assets/font/PixelIconLibrary/iconfont.css">
</noscript>
<!-- Font Awesome font-display: swap override -->
<style>
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
font-family: 'Font Awesome 6 Brands';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2') format('woff2');
}
</style>
<!-- Matomo: Iubenda Cookie Solution — data-iub-purposes="4" must match Statistics/Matomo in iubenda dashboard -->
<script type="text/plain" class="_iub_cs_activate" data-iub-purposes="4" src="js/matomo-tracking.js"></script>
</head>
<body class="">
<!-- SVG filter: stroke-only logo ring (CSS blend modes fail with mask in WebKit) -->
<svg class="brand-dont-filters" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="1" height="1" style="position:absolute;left:-9999px;top:0;overflow:hidden">
<defs>
<filter id="brand-misuse-outline-ring" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feMorphology in="SourceAlpha" operator="dilate" radius="1.75" result="dilated"/>
<feComposite in="dilated" in2="SourceAlpha" operator="out" result="ring"/>
<feFlood flood-color="#FFA600" flood-opacity="1" result="orange"/>
<feComposite in="orange" in2="ring" operator="in" result="orange-ring"/>
<feMerge>
<feMergeNode in="orange-ring"/>
</feMerge>
</filter>
</defs>
</svg>
<!-- Splash Screen -->
<div id="splash-screen" class="splash-screen">
<div class="splash-content">
<div class="splash-logo">
<div class="splash-logo-img"></div>
</div>
</div>
</div>
<!-- Navigation -->
<div id="navbar-placeholder"></div>
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb" aria-label="Breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="/" class="breadcrumb-link">Home</a>
</li>
<li class="breadcrumb-item breadcrumb-current" aria-current="page">
Brand guidelines
</li>
</ol>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<!-- Atmosphere Hero Placeholder -->
<div id="atmosphere-hero-placeholder"></div>
<div class="hero-container">
<div class="hero-content">
<div class="hero-buttons fade-in">
<div class="hero-tagline">Press, partners & creators</div>
<h1 class="hero-title"><span class="pixel-word">Brand</span> <span class="elemento-brand">guidelines</span></h1>
<div class="hero-subtitle">
<p>Represent <span class="emphasis-pixel">Elemento</span> consistently: logo usage, core colors, typography, and product naming.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Overview -->
<section class="section section-header-padded">
<div class="container">
<div class="section-header">
<h2 class="section-title">Using the <span class="highlight-pixel">Elemento</span> brand</h2>
<p class="section-subtitle">Keep identity clear, legible, and aligned with the public site</p>
</div>
<div class="brand-lead fade-in">
<p>These guidelines align with the official <strong>Branding Guidelines — Elemento Modular Cloud</strong> (logo, trademark, typography, colour, imagery). They summarize rules for web and partner use. When in doubt, match the <a href="index.html">homepage</a> and <a href="about.html">about</a> story, and preserve each mark’s aspect ratio.</p>
<p class="brand-lead-note">Trademark and legal wording: follow the full guidelines and counsel for ® notices, territory, and contractual use.</p>
</div>
</div>
</section>
<!-- Logo -->
<section class="section" id="logo">
<div class="container">
<div class="section-header">
<h2 class="section-title">Logo</h2>
<p class="section-subtitle">Mark, spacing, and contrast</p>
</div>
<div class="fade-in brand-logo-intro-copy">
<p><strong>Layout preference:</strong> use the <strong>horizontal</strong> payoff whenever possible (wordmark, tagline, and <strong>®</strong>). When width is tight — mobile headers, narrow columns — use the <strong>vertical</strong> payoff lockup instead. For avatars, favicons, and compact UI, use the <strong>symbol</strong> alone (no wordmark).</p>
<p>The <strong>logo palette</strong> defines three ink colours — <strong>Starter Yellow</strong> <code>#FFA600</code>, <strong>Crystal White</strong> <code>#F8F8FF</code>, and <strong>Void Black</strong> <code>#16161D</code> — on the appropriate field. Each variant below shows those inks on the correct field: <strong>horizontal payoff</strong>, <strong>vertical payoff</strong>, then <strong>symbol only</strong> (yellow on void black is preferred).</p>
<ul class="feature-list brand-guidelines-list">
<li class="feature-list-item">
<span class="feature-check"><i class="hn hn-check"></i></span>
<span class="feature-list-body"><strong>Clear space:</strong> keep a margin on all sides equal to <strong>twice the logo height</strong> (same rule for the payoff version and for the symbol alone). Do not crowd type, photos, or UI against the mark.</span>
</li>
<li class="feature-list-item">
<span class="feature-check"><i class="hn hn-check"></i></span>
<span class="feature-list-body"><strong>Also approved when needed:</strong> <strong>Starter Yellow</strong> on a light field (e.g. Crystal White) — use the same mask technique as below. Do not introduce colours outside this system.</span>
</li>
<li class="feature-list-item">
<span class="feature-check"><i class="hn hn-check"></i></span>
<span class="feature-list-body">Do not distort, outline, tilt, add shadows or glows. Wordmark and symbol must use the <strong>same</strong> colour treatment in a given layout.</span>
</li>
</ul>
</div>
<div class="section-header brand-logo-subhead" id="logo-horizontal">
<h3 class="brand-logo-subhead-title">Horizontal payoff</h3>
<p class="section-subtitle">Wordmark + tagline + <strong>®</strong></p>
</div>
<div class="grid grid-3 brand-logo-combo-grid fade-in">
<div class="brand-logo-panel brand-logo-panel--dark">
<p class="brand-logo-combo-meta">Horizontal payoff</p>
<p class="brand-logo-label">Starter yellow on void black <span class="brand-badge-fav brand-badge-fav--inline">Preferred</span></p>
<div class="brand-logo-mcr-mask brand-logo-mcr-mask--yellow" role="img" aria-label="Horizontal full lockup in Starter Yellow on Void Black"></div>
<p class="brand-logo-caption">Ink <code>#FFA600</code> · field <code>#16161D</code></p>
</div>
<div class="brand-logo-panel brand-logo-panel--dark">
<p class="brand-logo-combo-meta">Horizontal payoff</p>
<p class="brand-logo-label">Crystal white on void black</p>
<div class="brand-logo-mcr-mask brand-logo-mcr-mask--crystal" role="img" aria-label="Horizontal full lockup in Crystal White on Void Black"></div>
<p class="brand-logo-caption">Ink <code>#F8F8FF</code> · field <code>#16161D</code></p>
</div>
<div class="brand-logo-panel brand-logo-panel--light">
<p class="brand-logo-combo-meta">Horizontal payoff</p>
<p class="brand-logo-label">Void black on crystal white</p>
<img class="brand-logo-full-img" src="assets/logos/ElementoMCR.svg" alt="Elemento® Modular Cloud — Void Black on light field" width="555" height="146">
<p class="brand-logo-caption">Ink <code>#16161D</code> · field <code>#F8F8FF</code></p>
</div>
</div>
<div class="section-header brand-logo-subhead" id="logo-vertical">
<h3 class="brand-logo-subhead-title">Vertical payoff</h3>
<p class="section-subtitle">Same lockup, stacked</p>
</div>
<div class="grid grid-3 brand-logo-combo-grid fade-in">
<div class="brand-logo-panel brand-logo-panel--dark">
<p class="brand-logo-combo-meta">Vertical payoff</p>
<p class="brand-logo-label">Starter yellow on void black <span class="brand-badge-fav brand-badge-fav--inline">Preferred</span></p>
<div class="brand-logo-mcr-ver-mask brand-logo-mcr-ver-mask--yellow" role="img" aria-label="Vertical full lockup in Starter Yellow on Void Black"></div>
<p class="brand-logo-caption">Ink <code>#FFA600</code> · field <code>#16161D</code></p>
</div>
<div class="brand-logo-panel brand-logo-panel--dark">
<p class="brand-logo-combo-meta">Vertical payoff</p>
<p class="brand-logo-label">Crystal white on void black</p>
<div class="brand-logo-mcr-ver-mask brand-logo-mcr-ver-mask--crystal" role="img" aria-label="Vertical full lockup in Crystal White on Void Black"></div>
<p class="brand-logo-caption">Ink <code>#F8F8FF</code> · field <code>#16161D</code></p>
</div>
<div class="brand-logo-panel brand-logo-panel--light">
<p class="brand-logo-combo-meta">Vertical payoff</p>
<p class="brand-logo-label">Void black on crystal white</p>
<img class="brand-logo-ver-img" src="assets/logos/ElementoMCR-ver.svg" alt="Elemento® Modular Cloud vertical lockup — Void Black on light field" width="206" height="200">
<p class="brand-logo-caption">Ink <code>#16161D</code> · field <code>#F8F8FF</code></p>
</div>
</div>
<div class="section-header brand-logo-subhead" id="logo-symbol">
<h3 class="brand-logo-subhead-title">Logo only (symbol)</h3>
<p class="section-subtitle">No wordmark</p>
</div>
<div class="grid grid-3 brand-logo-combo-grid fade-in">
<div class="brand-logo-panel brand-logo-panel--dark">
<p class="brand-logo-combo-meta">Symbol only</p>
<p class="brand-logo-label">Starter yellow on void black <span class="brand-badge-fav brand-badge-fav--inline">Preferred</span></p>
<div class="brand-mark-alone brand-mark-alone--primary" role="img" aria-label="Symbol in Starter Yellow on Void Black"></div>
<p class="brand-logo-caption">Ink <code>#FFA600</code> · field <code>#16161D</code></p>
</div>
<div class="brand-logo-panel brand-logo-panel--dark">
<p class="brand-logo-combo-meta">Symbol only</p>
<p class="brand-logo-label">Crystal white on void black</p>
<img class="brand-mark-alone-img" src="assets/logos/Elemento.svg" alt="Elemento symbol in Crystal White on Void Black" width="200" height="200">
<p class="brand-logo-caption">Ink <code>#F8F8FF</code> · field <code>#16161D</code></p>
</div>
<div class="brand-logo-panel brand-logo-panel--light">
<p class="brand-logo-combo-meta">Symbol only</p>
<p class="brand-logo-label">Void black on crystal white</p>
<div class="brand-mark-alone brand-mark-alone--void" role="img" aria-label="Symbol in Void Black on light field"></div>
<p class="brand-logo-caption">Ink <code>#16161D</code> · field <code>#F8F8FF</code></p>
</div>
</div>
</div>
</section>
<!-- Clear space & scalability -->
<section class="section" id="spacing">
<div class="container">
<div class="section-header">
<h2 class="section-title">Clear space & scalability</h2>
<p class="section-subtitle">From the official logo guidelines</p>
</div>
<div class="grid grid-2 brand-guidelines-grid">
<div class="fade-in">
<h3 class="brand-subsection-title">Respect area</h3>
<p>Minimum clear space around the logo or symbol is <strong>2× the height</strong> of the mark on every side (sometimes described as “doubling the height”). The payoff lockup uses the same rule.</p>
<figure class="brand-clearspace-figure brand-respect-figure">
<figcaption class="brand-figure-caption"><strong>Symbol respect area (grid).</strong> One column or row = <strong>1×</strong> the symbol height (<span class="brand-respect-xeq-inline">x = <span class="brand-respect-symbol-tiny" aria-hidden="true"></span></span>). The mark sits in the <strong>centre</strong>; <strong>corner cells</strong> show a faint symbol as scale reference; keep the <strong>edge</strong> cells clear. Minimum clear space in production remains <strong>2×</strong> the mark height on all sides (and for the full payoff), as in the rule above.</figcaption>
<div class="brand-respect-wrap">
<div class="brand-respect-labelrow" aria-hidden="true">
<span class="brand-respect-label-1x">1×</span>
<span class="brand-respect-label-xeq">x = <span class="brand-respect-symbol-tiny"></span></span>
</div>
<div class="brand-respect-cells" role="img" aria-label="3 by 3 grid: Elemento symbol in the centre, faded symbols in the four corners as scale reference, empty edge cells for respect area. One cell equals the symbol height.">
<div class="brand-respect-cell brand-respect-cell--corner"><div class="brand-respect-symbol brand-respect-symbol--faint" aria-hidden="true"></div></div>
<div class="brand-respect-cell"></div>
<div class="brand-respect-cell brand-respect-cell--corner"><div class="brand-respect-symbol brand-respect-symbol--faint" aria-hidden="true"></div></div>
<div class="brand-respect-cell"></div>
<div class="brand-respect-cell brand-respect-cell--centre"><div class="brand-respect-symbol brand-respect-symbol--main" aria-hidden="true"></div></div>
<div class="brand-respect-cell"></div>
<div class="brand-respect-cell brand-respect-cell--corner"><div class="brand-respect-symbol brand-respect-symbol--faint" aria-hidden="true"></div></div>
<div class="brand-respect-cell"></div>
<div class="brand-respect-cell brand-respect-cell--corner"><div class="brand-respect-symbol brand-respect-symbol--faint" aria-hidden="true"></div></div>
</div>
</div>
</figure>
</div>
<div class="fade-in">
<h3 class="brand-subsection-title">Logo width bands</h3>
<p>Each band sets a <strong>maximum width</strong> for print and screen and the <strong>lockup</strong> to use at that scale (full payoff, horizontal wordmark, or symbol only).</p>
<div class="brand-size-table-wrap">
<table class="brand-size-table brand-size-table--lockups">
<thead>
<tr>
<th scope="col">Band</th>
<th scope="col">Print</th>
<th scope="col">Screen</th>
<th scope="col">Lockup</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large</td>
<td>up to <strong>50</strong> mm</td>
<td>up to <strong>500</strong> px</td>
<td class="brand-size-table-mark-cell">
<div class="brand-size-table-mark-inner">
<strong>Full horizontal payoff</strong> — wordmark, tagline, and ®.
<div class="brand-size-table-lockup brand-size-table-lockup--mcr" role="img" aria-label="Elemento® Modular Cloud — full horizontal lockup"></div>
</div>
</td>
</tr>
<tr>
<td>Medium</td>
<td>up to <strong>35</strong> mm</td>
<td>up to <strong>250</strong> px</td>
<td class="brand-size-table-mark-cell">
<div class="brand-size-table-mark-inner">
<strong>Horizontal wordmark</strong> — when the full payoff is too wide.
<div class="brand-size-table-lockup brand-size-table-lockup--hor" role="img" aria-label="Elemento horizontal wordmark"></div>
</div>
</td>
</tr>
<tr>
<td>Small</td>
<td>up to <strong>10</strong> mm</td>
<td>up to <strong>30</strong> px</td>
<td class="brand-size-table-mark-cell">
<div class="brand-size-table-mark-inner">
<strong>Symbol only</strong> — favicons, app icons, narrow UI.
<div class="brand-size-table-symbol-wrap"><div class="brand-mark-alone brand-size-table-symbol-mark" role="img" aria-label="Elemento symbol only"></div></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p class="brand-table-note">Do not scale the full payoff into the small band — switch to the symbol. Match ink and field colours to the logo section above.</p>
</div>
</div>
</div>
</section>
<!-- Incorrect uses -->
<section class="section brand-section-dont" id="dont">
<div class="container">
<div class="section-header">
<h2 class="section-title">Incorrect uses</h2>
<p class="section-subtitle">Don’t — examples from the guidelines (not exhaustive)</p>
</div>
<div class="grid grid-3 brand-dont-grid">
<div class="card brand-dont-card fade-in">
<div class="brand-dont-badge" aria-hidden="true"><span>×</span></div>
<h3>Non-brand colours</h3>
<p>The logo must not use colours outside the identity palette.</p>
<div class="brand-dont-example">
<div class="brand-dont-specimen">
<div class="brand-dont-mcr-misuse brand-dont-mcr-misuse--rainbow" role="img" aria-label="Incorrect: lockup in non-brand gradient colours"></div>
</div>
</div>
</div>
<div class="card brand-dont-card fade-in">
<div class="brand-dont-badge" aria-hidden="true"><span>×</span></div>
<h3>Outline only</h3>
<p>The logo must not be used as a hollow outline.</p>
<div class="brand-dont-example">
<div class="brand-dont-specimen">
<div class="brand-dont-outline-wrap" role="img" aria-label="Incorrect: stroke-only lockup">
<img class="brand-dont-mcr-misuse--outline" src="assets/logos/ElementoMCR.svg" alt="" width="555" height="146" decoding="async">
</div>
</div>
</div>
</div>
<div class="card brand-dont-card fade-in">
<div class="brand-dont-badge" aria-hidden="true"><span>×</span></div>
<h3>Stretch or squeeze</h3>
<p>Do not distort, stretch, or compress the mark.</p>
<div class="brand-dont-example">
<div class="brand-dont-specimen">
<div class="brand-dont-mcr-misuse brand-dont-mcr-misuse--stretch" role="img" aria-label="Incorrect: stretched lockup"></div>
</div>
</div>
</div>
<div class="card brand-dont-card fade-in">
<div class="brand-dont-badge" aria-hidden="true"><span>×</span></div>
<h3>Tilt or rotate</h3>
<p>Do not tilt, rotate, or otherwise skew the logo.</p>
<div class="brand-dont-example">
<div class="brand-dont-specimen">
<div class="brand-dont-mcr-misuse brand-dont-mcr-misuse--tilt" role="img" aria-label="Incorrect: rotated lockup"></div>
</div>
</div>
</div>
<div class="card brand-dont-card fade-in">
<div class="brand-dont-badge" aria-hidden="true"><span>×</span></div>
<h3>Effects</h3>
<p>No lighting, drop shadows, or bevels on the lockup.</p>
<div class="brand-dont-example">
<div class="brand-dont-specimen">
<div class="brand-dont-shadow-wrap" role="img" aria-label="Incorrect: lockup with drop shadow and bevel">
<img class="brand-dont-mcr-misuse--shadow-img" src="assets/logos/ElementoMCR.svg" alt="" width="555" height="146" decoding="async">
</div>
</div>
</div>
</div>
<div class="card brand-dont-card fade-in">
<div class="brand-dont-badge" aria-hidden="true"><span>×</span></div>
<h3>Mismatched type & symbol</h3>
<p>The logotype must not use a different colour from the symbol.</p>
<div class="brand-dont-example">
<div class="brand-dont-specimen">
<div class="brand-dont-mcr-misuse brand-dont-mcr-misuse--split" role="img" aria-label="Incorrect: wordmark and symbol in different colours"></div>
</div>
</div>
</div>
</div>
<p class="brand-dont-footer fade-in">Common sense applies: if it hurts legibility or looks unlike the master files, don’t ship it.</p>
</div>
</section>
<!-- Partnership usage -->
<section class="section" id="partnership">
<div class="container">
<div class="section-header">
<h2 class="section-title">Usage in partnership</h2>
<p class="section-subtitle">Co-branding layout</p>
</div>
<p class="brand-partner-lead fade-in">When appearing alongside another company, give <strong>both</strong> marks adequate clear space and balanced visual weight. A typical row is: <strong>Partner</strong> — <strong>Elemento</strong>, without merging or overlapping the lockups.</p>
<div class="brand-partner-lockup-demo fade-in" role="img" aria-label="Partner logo on the left, Elemento logo on the right, separated">
<div class="brand-partner-slot">
<span class="brand-partner-placeholder">Partner logo</span>
<span class="brand-partner-hint">Their clear space</span>
</div>
<div class="brand-partner-sep" aria-hidden="true">
<span class="brand-partner-sep-line"></span>
</div>
<div class="brand-partner-slot brand-partner-slot--elemento">
<img class="brand-partner-elemento-img" src="assets/logos/ElementoMCR.svg" alt="Elemento Modular Cloud" width="555" height="146">
<span class="brand-partner-hint">Elemento clear space</span>
</div>
</div>
<p class="brand-partner-note fade-in">Request the full partnership artwork from <a href="mailto:hello@elemento.cloud">hello@elemento.cloud</a> for approved templates and lockups.</p>
</div>
</section>
<!-- Colors -->
<section class="section" id="colors">
<div class="container">
<div class="section-header">
<h2 class="section-title">Colour palette</h2>
<p class="section-subtitle">Primary and secondary brand colours</p>
</div>
<h3 class="brand-palette-group-title">Primary colours</h3>
<p class="brand-palette-group-lead">Use these first for maximum recognition. The site theme also uses nearby neutrals (e.g. <code>#1A1C20</code> for body text) — pair brand primaries with accessible contrast.</p>
<div class="brand-swatch-grid fade-in">
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #FFA600;"></div>
<div class="brand-swatch-meta"><strong>Starter Yellow</strong><br><code>#FFA600</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #16161D;"></div>
<div class="brand-swatch-meta"><strong>Void Black</strong><br><code>#16161D</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #F8F8FF; border: 1px solid var(--glassmorphism-border, #e0e0e0);"></div>
<div class="brand-swatch-meta"><strong>Crystal White</strong><br><code>#F8F8FF</code></div>
</div>
</div>
<h3 class="brand-palette-group-title">Secondary — product</h3>
<div class="brand-swatch-grid fade-in">
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #EF4056;"></div>
<div class="brand-swatch-meta"><code>#EF4056</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #118ACB;"></div>
<div class="brand-swatch-meta"><code>#118ACB</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #09b24e;"></div>
<div class="brand-swatch-meta"><code>#09b24e</code></div>
</div>
</div>
<h3 class="brand-palette-group-title">Secondary — digital</h3>
<div class="brand-swatch-grid fade-in">
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #ff5500;"></div>
<div class="brand-swatch-meta"><code>#ff5500</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #6c3f99;"></div>
<div class="brand-swatch-meta"><code>#6c3f99</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #07d884;"></div>
<div class="brand-swatch-meta"><code>#07d884</code></div>
</div>
</div>
<h3 class="brand-palette-group-title">Extra</h3>
<div class="brand-swatch-grid brand-swatch-grid--duo fade-in">
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #fccb10;"></div>
<div class="brand-swatch-meta"><code>#fccb10</code></div>
</div>
<div class="brand-swatch">
<div class="brand-swatch-color" style="background: #7167ff;"></div>
<div class="brand-swatch-meta"><code>#7167ff</code></div>
</div>
</div>
<p class="brand-swatch-note fade-in">Product UI tokens on <span class="emphasis-pixel">elemento.cloud</span> may differ slightly; treat this page as the marketing colour reference and <code>css/themes.css</code> for implementation.</p>
</div>
</section>
<!-- Typography -->
<section class="section" id="type">
<div class="container">
<div class="section-header">
<h2 class="section-title">Typography</h2>
<p class="section-subtitle">Brand type stack (with live-site note)</p>
</div>
<p class="brand-type-lead fade-in">Headings use <strong>Red Hat Display</strong> (often Extrabold). Key words inside headings may use <strong>Argent Pixel Italic</strong> (<a href="https://connary.com/fonts/argent-pixel/" target="_blank" rel="noopener noreferrer">Connary Fagen — Argent Pixel</a>). Body copy should use <strong>Red Hat Text</strong> — do not substitute Display for long text. Code uses <strong>Red Hat Mono</strong> (<a href="https://fonts.google.com/" target="_blank" rel="noopener noreferrer">Google Fonts</a>). <strong>Icons</strong> on <span class="emphasis-pixel">elemento.cloud</span> pair <a href="https://fontawesome.com/" target="_blank" rel="noopener noreferrer">Font Awesome</a> with a bundled <strong>Pixel Icon Library</strong> webfont for pixel-style glyphs (<code>.hn</code> classes; files under <code>assets/font/PixelIconLibrary/</code>). Check each source's licensing before reusing or redistributing.</p>
<div class="grid grid-2 brand-guidelines-grid">
<div class="card fade-in brand-type-sample">
<h3 class="brand-type-heading brand-type-heading--extrabold">Red Hat Display</h3>
<p class="brand-type-display-sample">ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
<p class="brand-type-body">Headings — guidelines recommend Extrabold. <a href="https://fonts.google.com/share?selection.family=Red+Hat+Display:wght@400;500;600;700;800" target="_blank" rel="noopener noreferrer">Google Fonts</a>.</p>
</div>
<div class="card fade-in brand-type-sample">
<h3 class="brand-type-heading brand-type-argent">Argent Pixel Italic</h3>
<p class="brand-type-argent-sample">Highlight within headings</p>
<p class="brand-type-body">Accent inside titles only. <a href="https://connary.com/fonts/argent-pixel/" target="_blank" rel="noopener noreferrer">Argent Pixel</a> is licensed from Connary Fagen; this site ships it for select treatments.</p>
</div>
<div class="card fade-in brand-type-sample">
<h3 class="brand-type-heading brand-type-rht">Red Hat Text</h3>
<p class="brand-type-rht-sample">Body text must stay functional and highly legible. Red Hat Text is tuned for paragraphs — different geometry from Display.</p>
<p class="brand-type-body">Canonical brand body font per guidelines. <span class="emphasis-pixel">elemento.cloud</span> still uses Open Sans in many templates; new work should align with Red Hat Text over time.</p>
</div>
<div class="card fade-in brand-type-sample">
<h3 class="brand-type-heading brand-type-heading--mono">Red Hat Mono</h3>
<p class="brand-type-mono">nucleus cluster status<br>api.elemento.cloud/v1</p>
<p class="brand-type-body">Code, CLI samples, and technical UI.</p>
</div>
</div>
</div>
</section>
<!-- Identity, patterns, imagery -->
<section class="section" id="identity">
<div class="container">
<div class="section-header">
<h2 class="section-title">Identity, patterns & imagery</h2>
<p class="section-subtitle">Patterns, icons & photography</p>
</div>
<div class="grid grid-2 brand-guidelines-grid">
<div class="card fade-in">
<h3>Patterns</h3>
<p>Visual identity uses <strong>patterns</strong> inspired by the “force of cloud” — dynamic, physics-adjacent motifs. Use approved pattern files from the brand kit; don’t redraw from memory.</p>
</div>
<div class="card fade-in">
<h3>Icons</h3>
<p>This site implements UI and marketing icons with <a href="https://fontawesome.com/" target="_blank" rel="noopener noreferrer">Font Awesome</a> and pixel-style accents via the bundled <strong>Pixel Icon Library</strong> webfont (<code>.hn</code> icon classes in <code>assets/font/PixelIconLibrary/</code>). Treat that pairing as the standard for <span class="emphasis-pixel">elemento.cloud</span>; avoid ad-hoc third icon families. Keep stroke, corner radius, and colour usage consistent with the chosen set.</p>
</div>
<div class="card fade-in brand-identity-wide">
<h3>Photography & art direction</h3>
<p><strong>Retro-future</strong> — abstract concepts, atmospheric or space-research imagery. <strong>Team moments</strong> — people and culture for tone of voice. <strong>Moving images</strong> — long exposure and dynamic shots for energy. Avoid generic stock that fights these three lanes.</p>
</div>
</div>
</div>
</section>
<!-- Product names -->
<section class="section" id="products">
<div class="container">
<div class="section-header">
<h2 class="section-title">Product names</h2>
<p class="section-subtitle">Spellings and capitalization</p>
</div>
<div class="grid grid-2 brand-guidelines-grid">
<div class="card fade-in">
<h3>Elemento</h3>
<p>Company and platform name: <strong>Elemento</strong> (sentence case in body; title case in headings as on the site). When you need the full legal line with <strong>Modular Cloud</strong> and <strong>®</strong>, use the horizontal or vertical payoff lockup according to space.</p>
</div>
<div class="card fade-in">
<h3>Product marks</h3>
<p><strong>Atomos</strong>, <strong>Electros</strong>, and <strong>Atomosphere</strong> — capitalize as proper nouns. Use each product’s SVG from <a href="products.html">All products</a> alongside the name when possible.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="section">
<div class="container">
<div class="section-header text-center">
<h2 class="section-title">Press or partner assets</h2>
<p class="section-subtitle">Email <a href="mailto:hello@elemento.cloud">hello@elemento.cloud</a> for high-resolution files or co-marketing review.</p>
</div>
<div class="text-center">
<a href="contact.html" class="btn btn-primary">Contact</a>
<a href="about.html" class="btn btn-secondary">About Elemento</a>
</div>
</div>
</section>
<!-- Footer -->
<div id="footer-placeholder"></div>
<!-- Scripts -->
<script src="js/splash-screen.js" defer></script>
<script src="js/navbar.js" defer></script>
<script src="js/faq.js" defer></script>
<script src="js/main.js" defer></script>
<script src="js/footer.js" defer></script>
<script src="js/atmosphere_hero.js" defer></script>
<script src="js/themes.js" defer></script>
</body>
</html>