← Home
Dare Write's — The wanderer's diary Dare Write's — The wanderer's diary Dare Write’s Brand KitSanket Tambare · v1.0
01The deck · October 2026

One diary, three moods

My writing brand, kept in one place: three looks, the original logo and signature, the sizes and rules, and 29 prompt templates that turn a post, a run or a project into a prompt I can paste into an AI tool. This deck covers why the kit exists, a tour of the site, and how a prompt is put together.

brand-kit.sankettambare.in ↗ Astro 7 · Cloudflare Pages Built 17 October 2026
same card, three moods post A B C
02The problem

Every graphic started from a blank chat

A quote card, a run poster or a project launch meant explaining the brand again: the colours, the fonts, the 4:5 grid, which corner the logo goes in. Then the image model redrew the logo, misspelt a word, and turned Marathi into shapes that only looked like Devanagari.

29
Templates
6
AI tools
3
Directions
273
Prompts

The templates already existed, inside a design mock-up exported from a visual design tool: 29 templates, 91 tool variants, three directions. Useful, but a mock-up. The job was to turn it into a site I’d actually open before posting.

DAER WRTIES fixing it by hand, every single time
03The one rule

AI paints the background. The real files go on top.

Every graphic is three layers, always in this order, and an AI tool only ever touches the first.

  1. Background. From an image tool, with two areas of a 1080×1350 card left empty: the top-right 260×260 and the bottom-right 340×120.
  2. Type. Exact text in the real fonts, Marathi in Kalam or Mukta. Most reliably done by asking Claude for one HTML artboard and screenshotting it at 1×.
  3. Logo and signature. The original PNGs, composited last. Never redrawn, recoloured or filtered.
R-01 original files only R-05 never on highlighter, marigold, red or photos R-07 one logo per graphic
keep empty 1 · AI background 2 · HTML type 3 · real logo, last badge.png
04Three directions

One diary, three moods

A switch at the top of every page re-themes the whole site at once: colours, fonts, logo and the signature’s filter. Each direction says what it is for.

The Brand kit page in Direction A: warm paper, black ink, the round badge logo and five swatches from Paper to Highlighter.

A · Wanderer’s Notebook

Digital Monk cards, essays, book reviews.

Fraunces · Kalam · JetBrains Mono

The same page in Direction B: near-black night, bone text, phosphor green, and the binary wordmark in place of the badge.

B · Terminal Monk

Tech deep-dives, build logs, project launches.

Bricolage Grotesque · Mukta · IBM Plex Mono

The same page in Direction C: chalk paper, basalt ink, marigold, laterite and monsoon green, with the badge.

C · Basalt & Marigold

Civic and satire, Pune stories, run and trail logs.

Instrument Serif · Mukta · Space Mono

The switch sets one attribute, data-dir, on <html>. Every key in themes.yaml becomes a CSS variable, so a fourth direction would theme the whole site with no CSS change. A tiny script in <head> applies the saved choice before first paint, so pages never flash the wrong theme.

05The Brand kit page

Type a quote, watch the card

The home page ends in a live Digital Monk card: the 1080×1350 master format at a third of its size, filled from a four-field form.

  • Type Devanagari and the quote switches to the note font (Kalam here) on its own.
  • The size steps down with length: 27, 22 or 17 px under 70, under 130, or longer.
  • Timestamp: now (IST) writes the series format: 17.10.2026 · 05:42 IST · Pune for A, 17·10·2026 / 05:42 IST / Pune for B and C.
  • The values travel. Open the quote-card prompts → lands on a prompt that already holds them.

Above it: five swatches that copy their hex on tap, three type specimens, and the voice — what the brand sounds like, and the four things it never does.

The live card in Direction A: THE DIGITAL MONK SAYS, No. 1440 in green, the badge top right, the quote in Marathi set in Kalam, a red rule, the timestamp, the post title bottom left and the signature on a dark tab bottom right.
A · the default quote in Marathi
The same card in Direction B: night background, No. 1440 in phosphor green, the binary mark top right, the English quote in Bricolage Grotesque, a green rule and the signature bottom right.
B · the same card, in English
06The prompt library

29 templates, one for each thing I post

Each template has its own page and URL, a size and format line, a “why this works” note, and a tab for every tool it supports.

Five groups

Write & share 1 Prompt generators 4 Projects 4 Site sections 11 Brand templates 9

Six tools

  • Claude (HTML), the production path: one self-contained artboard with exact text, real fonts and correct Marathi, screenshotted at 1×.
  • ChatGPT Images and Gemini · Nano Banana for direct images; Gemini’s variant repeats the exact text first.
  • Midjourney · Ideogram for textless backgrounds; Claude / ChatGPT and ChatGPT / Gemini (web + image) for text, and for prompts that write prompts.

The tool lives in the URL — /prompts/run?tool=claude — so a link opens on the right tab.

The Project announcement prompt page in Direction B: the template sidebar grouped into Write and share, Prompt generators and Projects, the tool tabs with Claude (HTML) selected, and a form already filled with this project's name, tagline and key features.
Project announcement · Direction B · filled in for the brand kit itself
07Under the form

From a Markdown file to a prompt, in eight steps

  1. Split the template on ## claude, ## gemini… into tool variants (at build time).
  2. Splice the shared blocks: {CLAUDE_KIT}, {DIRECTION_BLOCK}, {LOGO_SAFE}.
  3. Pick each {A: … | B: … | C: …} for the active direction.
  4. Put the project context first, for proj- templates.
  5. Turn the leftover {DIRECTION} into A, B or C.
  6. Append the platform spec, the do’s and don’ts and the checks (not for Midjourney).
  7. Collect every {KEY} still in the text, in order.
  8. Fill what you typed; highlight what’s still empty.
## claude template.md + blocks A B C + checks fill {KEYS} prompt 
// quote · tool claude · direction B
"No. {NUMBER}" (mono 60px; {A: green | B: phosphor | C: laterite})
// becomes
"No. 1440" (mono 60px; phosphor)

It is all in prompt.ts: 83 lines of pure functions with no DOM or Astro in them, so the same code runs at build time, in the browser on every keystroke, and under node --test.

08The custom form

Nobody wrote the form. It’s read off the prompt.

  • Every {KEY} left after step 7 becomes a field. A new placeholder in any Markdown file gets a field on the next build, with no code change.
  • fields.yaml only refines it: a label, a type (text, textarea, url, number, select), a hint, a default.
  • Values are shared. Type PROJECT_NAME once and every project prompt already has it; they live in this browser’s localStorage under dw-brand-kit.
  • Empty keys stay {HIGHLIGHTED}, and what you see is exactly what Copy prompt copies. If the clipboard is blocked, the text is selected instead: “Selected — press Ctrl/⌘+C”.

Typing re-runs the eight steps for the output only. The form is rebuilt only when the direction or tool changes, so the cursor never jumps.

The prompt output box: a dark bar reading 4,360 characters, highlighted equals still to fill, with a red Copy prompt button; below it the Claude HTML prompt for the quote card, with the placeholder HIGHLIGHT_WORDS still highlighted in yellow.
Digital Monk quote card · Claude (HTML) · one field still to fill
09After you generate

“Ready to post” has to be earned

Every template ends in a checklist: its own platform checks, then eight that apply to everything — proofread letter by letter, look for gibberish text in the background, test it on a phone, contrast of at least 4.5:1, original logo files, brand colours only, the right export size with alt text, and what to do when something fails.

The checklist for the run and trail log card in Direction C: nine boxes, all ticked, the counter reading 9 of 9 checked and a green Ready to post badge beside an Uncheck all button.
Run / trail log card · Direction C · 9 of 9
ready to post ✓ not until the last box

A deliberate change from the mock-up. The design started with every box ticked, so “Ready to post ✓” showed before anything had been checked. On the site they start empty.

10Assets · Standards · Download

Original files, fixed sizes, one download

The Assets page: the full brand-kit download panel above four cards for the badge, the binary mark and the white signature, each on its intended background with a Download button.
Assets · each file on the ground it’s meant for, plus the tokens as CSS
The Standards page: a table of eight export sizes from the 1080 by 1350 feed card to the 1080 by 1920 WhatsApp Status, and the start of the logo and signature rules with do and don't examples.
Standards · eight export sizes, rules R-01 to R-09, do and don’t

dare-writes-brand-kit.zip is built once, at build time, by an Astro endpoint using fflate: 67 files, 2.7 MB. Cloudflare serves it as a plain static file.

  • The README inside is generated from site.yaml and themes.yaml, so it can’t drift from the website.
  • The four PNGs are byte-identical to the originals, checked by MD5.
  • Tokens come from the same function that draws them on the Assets page.
dare-writes-brand-kit/
├── README.md        generated
├── assets/          badge · binary · 2 signatures
├── tokens/          A · B · C as .css and .json
└── fonts/           8 families + OFL licences
11How it’s built

Static files, one engine, checked against the original

33
Routes, all static
0
Servers
19 KB
JS on a prompt page
273/273
Prompts identical
  • Astro 7, fully static, on Cloudflare Pages. No adapter, no functions, nothing to patch. Anything live happens in the browser.
  • Prompts are Markdown with frontmatter, checked by a Zod schema: a missing label fails the build, not the page.
  • YAML is imported directly by pages and browser scripts, so there is one source and no glue.
  • Plain TypeScript, no UI framework. The React runtime the mock-up used stayed behind.
  • Fonts are self-hosted through @fontsource: no Google Fonts request, and the same files go into the ZIP.
  • noindex twice: a meta tag and an X-Robots-Tag header. No robots.txt disallow, which would stop crawlers from ever seeing the noindex.
identical, character for character 273 design file 273 new engine

Parity, before anything shipped. The 29 templates and every shared block were converted from the mock-up’s own data by a one-off script, not copied by hand. Then all 273 combinations — 91 tool variants × 3 directions — were generated by the old code and the new engine, and compared.

12Known limits

What it doesn’t do, yet

  • No AI call from the form, by choice. The result is the filled prompt, and nothing leaves the browser. Calling a model later means a Cloudflare Pages Function, a secret, and Cloudflare Access in front so the key can’t be abused.
  • Typed values stay in one browser. They don’t sync across devices.
  • The hero still says “One diary, two moods.” Copied word for word from the mock-up, which now has three. One line in site.yaml.
  • Two font lists, in fonts.css and site.yaml: a new family goes in both.
  • Project context is matched by prefix: a new project template must start with proj-.
brand-kit.sankettambare.in ↗ Public to anyone with the link · noindex
Sanket's signature
/api/generate secret not yet, by choice