Ceremony Coffee Roasters

https://ceremonycoffee.com/ ↗

Full-bleed hero photography, a serif display face, and pastel product-card tints that never repeat the same hue.

THE SPEC READY TO PASTE INTO A PROMPT

i — Colour

#FCFBF9
surface

#000000
ink / nav & footer bands

#F6F2EA
warm section fill

#F5F8FA
product-card tint, blue

#E8E0EC
product-card tint, lavender

ii — Type

44 / 1.25 / -1.1px / 400 — hero & section headlines (Meta serif) 13 / 1.54 / normal / 400 — body copy & buttons (Avenir)

iii — Spacing

Full-bleed hero and product imagery, no boxed container. Generous vertical rhythm between sections (roughly 80–120px). No visible grid gutters between the three product cards — they sit flush edge to edge.

iv — Components

Buttons: square corners (0px radius), 1px outline, no fill, 13px caps-styled label. Product cards: solid pastel background block behind a cutout product photo, no border, no shadow — hierarchy comes from the tint change, not a stroke.

v — Do

Let full-bleed photography carry the emotional weight instead of illustration or icons.Keep buttons square-cornered and outlined, never filled, so they stay quiet against the imagery.Vary each product card's background tint so a repeated grid doesn't read as a template.

v — Don't

Don't round the corners on buttons or cards — it would soften the print-like, editorial feel.Don't introduce a second display typeface — let Avenir carry every functional label.Don't box the page into a fixed-width container — let the hero and imagery bleed to the edge.

Take the whole thing — ready to paste into a prompt.

# Ceremony Coffee Roasters
Source: https://ceremonycoffee.com/
Type: landing · Manner: editorial, minimal

## Colour
- #FCFBF9 surface
- #000000 ink / nav & footer bands
- #F6F2EA warm section fill
- #F5F8FA product-card tint, blue
- #E8E0EC product-card tint, lavender

## Type
- 44 / 1.25 / -1.1px / 400 — hero & section headlines (Meta serif)
- 13 / 1.54 / normal / 400 — body copy & buttons (Avenir)

## Spacing
Full-bleed hero and product imagery, no boxed container. Generous vertical rhythm between sections (roughly 80–120px). No visible grid gutters between the three product cards — they sit flush edge to edge.

## Components
Buttons: square corners (0px radius), 1px outline, no fill, 13px caps-styled label. Product cards: solid pastel background block behind a cutout product photo, no border, no shadow — hierarchy comes from the tint change, not a stroke.

## Do
- Let full-bleed photography carry the emotional weight instead of illustration or icons.
- Keep buttons square-cornered and outlined, never filled, so they stay quiet against the imagery.
- Vary each product card's background tint so a repeated grid doesn't read as a template.

## Don't
- Don't round the corners on buttons or cards — it would soften the print-like, editorial feel.
- Don't introduce a second display typeface — let Avenir carry every functional label.
- Don't box the page into a fixed-width container — let the hero and imagery bleed to the edge.

{
  "entry": 1,
  "name": "Ceremony Coffee Roasters",
  "source": "https://ceremonycoffee.com/",
  "page_type": "landing",
  "styles": [
    "editorial",
    "minimal"
  ],
  "colors": [
    {
      "hex": "#FCFBF9",
      "role": "surface"
    },
    {
      "hex": "#000000",
      "role": "ink / nav \u0026 footer bands"
    },
    {
      "hex": "#F6F2EA",
      "role": "warm section fill"
    },
    {
      "hex": "#F5F8FA",
      "role": "product-card tint, blue"
    },
    {
      "hex": "#E8E0EC",
      "role": "product-card tint, lavender"
    }
  ],
  "type_scale": [
    "44 / 1.25 / -1.1px / 400 — hero \u0026 section headlines (Meta serif)",
    "13 / 1.54 / normal / 400 — body copy \u0026 buttons (Avenir)"
  ],
  "spacing": "Full-bleed hero and product imagery, no boxed container. Generous vertical rhythm between sections (roughly 80–120px). No visible grid gutters between the three product cards — they sit flush edge to edge.",
  "components": "Buttons: square corners (0px radius), 1px outline, no fill, 13px caps-styled label. Product cards: solid pastel background block behind a cutout product photo, no border, no shadow — hierarchy comes from the tint change, not a stroke.",
  "dos": [
    "Let full-bleed photography carry the emotional weight instead of illustration or icons.",
    "Keep buttons square-cornered and outlined, never filled, so they stay quiet against the imagery.",
    "Vary each product card's background tint so a repeated grid doesn't read as a template."
  ],
  "donts": [
    "Don't round the corners on buttons or cards — it would soften the print-like, editorial feel.",
    "Don't introduce a second display typeface — let Avenir carry every functional label.",
    "Don't box the page into a fixed-width container — let the hero and imagery bleed to the edge."
  ]
}