Diaspora Co. — Colorful Spice Storefront

---
version: alpha
name: Diaspora Co. — Colorful Spice Storefront
description: A vibrant spice storefront pairs warm kitchen photography and bold editorial
  serif headings with magenta shopping controls, creamy product rails and sunny yellow
  illustrated value bands. Recipe cards, a green farm-story section, a comparison
  table and a bright FAQ turn the long commerce landing page into a lively food-and-origin
  narrative.
colors:
  primary: '#D5137B'
  surface: '#FFFDF0'
  on-surface: '#080A5C'
  secondary: '#FFD000'
  forest: '#326539'
  sage: '#E4E9CD'
  body: '#222222'
  on-primary: '#FFFFFF'
typography:
  headline:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 56px
    fontWeight: '700'
    lineHeight: 60.48px
    letterSpacing: -1.12px
  section:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 56px
  body:
    fontFamily: Fustat, Figtree, sans-serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 26.1px
  button:
    fontFamily: Fustat, Figtree, sans-serif
    fontSize: 16px
    fontWeight: '800'
    lineHeight: 22.72px
    letterSpacing: 2.56px
  mobile-headline:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 34px
    fontWeight: '700'
    lineHeight: 36.72px
    letterSpacing: -0.68px
---

# Diaspora Co. — Colorful Spice Storefront

## Overview

Observed 2026-09-21T06:05:30.310018+00:00 at desktop 1440 × 1000 CSS pixels and device scale factor 1; mobile reviewed at 390 × 844. This is an independent visual reference based on measured CSS and inspected captures.

An exuberant spice storefront links commerce with cooking and origin stories. The observed opening promotes a bronze mortar and pestle in use, rather than an isolated package on a plain background. Hands, a checked apron and reflective metal make the product tactile. Warm serif headings, vivid magenta actions and small illustrated ingredients sustain a friendly editorial tone across a dense, multi-section shopping page.

## Colors

Measured #D5137B magenta is the primary action color and a major full-width surface in the press quote strip and footer. Use #FFFFFF for the hero overlay and reversed button text. Cream #FFFDF0 is one sampled page surface; near-cream #FFFCEB and #FFFDF3 also occur in the catalogue areas. These are close observed surface variants, not a recommendation for three competing background themes. Deep navy #080A5C anchors section headings, while body/price text includes #222222.

The illustrated values band and FAQ chapter use a saturated yellow family: #FFD000 is sampled in major yellow surfaces and #FFDE17 in supporting rows. The farm-story chapter combines measured forest #326539 with sage #E4E9CD. Green product badges and orange rating stars are secondary accents. Keep each saturated color tied to a content role; the page works because cream shopping sections separate the bright bands.

## Typography

Use the declared p22-mackinac-pro serif for the large promotional headline and editorial section titles. The desktop hero is 56px/60.48px, weight 700, with -1.12px tracking in a 720px box. Most Popular, What Sets Us Apart and FAQ headings measure 40px/56px. The recipes heading is a tighter 40px/40px sample; avoid forcing one line height onto every title.

The body uses Fustat with Figtree and sans-serif fallbacks. Hero support text measures 18px/26.1px. Product descriptions are notably smaller at 14px/17px, with prices 16px/22px and weight 600. Desktop action text is uppercase 16px/22.72px, weight 800, with 2.56px tracking. Use this wide tracking for concise actions, not paragraphs.

At 390px the hero becomes 34px/36.72px with -0.68px tracking; body support becomes 15px/21.75px. General section headings reduce to 24px/33.6px, while the recipes title measures 22px/22px. The opening quote is 21px/29.4px. Mobile product descriptions sample as small as 10px/12px: this is observed density, not a general accessibility recommendation. The YAML condenses duplicate fallback names in the measured body font stack. Font declarations do not establish usage rights.

## Layout

At 1440px, a thin announcement row and transparent white masthead sit over an approximately 800px-tall, full-bleed kitchen hero. Place the wordmark left, category links centrally and search/account/cart controls right. The promotional text begins near x=38.4px, occupying the left half while the bowl dominates the middle-right. Position the magenta action directly below the short description.

A yellow four-value strip immediately closes the hero. The cream chapter below combines a large quote column on the left with a horizontally clipped product rail on the right. Subsequent Most Popular and recipe rails use several visible cards plus a partial next card and circular arrow controls. General desktop side margins are about 40px. Product cards align their bottom magenta purchase bars despite differing copy lengths. Recipe cards instead leave captions on the cream canvas and end with paired filled/outlined actions.

Continue with a magenta press-quote band, centered recipe introduction, green/sage farm story, cream comparison table, yellow FAQ and magenta footer. The farm chapter contrasts a dark illustrated introductory panel with photographs and copy on pale sage. The comparison table uses four columns including row labels, with a subtly tinted brand column. The FAQ puts a title and bee illustration left, and a wider stack of question rows right. Footer signup sits above brand context and four link groups, with botanical illustrations floating around the composition.

At 390px, the hero uses a tight vertical photo crop, icon-based navigation and centered copy below the bowl. Its headline box is about 311.6px wide at x=39.2px. The 250px-wide action is centered at x=70px. The value band still fits four compact items. Quotes move above shopping rails, and product rails retain roughly two cards in view rather than becoming a single giant card. Recipe actions stack; the farm-story introduction moves above its photo rail; the FAQ becomes one column; footer content stacks with small link groups. Typical lower-page insets are about 20px. Both measured document widths equal the viewport. Both full-page desktop and mobile captures were visually checked; carousel movement and intermediate breakpoints were not tested.

## Elevation & Depth

Photography supplies the strongest dimensionality through food textures, reflected metal and shadows in the source images. Most interface surfaces remain flat, with fine pale borders around cards and the comparison grid. The original promotional overlays were dismissed using their actual close controls before capture. Do not reproduce those interruptions as part of the page composition or add floating shadow cards to every rail.

## Shapes

Use softly rounded image cards, green corner badges and continuous magenta bottom action bars. The desktop Shop Now control has a measured 10px radius, 250px width and 13px 21px padding. On mobile it retains its width and radius with 11.375px 18.375px padding. Circular outline arrow buttons contrast with rectangular merchandise cards. Small botanical illustrations and the bee provide organic shapes; they are not interchangeable abstract blobs. Card/table corner radii beyond the main action were visually observed, not numerically measured.

## Components

Key patterns are the photograph-overlay hero, illustrated value strip, quote-plus-product rail, review/price/product card, press quote band, recipe tile, farm narrative rail, comparison matrix, FAQ and email signup footer. The screenshot shows the first FAQ answer open and other rows collapsed; no interaction was exercised. Product options and review counts are reference content, not endorsements or claims to reuse. Reproduce the information hierarchy with appropriate evidence for a new brand. Cart, checkout, newsletter, search, hover and carousel transitions were not tested.

## Do's and Don'ts

- Do pair editorial serif headlines with compact, practical sans-serif shopping details.
- Do let cream sections separate magenta, yellow and green chapters.
- Do preserve the hands, material texture and food context in photography.
- Don't put every section on a saturated background.
- Don't copy sourcing claims, testimonials or review counts into another brand's page.
- Don't infer the behavior of the visible accordion or carousel from its static state.