// May Day variant — 1st of May, Workers' Day.
// Theme: solidarity, recognition of the practitioner's labour, "the work behind the work."
// Palette: Paper / Ink with a single warm signal red used sparingly (red flag, red carnation —
// historic May Day symbols), paired with the existing Noteless palette so it still reads as a
// product comm, not a political poster. Every card carries an "01.05" date stamp.
//
// 4-card set (tightened to the metrics that matter on May Day):
// 1. Cover · "A note for May Day"
// 2. Consults · number + dot field — consultations Noteless was present in
// 3. Hours · number + arc — hours returned to patient care
// 4. Comparison · top-percentile vs. specialty AVERAGE
const MD = {
ink: "#1E1C19", paper: "#FFFFFF", parchment: "#F6F6F3",
mute: "#CAC9BE", graphite: "#818076", blue: "#026E8E",
// Signal red — chosen to sit comfortably with Noteless Blue and Ink without
// hijacking the brand. Used as ACCENT only (≤ ~8% of card area), never ground.
red: "#C2342B",
redInk: "#7A1F19",
};
const MFONT = `"Untitled Sans","Helvetica Neue",Helvetica,Arial,sans-serif`;
const MSAFE_TOP = 257;
const mBase = {
width: 1080, height: 1080, position: "relative",
fontFamily: MFONT, WebkitFontSmoothing: "antialiased",
overflow: "hidden", color: MD.ink, background: MD.paper,
};
// Small carnation glyph — historical May Day symbol. Drawn in SVG, used as
// a subtle accent (top-left of period stamp). Two overlapping fans of petals.
function Carnation({ size = 24, color = MD.red }) {
return (
);
}
function MChrome({ period, copy, mayday, dark = false }) {
const c = dark ? "#FFFFFF" : MD.ink;
const wm = dark ? "assets/wordmark-light.svg" : "assets/wordmark-dark.svg";
return (
{mayday.occasion} {copy.wrappedTitle} · {period}
);
}
function MFoot({ copy, dark = false }) {
const c = dark ? "#FFFFFF" : MD.ink;
const muted = dark ? "rgba(255,255,255,.55)" : MD.graphite;
return (
{copy.signoffSub}
noteless.com
);
}
// Locale → brand promise hashtag. (Currently unused on cards — reserved
// for share-modal copy. Keep here so we don't lose the strings.)
const HASHTAG = {
no: "#FåKveldeneTilbake",
da: "#FåAftenerneTilbage",
en: "#GetYourEveningsBack",
de: "#HolDirDeineAbendeZurück",
fr: "#RetrouvezVosSoirées",
it: "#RiprenditiLeTueSerate",
es: "#RecuperaTusTardes",
nl: "#PakJeAvondenTerug",
};
// 1 — Cover. Headline in Ink; "May Day" stamped in red below the wordmark.
function MCover({ firstName, period, copy, mayday }) {
return (
{mayday.coverEyebrow}
{mayday.coverHeadline(firstName)}
{/* Red ribbon stripe along the bottom edge — workers' banner motif */}
);
}
// 3 — Hours. Just the number, large, sitting low — matches QuietData.
// Number gets a small "t" suffix (Norwegian abbreviation for "timer" / hours).
function MHours({ value, period, copy, mayday, formatNumber, locale, consults }) {
const formatted = formatNumber(value, locale);
const numSize = formatted.length <= 4 ? 280 : 220;
return (
);
}
// 4 — Summary. A clean recap of cards 2 (notes) + 3 (hours) on a single surface,
// with a quiet emphasis on Workers' Day: a slim red ribbon at the top edge mirroring
// the cover, the date stamp, and a tribute footnote. Same type/spacing rhythm as the
// stat cards — just two stacked figures separated by a thin rule, so the eye reads
// it as a closing summary, not a new metric.
function MSummary({ data, period, copy, mayday, formatNumber, locale }) {
const notesFmt = formatNumber(data.notes, locale);
const hoursFmt = formatNumber(data.hours, locale);
// Slightly smaller than the single-stat cards — they share a slide here.
const numSize = 168;
const tSize = numSize;
return (
{/* Top red ribbon — echoes the cover, ties the set together */}
{mayday.summaryEyebrow}
{mayday.summaryTitle}
{/* Two stacked stats — same visual language as the single-stat cards */}
{/* Notes */}
{mayday.summaryNotesLabel}
{notesFmt}
{/* Hours */}
{mayday.summaryHoursLabel}
{hoursFmt}
t
{/* Quiet tribute line at the bottom — the workers' day emphasis */}