---
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`.)
> ⚠ **Google Slides:** Satoshi is **not** a Slides font — if you set body text to Satoshi it silently falls back to **Times New Roman**. In Slides, use **Familjen Grotesk** for body too (or install Satoshi). Never ship the TNR fallback.


## 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 (two accepted variants)
Brand gradient, logo centered large (~45% width). Two house styles:
- **Variant A (tagline):** **dark-navy** wordmark; the brand tagline **"The bridge from bits to atoms"** in navy bold directly under it; a small white descriptor (e.g. "AI Electronics Cloud Lab") under that.
- **Variant B (clean):** **white** wordmark; one white Satoshi subtitle line; "Come create with us." in purple-light at the bottom.

Tagline of record: **"The bridge from bits to atoms."**

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

### 8. Closing (two accepted variants)
- **Come create with us** — brand gradient, the line in white Familjen Grotesk, white wordmark + `adom.inc` below.
- **Thank you!** — solid Purple `#8C6BF7`, the **animated logomark GIF** centered, "Thank you!" in white below. The animation makes it the fun, memorable sign-off.

> A ready-to-use **PPTX template** with all of the above (both title + both closing variants) ships on the brand page: `deck/Adom-Deck-Template.pptx`.

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