The logo, the color, the type, the mascot, and the design system every Adom product is built on. One source of truth.
Come create with us.
Meet the logo
A hydrogen atom, drawn right.
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 Schrödinger wave function for the hydrogen atom. That atomic precision is echoed in the bonds between the letters of the custom-drawn wordmark.
Updating old models is kind of our thing.
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.
Motion & sound
The atom in motion.
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.
Sonic mnemonic
Adom, in 4 seconds.
The official sound that plays under the animation. Final mix, June 2024.
Full lockup — transparent GIF (1080p)Logomark only — transparent GIF (1080p)
Logo
Five variants, one identity.
Use the Primary logo whenever you can. Reach for a variant only when the space or the medium calls for it.
PrimaryDefault — full gradient wordmark
One ColorTeal #00B8B1 — busy backgrounds
WhiteReversed — dark backgrounds
Black & WhiteNon-color printing
GrayscaleNon-color printing, alt
FaviconWhen space is too small
Clear space
Give it one electron cloud.
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.
Color
Blue → teal → purple.
Teal #00B8B1 is the primary accent. The signature brand gradient sweeps across the full blue–teal–purple spectrum. Use RGB on screen, CMYK in print.
Brand Gradient — blue · teal · purple
Blue Light#64ABFF100 171 255
Teal Light#8FD3D4143 211 212
Purple Light#C5B3FF197 179 255
Blue Dark#0061EF0 97 239
Teal ★#00B8B10 184 177
Purple#8C6BF7140 107 247
Black#19191925 25 25
Navy#00204F0 32 79
Teal Dark#003C3F0 60 63
Purple Dark#4323AD75 35 173
Design-system tokens (dark UI)
The code-level palette every Adom viewer, webview and app implements. Dark theme, always.
Token
Value
Use
bg
#0d1117
Page / deepest background
surface
#161b22
Panels, toolbars, cards
elevated
#1c2128
Elevated cards, hover
border
#30363d
Standard border
text
#e6edf3
Primary text
text2
#8b949e
Secondary / labels
accent
#00b8b0
Primary accent (teal)
accent-bright
#00e6dc
Hover / focus highlights
purple
#8C6BF7
Group labels, categories
Typography
Familjen Grotesk & Satoshi.
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.
FAMILJEN GROTESK · BOLD 700 · Headlines
AaBbCc 123
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
SATOSHI · MEDIUM 500 · Body & UI
AaBbCc 123
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
JETBRAINS MONO · REGULAR 400 · Code & terminal
AaBbCc 123
const accent = "#00b8b0"; // adom teal
Icon system
One family, monochrome white.
Every Adom tool ships a custom, hand-drawn icon — single color (#e6edf3 / currentColor), 24×24 grid, no gradients, no emoji. Shown here rendered uniformly white to prove the rule. Hover to see them in accent.
Mascot
Meet Kel.
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.
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 gallia/brand/logos/kel-*.
Swag & applications
The brand in the wild.
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.
▦
Business cards
White face + teal icon; dark teal / patterned reverse.
⬡
Apparel
White & black tees and hoodies, gradient or mono wordmark.
⌬
Bottles
Vertical gradient lockup on white; favicon on app screens.
◷
Patterns
Concentric arcs, dot grids & pill fields for backgrounds.
Design system & skills
How we build on-brand.
Every Adom viewer, webview and app follows the same playbook. This is the part the brand skill enforces.
#e6edf3 or currentColor. No colored icons, no gradients, no drop shadows — and never emoji as UI glyphs.
Never fabricate the logo
Use the real SVGs from gallia/brand/logos/. Never invent a stand-in, never a letter-in-a-box, never AI-generate the wordmark.
Don't name competitors publicly
Lead with absolute Adom values — $2 board, 4-hour turn, Mouser drone delivery, Fort Worth — not rival fabs or EDA tools.
Tone: pros + makers, leaning pro
Voice is competent-engineer. Prefer "laptop / desk / anywhere" over "couch / garage / weekend."
Presentation system
On-brand decks.
Slide backgrounds are chosen by role — gradient = wow, solids = substance, white = proof. Titles are Familjen Grotesk with one phrase accented in teal or purple; body is Satoshi with dash bullets.
Gradient
title · market · momentum
Purple Dark
quotes · statements
Navy
dense content
Teal Dark
solutions
White
proof · imagery
Problem: Hardware dev is painfully slow
Iteration
– 2-week part lead times – 3-week board spins – manual, error-prone testing
Collaboration
– ship hardware via FedEx – can't reproduce setups – no component community
A two-column content slide: accent phrase in the title, purple subheads, dash bullets, onion-arc motif bottom-right. Full system in the brand-deck skill.
Tiling & texture
Repeatable, ethereal, PCB-inspired.
Kickstand's pattern motifs, rebuilt as currentColor SVG tiles — they tint to any surface. Place at low opacity behind content.
Concentric arcscorner motif (teal→purple)
Square gridfine outlined-square field
Pill fieldscattered capsule outlines
Lifted from the brand-guidelines business-card backs (PDF p13). Place at low opacity behind content on dark teal/navy.
Assets & downloads
Everything, in one place.
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.
ProRes editing masters (transparent .mov, 47 MB + 60 MB) exceed the wiki's 10 MB file limit — they live in gallia/brand/logos/Animated Logo/ and can be attached as release downloads on request.
