/brand-setup

name: brand-setup
description: Use when a fresh AEM Edge Delivery Services boilerplate project should take on the brand basics of an existing website being migrated to EDS — colors, body and heading fonts, font sizes, header height, favicon and logo. Triggers include "set up the brand from <site>", "match the source site's look", "apply the client's fonts and colors", "use their favicon and logo". Not for projects whose styles were already customized, and not for full design-system extraction (spacing scales, components, motifs).
license: Apache-2.0
metadata:
  version: "0.1.0"

Brand setup from a source site

Fill the brand slots that the aem-boilerplate already defines with values measured on the source site, so every later migration step renders in the client's brand. The project you run in is the target; the source site URL comes from the user.

Measured, not guessed: every value you write comes from what a browser rendered on the source site. A slot you cannot source keeps its boilerplate value and is listed in the report.

1. Check the project is a fresh boilerplate

Stop, with one line saying why, unless all of these hold at the project root:

• Every slot in the two `:root` blocks of `styles/styles.css` still holds its boilerplate

value. Top block: colors `white`, `#f8f8f8`, `#505050`, `#131313`, `#3b63fb`, `#1d3ecf`; `roboto` body and `roboto-condensed` heading stacks; body sizes 22/19/17px; heading sizes 55/44/34/27/24/22px; `--nav-height: 64px`. Desktop block: body 18/16/14px; heading 45/36/28/22/20/18px.

• `styles/fonts.css` exists and declares only the `roboto` and `roboto-condensed` faces.

A project that fails this check was already styled; this skill only overwrites defaults.

2. Load the source site in a browser

Use a real browser that renders the page and runs its scripts. Reading HTML or CSS files over plain HTTP is not a substitute: it yields stylesheet source and variable fallbacks, not what the page shows, and bot-managed sites answer it with a block or maintenance page. If no browser is available, stop and say so. Start the browser from a directory outside the project.

• **Pages:** the URL given, plus up to two inner pages linked from the main navigation,

preferring content-heavy ones (an article or an about page, not an index or listing page). Home pages alone are skewed by heroes and promotional CTAs.

• **Widths:** read each page at about 1440 px wide (desktop values) and about 375 px wide

(mobile values). Reload after resizing.

• **Overlays:** look at the page first (screenshot or accessibility snapshot): consent managers

often render in a shadow root or iframe that a DOM text search misses. Accept or close banners and popups, then, on every page read, confirm `document.elementFromPoint` at the viewport centre isn't a fixed overlay. Report what you closed, or "no overlay".

• **Blocked:** if the page is a bot challenge, "access denied", maintenance or login page, or a

consent wall that can't be dismissed, retry with a headed browser if you can. If it stays blocked, stop and report it. Never take values from an interstitial page.

3. Read the values from the rendered page

Run JavaScript in the page and read browser data, not stylesheet text (stylesheet text is used only to locate font files, below):

• `getComputedStyle()` on `body`, paragraphs, inline links and `h1`–`h6` inside the main content

(`main`, else `[role=main]`, else `body` minus the page's header, nav and footer; say which), buttons, the header/nav bar, footer and section backgrounds. Skip elements that are hidden (`display: none`, zero size, clipped, `visibility: hidden`) — many sites ship hidden SEO headings.

• Real hover state: hover an inline content link and the primary button (often an `<a>`

styled as a button), confirm the hover applied (`:hover` matches the element), then read the computed colors again. A hover you couldn't perform is unmeasured, not "no change".

• `getComputedStyle(document.documentElement)` custom properties: if the site exposes tokens

like `--color-primary`, use their names as hints for which color plays which role.

• Loaded fonts: `document.fonts` entries with status `loaded`, and the font file URLs from the

performance resource entries (`.woff2`, `.woff`, `.ttf`, `.otf`) of the first page in a fresh browser session or after a cache-bypassing reload; later pages can be served from cache and not list them. For a loaded face still without a file, find its `@font-face` rule: in the page if the stylesheet allows it, else fetch that stylesheet's text (its URL is in the network list) and resolve `src` against the stylesheet URL. Use the rule only to locate files, never to choose fonts, weights or any other value.

• Header bar: the rendered height of the main navigation bar at both widths (at 375 px, the

bar that holds the logo and the menu button, even if the links are collapsed).

• Favicon and logo: follow [references/lookup-rules.md](references/lookup-rules.md).

Ignore fully transparent colors (`transparent`, alpha 0) — they mean "inherits the parent".

4. Map values to the boilerplate slots

Write values exactly as measured (convert `rgb()` to hex). Don't round, darken, derive or estimate: a value you did not measure keeps its boilerplate value and goes in the report.

| Slot | Source on the rendered page | | --- | --- | | `--background-color` | the innermost opaque background on `main` or its ancestors (a full-width wrapper can paint over `body`); `body`/`html` only if none is opaque. Bands inside `main` are for `--light-color` | | `--text-color` | most common color of paragraphs in the main content | | `--link-color` | color of inline links inside main-content paragraphs (not nav, footer, buttons) | | `--link-hover-color` | the same link's color while hovered; if a confirmed hover doesn't change the color, use `--link-color` and say so; if no hover could be performed, keep the boilerplate value