skill
Adom Brand
Public Made by Adomby adom
The Adom brand identity — logo, color, type, motion, sound, Kel, icons, and the design system every Adom product is built on.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adom Brand</title>
<style>
@font-face{font-family:'Familjen Grotesk';src:url('https://adom.inc/fonts/familjen-grotesk/familjen-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('https://adom.inc/fonts/familjen-grotesk/familjen-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('https://adom.inc/fonts/satoshi/satoshi-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('https://adom.inc/fonts/satoshi/satoshi-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2') format('woff2');font-weight:400;font-display:swap}
:root{
--bg:#0d1117;--surface:#161b22;--elevated:#1c2128;--overlay:#21262d;
--border:#30363d;--border-muted:#21262d;
--text:#e6edf3;--text2:#8b949e;--text3:#484f58;
--accent:#00b8b0;--accent-bright:#00e6dc;--purple:#8C6BF7;--purple-light:#C5B3FF;
--grad:linear-gradient(110deg,#00b8b1 0%,#0061ef 48%,#8c6bf7 100%);
}
*{box-sizing:border-box;margin:0;padding:0;transition:background .15s,color .15s,border-color .15s,transform .15s}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Satoshi',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.fg{font-family:'Familjen Grotesk',sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
section{max-width:1080px;margin:0 auto;padding:64px 28px;border-top:1px solid var(--border-muted)}
.eyebrow{font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.lede{color:var(--text2);font-size:17px;max-width:62ch}
h2{font-size:clamp(28px,4vw,40px);margin:.35em 0 .5em}
h3{font-size:19px;margin:0 0 4px}
/* HERO */
.hero{position:relative;overflow:hidden;border:0;text-align:center;padding:96px 28px 104px;max-width:none}
.hero::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:1;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -10%,transparent 40%,rgba(13,17,23,.55) 100%);z-index:1}
.hero>*{position:relative;z-index:2}
.hero .wm{width:min(460px,72vw);margin:0 auto 26px;display:block;filter:drop-shadow(0 8px 40px rgba(0,0,0,.25))}
.hero .wm path{fill:#fff}
.hero .kicker{font-family:'Familjen Grotesk',sans-serif;font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:rgba(255,255,255,.92)}
.hero h1{font-size:clamp(34px,6vw,64px);color:#fff;margin:10px 0 14px}
.hero p{color:rgba(255,255,255,.92);font-size:18px;max-width:48ch;margin:0 auto}
.hero .come{margin-top:26px;font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:18px;color:#fff}
/* nav chips */
.nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:34px}
.nav a{font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px)}
.nav a:hover{background:rgba(255,255,255,.26);text-decoration:none}
/* cards / grid */
.grid{display:grid;gap:18px;margin-top:28px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px}
.card .meta{color:var(--text2);font-size:14px;margin-top:6px}
/* logo story */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:760px){.story{grid-template-columns:1fr}}
.atom{width:160px;height:160px;margin:0 auto}
.atom path{fill:var(--accent)}
.pull{font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--text);margin:18px 0;line-height:1.25}
/* logo variant tiles */
.variants{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:28px}
.vt{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.vt .stage{height:120px;display:flex;align-items:center;justify-content:center;padding:24px}
.vt .stage svg{height:34px;width:auto;max-width:80%}
.vt .label{padding:12px 16px;background:var(--surface);border-top:1px solid var(--border)}
.vt .label b{font-family:'Familjen Grotesk',sans-serif;font-size:14px}
.vt .label span{display:block;color:var(--text2);font-size:12.5px}
.bg-grad{background:var(--grad)}
.bg-light{background:#f4f4f6}
.bg-dark{background:#000}
.bg-surface{background:var(--surface)}
.wm-grad path{fill:url(#adomGrad)}
.wm-teal path{fill:#00b8b0}
.wm-white path{fill:#fff}
.wm-black path{fill:#191919}
.wm-gray path{fill:#9aa0a6}
/* clear space */
.clear{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-top:24px}
@media(max-width:680px){.clear{grid-template-columns:1fr}}
.clearbox{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:34px;display:flex;justify-content:center}
.clearbox .frame{position:relative;padding:48px;border:1.5px dashed rgba(140,107,247,.55);border-radius:8px}
.clearbox .frame svg{height:40px;display:block}
.clearbox .frame svg path{fill:var(--purple-light)}
.dot{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(140,107,247,.5)}
/* colors */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:24px}
.sw{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.sw .chip{height:92px}
.sw .info{background:var(--surface);padding:11px 13px}
.sw .info b{font-family:'Familjen Grotesk',sans-serif;font-size:13.5px;display:block}
.sw .info .mono{font-size:11.5px;color:var(--text2);display:block;margin-top:2px}
.gradchip{grid-column:span 2;min-height:92px;border-radius:12px;border:1px solid var(--border);background:var(--grad);display:flex;align-items:flex-end;padding:13px}
.gradchip span{font-family:'Familjen Grotesk',sans-serif;font-weight:700;color:#fff;font-size:14px}
@media(max-width:520px){.gradchip{grid-column:span 1}}
/* token table */
table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-muted)}
th{font-family:'Familjen Grotesk',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
td.mono{color:var(--text2)}
.tok{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:8px;border:1px solid rgba(255,255,255,.12)}
/* type specimens */
.spec{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;margin-top:16px}
.spec .big{font-size:clamp(40px,8vw,72px);line-height:1;letter-spacing:-.02em}
.spec .name{color:var(--accent);font-size:13px;font-weight:500;letter-spacing:.06em;margin-bottom:10px}
.spec .set{color:var(--text2);font-size:15px;margin-top:14px}
.fg-spec{font-family:'Familjen Grotesk',sans-serif;font-weight:700}
.sa-spec{font-family:'Satoshi',sans-serif;font-weight:500}
.jb-spec{font-family:'JetBrains Mono',monospace}
/* kel */
.kel{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center}
@media(max-width:680px){.kel{grid-template-columns:1fr;text-align:center}}
.kel .faces{display:flex;gap:14px;justify-content:center}
.kel img{height:210px;border-radius:16px;border:1px solid var(--border);background:var(--surface)}
.kel-hat{height:210px}
/* swag */
.swag{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:24px}
.swag .item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px}
.swag .item .ic{height:30px;margin-bottom:10px;color:var(--text)}
.swag .item b{font-family:'Familjen Grotesk',sans-serif;font-size:14px}
.swag .item p{color:var(--text2);font-size:13px;margin-top:3px}
/* rules */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media(max-width:680px){.rules{grid-template-columns:1fr}}
.rule{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:16px 18px}
.rule.no{border-left-color:#ef5350}
.rule b{font-family:'Familjen Grotesk',sans-serif;font-size:14.5px;display:block;margin-bottom:3px}
.rule p{color:var(--text2);font-size:13.5px}
/* buttons demo */
.btn{background:var(--accent);color:#0d1117;border:none;border-radius:6px;padding:9px 18px;font-family:'Satoshi',sans-serif;font-weight:500;font-size:13px;cursor:pointer}
.btn:hover{background:var(--accent-bright)}
.btn-secondary{background:transparent;color:var(--accent);border:1px solid rgba(0,184,176,.3);border-radius:6px;padding:9px 18px;font-weight:500;font-size:13px;cursor:pointer}
.btn-secondary:hover{background:rgba(0,184,176,.08)}
.tip{background:rgba(22,27,34,.92);backdrop-filter:blur(16px);border:1px solid rgba(0,184,177,.2);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.55);padding:14px 16px;font-size:13px;color:var(--text2);display:inline-block;margin-top:14px}
/* animation */
.anim{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:stretch;margin-top:28px}
@media(max-width:760px){.anim{grid-template-columns:1fr}}
.anim video{width:100%;border-radius:14px;border:1px solid var(--border);background:#000;display:block}
.sound{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:center}
.sound h3{margin-bottom:6px}
.playbtn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:11px 18px;font-family:'Satoshi',sans-serif;font-weight:500;font-size:14px;cursor:pointer;margin-top:14px;align-self:flex-start}
.playbtn:hover{background:var(--accent-bright)}
.playbtn svg{width:16px;height:16px;fill:#0d1117}
.wave{display:flex;align-items:center;gap:3px;height:34px;margin-top:16px}
.wave i{width:3px;background:var(--accent);border-radius:2px;height:20%;opacity:.5}
.wave.on i{animation:eq .9s ease-in-out infinite}
@keyframes eq{0%,100%{height:18%}50%{height:95%}}
.gifrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.gifrow figure{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg)}
.gifrow img{width:100%;display:block}
.gifrow figcaption{padding:9px 13px;color:var(--text2);font-size:12.5px;background:var(--surface);border-top:1px solid var(--border)}
/* icon gallery */
.iconwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px;margin-top:24px}
.itile{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 10px 12px;text-align:center}
.itile:hover{border-color:rgba(0,184,176,.4);transform:translateY(-2px)}
.itile .glyph{width:38px;height:38px;margin:0 auto 10px;background:var(--text);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.itile:hover .glyph{background:var(--accent-bright)}
.itile span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2)}
/* downloads */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:24px}
.dl a{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;color:var(--text);text-decoration:none}
.dl a:hover{border-color:rgba(0,184,176,.45);background:var(--elevated)}
.dl a b{font-family:'Familjen Grotesk',sans-serif;font-size:14.5px;display:block}
.dl a span{color:var(--text2);font-size:12.5px;display:block;margin-top:3px}
.dl a .sz{color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;margin-top:8px;display:block}
footer{text-align:center;padding:56px 28px 80px;border-top:1px solid var(--border-muted)}
footer .wm{height:30px;opacity:.9;margin-bottom:18px}
footer .wm path{fill:var(--text2)}
footer .come{font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:24px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
footer small{color:var(--text3);display:block;margin-top:14px;font-size:12.5px}
</style>
</head>
<body>
<!-- shared gradient def for inline wordmarks -->
<svg width="0" height="0" style="position:absolute"><defs>
<linearGradient id="adomGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#1c2b6b"/><stop offset="1" stop-color="#5fb6b6"/>
</linearGradient></defs></svg>
<!-- HERO -->
<header class="hero">
<svg class="wm" viewBox="0 0 1072.9 236" aria-label="ADOM"><path d="M212.94,23.05c-25.84-25.84-62.87-30.69-82.73-10.84-8.06,8.06-12.04,18.94-12.21,30.76h0s0,.02,0,.02c0,.04,0,.08,0,.12v73.29c0,.89.72,1.61,1.61,1.61h72.5l-.02-.02c12.17.03,23.42-3.94,31.69-12.2,19.85-19.85,15-56.89-10.84-82.73Z"/><path d="M23.05,212.95c25.84,25.84,62.87,30.69,82.73,10.84,8.06-8.06,12.04-18.94,12.21-30.76h0s0-.02,0-.02c0-.04,0-.08,0-.12v-73.29c0-.89-.72-1.61-1.61-1.61H43.89l.02.02c-12.17-.03-23.42,3.94-31.69,12.2-19.85,19.85-15,56.89,10.84,82.73Z"/><path d="M1065.5,25.22h-58.49c-2.98,0-5.68,1.87-6.73,4.65l-44.4,117.54c-.06.17-.31.17-.37,0l-45.44-117.59c-1.07-2.75-3.76-4.6-6.72-4.6h-58.79c-4.09,0-7.4,3.31-7.4,7.4v35.06l-.03-.12c-1.24,4.99-5.89,6-5.89,6,0,0-4.51,1.02-7.61-2.53v.03c-17.82-29.81-50.31-48.93-89.04-48.93-41.5,0-75.86,21.85-92.76,55.23v-.07c-2.86,5.19-8.74,5.13-8.74,5.13,0,0-5.63-.01-8.41-4.61-16.49-32.68-50.56-52.59-94.79-52.59h-73.46c-4.09,0-7.4,3.31-7.4,7.4v121.27s0,.03,0,.04c-.95,5.15-4.75,5.94-4.75,5.94,0,0-3.88.85-6.77-3.32l.05.23-46.05-126.83c-1.03-2.84-3.75-4.74-6.77-4.74h-57.14c-3.01,0-5.73,1.9-6.76,4.73l-68.67,188.38c-1.05,2.88-.18,6.21,2.4,8.19,1.31,1.01,2.98,1.47,4.64,1.47h34.96s6.43,0,6.43,0c2.5,0,4.83-1.39,5.9-3.65,8.49-17.86,26.5-29.64,48.37-29.64s39.71,11.73,48.19,29.53c1.1,2.32,3.49,3.76,6.06,3.76h120.78c31.22,0,57.85-9.95,77.02-28.77,7.38-7.25,13.43-15.72,18.05-25.1v.09c2.74-5.19,8.37-5.13,8.37-5.13,0,0,5.43,0,8.08,4.64,4.88,9.88,11.26,18.78,18.91,26.42,18.6,18.6,44.61,29.78,74.26,29.78,38.74,0,71.23-19.18,89.05-49.07l-.02.07c3.1-3.55,7.61-2.53,7.61-2.53,0,0,4.65,1,5.89,6l.03-.12v36.32c0,4.09,3.31,7.4,7.4,7.4h45.79c4.09,0,7.4-3.31,7.4-7.4v-86.26c0-.23.32-.28.39-.06l30.37,88.86c1,2.91,3.74,4.87,6.81,4.87h39.69c3.08,0,5.82-1.96,6.81-4.87l30.1-88.02c.07-.21.39-.16.39.06v85.43c0,4.09,3.31,7.4,7.4,7.4h45.79c4.09,0,7.4-3.31,7.4-7.4V32.62c0-4.09-3.31-7.4-7.4-7.4ZM372.31,147.57c-.15.21-.5.57-1.1.57h-30.33c-.61,0-.95-.35-1.1-.56-.15-.21-.38-.65-.19-1.23l15.06-45.79c.27-.81.92-.94,1.29-.94h0c.37,0,1.02.12,1.29.93l15.26,45.8c.19.58-.04,1.01-.19,1.23ZM525.72,173.84h-14.52c-.86,0-1.56-.7-1.56-1.56v-92.16c0-.86.7-1.56,1.56-1.56h14.52c30.81,0,48.48,17.47,48.48,47.92s-17.67,47.36-48.48,47.36ZM734.6,173.26c-26.51,0-42.33-17.71-42.34-47.36,0-14.59,3.88-26.68,11.21-34.98,7.33-8.29,18.09-12.67,31.13-12.67,12.11,0,22.28,3.84,29.58,11.13.5.5.98,1.01,1.45,1.54,7.4,8.33,11.31,20.42,11.31,34.97,0,29.21-16.22,47.36-42.34,47.36Z"/></svg>
<div class="kicker">Brand Identity Guidelines</div>
<h1>This is Adom.</h1>
<p>The logo, the color, the type, the mascot, and the design system every Adom product is built on. One source of truth.</p>
<div class="come">Come create with us.</div>
<nav class="nav">
<a href="#logo">Logo</a><a href="#animation">Animation</a><a href="#variants">Variants</a><a href="#color">Color</a>
<a href="#type">Typography</a><a href="#icons">Icons</a><a href="#kel">Kel</a><a href="#swag">Swag</a><a href="#system">Design System</a><a href="#downloads">Downloads</a>
</nav>
</header>
<!-- LOGO STORY -->
<section id="logo">
<div class="story">
<div>
<div class="eyebrow">Meet the logo</div>
<h2>A hydrogen atom, drawn right.</h2>
<p class="lede">Most pop-culture atoms use the orbital Bohr model — cute, but outdated for 100 years. The Adom logoshape is something else entirely: a 2D rendering of the <b>Schrödinger wave function for the hydrogen atom.</b> That atomic precision is echoed in the bonds between the letters of the custom-drawn wordmark.</p>
<p class="pull">Updating old models is kind of our thing.</p>
<p class="lede">And the spelling? Intentional. "Adom" — not "atom." To avoid any accusations of pedantry, we spelled it wrong. Added bonus: the trademark was available. The person we want to talk to at the party is the one who won't call us out on a harmless typo.</p>
</div>
<div>
<svg class="atom" viewBox="0 0 1061.33 1061.38" aria-label="Adom icon"><path d="M957.65,103.68c-116.2-116.2-282.77-138.02-372.05-48.73-36.23,36.23-54.16,85.18-54.92,138.34h0s0,.07,0,.07c0,.17,0,.35,0,.52v329.6c0,3.99,3.24,7.23,7.23,7.23h326.06c54.75.14,105.25-17.79,142.42-54.97,89.28-89.28,67.46-255.85-48.74-372.05Z"/><path d="M103.68,957.7c116.2,116.2,282.77,138.02,372.05,48.73,36.23-36.23,54.16-85.18,54.92-138.34h0s0-.07,0-.07c0-.17,0-.35,0-.52v-329.6c0-3.99-3.24-7.23-7.23-7.23H197.37c-54.75-.14-105.25,17.79-142.42,54.97-89.28,89.28-67.46,255.85,48.74,372.05Z"/></svg>
</div>
</div>
</section>
<!-- ANIMATION -->
<section id="animation">
<div class="eyebrow">Motion & sound</div>
<h2>The atom in motion.</h2>
<p class="lede">The animated logo is the brand's signature moment — the wave-function lobes resolve into the mark. It pairs with a four-second sonic mnemonic produced by Kickstand. Use them together for intros, splash screens, and loaders.</p>
<div class="anim">
<video controls muted loop playsinline poster="" preload="metadata">
<source src="../animation/Adom-atom-final.mp4" type="video/mp4">
</video>
<div class="sound">
<div class="eyebrow">Sonic mnemonic</div>
<h3 style="font-size:19px;margin-top:6px">Adom, in 4 seconds.</h3>
<p style="color:var(--text2);font-size:14px">The official sound that plays under the animation. Final mix, June 2024.</p>
<button class="playbtn" id="snd">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> Play mnemonic
</button>
<div class="wave" id="wave">
<i style="height:30%"></i><i style="height:60%"></i><i style="height:90%"></i><i style="height:45%"></i><i style="height:75%"></i><i style="height:35%"></i><i style="height:85%"></i><i style="height:55%"></i><i style="height:70%"></i><i style="height:40%"></i><i style="height:80%"></i><i style="height:50%"></i><i style="height:65%"></i><i style="height:30%"></i><i style="height:60%"></i>
</div>
<audio id="mnemonic" src="../animation/adom-mnemonic-4sec.wav" preload="none"></audio>
</div>
</div>
<div class="gifrow">
<figure><img src="../animation/adom-animated-1080p.gif" alt="Animated Adom logo" loading="lazy"><figcaption>Full lockup — transparent GIF (1080p)</figcaption></figure>
<figure><img src="../animation/adom-mark-1080p.gif" alt="Animated Adom mark" loading="lazy"><figcaption>Logomark only — transparent GIF (1080p)</figcaption></figure>
</div>
<script>
(function(){
var b=document.getElementById('snd'),a=document.getElementById('mnemonic'),w=document.getElementById('wave');
b.addEventListener('click',function(){
if(a.paused){a.currentTime=0;a.play();w.classList.add('on');b.childNodes[2].textContent=' Playing…';}
else{a.pause();w.classList.remove('on');b.childNodes[2].textContent=' Play mnemonic';}
});
a.addEventListener('ended',function(){w.classList.remove('on');b.childNodes[2].textContent=' Play mnemonic';});
})();
</script>
</section>
<!-- LOGO VARIANTS -->
<section id="variants">
<div class="eyebrow">Logo</div>
<h2>Five variants, one identity.</h2>
<p class="lede">Use the Primary logo whenever you can. Reach for a variant only when the space or the medium calls for it.</p>
<div class="variants">
<div class="vt"><div class="stage bg-light"><svg class="wm-grad" viewBox="0 0 1072.9 236"><use href="#adomPath"/></svg></div><div class="label"><b>Primary</b><span>Default — full gradient wordmark</span></div></div>
<div class="vt"><div class="stage bg-light"><svg class="wm-teal" viewBox="0 0 1072.9 236"><use href="#adomPath"/></svg></div><div class="label"><b>One Color</b><span>Teal #00B8B1 — busy backgrounds</span></div></div>
<div class="vt"><div class="stage bg-dark"><svg class="wm-white" viewBox="0 0 1072.9 236"><use href="#adomPath"/></svg></div><div class="label"><b>White</b><span>Reversed — dark backgrounds</span></div></div>
<div class="vt"><div class="stage bg-light"><svg class="wm-black" viewBox="0 0 1072.9 236"><use href="#adomPath"/></svg></div><div class="label"><b>Black & White</b><span>Non-color printing</span></div></div>
<div class="vt"><div class="stage bg-light"><svg class="wm-gray" viewBox="0 0 1072.9 236"><use href="#adomPath"/></svg></div><div class="label"><b>Grayscale</b><span>Non-color printing, alt</span></div></div>
<div class="vt"><div class="stage bg-surface"><img src="../assets/favicon-color.svg" style="height:60px;border-radius:14px" alt="Favicon"></div><div class="label"><b>Favicon</b><span>When space is too small</span></div></div>
</div>
<!-- hidden path source for <use> -->
<svg width="0" height="0" style="position:absolute"><defs><path id="adomPath" d="M212.94,23.05c-25.84-25.84-62.87-30.69-82.73-10.84-8.06,8.06-12.04,18.94-12.21,30.76h0s0,.02,0,.02c0,.04,0,.08,0,.12v73.29c0,.89.72,1.61,1.61,1.61h72.5l-.02-.02c12.17.03,23.42-3.94,31.69-12.2,19.85-19.85,15-56.89-10.84-82.73Z M23.05,212.95c25.84,25.84,62.87,30.69,82.73,10.84,8.06-8.06,12.04-18.94,12.21-30.76h0s0-.02,0-.02c0-.04,0-.08,0-.12v-73.29c0-.89-.72-1.61-1.61-1.61H43.89l.02.02c-12.17-.03-23.42,3.94-31.69,12.2-19.85,19.85-15,56.89,10.84,82.73Z M1065.5,25.22h-58.49c-2.98,0-5.68,1.87-6.73,4.65l-44.4,117.54c-.06.17-.31.17-.37,0l-45.44-117.59c-1.07-2.75-3.76-4.6-6.72-4.6h-58.79c-4.09,0-7.4,3.31-7.4,7.4v35.06l-.03-.12c-1.24,4.99-5.89,6-5.89,6,0,0-4.51,1.02-7.61-2.53v.03c-17.82-29.81-50.31-48.93-89.04-48.93-41.5,0-75.86,21.85-92.76,55.23v-.07c-2.86,5.19-8.74,5.13-8.74,5.13,0,0-5.63-.01-8.41-4.61-16.49-32.68-50.56-52.59-94.79-52.59h-73.46c-4.09,0-7.4,3.31-7.4,7.4v121.27s0,.03,0,.04c-.95,5.15-4.75,5.94-4.75,5.94,0,0-3.88.85-6.77-3.32l.05.23-46.05-126.83c-1.03-2.84-3.75-4.74-6.77-4.74h-57.14c-3.01,0-5.73,1.9-6.76,4.73l-68.67,188.38c-1.05,2.88-.18,6.21,2.4,8.19,1.31,1.01,2.98,1.47,4.64,1.47h34.96s6.43,0,6.43,0c2.5,0,4.83-1.39,5.9-3.65,8.49-17.86,26.5-29.64,48.37-29.64s39.71,11.73,48.19,29.53c1.1,2.32,3.49,3.76,6.06,3.76h120.78c31.22,0,57.85-9.95,77.02-28.77,7.38-7.25,13.43-15.72,18.05-25.1v.09c2.74-5.19,8.37-5.13,8.37-5.13,0,0,5.43,0,8.08,4.64,4.88,9.88,11.26,18.78,18.91,26.42,18.6,18.6,44.61,29.78,74.26,29.78,38.74,0,71.23-19.18,89.05-49.07l-.02.07c3.1-3.55,7.61-2.53,7.61-2.53,0,0,4.65,1,5.89,6l.03-.12v36.32c0,4.09,3.31,7.4,7.4,7.4h45.79c4.09,0,7.4-3.31,7.4-7.4v-86.26c0-.23.32-.28.39-.06l30.37,88.86c1,2.91,3.74,4.87,6.81,4.87h39.69c3.08,0,5.82-1.96,6.81-4.87l30.1-88.02c.07-.21.39-.16.39.06v85.43c0,4.09,3.31,7.4,7.4,7.4h45.79c4.09,0,7.4-3.31,7.4-7.4V32.62c0-4.09-3.31-7.4-7.4-7.4ZM372.31,147.57c-.15.21-.5.57-1.1.57h-30.33c-.61,0-.95-.35-1.1-.56-.15-.21-.38-.65-.19-1.23l15.06-45.79c.27-.81.92-.94,1.29-.94h0c.37,0,1.02.12,1.29.93l15.26,45.8c.19.58-.04,1.01-.19,1.23ZM525.72,173.84h-14.52c-.86,0-1.56-.7-1.56-1.56v-92.16c0-.86.7-1.56,1.56-1.56h14.52c30.81,0,48.48,17.47,48.48,47.92s-17.67,47.36-48.48,47.36ZM734.6,173.26c-26.51,0-42.33-17.71-42.34-47.36,0-14.59,3.88-26.68,11.21-34.98,7.33-8.29,18.09-12.67,31.13-12.67,12.11,0,22.28,3.84,29.58,11.13.5.5.98,1.01,1.45,1.54,7.4,8.33,11.31,20.42,11.31,34.97,0,29.21-16.22,47.36-42.34,47.36Z"/></defs></svg>
<div class="clear">
<div class="clearbox"><div class="frame">
<div class="dot" style="top:-17px;left:-17px"></div>
<div class="dot" style="bottom:-17px;right:-17px"></div>
<svg viewBox="0 0 1061.33 1061.38" style="height:54px"><use href="#atomPath"/></svg>
</div></div>
<div>
<div class="eyebrow">Clear space</div>
<h3 style="font-size:22px;margin:6px 0">Give it one electron cloud.</h3>
<p class="lede">Keep other graphic elements away from the logo. The minimum safety margin is exactly one electron cloud — the width of a single lobe of the mark — on every side.</p>
</div>
</div>
<svg width="0" height="0" style="position:absolute"><defs><path id="atomPath" d="M957.65,103.68c-116.2-116.2-282.77-138.02-372.05-48.73-36.23,36.23-54.16,85.18-54.92,138.34h0s0,.07,0,.07c0,.17,0,.35,0,.52v329.6c0,3.99,3.24,7.23,7.23,7.23h326.06c54.75.14,105.25-17.79,142.42-54.97,89.28-89.28,67.46-255.85-48.74-372.05Z M103.68,957.7c116.2,116.2,282.77,138.02,372.05,48.73,36.23-36.23,54.16-85.18,54.92-138.34h0s0-.07,0-.07c0-.17,0-.35,0-.52v-329.6c0-3.99-3.24-7.23-7.23-7.23H197.37c-54.75-.14-105.25,17.79-142.42,54.97-89.28,89.28-67.46,255.85,48.74,372.05Z"/></defs></svg>
</section>
<!-- COLORS -->
<section id="color">
<div class="eyebrow">Color</div>
<h2>Blue → teal → purple.</h2>
<p class="lede">Teal <span class="mono">#00B8B1</span> is the primary accent. The signature brand gradient sweeps across the full blue–teal–purple spectrum. Use RGB on screen, CMYK in print.</p>
<div class="swatches">
<div class="gradchip"><span>Brand Gradient — blue · teal · purple</span></div>
<div class="sw"><div class="chip" style="background:#64ABFF"></div><div class="info"><b>Blue Light</b><span class="mono">#64ABFF</span><span class="mono">100 171 255</span></div></div>
<div class="sw"><div class="chip" style="background:#8FD3D4"></div><div class="info"><b>Teal Light</b><span class="mono">#8FD3D4</span><span class="mono">143 211 212</span></div></div>
<div class="sw"><div class="chip" style="background:#C5B3FF"></div><div class="info"><b>Purple Light</b><span class="mono">#C5B3FF</span><span class="mono">197 179 255</span></div></div>
<div class="sw"><div class="chip" style="background:#0061EF"></div><div class="info"><b>Blue Dark</b><span class="mono">#0061EF</span><span class="mono">0 97 239</span></div></div>
<div class="sw"><div class="chip" style="background:#00B8B1"></div><div class="info"><b>Teal ★</b><span class="mono">#00B8B1</span><span class="mono">0 184 177</span></div></div>
<div class="sw"><div class="chip" style="background:#8C6BF7"></div><div class="info"><b>Purple</b><span class="mono">#8C6BF7</span><span class="mono">140 107 247</span></div></div>
<div class="sw"><div class="chip" style="background:#191919"></div><div class="info"><b>Black</b><span class="mono">#191919</span><span class="mono">25 25 25</span></div></div>
<div class="sw"><div class="chip" style="background:#00204F"></div><div class="info"><b>Navy</b><span class="mono">#00204F</span><span class="mono">0 32 79</span></div></div>
<div class="sw"><div class="chip" style="background:#003C3F"></div><div class="info"><b>Teal Dark</b><span class="mono">#003C3F</span><span class="mono">0 60 63</span></div></div>
<div class="sw"><div class="chip" style="background:#4323AD"></div><div class="info"><b>Purple Dark</b><span class="mono">#4323AD</span><span class="mono">75 35 173</span></div></div>
</div>
<h3 style="font-size:20px;margin:40px 0 0">Design-system tokens (dark UI)</h3>
<p class="lede">The code-level palette every Adom viewer, webview and app implements. Dark theme, always.</p>
<table>
<thead><tr><th>Token</th><th>Value</th><th>Use</th></tr></thead>
<tbody>
<tr><td class="fg">bg</td><td class="mono"><span class="tok" style="background:#0d1117"></span>#0d1117</td><td>Page / deepest background</td></tr>
<tr><td class="fg">surface</td><td class="mono"><span class="tok" style="background:#161b22"></span>#161b22</td><td>Panels, toolbars, cards</td></tr>
<tr><td class="fg">elevated</td><td class="mono"><span class="tok" style="background:#1c2128"></span>#1c2128</td><td>Elevated cards, hover</td></tr>
<tr><td class="fg">border</td><td class="mono"><span class="tok" style="background:#30363d"></span>#30363d</td><td>Standard border</td></tr>
<tr><td class="fg">text</td><td class="mono"><span class="tok" style="background:#e6edf3"></span>#e6edf3</td><td>Primary text</td></tr>
<tr><td class="fg">text2</td><td class="mono"><span class="tok" style="background:#8b949e"></span>#8b949e</td><td>Secondary / labels</td></tr>
<tr><td class="fg">accent</td><td class="mono"><span class="tok" style="background:#00b8b0"></span>#00b8b0</td><td>Primary accent (teal)</td></tr>
<tr><td class="fg">accent-bright</td><td class="mono"><span class="tok" style="background:#00e6dc"></span>#00e6dc</td><td>Hover / focus highlights</td></tr>
<tr><td class="fg">purple</td><td class="mono"><span class="tok" style="background:#8C6BF7"></span>#8C6BF7</td><td>Group labels, categories</td></tr>
</tbody>
</table>
</section>
<!-- TYPOGRAPHY -->
<section id="type">
<div class="eyebrow">Typography</div>
<h2>Familjen Grotesk & Satoshi.</h2>
<p class="lede">Familjen Grotesk for big, bold headlines. Satoshi for everything you read. JetBrains Mono for code. Never Inter, Arial, Helvetica or system fonts as the primary face.</p>
<div class="spec">
<div class="name">FAMILJEN GROTESK · BOLD 700 · Headlines</div>
<div class="big fg-spec">AaBbCc 123</div>
<div class="set fg-spec">Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</div>
</div>
<div class="spec">
<div class="name">SATOSHI · MEDIUM 500 · Body & UI</div>
<div class="big sa-spec">AaBbCc 123</div>
<div class="set sa-spec">Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</div>
</div>
<div class="spec">
<div class="name">JETBRAINS MONO · REGULAR 400 · Code & terminal</div>
<div class="big jb-spec">AaBbCc 123</div>
<div class="set jb-spec">const accent = "#00b8b0"; // adom teal</div>
</div>
</section>
<!-- ICON SYSTEM -->
<section id="icons">
<div class="eyebrow">Icon system</div>
<h2>One family, monochrome white.</h2>
<p class="lede">Every Adom tool ships a custom, hand-drawn icon — single color (<span class="mono">#e6edf3</span> / currentColor), 24×24 grid, no gradients, no emoji. Shown here rendered uniformly white to prove the rule. Hover to see them in accent.</p>
<div class="iconwall" id="iconwall"></div>
<script>
(function(){
var icons=["chipfit","chipsmith","digikey","jlcpcb","mouser","parts-search","port-hints","quicklook","step","symbol","tsci","tts","video","video-post","shotlog","vscode"];
var w=document.getElementById('iconwall');
icons.forEach(function(n){
var t=document.createElement('div');t.className='itile';
var g=document.createElement('div');g.className='glyph';
g.style.webkitMaskImage="url(../icons/"+n+".svg)";g.style.maskImage="url(../icons/"+n+".svg)";
var s=document.createElement('span');s.textContent=n;
t.appendChild(g);t.appendChild(s);w.appendChild(t);
});
})();
</script>
</section>
<!-- KEL -->
<section id="kel">
<div class="eyebrow">Mascot</div>
<h2>Meet Kel.</h2>
<div class="kel">
<div class="faces">
<img src="../assets/kel-bust.png" alt="Kel">
<img class="kel-hat" src="../assets/kel-hat-bust.png" alt="Kel in an Adom cap">
</div>
<div>
<p class="lede">Kel is the friendly face of Adom — the bespectacled engineer-next-door who shows up across the product. He's the voice of the Adom bot in Google Chat, the helping hand in onboarding, and the avatar that gives the brand a person to talk to.</p>
<p class="lede" style="margin-top:12px">Two official busts: the classic look, and the Adom-cap edition. Keep him warm, approachable, and competent — never a cartoon, never off-model. Source files live in <span class="mono">gallia/brand/logos/kel-*</span>.</p>
</div>
</div>
</section>
<!-- SWAG -->
<section id="swag">
<div class="eyebrow">Swag & applications</div>
<h2>The brand in the wild.</h2>
<p class="lede">Patterns, cards, and merch all draw from the same palette and marks. The pattern library (concentric arcs, dot grids, pill fields) sits behind the wordmark on dark teal and navy fields.</p>
<div class="swag">
<div class="item"><div class="ic">▦</div><b>Business cards</b><p>White face + teal icon; dark teal / patterned reverse.</p></div>
<div class="item"><div class="ic">⬡</div><b>Apparel</b><p>White & black tees and hoodies, gradient or mono wordmark.</p></div>
<div class="item"><div class="ic">⌬</div><b>Bottles</b><p>Vertical gradient lockup on white; favicon on app screens.</p></div>
<div class="item"><div class="ic">◷</div><b>Patterns</b><p>Concentric arcs, dot grids & pill fields for backgrounds.</p></div>
</div>
</section>
<!-- DESIGN SYSTEM / RULES -->
<section id="system">
<div class="eyebrow">Design system & skills</div>
<h2>How we build on-brand.</h2>
<p class="lede">Every Adom viewer, webview and app follows the same playbook. This is the part the <span class="mono">brand</span> skill enforces.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px">
<button class="btn">Primary action</button>
<button class="btn-secondary">Secondary</button>
<a href="#">A teal link</a>
<span class="tip">Frosted-glass tooltip · blur(16px) · 1px teal border · radius 10px</span>
</div>
<div class="rules">
<div class="rule"><b>Dark theme, always</b><p>Page <span class="mono">#0d1117</span>, panels <span class="mono">#161b22</span>. Never light/white backgrounds for primary viewer content.</p></div>
<div class="rule"><b>Teal is the accent</b><p>Highlights <span class="mono">#00b8b1 → #00e6dc</span> on hover. Purple <span class="mono">#8C6BF7</span> for grouping & categories.</p></div>
<div class="rule"><b>Soft corners, smooth motion</b><p>Buttons ≥ 6px radius, cards ≥ 10px. Every hover transition is <span class="mono">0.15s ease</span> — smooth, not snappy.</p></div>
<div class="rule"><b>Frosted glass surfaces</b><p>Tooltips & cards: <span class="mono">rgba(22,27,34,.92)</span> + <span class="mono">backdrop-filter: blur(16px)</span>, subtle teal border, soft deep shadow.</p></div>
<div class="rule no"><b>Every icon is monochrome white</b><p><span class="mono">#e6edf3</span> or <span class="mono">currentColor</span>. No colored icons, no gradients, no drop shadows — and never emoji as UI glyphs.</p></div>
<div class="rule no"><b>Never fabricate the logo</b><p>Use the real SVGs from <span class="mono">gallia/brand/logos/</span>. Never invent a stand-in, never a letter-in-a-box, never AI-generate the wordmark.</p></div>
<div class="rule no"><b>Don't name competitors publicly</b><p>Lead with absolute Adom values — $2 board, 4-hour turn, Mouser drone delivery, Fort Worth — not rival fabs or EDA tools.</p></div>
<div class="rule"><b>Tone: pros + makers, leaning pro</b><p>Voice is competent-engineer. Prefer "laptop / desk / anywhere" over "couch / garage / weekend."</p></div>
</div>
</section>
<!-- DECK DESIGN -->
<section id="deck">
<div class="eyebrow">Presentation system</div>
<h2>On-brand decks.</h2>
<p class="lede">Slide backgrounds are chosen by role — <b>gradient = wow, solids = substance, white = proof.</b> Titles are Familjen Grotesk with one phrase accented in teal or purple; body is Satoshi with dash bullets.</p>
<div class="grid g3" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">
<div class="card" style="padding:0;overflow:hidden"><div style="height:78px;background:linear-gradient(115deg,#8c6bf7,#0061ef,#00b8b1)"></div><div style="padding:11px 14px"><b class="fg" style="font-size:13px">Gradient</b><div class="meta" style="font-size:12px">title · market · momentum</div></div></div>
<div class="card" style="padding:0;overflow:hidden"><div style="height:78px;background:#4323AD"></div><div style="padding:11px 14px"><b class="fg" style="font-size:13px">Purple Dark</b><div class="meta" style="font-size:12px">quotes · statements</div></div></div>
<div class="card" style="padding:0;overflow:hidden"><div style="height:78px;background:#00204F"></div><div style="padding:11px 14px"><b class="fg" style="font-size:13px">Navy</b><div class="meta" style="font-size:12px">dense content</div></div></div>
<div class="card" style="padding:0;overflow:hidden"><div style="height:78px;background:#003C3F"></div><div style="padding:11px 14px"><b class="fg" style="font-size:13px">Teal Dark</b><div class="meta" style="font-size:12px">solutions</div></div></div>
<div class="card" style="padding:0;overflow:hidden"><div style="height:78px;background:#fff"></div><div style="padding:11px 14px"><b class="fg" style="font-size:13px">White</b><div class="meta" style="font-size:12px">proof · imagery</div></div></div>
</div>
<!-- mini slide mock -->
<div style="margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid var(--border);position:relative;background:#00204F;aspect-ratio:16/7;padding:34px 40px">
<div style="font-family:'Familjen Grotesk';font-weight:700;color:#fff;font-size:26px;max-width:70%">Problem: Hardware dev is <span style="color:#00e6dc">painfully slow</span></div>
<div style="display:flex;gap:48px;margin-top:22px;max-width:74%">
<div><div style="font-family:'Familjen Grotesk';font-weight:700;color:#8C6BF7;font-size:14px;margin-bottom:6px">Iteration</div><div style="color:#c9d4e0;font-size:12.5px;line-height:1.7">– 2-week part lead times<br>– 3-week board spins<br>– manual, error-prone testing</div></div>
<div><div style="font-family:'Familjen Grotesk';font-weight:700;color:#8C6BF7;font-size:14px;margin-bottom:6px">Collaboration</div><div style="color:#c9d4e0;font-size:12.5px;line-height:1.7">– ship hardware via FedEx<br>– can't reproduce setups<br>– no component community</div></div>
</div>
<svg viewBox="0 0 400 400" style="position:absolute;right:-30px;bottom:-30px;width:200px;color:#8FD3D4;opacity:.2"><use href="#onionUse"/></svg>
</div>
<p class="lede" style="font-size:13.5px;margin-top:10px">A two-column content slide: accent phrase in the title, purple subheads, dash bullets, onion-arc motif bottom-right. Full system in the <span class="mono">brand-deck</span> skill.</p>
</section>
<!-- TILING -->
<section id="tiling">
<div class="eyebrow">Tiling & texture</div>
<h2>Repeatable, ethereal, PCB-inspired.</h2>
<p class="lede">Kickstand's pattern motifs, rebuilt as <span class="mono">currentColor</span> SVG tiles — they tint to any surface. Place at low opacity behind content.</p>
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px">
<div class="vt"><div class="stage" style="height:150px;padding:0;background:#0c3a3c url(../tiling/pattern-arcs.png) center/cover"></div><div class="label"><b>Concentric arcs</b><span>corner motif (teal→purple)</span></div></div>
<div class="vt"><div class="stage" style="height:150px;padding:0;background:#16b5b0 url(../tiling/pattern-grid.png) center/cover"></div><div class="label"><b>Square grid</b><span>fine outlined-square field</span></div></div>
<div class="vt"><div class="stage" style="height:150px;padding:0;background:#0c3a3c url(../tiling/pattern-pill.png) center/cover"></div><div class="label"><b>Pill field</b><span>scattered capsule outlines</span></div></div>
</div>
<p class="lede" style="font-size:13px;margin-top:10px">Lifted from the brand-guidelines business-card backs (PDF p13). Place at low opacity behind content on dark teal/navy.</p>
</section>
<svg width="0" height="0" style="position:absolute"><defs><g id="onionUse"><g fill="none" stroke="currentColor" stroke-width="10"><path d="M356 400 V234 Q356 60 200 60 Q44 60 44 234 V400"/><path d="M312 400 V250 Q312 110 200 110 Q88 110 88 250 V400"/><path d="M268 400 V266 Q268 160 200 160 Q132 160 132 266 V400"/><path d="M224 400 V282 Q224 210 200 210 Q176 210 176 282 V400"/></g></g></defs></svg>
<!-- DOWNLOADS -->
<section id="downloads">
<div class="eyebrow">Assets & downloads</div>
<h2>Everything, in one place.</h2>
<p class="lede">The canonical source files. Logos, fonts, animation, and the full Kickstand guide all live in this repo (Files tab); the largest ProRes masters are linked from gallia.</p>
<div class="dl">
<a href="../pdf/Adom-Brand-Guidelines.pdf" target="_blank"><b>Brand Guidelines PDF ↗</b><span>The full Kickstand deliverable — 15 pages.</span><span class="sz">PDF · 4.5 MB</span></a>
<a href="../animation/Adom-atom-final.mp4" target="_blank"><b>Animated logo (MP4) ↗</b><span>Full lockup, web-ready H.264.</span><span class="sz">MP4 · 4.7 MB</span></a>
<a href="../animation/Adom-atom-loop-mark.mp4" target="_blank"><b>Animated mark — loop ↗</b><span>Logomark only, seamless loop.</span><span class="sz">MP4 · 6.2 MB</span></a>
<a href="../animation/adom-mnemonic-4sec.wav" target="_blank"><b>Sonic mnemonic (WAV) ↗</b><span>Kickstand final mix, 4 sec.</span><span class="sz">WAV · 1.1 MB</span></a>
<a href="../assets/adom-white.svg" target="_blank"><b>Logo SVGs ↗</b><span>White / black / teal / icon — vector.</span><span class="sz">SVG · vector</span></a>
<a href="../assets/favicon-color.svg" target="_blank"><b>Favicon ↗</b><span>Teal rounded-square app icon.</span><span class="sz">SVG · vector</span></a>
</div>
<p class="lede" style="margin-top:18px;font-size:14px">ProRes editing masters (transparent <span class="mono">.mov</span>, 47 MB + 60 MB) exceed the wiki's 10 MB file limit — they live in <span class="mono">gallia/brand/logos/Animated Logo/</span> and can be attached as release downloads on request.</p>
</section>
<footer>
<svg class="wm" viewBox="0 0 1072.9 236"><use href="#adomPath"/></svg>
<div class="come">Come create with us.</div>
<small>Adom Brand Identity · sourced from the Kickstand brand guidelines + the gallia <span class="mono">brand</span> skill · adom.inc</small>
</footer>
</body>
</html>