brand

@@ -0,0 +1,426 @@+---+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.++## 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.

@@ -0,0 +1,117 @@+---+name: brand-deck+description: Adom presentation / slide design system — how to build on-brand decks (Google Slides, PowerPoint, Keynote, or HTML). Backgrounds, gradients, title/subtitle/content layouts, 2- and 3-column patterns, image treatments, the concentric-arc "onion" texture, and the type system, reverse-engineered from the Kickstand-designed Adom decks. Use whenever generating, restyling, or reviewing an Adom slide deck or pitch.+---++Parent skill: **brand** (the full Adom brand identity — colors, type, logo, tokens).++# Adom Deck Design System++How Adom slides are designed. Extracted from the Kickstand-designed Adom decks (pitch / market / momentum slides) + the brand guidelines. Apply this to any deck: Google Slides, PowerPoint, Keynote, or an HTML/reveal deck.++Canvas: **16:9, 1000×563 pt** (or 1920×1080 px). Generous margins (~7% / ~64px). Never crowd the edges except the corner texture.++## The type system++| Role | Font | Weight | Notes |+|------|------|--------|-------|+| Slide title | **Familjen Grotesk** | Bold 700 | 32–40px. White on dark/gradient, Navy `#00204F` on white. |+| Subhead / column header | Familjen Grotesk | Bold 700 | Often **colored** (teal or purple), rest of line white/navy. |+| Body / bullets | **Satoshi** | Regular 400 / Medium 500 | 16–20px, generous leading (~1.4). |+| Caption / attribution / source | Satoshi | Italic | Small (11–13px), muted; links in teal. |++Never Inter/Arial/Helvetica. (See parent `brand` skill for `@font-face`.)++## The signature title move — accent one phrase++Titles are white (or navy on light) **with one key phrase recolored** in an accent — teal `#00B8B1` or purple `#8C6BF7` (sometimes a teal→green gradient on the phrase). One accent phrase per title, max.++- `Problem: Hardware development is **painfully slow**` (accent = teal)+- `Solution: …put their hardware in **the cloud**` (accent = purple)+- `A **revolution** is coming…` (accent = teal)++Titles sit **top-left** on content slides; **centered** only on the title slide.++## Slide backgrounds — pick by slide intent++Adom decks rotate through a small, deliberate set of backgrounds. The background signals the slide's *role*:++| Background | Hex / build | Use for |+|------------|-------------|---------|+| **Brand gradient** | radial glow over `linear-gradient(115deg,#8C6BF7,#0061EF,#00B8B1)` | Title, market size (TAM/SAM/SOM), revenue, momentum — the "impact / wow" slides. |+| **Purple Dark** (solid) | `#4323AD` | Quotes, single big statements, "why now" lists. |+| **Navy** (solid) | `#00204F` / `#0a1f3d` | Dense / problem / technical content, diagrams. |+| **Teal Dark** (solid) | `#003C3F` | Solution / "how it works" content. |+| **White** | `#ffffff` | Product proof, photos & 3D renders, customer slides (navy text). |++Rule of thumb: **gradient = emotional, solids = substance, white = proof.** Don't put more than ~2 gradient slides back-to-back.++## The concentric-arc "onion" texture (Adom's tiling motif)++The signature background texture is a set of **nested rounded arcs forming a half-dome** (an "onion" / topographic contour), echoing the rounded lobe of the Adom mark. It anchors the **bottom-right corner**, bleeding off the edge.++- 6–8 nested contours, even spacing.+- Stroke only (no fill), **1.5–2px**, color = a lighter tint of the slide background (e.g. `#8FD3D4` on navy/teal, `#C5B3FF` on purple), **opacity 0.12–0.22**.+- Sits *behind* content; never competes with text.+- Only on **dark / solid** slides (navy, teal, purple). Not on white or gradient slides.++Drop-in SVG (place bottom-right, ~40% slide width, bleeding off):++```html+<svg viewBox="0 0 400 400" style="position:absolute;right:-40px;bottom:-40px;width:38%">+  <g fill="none" stroke="#8FD3D4" stroke-width="2" opacity="0.18">+    <path d="M400 400 V210 a190 190 0 0 0-190-190 H? " /> <!-- or simple nested circles: -->+  </g>+  <g fill="none" stroke="#8FD3D4" stroke-width="2" opacity="0.18">+    <circle cx="400" cy="400" r="120"/><circle cx="400" cy="400" r="170"/>+    <circle cx="400" cy="400" r="220"/><circle cx="400" cy="400" r="270"/>+    <circle cx="400" cy="400" r="320"/><circle cx="400" cy="400" r="370"/>+  </g>+</svg>+```++(Full rounded-dome contour tiles + a PCB-trace variant ship in the brand page's `tiling/` folder.)++## Layout patterns++### 1. Title slide+Brand gradient. **Dark-navy logo** (`adom-black`/navy variant) centered, large (~45% width). One-line white subtitle in Satoshi below it, centered. Nothing else.++### 2. Statement / quote slide+Purple Dark solid. Small top-left title (with teal accent word). Large centered quote in Familjen Grotesk. Attribution below in **italic Satoshi**, muted.++### 3. Two-column content (the workhorse)+Navy or Teal Dark. Top-left title (one accent phrase). Two equal columns; each starts with a **colored bold subhead** (purple or teal) then a **dash-bullet list** (–, not •). Concentric-arc motif bottom-right. Sub-bullets indent under their parent.++### 4. Single-column list+Solid bg. Title top-left. One indented dash-bullet list, comfortable leading. Corner motif.++### 5. Image + text (proof slides)+**White** bg. Navy title (accent phrase). Image on one side, body text on the other (~45/55). **Images get an organic rounded-corner mask** — a super-ellipse / "squircle" where one or more corners are heavily rounded (not a plain rectangle, not a full circle). Italic source/caption with teal link under the text.++### 6. Diagram slides+Navy or gradient. Centered diagram built from brand colors:+- **Nested circles** (e.g. TAM/SAM/SOM): concentric filled circles Navy → Purple `#8C6BF7` → Purple-Light `#C5B3FF`, white labels.+- **Cycle**: ring of arrows in a teal→green gradient, labels around the ring.++### 7. Three-column+Same as two-column, three equal columns, each a colored subhead + short list or an icon + stat. Use for feature trios / pricing tiers.++## Colors (from parent `brand`)++Teal `#00B8B1` · Blue `#0061EF` · Purple `#8C6BF7` · Purple Dark `#4323AD` · Navy `#00204F` · Teal Dark `#003C3F` · Black `#191919` · text-on-dark white `#ffffff`. Gradient = blue→teal→purple.++## Image treatment++- Photos / 3D renders → **organic rounded-corner mask** (squircle, ~one corner at a large radius). Never hard rectangles for hero imagery.+- 3D factory/workcell renders are the house image style (neutral studio background).+- Keep imagery on **white** slides so it reads cleanly.++## Do / Don't++- ✅ One accent phrase per title. ✅ Dash bullets. ✅ Corner onion-motif on solid dark slides. ✅ Rotate backgrounds by slide role. ✅ Familjen Grotesk + Satoshi.+- ❌ No more than one accent color per title. ❌ No bullet dots (•) — use dashes. ❌ No motif on white/gradient slides. ❌ No stock-y rectangular photos. ❌ No system fonts. ❌ Don't put dense body text on a gradient slide (use a solid).++## Building an HTML deck++Use the parent `brand` skill's tokens + fonts. Each slide = a 16:9 `<section>`; set its background per the table above; title `<h2>` Familjen Grotesk with a `<span class="accent">` phrase; body in Satoshi; inject the corner-motif SVG on solid dark slides; squircle images with `border-radius` / SVG mask.