Elements
The pieces that go inside the well. Everything outside it is the shell’s job. Every value is a DEI Realty brand token, read from src/index.css and src/components/dei/.
#C43C3C (4.75:1) rather than #DF3A3A (4.03:1); meta uses #4A4A46 (7.38:1) rather than #8A857B (3.28:1). #DF3A3A is kept for display type and rules, which pass at 3:1.kicker
The short red rule over a wide-tracked mono label. The site’s opening move — it sits above “Live Deliberately.” on the homepage. Start most emails with one.
| New to market |
E.kicker('New to market')heading
Fraunces display. Level 1–3. One per email unless the email is genuinely long.
Three homes worth your Saturday.
E.heading('Three homes worth your Saturday.')text
Prose. Pass HTML you have written, or a plain string and it gets wrapped in a branded paragraph.
A short note in the brand’s body type.
E.text('A short note in the brand\u2019s body type.')quote
Fraunces italic against a red rule. For a client’s words — never for your own copy.
|
They knew the block better than we did. Seller · Oak Park |
E.quote('They knew the block better than we did.', 'Seller · Oak Park')button
The red action button. Square — the v3 radius token is 0. Uses #C43C3C, which passes AA with white text where the site’s #DF3A3A does not.
E.button('Book a consultation', 'https://deirealty.op-site.net/contact')link
The quiet alternative, with the site’s arrow. Use when a button would shout.
E.link('See the full listing', 'https://deirealty.op-site.net/listings')listing
The listing card, ported from src/components/dei/ListingCard.tsx. ⛔ A contingent listing MUST carry the CONTINGENT tag — repo rule, enforced here.
| ||
| ||
Oak Park, IL 3 bd · 2 ba · 1,800 sqft |
E.listing({
image: 'https://…/photo.jpg',
title: '4412 S Wabash Ave', price: '$450,000',
neighborhood: 'Oak Park', city: 'IL',
beds: 3, baths: 2, sqft: 1800,
type: 'For Sale', status: 'active',
url: 'https://deirealty.op-site.net/listings/…',
})listing · contingent
The same card with status: ‘contingent’. The tag is not optional and not stylable away.
| ||
| ||
Logan Square, IL 4 bd · 2 ba · 1,980 sqft |
E.listing({ …, status: 'contingent' })listing · no photograph
With no image it renders the site’s own honest empty state rather than a broken image or a stock photograph.
| ||
| ||
Auburn Gresham, IL 3 bd · 1 ba · 1,150 sqft |
E.listing({ title: '…', /* no image */ })person
Agent, coordinator or broker. Photo optional; with none it degrades to name, role and contact. ⚠️ No phone is shown anywhere yet — DEI Realty’s real number is not confirmed.
|
The DEI Realty team Chicago · Residential Brokerage By appointment across Chicago and the surrounding area. |
E.person({ name: 'Name', role: 'Broker', phone: '…', note: '…' })stars
Literal star characters, so nothing depends on images loading.
★★★★★ 5.0 · Google
E.stars(5, { score: '5.0', source: '· Google' })stats
The proof strip. Three reads best; four is the ceiling.
| — Homes closed | — Avg days on market | 5 min Speed to lead |
E.stats([{ value: '—', label: 'Homes closed' }, …])image
A picture with an optional caption. Absolute https:// URL required — mail clients cannot resolve a relative path.
 |
| Caption in tracked mono |
E.image({ url: 'https://…', alt: '…', caption: '…' })video
A video as email can actually carry one: a still that links out. No client plays embedded video reliably. The play affordance is HTML, not baked into the image, so it survives image blocking as a labelled link.
E.video({ thumbnail: 'https://…', url: 'https://…', label: 'Watch the walkthrough' })rule
A hairline, or the red-tipped version for a section break.
E.rule() · E.rule({ red: true })spacer
Vertical space where a margin will not survive.
E.spacer(24)