Four families, each with one job. Bely Display and Viktorie are paid, licensed fonts — self-hosted in /fonts, not loaded from a free CDN. DM Sans, DM Mono and Caveat are free, pulled from Google Fonts.
A library of 104 organic and geometric marks, one SVG per mark, in /assets/brand/shapes/blobs/. Primary marks are the approved set for prominent placements — the photo-outline treatment, hero moments. Secondary marks are for lighter decorative use only — dividers, small icons, backgrounds.
Primary
blob-046 — Hourglass
blob-029 — Hexagon
blob-001 — Arch
blob-044 — Mountain
blob-048 — Quatrefoil
blob-076 — Scallop column
blob-055 — Flower
blob-067 — Half circle
Secondary
Photography
Image treatment
Studio photos run full-bleed and uncropped — no stamp, no border. One brand mark is traced over the centre as a 3px line only, never a solid fill. The mark can be any shape from the Primary set above — never a Secondary shape — but the same mark must never appear twice within one page or composition. The line is always cream, regardless of the section's background.
On a coral-background section — mark: quatrefoil (blob-048)
On a navy-background section — mark: hexagon (blob-029)
photo: no border · border-radius 20px · full photo, never cropped to the mark's shape
mark: any shape from the Primary set — never Secondary, never repeated within the same page/composition
mark size: ~86% of photo height, centred, line only (3px, never a solid fill)
line colour: always cream, regardless of the section's background
mark size can flex per photo — line weight stays fixed at 3px
Motion
Movement, not editorial stillness
A page of static photos and text reads as a brochure. cré is a hands-on, physical craft, so the site should feel the same way: a few things always quietly moving, never a page that just sits there. The brand leans on a small, repeated set of motion devices rather than one-off effects, so a studio photo, a nav mark, and a loading state all feel like the same brand in motion.
Spinning stamp · 20s linear loop
Animated nav mark · looping GIF
Looping process video
stamp rotation: 20s linear infinite, never faster — it's ambient, not attention-seeking
process video: always autoplay + muted + loop + playsinline, always backed by a static poster image
scroll entrances: short fade-and-rise on first scroll into view (see the homepage's word-by-word hero reveal), one-shot, never re-triggered on scroll-back
stamp rotation respects prefers-reduced-motion: reduce — disabled outright, not just slowed down; scroll entrances settle instantly instead of animating in
process video stays autoplay + muted + loop regardless — it's decorative texture, not information, same as a static photo would be
Restraint
Keep motion to one moving thing per view: a video behind still text, or a spinning stamp on a still photo. If a page feels busy, cut a moving element rather than add a static one to balance it. Leave it still when you're not sure.
