brand

@@ -1,426 +1,17 @@ ----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.+name: brand-john+description: John Lauer's personal brand guide (colors, type, mark) for pages under john/. Tools such as Hero Studio read brand.json from here. --- -# Adom Brand Identity+# John Lauer brand guide -Source: `/home/adom/project/user-content/Adom-Brand-Guidelines.pdf` (creative studio deliverable)+Used for heroes and pages in the `john/` namespace. Adom's own brand stays on `adom/` pages. -## 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.--## 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 cross-vendor logos on a comparison page (Mouser blue,-> DigiKey red, JLCPCB green, etc.). 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)->-> ```bash-> # (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`](../adom-app-header/SKILL.md).** 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:--```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;-}-```text--### 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--```css-: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--```css-/* 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.--## Never fabricate the Adom logo--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.--## Never name competitors on public surfaces--On landing pages, marketing copy, public wiki pages, and any team-channel post visible to non-employees, do NOT name competitor PCB-fab services or EDA tools by name. No JLCPCB, no EasyEDA, no Shenzhen, no generic "China-based fab." Lead with the absolute Adom values instead: $2 board, 4-hour turn, Mouser drone delivery, Fort Worth facility.--## Marketing tone: pros + makers, leaning pro--Adom marketing copy targets enterprise engineers AND hobbyist makers, but the tone leans professional. Prefer "laptop / desk / anywhere" over "couch / garage / weekend." The maker audience is real but the brand voice is competent-engineer, not hobbyist.+| Token | Value |+|---|---|+| Primary | `#0e7c86` |+| Accent | `#4fc3cc` |+| Background | `#0f1719` |+| Display face | Bricolage Grotesque 700 |+| Body face | Figtree 500 |+| Mark | `assets/jl-mark.svg` |