A quiet hour
Design kit · 04 Email and motion
Quiet in the inbox. Calm on the page.
The pieces of a 600 px email for Klaviyo, built the way email apps need it, and the few slow movements the website is allowed. Nothing here is sent, scheduled or connected to Klaviyo.
Email components
600 px · tables · Georgia + Arial
Each part on its own, then all of them together. Everything is simple tables with the styles written inline, so it survives Outlook, Gmail and Apple Mail.
Header
Wordmark in gold on bordeaux. 600 px wide, 32 px of space above and below.
|
Hero image block
One 3 : 2 image at exactly 600 px wide. The approved tote PNGs are over 2 MB: a web-sized copy is needed before a real send.
 |
Headline and paragraph
Georgia 32 / 38 for the headline. Arial 16 / 26 for the paragraph. 40 px of side padding. The greeting always has a fallback (see below).
| Hello there, |
| For all that she is. |
| A quiet note from the atelier. The work tote, in Tan and in Bordeaux, is full-grain leather, handcrafted in France. |
One button
Ivory on bordeaux, 2 px corner where the app allows it. One button per email.
Two-product row
Two 270 px images (4 : 5), name in Georgia, colour and price in Arial. No ratings, no badges.
Story block
A 3 : 2 image with a bordeaux panel under it. Ivory words on bordeaux.
|
A quiet hour, kept for herself. The tan work tote, set down on the chair beside her while the afternoon slows. |
Footer
Espresso, wordmark in gold, the unsubscribe placeholder, a postal address placeholder and the AI line.
| ||||
| You are receiving this note because you joined the Saint Séverac list. [Unsubscribe link placeholder] [Postal address placeholder] | ||||
| Concept pitch. Images and film created with AI. |
All together
The whole email as it would reach the inbox. Every link here goes nowhere on purpose.
|
|
| Hello there, |
| For all that she is. |
| A quiet note from the atelier. The work tote, in Tan and in Bordeaux, is full-grain leather, handcrafted in France. |
|
|
|
A quiet hour, kept for herself. The tan work tote, set down on the chair beside her while the afternoon slows. |
| ||||
| You are receiving this note because you joined the Saint Séverac list. [Unsubscribe link placeholder] [Postal address placeholder] | ||||
| Concept pitch. Images and film created with AI. |
How the email differs from the website
Same colours. Safer fonts. Fewer tricks.
What
Website
Headings
Cormorant Garamond Medium
Georgia (then Times New Roman, then any serif)
Body and labels
Jost Regular and Medium
Arial (then Helvetica, then any sans-serif)
Wordmark
Live Cormorant letters, 3 lines
The same 3 lines in Georgia. For the real send, export the wordmark as an image with alt text "Saint Séverac" so the Cormorant letters survive
Heading sizes
72, 56, 40, 28
32 for the main headline, 26 and 20 for the rest. Smaller, as an inbox is narrower
Button
CSS button, 2 px radius, hover and focus states
A table cell with a background colour and a link inside. Some apps ignore the 2 px radius and show a square corner. No hover
Gold hairline
1 px, gold at 55%
1 px solid gold cell (#C9A45C on dark). No transparency
Layout
12-column grid, flexible
One 600 px column made of simple tables. Two columns only for the product pair
Images
Any size, cropped by CSS
Exactly 600 px wide (270 px for the product pair), always with alt text, never cropped by CSS
Motion and hover
Fades, rises, zoom, menu
None. Email apps do not run them. Nothing flashes, nothing plays
Colours
Eight tokens, variables
The same hex values, written out in every style. No variables
Website heading
Made in France
Full-grain leather, handcrafted in France.
Email heading (Georgia and Arial)
Made in France
Full-grain leather, handcrafted in France.
Name fields
Every name has a fallback.
If a name is missing, the email must still read warmly. The greeting in the email above is written this way, and it shows its fallback:
What the template holds
Hello {{ first_name|default:'there' }},
A Klaviyo-style merge tag with a default value. Check the exact tag when the template is built in Klaviyo.
What she reads when there is no name
Hello there,
With a name, for example: Hello Camille,
Use the first name only, with a fallback every time: in the greeting, the subject line and the preheader.
Never start a subject line with a bare name tag.
No other personal fields, and no purchase history, in this concept.
Motion
Slow, small and easy to switch off.
Things fade in and rise a little as she scrolls. Pictures ease in under a hover. The phone menu glides open. That is all. Everything that moves stops completely when her device is set to reduce motion, and the page looks finished without it.
Checking your device settings…
motion-reveal
600 ms, ease-out
A fade, and a gentle rise of 16 px, when something scrolls into view. Once only.
motion-fade
500 ms, ease-out
Product card: the front image fades to the side image.
motion-zoom
600 ms, ease-out
Picture eases in by 3 to 4% when a card is hovered.
motion-menu
500 ms, ease-out
The phone menu slides open and closed.
Colour changes
200 ms, ease-out
Button and link colours on hover.
Fade in, and a gentle rise
motion-reveal · 600 ms · ease-out
Scroll these into view. The first row only fades. The second row also rises 16 px. They happen once, and never again on the same visit.
Fade
Choosing the hide
Cutting
Stitching
Fade and rise
Choosing the hide
Cutting
Stitching
Soft zoom, and the side view
motion-zoom · 600 ms · motion-fade · 500 ms
Hover or tab to these cards. The story picture eases in by 4%. The product card fades from the front to the side view while the picture eases in by 3%.
The weekender
$395
Menu open
motion-menu · 500 ms · ease-out
Press Menu. The list slides down and the button reads Close. With reduced motion it simply appears and disappears.
Page content below.
How reduced motion works
One rule at the top of the page switches off every animation and transition when the visitor's device asks for reduced motion.
Things that fade or rise in are shown at once, already in place. The hover zoom does not happen. The image swap still works, instantly.
The switch above lets you see this without changing your device settings.
Never
Anything that flashes, bounces, spins or shakes.
Anything that moves all the time: marquees, carousels that advance alone, looping effects.
Parallax, or text that slides in from the side.
Video that starts by itself or plays with sound. Film, if used, is muted, starts only when pressed, and has a visible pause.