Brand guide

brand

Public Unreviewed

by John Lauer

The Adom brand identity — logo, color, type, motion, sound, Kel, icons, and the design system every Adom product is built on.

brandidentitydesign-systemlogotypographyslidesdecktiling
Overview Files Skills Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity
master
brand / skills / brand-deck / SKILL.md
History Download
John Lauer Publish 1.2.1 8a78511 4mo ago

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

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