Demo site — fictional. Built as a sample of custom web design by Wendi Coffman-Porter. Back to Web Design · Pricing · Hire me · hi@wendicoffmanporter.com

Branding kit · demo

Sera Moss Books

Mark, lockup, favicon, palette, and type for this fictional client — each demo gets its own visual system.

Logos

Sera Moss Books logo mark
Mark

Botanical S monogram with moss leaves and a small book glyph.

Sera Moss Books logo lockup
Lockup

Letterpress desk plaque with the monogram beside SERA MOSS BOOKS.

Favicon

A favicon is the tiny icon in your browser tab — next to the page title, and often in bookmarks and phone home-screen shortcuts. Most people never say the word; they just recognize “your site” from that little mark.

It does not have to match the full logo mark pixel-for-pixel. Marks can be too detailed to read at 16×16. A good favicon keeps the intent of the brand (hall seal, shield, paw, frame, book) in a simple shape that still looks clear when it’s smaller than a fingernail.

How it shows up

Mock browser tab — the small icon is the favicon.

Sera Moss Books favicon
File

32×32 PNG — designed to stay readable at tab size (about 16×16).

Colors

Hex values from this demo’s palette — each role is intentional for the vertical.

  • Moss green#7d8f3fBook CTAs and status chips.
  • Forest deep#4a5520Secondary links.
  • Study dark#1a1216Quiet reading void.
  • Page cream panel#261c22Book cards on dark.
  • Ink brown#f6ece8Titles.
  • Leaf muted#b5b09aForm and status lines.

Type

Sera Moss Books

Display

Libre Baskerville — author display.

Novels · Readings · Notes. Fictional author site with stacked covers, books list, and reading calendar.

Body

Source Serif 4 — book blurbs that feel like pages.

Hero image

Book stack / desk still — titles as the product, soft natural light.