A prompt is a design brief for your AI coding tool.
It asks the tool to create a Caveat project, then customise the public site’s layout, fonts, colours, and branding. You can add your publication name and your own instructions. Copying alone doesn’t change or publish anything.
Choose Use this design to personalise the prompt, or Copy prompt for the example as shown. Paste it into your coding tool, then review the site it builds.
Paste into src/themes/custom.css, then choose the matching font in Settings. This changes colours; the example’s layout needs React edits.
/* Field Notes: colour and typography starter.
Paste into src/themes/custom.css. Layout changes use React.
Choose newsreader in Settings for the matching typeface. */
.publication-site {
--publication-background: #f4f6ed;
--publication-ink: #293e30;
--publication-muted: #63725d;
--publication-surface: #e8edd9;
--publication-line: #d6dfcb;
--accent: #42613d;
}
A React starting point
A homepage intro that uses your real publication data. The complete demo lives in src/components/example-publication.tsx.
// A presentational intro for your public homepage.
// Pass your existing publication data; keep the page's database query.
type Publication = { name: string; description: string; author: string };
export function PublicationIntro({ publication }: { publication: Publication }) {
return (
<section className="public-intro">
<p className="eyebrow">Letters from {publication.author}</p>
<h1>{publication.name}</h1>
<p>{publication.description || "Letters about walking slowly, noticing more, and making a little room for wonder."}</p>
</section>
);
}
Paste into src/themes/custom.css, then choose the matching font in Settings. This changes colours; the example’s layout needs React edits.
/* Signal: colour and typography starter.
Paste into src/themes/custom.css. Layout changes use React.
Choose dm-sans in Settings for the matching typeface. */
.publication-site {
--publication-background: #142731;
--publication-ink: #e5eef1;
--publication-muted: #b0c2ca;
--publication-surface: #1d3541;
--publication-line: #36515e;
--accent: #8ad3e8;
}
A React starting point
A homepage intro that uses your real publication data. The complete demo lives in src/components/example-publication.tsx.
// A presentational intro for your public homepage.
// Pass your existing publication data; keep the page's database query.
type Publication = { name: string; description: string; author: string };
export function PublicationIntro({ publication }: { publication: Publication }) {
return (
<section className="public-intro">
<p className="eyebrow">Letters from {publication.author}</p>
<h1>{publication.name}</h1>
<p>{publication.description || "A working journal of useful software, small experiments, and the decisions behind them."}</p>
</section>
);
}
Paste into src/themes/custom.css, then choose the matching font in Settings. This changes colours; the example’s layout needs React edits.
/* Sunday Table: colour and typography starter.
Paste into src/themes/custom.css. Layout changes use React.
Choose playfair in Settings for the matching typeface. */
.publication-site {
--publication-background: #fff5cf;
--publication-ink: #5b2835;
--publication-muted: #7c5354;
--publication-surface: #f5e5b5;
--publication-line: #e6ce96;
--accent: #9c304a;
}
A React starting point
A homepage intro that uses your real publication data. The complete demo lives in src/components/example-publication.tsx.
// A presentational intro for your public homepage.
// Pass your existing publication data; keep the page's database query.
type Publication = { name: string; description: string; author: string };
export function PublicationIntro({ publication }: { publication: Publication }) {
return (
<section className="public-intro">
<p className="eyebrow">Letters from {publication.author}</p>
<h1>{publication.name}</h1>
<p>{publication.description || "Notes from a well-used kitchen, for people who think the best part of dinner is staying at the table."}</p>
</section>
);
}
Paste into src/themes/custom.css, then choose the matching font in Settings. This changes colours; the example’s layout needs React edits.
/* Off Script: colour and typography starter.
Paste into src/themes/custom.css. Layout changes use React.
Choose syne in Settings for the matching typeface. */
.publication-site {
--publication-background: #eee9fa;
--publication-ink: #39254d;
--publication-muted: #655375;
--publication-surface: #e1d6f3;
--publication-line: #c5b7db;
--accent: #7041ab;
}
A React starting point
A homepage intro that uses your real publication data. The complete demo lives in src/components/example-publication.tsx.
// A presentational intro for your public homepage.
// Pass your existing publication data; keep the page's database query.
type Publication = { name: string; description: string; author: string };
export function PublicationIntro({ publication }: { publication: Publication }) {
return (
<section className="public-intro">
<p className="eyebrow">Letters from {publication.author}</p>
<h1>{publication.name}</h1>
<p>{publication.description || "An independent notebook on exhibitions, objects, and the ideas that follow us home."}</p>
</section>
);
}
Paste into src/themes/custom.css, then choose the matching font in Settings. This changes colours; the example’s layout needs React edits.
/* Common Ground: colour and typography starter.
Paste into src/themes/custom.css. Layout changes use React.
Choose figtree in Settings for the matching typeface. */
.publication-site {
--publication-background: #e9f5f3;
--publication-ink: #173b3c;
--publication-muted: #496c6c;
--publication-surface: #d3e8e3;
--publication-line: #accfca;
--accent: #19625e;
}
A React starting point
A homepage intro that uses your real publication data. The complete demo lives in src/components/example-publication.tsx.
// A presentational intro for your public homepage.
// Pass your existing publication data; keep the page's database query.
type Publication = { name: string; description: string; author: string };
export function PublicationIntro({ publication }: { publication: Publication }) {
return (
<section className="public-intro">
<p className="eyebrow">Letters from {publication.author}</p>
<h1>{publication.name}</h1>
<p>{publication.description || "Stories from the streets, shared spaces, and familiar faces that make a neighbourhood."}</p>
</section>
);
}
Paste into src/themes/custom.css, then choose the matching font in Settings. This changes colours; the example’s layout needs React edits.
/* After Hours: colour and typography starter.
Paste into src/themes/custom.css. Layout changes use React.
Choose cormorant-garamond in Settings for the matching typeface. */
.publication-site {
--publication-background: #302635;
--publication-ink: #f2e9ed;
--publication-muted: #c5b7c6;
--publication-surface: #403245;
--publication-line: #675164;
--accent: #edb187;
}
A React starting point
A homepage intro that uses your real publication data. The complete demo lives in src/components/example-publication.tsx.
// A presentational intro for your public homepage.
// Pass your existing publication data; keep the page's database query.
type Publication = { name: string; description: string; author: string };
export function PublicationIntro({ publication }: { publication: Publication }) {
return (
<section className="public-intro">
<p className="eyebrow">Letters from {publication.author}</p>
<h1>{publication.name}</h1>
<p>{publication.description || "Letters about records, late-night listening, and songs that find us at the right moment."}</p>
</section>
);
}
You have the source
The design is yours to change.
Use Settings for fonts and an accent colour. Use CSS for your own visual style. Use React to rethink the layout, or describe the result you want to a coding assistant.
Choose an example and copy its prompt into your coding assistant. The prompt starts with npm create caveat@latest my-newsletter, then guides the design changes inside that Caveat project.
These demos were made with React, CSS, and fictional stories inside this project. They are design references, not separately installed publications. The starter colours and prompts help you reproduce the direction with your own content.
Share a design, a preview, or an idea on GitHub. Include your name, the design direction, and any asset licences. You can open an issue first or contribute the code in a pull request.
The six starter designs are by Caveat. Community submissions are reviewed before joining this gallery, with credit to their creators.