interior-marigold

A warm editorial system for interior design and personal-brand education businesses. Cream paper, a periwinkle accent, berry and lilac bands, an optical-size serif against a geometric sans, and a pill button that floods with a painted wave on hover.

Source
mariakillam.com
Type
Interior design, education
Primary
#4e68a3
Captured
2026-07-28

What makes it read as itself

The wave-flood button

A pill that hides its overflow while a painted wave waits below the frame. On hover the wave rises, the radius squares off, the label colour inverts and the arrow slides. It is the single most recognisable thing on the source site.

Script annotations

Lowercase handwritten labels sit beside headings rather than above them: "start here", "hit play", "free download", "the beginning". They carry hierarchy without a rule, a stripe or a mono caps label.

Band rhythm

Cream, periwinkle-light, berry, lilac-grey, back to cream. Section grounds do the pacing, so the page reads as chapters rather than as a scroll of cards.

One-sided radii

Bands round on a single edge, never evenly. A 45px sweep on the right, a 20px shelf on the top. It reads as paper laid on paper.

Optical-size serif

Fraunces steps its optical size with its point size, so display lines get the fine, high-contrast cut and body headings stay sturdy. It replaces a commercial face the source licenses.

Colour as the subject

The palette is not decoration here, it is the product. Swatch strips paint with multiply blending so overlapping chips behave like real paint chips on paper.

Files

  • _shared.css tokens and every component class
  • palettes.json canonical plus three luminance-matched variants
  • brand-spec.md extraction record and crawl-scope log
  • sections.html the catalog
  • homepage.html flagship demo
  • landing-1-edesign-consulting.html service page grammar
  • landing-2-dream-home-club.html membership page grammar
  • landing-3-colour-guides.html product page grammar