# interior-marigold

> **Source:** https://mariakillam.com/
> **Captured:** 2026-07-28
> **Stack:** Showit (absolute-positioned section builder, `sie-` / `sib-` class families) on WordPress, with WooCommerce, LearnDash and FacetWP. Assets on `static.showit.co`.
> **Vertical:** interior design, colour education, personal-brand commerce
> **Picker tags:** `interior design education editorial`

## Extraction rule

Every pattern in `sections.html` is transcribed from a section that exists on the live source. All thirty-nine are flagged SIGNATURE and carry a source-URL comment. Built pages compose only from that catalog. Nothing here was invented.

Execution is ours, and on this source that distinction carries real weight. Showit is a positioned canvas: every element declares its own `left` / `top` / `width` / `height` for a desktop and a mobile breakpoint, and display leading resolves to values like `0.4`. None of that is transferable and none of it survived. What did survive, as decisions rather than as measurements:

1. The wave-flood button, transcribed rule for rule.
2. The alternating full-bleed band rhythm.
3. One-sided asymmetric radii on bands.
4. Script annotations beside headings.
5. Two-tone headlines pairing a condensed caps face with the editorial serif.
6. `mix-blend-mode: multiply` on paint-chip strips.

## Voice anchors (verbatim)

- "Create your Dream Home" / "by knowing when to decorate" / "and when to renovate"
- "Learn the Killam Colour System® and discover what your home actually needs before you spend another dollar"
- "Choose Your Colour PATH"
- "Your Shortcut to Seeing Undertones"
- "Real homes, Real results"
- "The most expensive design mistakes usually happen before the paint ever goes on the wall."
- "Everyone struggles with colour. It's true."
- "Stop Guessing. Start Comparing!"
- "Learning is always better together. Connect, share ideas and get feedback. We're all friends here."
- "So. . . Then Why Do Some Homes Look Amazing and Others. . . Not So Much?"
- "I decided I had to be creative or die so I quit my job to start my one day design business."

Script annotations, which are their own voice register: "start here", "hit play", "the colour wheel", "free download", "community", "popular posts", "the beginning", "know what i'm up to", "see me in action", "Hang out with me", "Get my help", "Learn from me", "I'm here for you", "what's included", "before you buy", "let's fix that!", "in the meantime:".

## Colour tokens

Ranked by declaration count **scoped to the source's own builder rules** (`.d` / `.m` selectors on `.sie-` and `.sib-` classes), with plugin and vendor stylesheets excluded from the count.

### Grounds

| Token | Hex | Declarations | Role |
|---|---|---|---|
| `--paper` | `#fdf9f5` | 1243 | cream, the dominant page ground |
| `--bg-pure` | `#ffffff` | 1028 | card ground |
| `--berry` | `#964953` | 318 | full-bleed band |
| `--lilac` | `#ebe5eb` | 290 | pale band |
| `--accent-light` | `#93a4c3` | 474 | periwinkle-light full-bleed band |
| `--accent` | `#4e68a3` | 299 | periwinkle deep band |
| `--bg-dark` | `#564943` | 100 | warm ink band and footer |
| `--band` | `#fbf7f4` | 74 | cream deep |
| `--blush` | `#e2c5d6` | 66 | soft band |
| `--mustard` | `#f8bc54` | 48 | accent band |

### Text

| Token | Hex | Declarations | Role |
|---|---|---|---|
| `--ink` | `#564943` | 9046 | body and display |
| `--accent` | `#4e68a3` | 7981 | the accent-word colour in headlines |
| `--text-on-dark` | `#fdf9f5` | 6820 | on coloured bands |
| `--blush` | `#e2c5d6` | 4210 | text on berry and periwinkle grounds |
| `--berry` | `#964953` | 301 | |
| `--terracotta` | `#e2835a` | 208 | |
| `--olive` | `#7c8f58` | 580 (decl) | minor accent |

The source carries two near-identical inks, `#564943` (9046) and `#574943` (2528). The kit ships the first as canonical and drops the second.

### The two-tone headline

The source's most quoted device sets condensed caps words inside a serif headline **and colours them periwinkle**: "Choose Your Colour **PATH**", "COLOUR **PRODUCTS**". A coloured accent word inside a heading is the house's number one AI tell and is forbidden, so the kit keeps the face change and the case change and drops the colour. The class is `.tone`. Two of the three axes survive and the device still reads.

The script annotations are a separate matter and **do** ship. They are the source's genuine page grammar, not a decorative kicker: lowercase, handwritten, rotated four degrees, no dash, no stripe, no mono, no uppercase. Approved for the documented carve-out on 2026-07-28. The class is `.mk-annot`, deliberately not named `eyebrow` or `kicker`.

## Fonts

| Role | Source face | Ships as | Why |
|---|---|---|---|
| Editorial display | Feature Display Medium (commercial, 1322 declarations) | **Fraunces** | Variable optical size, so display lines get the fine high-contrast cut and headings stay sturdy. Chosen over Bodoni Moda for warmth and over Playfair Display, which is the default-reflex choice and reads as generic. |
| Body and interface | Plus Jakarta Sans (14,315) | **Plus Jakarta Sans** | Already free. Exact. |
| Condensed caps device | Oswald (3099) | **Oswald** | Already free. Exact. |
| Script annotation | Mint Magnolia Regular and Slanted (1067) | **Caveat** | Casual monoline hand at a similar weight and slant. |
| Minor | Editors Note Display (23) | folded into Fraunces | Negligible use. |

**Metrics are ours.** The source's leading values are artifacts of a positioned canvas and are meaningless as typography: the hero headline declares `line-height: 0.4`. The kit sets display leading at 1.02 and body at 1.72, measured against Fraunces rather than carried over.

## Assets

| File | Role | Note |
|---|---|---|
| `interior-marigold-mark.svg` | primary mark | **Placeholder.** Construction is the source's: a circular monogram inside a hand-painted blob. Drawn as geometry only, so no company name ships inside the artwork. |
| `interior-marigold-mark-light.svg` | mark on dark grounds | as above |
| `interior-marigold-hero-owner.webp` | hero, owner forward | The source PNG has a white fade **painted into its pixels**, not an alpha channel, so it only sits correctly on a near-white ground. The kit re-authors the fade as a CSS mask so it works against whatever the section actually paints. |
| `interior-marigold-kitchen-white.webp` | project tile, category card | |
| `interior-marigold-kitchen-warm.webp` | project tile | |
| `interior-marigold-bath-primary.webp` | category card, landing hero | |
| `interior-marigold-bath-bw.webp` | video rail, gallery | |
| `interior-marigold-room-library.webp` | category card, featured post | |
| `interior-marigold-exterior-bungalow.webp` | project tile, gallery | |
| `interior-marigold-garden-studio.webp` | project tile, gallery | |
| `interior-marigold-interior-woodland.webp` | course card, solution band | |
| `interior-marigold-interior-condo.webp` | course card, video rail | |
| `interior-marigold-portrait-owner.webp` | author bio, course card | |
| `interior-marigold-swatch-pair.webp` | wheel explainer, category card | |

Not carried: the source's own wordmark, its press marks (HGTV, Washington Post, Apartment Therapy, House Beautiful), its paint-brand partner marks, its phone number and its street address. Press and partner marks render as labelled slots; contact details render as a `kit-note` slot.

## Pattern inventory

Thirty-nine patterns, all SIGNATURE, all cited. Catalog size floats with the site and was not padded to a target.

| # | Pattern | Source |
|---|---|---|
| 01 | topbar-announcement | / |
| 02 | nav-primary | / |
| 03 | hero-split | / |
| 04 | path-trio | / |
| 05 | wheel-explainer | / |
| 06 | category-grid | / |
| 07 | lead-magnet | / |
| 08 | numbered-steps | / |
| 09 | course-cards | / |
| 10 | project-grid | / |
| 11 | blog-grid | / |
| 12 | community-band | / |
| 13 | video-band | / |
| 14 | author-bio | /about-maria/ (present on 103 of 121 crawled pages) |
| 15 | site-footer | / |
| 16 | page-hero | /community/ |
| 17 | intro-lede | /colour-guides/ |
| 18 | benefit-list | /colour-guides/ |
| 19 | audience-split | /colour-guides/ |
| 20 | pain-point | /free-guides/ |
| 21 | revelation | /about-maria/ |
| 22 | timeline | /about-maria/ |
| 23 | elsewhere-links | /about-maria/ |
| 24 | pull-quote-break | /killam-colour-system-new/ |
| 25 | tab-explainer | /killam-colour-system-new/ |
| 26 | faq-accordion | /colour-guides/ (on 12 crawled templates) |
| 27 | review-trio | /community/ |
| 28 | price-card | /community/ |
| 29 | perks-grid | /community/ |
| 30 | stat-row | /speaking-and-media/ |
| 31 | press-logos | /speaking-and-media/ |
| 32 | topic-list | /speaking-and-media/ |
| 33 | project-details | /portfolio/marias-bungalow/ |
| 34 | colour-swatches | /portfolio/marias-bungalow/ |
| 35 | tiled-gallery | /portfolio/marias-bungalow/ |
| 36 | spec-list | /colour-boards/ |
| 37 | brand-choice | /colour-boards/ |
| 38 | cta-band | /colour-guides/ and /portfolio/marias-bungalow/ |
| 39 | inquiry-form | /contact-us/ |

### Remaining roots, resolved

The block census over the corpus yields 304 distinct `sie-` section names. Showit names each section after its content rather than its structure, so the census is a list of instances, not of patterns. Every root resolves to one of:

- **Cataloged** as one of the thirty-nine above.
- **Folded** into a named pattern because it is the same structure with different copy. `edesign-cta`, `work-with-maria-cta`, `final-cta`, `community-cta` and `kcs-cta` all fold into `cta-band`. `question-1` through `question-31` and their answers fold into `faq-accordion`. `timeline-1` through `timeline-4` fold into `timeline`. `audience-stats-1` through `-4` fold into `stat-row`. `press-features-row-1` through `-6` fold into `press-logos`. `tab1` through `tab5` and their `-open` twins fold into `tab-explainer`. Per-project roots (`marias-powder`, `kellys-yellow`, `woodland-park`, `cecil-ridge`, and roughly sixty siblings) fold into `tiled-gallery` and `project-grid`. Per-course roots (`business-of-colour`, `styling-school`, `exterior-colour-masterclass`, and six siblings) fold into `course-cards`.
- **Runtime or wrapper**: `search`, `mobile-menu`, `popup-quiz`, `waitlist-popup`, `filter-popup`, `account-menu`, `buffer`, `buffer-bottom`, `image-break` wrappers, `logo-white`, `logo-dark`, `404`, `test-page`, `dynamic-test`.
- **Not reachable from the crawl**: see the gaps table below.

**"Unreconciled: 0" is not a completeness claim here, and it is not made.** The census only sees roots on pages that were fetched, and 22 pages were not. See below.

## Crawl-scope log

Sitemap index: six sitemaps, **2,363 unique URLs** (2,103 blog posts, 136 pages, 82 categories, 42 products). Enumeration source was the sitemap index, reconciled against the header and footer link graph.

**Fetched clean: 121 of 143 attempted.**

`52-timeless-ideas about-maria affiliate-area affiliate bathroom-2 careers cart client-service-specialist colour-boards colour-diyer colour-drenching-checklist colour-guides colour-wheel-explainer colourwheel community contact-us contemporary-art-filled-interior courses-and-training courses designer disclosure diy-kitchen-template dream-home-club dream-home dynamic-test ebooks edesign-waitlist edesign email-marketing-manager empty-room equestrian-retreat expert-training exterior-colour-masterclass exterior-edesign-instructions faq free-guides freebie-lamps front-door-thank-you get-certified hire-maria holiday-styling home-checklist home how-to-choose-carpet how instagram intake-all-inclusive intake-complete-reno intake-get-me-started interior-edesign-instructions junior-colour-designer key killam-colour-academy killam-colour-starter-kits killam-colour-system-new marias-timeless-bathrooms marias-timeless-warm-neutral-kitchen marias-timeless-warm-wood-and-white-bathroom marias-timeless-warm-wood-white-bathroom marias-timeless-white-kitchen-2 marias-timeless-white-kitchen mood-boards more-timeless-bathrooms more-timeless-kitchens my-account-old my-account newsletter-confirmation old-pages-address-change old-pages-address-confirmed old-pages-blog-policies old-pages-colour-wheel-order-detail old-pages-confirm-address old-pages-consulting old-pages-expert-colour-design-training old-pages-testing-colour-recommendations old-pages-timeline old-pages-virtual-event-specify-colour-with-confidence-2 one-day-makeovers order-received portfolio-black-and-white-bathroom portfolio-cecil-ridge-estate portfolio-coopers-lookout portfolio-french-country-garden portfolio-haverman-estate portfolio-kids-bedroom-makeovers portfolio-maria-garden-design portfolio-maria-timeless-acres-farm portfolio-marias-bungalow portfolio-modern-bathroom portfolio-promontory-hill portfolio-summer-house portfolio-the-library-room portfolio-woodland-park portfolio-yaletown-condo portfolio privacy-policy products profile quick-start-guide refund-policy registration-success registration reno reset-password-success reset-password room-review sale-paused-form sale-paused samplize shop-best-sellers shop-colour-tools shop-courses-training shop-edesign-services shop-experience-level shop-online-with-colour-confidence shop-sales-bundles shop speaking-and-media style-a-bookshelf styling-school subscribe-2`

All 64 linked stylesheets were downloaded, plus `ld30/modern.min.css` fetched by hand after the crawler's 60-sheet cap dropped it.

### Not crawled

The site runs a BlogVault firewall. Concurrent fetching at six jobs tripped it partway through the run and it then returned 403 to this IP for every request, including the browser. These 22 URLs are **not fetched, template unknown**. No skip below is justified by inference, and none is claimed to be a duplicate of anything.

| URL | Reason |
|---|---|
| /category/about-me/ | firewall 403 |
| /category/accent-colour/ | firewall 403 |
| /category/advice-for-designers/ | firewall 403 |
| /product/50-neutrals-white/ | firewall 403 |
| /product/50-neutrals-colours-darks/ | firewall 403 |
| /product/bathroom-refresh/ | firewall 403 |
| /product/2-rooms-paint-colours-consultation/ | firewall 403 |
| /checkout/ | firewall 403 |
| /subscribe/ | firewall 403 |
| /support/ | firewall 403 |
| /terms-of-use/ | firewall 403 |
| /test-page/ | firewall 403 |
| /thank-you/ | firewall 403 |
| /the-business-of-colour/ | firewall 403 |
| /the-business-of-edesign/ | firewall 403 |
| /trend-proof/ | firewall 403 |
| /truecolourinsider/ | firewall 403 |
| /tuscan-kitchen-refresh/ | firewall 403 |
| /warmneutrals/ | firewall 403 |
| /wilmas-colour-rescue/ | firewall 403 |
| /window-colour-guide/ | firewall 403 |
| /workshop/ | firewall 403 |

**Known consequences.** The category archive and the WooCommerce product template are absent from the catalog. So is a single blog post: the blog was never in the fetch list, and the firewall closed before a representative could be pulled. The `post-content` shell that wraps WordPress body copy inside the Showit chrome **is** captured, on 37 crawled pages, so the article container is known even though a real post's internals are not.

### Live-DOM probe

**Not run.** `references/live-probe.js` needs the live site and the browser pane hit the same 403. Tokens above therefore come from declaration counts, scoped as tightly as the static corpus allows, rather than from a render census. This is the one gate this kit could not clear, and it is the gate that has historically caught declared-but-never-painted colours. The scoping to builder-only rules is a mitigation, not a substitute: it excludes the framework and plugin palettes that have caused past errors, and the resulting ranking agrees with an independent extraction of the same site made on 2026-07-03, but it has not been confirmed against what actually paints.

## Executed differently, on purpose

Five places where the kit departs from the source's own values. Each is an execution decision under transcribe-don't-clone, not a change to inventory, copy or grammar.

1. **The wave offset is proportional, not fixed.** The source parks the button's wave layer at `bottom: -6rem`, which clears a single-line pill and nothing else. As soon as a label wraps, the button grows, the 250 percent tall wave grows with it, and the crest sits inside the resting button. It is visible on any phone. The kit uses `bottom: -250%`, which resolves against the button's own height and clears the layer at every size.
2. **The flooded label uses the deep hue.** The source's hover lands its label on the wave fill at about 3.9:1. The deep variant of the same hue clears 5.55:1 on the same wave, so the state reads as theirs and stays legible.
3. **Text-bearing periwinkle bands paint `--accent`, not `--accent-light`.** Cream on `#93a4c3` measures 2.40:1 and ink on it measures 3.43:1. Neither passes for body copy. `--accent-light` is still in the token set for decorative fills and photo grounds.
4. **The hero fade is a CSS mask.** The source ships the fade painted into the photo's pixels, with no alpha channel, so the image only sits correctly on a near-white ground. The kit masks it instead, so it works against whatever the section paints.
5. **Long annotations sit flat.** The source rotates its script labels four degrees. That reads as a hand annotation on two or three words and as a mistake on a full sentence, so the longer ones carry `.mk-annot.flat`.

## Forbidden

- No coloured accent words inside headings. The source does this; the kit does not. Headlines are ink only.
- No eyebrow or kicker devices. No mono caps labels with accent dashes, no decorative stripes or bars. The script annotation is not one of these and is named `.mk-annot` to keep the distinction visible.
- No em dashes in drafted prose, including this file.
- No invented copy. Where the source has a label and nothing else, the kit ships a label and nothing else. Where it has nothing extractable, the kit ships a `kit-note` slot.
- No real phone number, street address, press mark or partner mark.
- No "not X, but Y" constructions, no triple-clever parallelism, no coloured "you", no clever "X, Yed" labels.

## Mood

editorial · warm · confident · tactile · unhurried

## Library position

The pool's first system for interior design and for personal-brand education businesses generally. It is the warm-editorial counterweight to the trade systems: where those are square, high-contrast and urgent, this is cream, rounded on one side, and paced by colour rather than by shouting. Reach for it when the client sells expertise rather than emergency response, when the owner is the brand, and when the work itself is visual enough that photography can carry a page. It suits designers, colour and styling consultants, studios, boutique architects, stagers, florists, and course or membership businesses built on a personal following.