skill

Adom Brand

Public Made by Adom

by adom

The Adom brand identity — logo, color, type, motion, sound, Kel, icons, and the design system every Adom product is built on.

brandidentitydesign-systemlogocolortypographyiconsanimation
Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity
brand / SKILL.md
Download

name: brand description: Adom brand identity guidelines — official colors, typography, logo usage, and design system tokens. Reference this when generating any visual output (viewers, schematics, HTML widgets, SVG, UI) to stay on-brand.

Adom Brand Identity

Source: /home/adom/project/user-content/Adom-Brand-Guidelines.pdf (creative studio deliverable)

The Adom logo is a 2D rendering of the Schrödinger wave function for the hydrogen atom. The custom-designed font echoes atomic precision in the bonds between letters.

Variants: Primary (full color), One Color, Grayscale, Black & White, Favicon.

Clear space: Minimum margin = one electron cloud width around the logo.

Logo assets: Available in PNG, SVG, and PDF in the Logo Lockups folder.

Product & app naming

Product names are short and consistent — the name only, never a tagline.

  • ✅ Adom Screensaver, Hydrogen Desktop, Adom Desktop, Adom-VM, DS2SF
  • ❌ Adom Screensaver — the vibe-coding screensaver, Hydrogen Desktop: your AI workspace

The pitch/tagline lives in the subtitle, the wiki brief, or the README H1 — never in the product name itself (the app-header name, the wiki page title, the window title, the menu label). When publishing to the wiki, the page title field gets the bare product name; put the descriptive line in brief. See app-publish-dev-release and adom-app-header.

Colors

Primary Palette

Name Hex RGB Role
Blue Light #64ABFF 100, 171, 255 Accents, links, illustrations
Teal Light #8FD3D4 143, 211, 212 Secondary highlights, backgrounds
Purple Light #C5B3FF 197, 179, 255 Hover states, secondary accent
Blue Dark #0061EF 0, 97, 239 CTAs, strong accents
Teal #00B8B1 0, 184, 177 Primary accent (brand teal)
Purple #8C6BF7 140, 107, 247 Group labels, secondary accent
Black #191919 25, 25, 25 Text on light backgrounds
Navy #00204F 0, 32, 79 Deep dark backgrounds
Teal Dark #003C3F 0, 60, 63 Dark teal panels
Purple Dark #4323AD 75, 35, 173 Deep purple accents

Gradient: The brand uses gradients across the blue → teal → purple spectrum.

Adom Theme Tokens (code-level implementation)

The design system lives in /home/adom/gallia/viewer/adom-theme.js. Import THEME for constants or themeStyleTag() for a drop-in CSS <style> block.

Token Value Use
bg #0d1117 Page / deepest background
bgSurface #161b22 Panels, toolbars, cards
bgElevated #1c2128 Elevated cards, hover states
bgOverlay #21262d Tooltips, dropdowns, modals
border #30363d Standard border
borderMuted #21262d Subtle / inner borders
text #e6edf3 Primary text
textSecondary #8b949e Secondary / labels
textMuted #484f58 Disabled, placeholders
accent #00b8b0 Primary accent (Adom teal)
accentBright #00e6dc Hover / focus highlights

Pin type colors (for schematic viewers):

Type Color Hex
Power Red #ef5350
Input Green #66bb6a
Output Blue #42a5f5
Bidirectional Purple #ab47bc
Passive Gray #78909c

Typography

Brand Fonts (used on adom.inc and all Adom products)

Use Font Weight Fallback
Headlines, titles, section headers Familjen Grotesk Bold (700) or Medium (500) 'Familjen Grotesk', sans-serif
Body text, descriptions, UI labels Satoshi Medium (500) or Regular (400) 'Satoshi', sans-serif
Code, terminal, monospace JetBrains Mono Regular (400) or Medium (500) 'JetBrains Mono', monospace

Font files are in gallia/brand/fonts/ as WOFF2. Full brand guidelines: gallia/brand/BRAND-GUIDELINES.md.

Do NOT use Inter, Arial, Helvetica, or system fonts as the primary font. Always use Familjen Grotesk for headlines and Satoshi for body text. The system font stack is only for fallback if the brand fonts haven't loaded yet.

Design Principles for Adom Viewers

When generating interactive HTML viewers (symbol viewers, schematic viewers, 3D viewers, etc.), follow these principles:

Dark theme always

  • Background: #0d1117 (page) / #161b22 (panels)
  • Never use light/white backgrounds for primary viewer content

Teal is the primary accent

  • Interactive highlights: #00b8b1 → #00e6dc on hover
  • Accent borders: rgba(0, 184, 176, 0.25)
  • Accent tints: rgba(0, 184, 176, 0.12) for backgrounds

Purple for grouping and categorization

  • Group labels: #8C6BF7 (resting) → #C5B3FF (hover)
  • NOT the old KiCad dark red — use Adom purple for modern feel

Frosted glass tooltips

  • Background: rgba(22,27,34,0.92) with backdrop-filter: blur(16px)
  • Border: 1px solid rgba(0,184,177,0.2)
  • Border radius: 10px
  • Shadow: 0 12px 40px rgba(0,0,0,.55)

Subtle gradients and glows

  • Body fills: dark gradients (#1a2332 → #141c27) instead of flat fills
  • Inner glow borders: rgba(0,184,177,0.06) for depth
  • SVG glow filter on hover for wire highlights

Pin wire style (symbol viewers)

  • Resting: #30363d stroke (subtle, matches border)
  • Hover: #00b8b1 stroke with 2.5px width + glow filter
  • Pin dots: #30363d → #00b8b1 on hover, radius 3 → 4

Info bar (bottom)

  • Background: #161b22
  • Border-top: 1px solid #21262d
  • Labels: #484f58 uppercase 9px
  • Values: #8b949e monospace 11px
  • Links: #00b8b1

Icons

🛑 EVERY ICON IS MONOCHROME WHITE. NO EXCEPTIONS.

This applies to:

  1. In-app icons — header logo, button glyphs, tooltip icons, sidebar icons, empty-state art.
  2. The tab-strip icon (docs/icon.svg, served as the HTML favicon AND passed to adom-cli hydrogen workspace add-tab --display-icon as a data URL). Hydrogen shows this next to the tab name — it is part of the UI chrome, not a marketing asset.
  3. The app icon as it appears anywhere inside the Adom UI (start menu, panel catalog, discovery list, etc).

The only place brand color is allowed is wiki marketing art — hero image and thumbnail on the app's wiki page, and any third-party vendor logos on a comparison page (each shown in its own brand color). Those are screenshots-of-branded-products, not Adom UI elements.

Rationale: colored icons compete with content for attention, look out-of-place against Adom's dark-theme chrome, and turn the tab strip into a clown-car of mismatched brand palettes as apps proliferate. Monochrome icons let the product branding come through in text, not in UI glyphs.

Why past Claudes have missed this rule

An earlier version of this skill had a "favicon CAN be teal" carve-out. That carve-out is gone. If you're auditing an app and think "my teal favicon is fine because the skill says favicons are exempt" — you're reading a stale cache. Re-read this section. There is no exemption for favicons, tab icons, or docs/icon.svg. Every pixel of color in an icon is a bug to fix before publish.

Pre-publish audit (run this every release, gate on it)

# (1) No teal/accent fills or strokes in any SVG — the #1 offender.
#     `color: var(--accent)` on TEXT (prices, links, focus rings)
#     is FINE — that rule applies only to icon / .logo containers,
#     which are harder to grep for, so we enforce at the SVG level.
grep -nE 'fill="(#00b8b0|#00d4cb)"|stroke="(#00b8b0|#00d4cb)"' \
  docs/icon.svg src/**/*.html src/**/*.svg 2>/dev/null
# Expected: ZERO hits.

# (2) The icon file must use only #e6edf3 (or currentColor / none /
#     transparent / the app's dark bg where shapes intentionally cut
#     out, e.g. magnifier lens fill).
grep -oE 'fill="#[0-9a-fA-F]{3,8}"|stroke="#[0-9a-fA-F]{3,8}"' docs/icon.svg | \
  grep -v -E '"#e6edf3"|"#ffffff"|"#fff"|"#0d1117"|"none"|"transparent"|"currentColor"' \
  || echo "docs/icon.svg is clean"

# (3) Icon-container CSS rules that inherit the accent via currentColor
#     (the sneaky bug — a white-fill-via-currentColor SVG inside a
#     `.logo { color: var(--accent) }` turns teal at paint time).
grep -nE '\.logo[^{]*{[^}]*color:\s*var\(--accent\)|\.icon[^{]*{[^}]*color:\s*var\(--accent\)' \
  src/**/*.html src/**/*.css 2>/dev/null
# Expected: ZERO hits.

If any of the three reports a hit, STOP. Rewrite the SVG or CSS, regenerate the wiki hero/thumbnail PNGs, re-upload, AND re-bump the version so the tab-strip + wiki-discover caches invalidate.

Monochrome, always. Every icon — in-app, tab-strip, HTML favicon, and the data URL passed to adom-cli hydrogen workspace add-tab --display-icon — must be a single color: #e6edf3 on dark backgrounds, or currentColor so it inherits the parent's text color. No multi-color icons, no brand-palette accents on icons, no gradients, no drop shadows.

NO emoji. Do not use Unicode emoji (📏 🔍 🎬 ⎚ 🔧 …) as UI icons anywhere. They are inherently multi-color, vary across OS/font stacks (Twemoji vs Apple Color vs Noto), and look wildly inconsistent next to hand-drawn SVG. This rule applies even for "quick prototypes" — emoji tend to stick.

Icons must be custom-drawn to represent the specific concept. The default is generate a custom SVG, not pick an MDI icon. A hand-drawn glyph that depicts what the button actually does (e.g. a tiny calipers for "Measure", a magnifier with a data dot for "Inspect", a clapperboard with a play arrow for "Walkthrough Demo") beats a generic MDI icon that only tangentially matches. Generic icons teach users nothing about what the button will do and make the interface look like undecorated scaffolding.

Use MDI only as a fallback when the concept is fully generic (mdi:chip, mdi:eye, mdi:cog) and no drawing you'd produce is more specific. When using MDI, still apply the monochrome rule (inherit color) and pick the variant that matches the stroke weight of surrounding custom icons.

Custom SVG requirements:

  • Single fill color: #e6edf3 (or currentColor).
  • viewBox="0 0 24 24" to match MDI sizing when they're side-by-side.
  • Stroke or filled — pick one style per surface and stick with it. Stroke width 1.5–2 px is typical. Be consistent across a toolbar.
  • Simple, clean paths. Think "at 16px on a retina screen, does this still read?" If the icon has detail below ~2 px stroke-equivalent, simplify.
  • No gradients. No shadows. No filters. No <foreignObject>.
  • Inline in the HTML (<button><svg …>…</svg></button>) for small toolbars; save as a standalone .svg file for reusable assets.

Applies everywhere: toolbar buttons, workspace tabs, nav bars, landing pages, cards, tooltips, panel headers, ViewCube corners. Any place a pictogram identifies an action or a thing.

Color icons only if the user explicitly insists. Even then push back — colored icons compete with content for attention, confuse visual hierarchy, and make the page feel noisy. The icon should guide the eye, not grab it.

Transitions

  • All hover effects: 0.15s ease
  • Smooth, not snappy

Building Web UI (widgets, webviews, mini web servers)

When creating any HTML content that shows in Hydrogen panels, webviews, or standalone web servers, follow this checklist:

🛑 Before you write a <header> tag, read adom-app-header. That skill defines the canonical single-row Adom app header (icon + name + subtitle | subject-name + state-pill + meta) plus the hover-popover for version / wiki link. Two Adom apps side-by-side should feel like sibling tools — drift here is the most-cited UX complaint across the catalog. Don't reinvent it; copy the reference HTML/CSS/JS verbatim and only swap in the icon + app-name + subtitle.

1. Load the brand fonts

Pull directly from adom.inc (already hosted, optimized WOFF2). Copy-paste this CSS:

@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; } @font-face { font-family: 'JetBrains Mono'; src: url('https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2') format('woff2'); font-weight: 500; font-display: swap; }


### Font sources summary

| Font | Source | URL prefix |
|------|--------|------------|
| Familjen Grotesk | adom.inc | `https://adom.inc/fonts/familjen-grotesk/` |
| Satoshi | adom.inc | `https://adom.inc/fonts/satoshi/` |
| JetBrains Mono | Google Fonts | `https://fonts.gstatic.com/s/jetbrainsmono/v24/` |

Local copies of Familjen Grotesk and Satoshi in `gallia/brand/fonts/` for offline use.

### 2. Use the correct font for each context

```css
/* Headlines, titles, section headers */
h1, h2, h3, .title { font-family: 'Familjen Grotesk', sans-serif; font-weight: 700; }

/* Body text, descriptions, labels, buttons */
body, p, span, button, input { font-family: 'Satoshi', sans-serif; font-weight: 400; }

/* Code, terminal output, monospace (only when showing actual code) */
code, pre, .mono { font-family: 'JetBrains Mono', monospace; }

3. Use the dark theme tokens

:root {
  --bg: #0d1117;           /* page background */
  --surface: #161b22;      /* panels, cards, toolbars */
  --elevated: #1c2128;     /* elevated cards, hover states */
  --overlay: #21262d;      /* tooltips, dropdowns, modals */
  --border: #30363d;       /* standard border */
  --border-muted: #21262d; /* subtle borders */
  --text: #e6edf3;         /* primary text */
  --text2: #8b949e;        /* secondary text, labels */
  --text3: #484f58;        /* disabled, placeholders */
  --accent: #00b8b0;       /* primary accent (teal) */
  --accent-bright: #00e6dc;/* hover highlights */
  --purple: #8C6BF7;       /* group labels */
  --purple-light: #C5B3FF; /* hover on purple */
}
body { background: var(--bg); color: var(--text); }

4. Standard element styles

/* Cards / panels */
.card {
  background: rgba(22,27,34,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,184,177,0.2);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}

/* Buttons */
.btn {
  background: #00b8b0; color: #0d1117;
  border: none; border-radius: 6px;
  padding: 8px 16px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500; font-size: 13px;
  cursor: pointer;
}
.btn:hover { background: #00e6dc; }

/* Secondary button */
.btn-secondary {
  background: transparent; color: #00b8b0;
  border: 1px solid rgba(0,184,176,0.3);
}
.btn-secondary:hover { background: rgba(0,184,176,0.08); }

/* Links */
a { color: #00b8b0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* All hover transitions */
* { transition: background 0.15s, color 0.15s, border-color 0.15s; }

5. Never do these

  • Never use light/white backgrounds for primary content
  • Never use Inter, Arial, Helvetica as primary font (use Satoshi)
  • Never use random colors -- stick to the palette above
  • Never use sharp corners -- minimum border-radius: 6px for buttons, 10px for cards
  • Never use fast/snappy transitions -- always 0.15s ease

CMYK (for print)

Use RGB for digital. Use CMYK for print:

Color CMYK
Blue Light C54 M25 Y0 K0
Teal Light C33 M0 Y0 K17
Purple Light C23 M29 Y0 K0
Blue Dark C83 M64 Y0 K0
Teal C74 M1 Y37 K0
Purple C59 M63 Y0 K0
Black C73 M67 Y65 K79
Navy C100 M91 Y37 K40
Teal Dark C93 M57 Y60 K50
Purple Dark C84 M92 Y0 K0

Read brand BEFORE any visual work

For any mockup, landing page, viewer styling, hero generation, or marketing-adjacent surface: read this brand skill BEFORE writing styles. The canonical values:

  • Primary teal: #00B8B0
  • Typography: Familjen Grotesk (sans), Satoshi (variable / display)
  • Icons: monoline, never filled-circle
  • Dark background: #0d1117
  • Light background: pure white

Skipping the brand check produces off-brand visuals that the user has to ask for a re-do on.

Use gallia/brand/logos/adom-white.svg or the appropriate variant (icon, teal, black). Never invent a stand-in logo, never put a single letter in a box, never AI-generate the wordmark. If the asset is missing for a target, ask before substituting — don't invent.