---
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 |