Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity

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

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

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

Adom Brand