skill

Adom UI Branding

Unreviewed

by Kyle Bergstedt

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

Overview Files Versions Dependencies Discussions Activity
skill / brand
!

Not installable via adompkg

This skill has no published release. adompkg install kyle/brand will not work until a maintainer publishes a tarball with install.sh and uninstall.sh.

See the publishing docs for the package.json schema and tarball layout required to ship this skill.

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)

Logo

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.

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.

Gallia Theme Tokens (code-level implementation)

The design system lives in /home/adom/gallia/viewer/gallia-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 (print / marketing)

Use Font Weight
Headlines Familjen Grotesk Bold
Body text Satoshi Medium

Digital / Code Fonts (Gallia Viewer, widgets)

Use Stack
UI text Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Monospace / code 'SF Mono', 'Cascadia Code', Consolas, monospace

Design Principles for Gallia 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

Transitions

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

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