Walkthrough

From choosing a combination to exporting a deployable site — everything you need to know, in order.

1. The Choose screen

When you open Kagaz, you land on the Choose screen — a grid of 57 curated combinations. Each combination locks three things at once: a layout, a colour palette, and a typography pairing. Pick one to start; you can change any of them later.

Each card shows a four-colour swatch (body, brand, action, ink), a name and flavour line, and pills for the layout and typography.

Searching and filtering

The search box matches against combination names and descriptions. The layout filter pills below it narrow the grid to combinations that use a specific layout.

Learning about a layout

Hover any card and an i button appears in the top corner of the swatch. Click it to read the layout's story — who it's for, what it signals, which palettes pair best with it.

Press Escape or click the backdrop to close.

2. Picking a combination

Click any card to start a new project with that combination. All content slots start empty — the combination sets the visual language, you supply the words.

Already know what you want? Click Skip → in the top-right corner to jump straight into the editor with the Architect default (Monolith layout, Sumi palette, System typography) — a clean, severe single-statement page that works for almost any announcement.

Opening an existing project? Click Open .kagaz ↑ to load a previously saved file, or use the Open button in the topbar at any time.

3. The editor

The editor is a two-column layout: the content form on the left, the live preview on the right. Every change in the form updates the preview immediately.

The topbar shows the active combination as three clickable pills — Layout, Palette, Type — and the action buttons: Load demo, Open, Save, Preview, Export.

4. Filling in content

The form is split into two sections: Site (identity fields that appear on every page) and Page (fields for the currently-active page).

Field types:

• Text — single line, with a soft character-count hint. Going over is allowed.
• Long text — multi-line markdown textarea. Supports **bold**, *italic*, [links](url), - lists.
• Image — drop a JPEG/PNG/GIF/WebP onto the drop zone, or click to pick a file. Kagaz compresses it to max 1200 px JPEG automatically.
• List — repeatable items (e.g. work projects, blog posts). Each item has sub-fields. Use the arrow buttons to reorder; paste from a spreadsheet column to bulk-add rows.
• Links — label + URL pairs. Icons are auto-detected from the URL (GitHub, Instagram, X, LinkedIn, and 10 others).

5. Switching pages

Layouts that support multiple pages show page tabs across the top of the form. Click a tab to switch; the preview follows.

Click » (the add button after the last tab) to add a page from the types the current layout supports. Click the × on a tab to remove that page. Up to 5 pages per project.

6. Changing layout, palette, or typography

Click any of the three pills in the topbar to open the axis picker for that dimension. Switching is always non-destructive — content for pages the new layout doesn't support is kept in memory.

The preview updates live as you browse. Press Escape or click outside to close a picker without committing.

7. Saving your work

Autosave: Kagaz saves your text content to localStorage every 30 seconds (images excluded). If you close the tab and reopen Kagaz, a toast will offer to restore your last session.

Save as .kagaz: Click Save to download a .kagaz file — a zip of project.json plus any images you added. This is your editable source; keep it somewhere safe.

The .kagaz format is open: it's a zip you can unzip by hand, version-control, or sync however you like.

8. Previewing and exporting

Click Preview to open a new tab showing the exported site — no editor chrome, real layout. Use it to proofread before you export.

Click Export to download a zip of the full deployable site:

your-site-name.zip
├── index.html        (+ about.html, work.html … for multi-page layouts)
├── assets/           (only the images you actually used)
├── favicon.png       (auto-generated from your avatar, if set)
└── source.kagaz      (your editable source, embedded alongside)

The HTML files are pure static — no JavaScript, no tracking, no third-party requests. Drag the unzipped folder into:

• Cloudflare Pages — drag the folder onto the Pages dashboard
• Netlify — drag the folder onto the Netlify drop zone
• GitHub Pages — push the files to a gh-pages branch
• Any static host — it's just HTML and a folder of images

The source.kagaz inside the zip is a copy of your editable project. If you lose your local file, download your own deployed site, unzip it, and use source.kagaz to re-edit.