Making it yours — Kalme AI Prompts

After the last prompt you have the Kalme site with its demo text and grey placeholder photos. Everything a visitor reads lives in src/content/, so most changes are edits to text files — or a sentence to your AI tool.

Text

What	Where
Agency name, browser title, description, site address	src/content/site.json → site
Menu, header button, contact details, social links, footer, the call to action above the footer	src/content/site.json
The copy of each page	src/content/pages/<page>.json (home.json, about.json, …)
Services, projects, posts, testimonials, team, legal texts	src/content/collections/<name>.json

Change the text between the quotes and keep the field names. Or ask your tool: “Change the agency name to Northgate Digital and the contact email to hello@northgate.com in site.json.” Set site.url to your domain before you publish — the sitemap and share links are built from it. The demo’s e-mail (hello@example.com), phone and address are placeholders; the “Book” buttons point to https://cal.com/ — use your own booking link.

Services and prices

Each service in collections/services.json has:

• slug — its address (/services/content-marketing), unique; number — “01” … in the Home accordion;
• title, description, and two images (the first on cards and its page, the second in the Home accordion);
• tools — names and links; offer and benefits — the two bullet lists, each bullet with a bold highlight;
• plans — usually two (Weekly and Monthly): label, price (text, with your currency), note (“per week”) and the included list. With one plan, the pricing card shows no switch.

To add one, copy a service, give it a new slug and change the fields. It appears on the Services page, gets its own page, joins “More Services”, the contact form’s choices and the sitemap. Ask your tool if you prefer: “Add a service called Brand Strategy to services.json, with the same fields as the others.”

Projects, posts, testimonials and team members are lists of the same kind. A project names its services by slug; a post’s category decides which posts appear as “More Blog” under it.

Photos

The pack uses placeholders; each shows the size its photo is designed for (for example 1920 × 1280). Put your photos in public/images/ with the same file names — project-urbaneats.jpg, service-ppc-1.jpg, team-jessica-lee.jpg … — and they replace the placeholders. Keep the proportions close to the placeholder’s so the crops look right. Good free sources: Unsplash, Pexels.

In a chat builder, upload the photos and tell the tool which file names to give them.

Videos

Three videos play on the site, each with a src and a poster (the picture shown before it plays):

• Home, under the hero: video in pages/home.json — it rises as the page scrolls;
• Home, between the testimonials: testimonials.video in pages/home.json (a portrait clip);
• About: video in pages/about.json.

The demo plays stock clips from Pexels. Replace src with your own clip (a file in public/ or a link to an MP4) and poster with its first frame. Keep them short and small: they play muted and in a loop.

Logo and icon

The logo is public/images/logo.svg (header and footer) with a white version, logo-white.svg, on the About page. Replace them with your own SVGs at the same proportions (4 : 1), or ask your tool to use your files. The browser tab icon is public/icon.svg.

Colours, fonts and sizes

Prompt 1 set up the design tokens: colours (--color-ink, --color-grey, --color-background, --color-red …), the font, text styles and spacing. Red is the only accent — the dot in every button and the brackets of section labels — so changing it gives the site your brand colour: “Change –color-red to #2F6BFF.” Keep the text styles’ sizes per breakpoint unless you want a different rhythm.

Pages

To remove a page, delete it and ask your tool to take it out of the menu, the footer and the sitemap. To add one, write a prompt in the style of the page prompts — list its sections and reuse the components (“a Section title, then Project cards in two columns”) — so it matches the rest.