The 600px shell, the one-action rule, casing, contrast and hero rules for every client email.
Non-negotiables
These ten rules are the heart of the system. Everything else in this document exists to make them repeatable.
- One email, one clear action. Exactly one primary lime call to action. Nothing else may compete with it.
- A hero image always sits at the top of a client email. It follows the masthead and the 3px lime rule, before the reading surface.
- The white Creative Yadley lockup lives only on an obsidian surface. The masthead and footer are always dark; never place the white logo on white, warm canvas, photography or lime.
- Titles use Title Case. Buttons use Action Case. The button label capitalises every word, including small words: Contact The Studio, View Your Project, Pay Your Deposit.
- The primary action is lime, with dark ink text. The button is a pill, generously spaced from everything above and below it.
- Links are visibly part of the lime action language. Lime links on dark surfaces; on the white reading surface, inline links are ink with a lime underline so they remain readable and WCAG-compliant.
- Hierarchy is explicit. Eyebrow, H1, lead, detail panel, action, supporting steps, sign-off and footer each have one job and one type treatment.
- Generous spacing is mandatory. The button is never crowded by the paragraph above it or the steps below it.
- The email must still work with images blocked. The H1, lead, details and action carry the message; the hero is enhancement, never the only place information lives.
- No internal language in a client email. "Booking queue", "admin", "internal", "rejection" and staff instructions belong in the internal fragment, not the client shell.
The one-action rule
Every client email has one primary action.
- The primary action is the lime pill CTA.
- Supporting steps may contain text links, but they are secondary. They must never look like a second button.
- The footer may contain utility links (Client Area, Billing, Support, Knowledgebase, legal). These are not calls to action.
- If an email genuinely needs two equal actions, it is two emails or a page, not one email with two competing buttons.
- The action label must be a verb phrase that describes the destination, not the mechanism.
- The CTA URL must be absolute HTTPS and must be tested in a real client.
The hierarchy is: read the email -> one action. If the reader has to choose between two lime buttons, the email has failed.
Casing and copy rules
Titles - Title Case
Capitalise the first word and every principal word. Lowercase articles, coordinating conjunctions and short prepositions unless they are the first or last word.
Small words: a, an, and, as, at, but, by, for, from, in, into, nor, of, on, onto, or, over, per, the, to, up, via, vs, with.
Examples:
Your Studio Booking Is ConfirmedA Note About Your Monthly SubmissionWe Received Your ContentYour Monthly Updates Are in Progress
The email H1, subject line, step titles and section headings use Title Case.
Buttons - Action Case
Capitalise every word, including small joining words. Preserve acronyms, amounts, camel-case product names and all-caps tokens.
Examples:
Contact The StudioView Your ProjectOpen Your OnboardingPay Your DepositOpen Booking QueueView Deposit Invoice
Never use Click Here, Learn More, Submit, Continue on its own or a bare destination name. A button says what happens next.
Body copy
Sentence case. Short paragraphs. No all-caps body text. No exclamation marks in transactional mail. No internal jargon. One idea per paragraph.
Subject and preheader
- Subject: Title Case, specific, under ~60 characters where possible, includes the booking or project reference when it helps recognition.
- Preheader: sentence case, one sentence, complements the subject rather than repeating it.
- Never leave the preheader blank; it is the second-most-read line in the inbox.
Colour and contrast
| Token | Hex | Role |
|---|---|---|
| Obsidian | #08090B | Masthead, footer, hero backing, primary ink |
| White | #FFFFFF | Reading surface; white logo on obsidian only |
| Body ink | #434745 | Paragraphs and lead |
| Muted | #5E6463 | Labels, eyebrow, captions |
| Hairline | #D2D6D0 | Panels and dividers |
| Panel | #F4F5F2 | Detail and note surfaces |
| Page | #ECEEE9 | Outer email canvas |
| Lime | #AFE139 | Primary action, accent rule, links on dark |
| Lime ink | #0B0D0E | Text on lime |
| Silver | #C4C6C1 | Footer body text |
Links
- On obsidian: lime
#AFE139, underlined. This includes footer utility links and any link in the dark masthead/hero/footer. - On white or warm canvas: ink
#08090Btext with a lime underline and 3px offset. Never set body/link text in lime on white; the contrast is insufficient and the link becomes hard to read. - Buttons: lime background, dark ink text, no underline.
- Do not use colour alone to indicate a link; underlined treatment is required.
Contrast targets
- Body text: at least 4.5:1 against its surface.
- Large text (H1): at least 3:1.
- Button text on lime: at least 4.5:1 (dark ink on lime passes).
- Never place lime text on white or warm canvas as a link colour.
- Never place white body text on lime or warm canvas.
- Status colour must be paired with a label or icon, not used alone.
Hero rules
- Every client-facing email has a hero image immediately below the masthead and lime rule.
- Size:
600 x 260in the email; supply a 2x source (1200 x 520) where possible. - Keep the subject clear of text. Do not bake headlines, offers or legal copy into the image.
- The hero is decorative by default:
alt="" role="presentation". If the image carries meaning, write a short alt description in the template. - The H1, lead, details and action must make sense with images blocked.
- The hero must not be the only place a date, amount, booking code or action appears.
- Choose from the approved poster set: welcome, billing, reminder, support, service, care. Do not invent a new visual language for one email.
- The hero sits on obsidian so the transition from the dark masthead to the white reading surface is deliberate.