Red-on-Cream Editorial Announcement Email

superdesignCC0-1.0Prompt onlyBlog · blogTexture · textureBrutalist · brutalistWarm · warmExperimental · experimentalDark · darkLow (display) · lowRed · redVivid · vividSerif · serifGeneral · general

A bold, design-forward announcement email in a centered 600px column: a warm cream (#ddd8d0) surface with ONE ink colour, vermillion (#c72a09), applied to every element. A giant Archivo headline ('WE MADE SOMETHING.'), a short dek, an object photo, a parenthetical (01) section index with hairline label/value metadata rows (Client / Scope / Shipped), and a massive solid-vermillion CTA band ('READ THE CASE STUDY') anchoring the design. Reusable for design agencies, type foundries, and studios announcing a case study or launch. Category: Email & Newsletter. Prompt author listed upstream: Jason Zhou.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Red-on-Cream Editorial Announcement Email" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/red-on-cream-editorial-announcement-email · 6c6090694520 · © Superdesign

Prompt

{"summary": "A bold editorial announcement email in a centered ~600px column on warm cream, using a single ink colour, vermillion, for every element. A tracked-caps masthead over a huge Archivo headline ('We made something.') and a short dek announce the news. Below: an object photo with a caption, a parenthetical section index '(01) The Work' with hairline label-left / value-right metadata rows (Client / Scope / Shipped), then a full-bleed solid-vermillion CTA band ('Read the case study.') with a cream button, and a footer with contact + unsubscribe.", "style": {"description": "Modern, earthy, slightly brutalist. Warm cream/putty background with ONE vibrant rust-vermillion ink used for ALL text, rules, and fills, no second colour except the object photo. Extreme type-scale contrast in a single grotesque (Archivo): a massive black headline against small tracked-out caps labels. Structured hairline rules build metadata tables; the design is anchored by a solid-colour CTA band.", "prompt": "Design a bold editorial announcement email in a centered max-width 600px column on a warm cream surface (#ddd8d0) over a putty body (#c9c4bb). Typeface: Archivo only (weights 400-900). ONE ink colour: vermillion #c72a09, applied to ALL text, hairlines, and the CTA fill; the only other 'colour' is a single object photograph. Extreme scale contrast: a ~58px font-900 UPPERCASE headline (tracking-[-0.02em], leading .9) vs 10-11px tracked-caps (letter-spacing .18em) labels. Structure with 2px vermillion top borders + hairline vermillion/35 row dividers. Include an oversized parenthetical section number '(01)' in font-800. The anchoring CTA is a full-bleed solid-vermillion band with cream text and a cream button. Email-safe: centered column, no sticky nav."}, "layout_and_structure": {"description": "Centered ~600px column: (1) masthead (wordmark + bulletin no, 2px underline), (2) announcement headline + dek, (3) object photo + caption, (4) parenthetical '(01) The Work' + hairline label/value rows, (5) full-bleed vermillion CTA band, (6) footer with email + socials + unsubscribe. Reflows to one column at ~380px.", "prompts": [{"part": "Masthead", "prompt": "A row with a tracked-caps wordmark left and a tracked-caps 'Bulletin No 12' right, closed by a 2px vermillion bottom border."}, {"part": "Announcement", "prompt": "A tracked-caps kicker ('The announcement'), a ~58px font-900 uppercase headline in two lines ('We made / something.'), and a ~15px font-500 dek."}, {"part": "Object photo", "prompt": "A ~256px object/product photograph (warm-toned to sit in the cream palette) with a tracked-caps 'Fig. A' caption."}, {"part": "Section index + metadata", "prompt": "An oversized parenthetical '(01)' in font-800 beside a two-line uppercase section title ('The Work'); then a 2px-topped table of hairline rows, each a tracked-caps label left + an uppercase value right (Client / Scope / Shipped)."}, {"part": "CTA band", "prompt": "A full-bleed solid-vermillion band with cream text: a tracked-caps '(02) \u2014 See it live', a ~34px font-900 uppercase headline ('Read the / case study.'), and a solid-cream button with vermillion tracked-caps label."}, {"part": "Footer", "prompt": "A 2px-topped footer: a lowercase contact email + tracked-caps social links, then tracked-caps fine print with an Unsubscribe link."}]}, "special_ui_components": "Oversized parenthetical section index '(01)'; hairline label-left / value-right metadata table; extreme headline-to-label scale contrast in one grotesque; full-bleed solid-vermillion CTA band with a cream button.", "special_notes": "Email layout: centered ~600px column, no sticky nav. Generic placeholder studio ('Studio Vermillion') and sample project so the spec is reusable; swap the wordmark, photo, and metadata. The reusable value is the one-ink-on-cream editorial announcement system (extreme scale + hairline metadata + anchoring CTA band). Source system: reverse-engineered from a Canva 'Creative Brief' presentation (measured mono #c72a09 on cream, Aileron grotesque)."}

---
"Red-on-Cream Editorial Announcement Email" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Red-on-Cream Editorial Announcement Email. \"Red-on-Cream Editorial Announcement Email\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-red-on-cream-editorial-announcement-email",
      "license": "CC0-1.0",
      "attribution": "\"Red-on-Cream Editorial Announcement Email\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#c72a09"
    },
    "foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "card": {
      "$type": "color",
      "$value": "#c72a09"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "primary": {
      "$type": "color",
      "$value": "#c72a09"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ddd8d0"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "accent": {
      "$type": "color",
      "$value": "#c72a09"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#ca3718"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a3a3a2"
    },
    "border": {
      "$type": "color",
      "$value": "#cf482b"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#c72a09"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Red-on-Cream Editorial Announcement Email" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520. */
:root {
  --background: #c72a09;
  --foreground: #fafaf9;
  --card: #c72a09;
  --card-foreground: #fafaf9;
  --primary: #c72a09;
  --primary-foreground: #fafaf9;
  --secondary: #ddd8d0;
  --secondary-foreground: #fafaf9;
  --accent: #c72a09;
  --accent-foreground: #fafaf9;
  --muted: #ca3718;
  --muted-foreground: #a3a3a2;
  --border: #cf482b;
  --destructive: #dc2626;
  --ring: #c72a09;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Red-on-Cream Editorial Announcement Email" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520. */
/** Tailwind theme extend for Red-on-Cream Editorial Announcement Email (superdesign-red-on-cream-editorial-announcement-email) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#c72a09",
        "foreground": "#fafaf9",
        "card": "#c72a09",
        "primary": "#c72a09",
        "primary-foreground": "#fafaf9",
        "secondary": "#ddd8d0",
        "accent": "#c72a09",
        "muted": "#ca3718",
        "border": "#cf482b",
        "destructive": "#dc2626",
        "ring": "#c72a09"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Red-on-Cream Editorial Announcement Email" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-on-cream-editorial-announcement-email @ 6c6090694520. */
@layer base {
:root {
  --background: #c72a09;
  --foreground: #fafaf9;
  --card: #c72a09;
  --card-foreground: #fafaf9;
  --primary: #c72a09;
  --primary-foreground: #fafaf9;
  --secondary: #ddd8d0;
  --secondary-foreground: #fafaf9;
  --accent: #c72a09;
  --accent-foreground: #fafaf9;
  --muted: #ca3718;
  --muted-foreground: #a3a3a2;
  --border: #cf482b;
  --destructive: #dc2626;
  --ring: #c72a09;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}