Build Kittl

KINDAreplaces $19/mosaves $228/yrback to the verdict

0%0 of 17 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

A vector design tool for typographic work, where the engineering is text on curved paths and true print output, and the constraint is that every font carries a licence the export path enforces.

estimated effort multi-daythe files for this build are in the project pack

CanvasA vector scene graph with text as live editable objectsTypographyText on paths, with real font shapingEffectsWarp, offset and shadow computed on outlinesExportVector formats with correct colour and bleed for printLicensingPer-font permissions checked at export against a declared use

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Runs the editor and the export pipeline.
Get it nodejs.org, or nvm install 22. open ↗
Verify node --version prints v22 or higher
installfree
Why Kerning, ligatures and alternates are the whole point of a typographic tool and cannot be approximated by advancing a fixed width.
Get it A maintained shaping library with bindings for your runtime.
Verify A kerning pair and a ligature render identically to a reference
installfree
Why Offsetting glyph outlines produces self-intersections routinely, and resolving them by hand is a research project.
Get it A library with reliable boolean operations and offsetting on paths.
Verify Offsetting a complex glyph produces clean geometry
have readyfree for open fonts; commercial licences vary widely
Why The build enforces per-font permissions, and you cannot record permissions you have not read. Assume nothing about merchandise use.
Get it Take three or four typefaces you would actually use and read each licence, noting desktop, webfont, merchandise and embedding permissions separately.
Verify A written record exists per font with four separate permissions
have readyfree to obtain
Why Bleed, colour profile and minimum line width come from the actual printer, and an export built to a guess gets rejected or prints badly.
Get it Pick a print or merchandise service and download its artwork specification.
Verify The specification is saved and its requirements are encoded in the export settings

Data model

Create these before the first phase that stores anything. Changing a table later is the expensive kind of change.

- documents(id, name, width_mm, height_mm, bleed_mm, colour_profile, created_at)
- layers(id, document_id, ordinal, kind, transform_json, style_json)
- text_objects(layer_id, content, font_id, size_pt, tracking, path_id, shaping_features_json)
- fonts(id, family, style, file_path, licence_id, embedding_allowed)
- licences(id, name, allows_desktop, allows_webfont, allows_merchandise, allows_embedding, unit_limit, source_url)
- exports(id, document_id, format, declared_use, blocked_reason, fonts_used_json, at)
- An export records which fonts it used and the use declared, so a licence question months later has an answer.

Environment variables

These go in a .env file the app reads at startup. The pack's .env.example is this table as a file · copy it, never commit the filled-in version.

Variable	Needed	Example	Where the value comes from
`FONT_DIR`	required	`./fonts`	Fonts with their licence records. A font without one cannot be used.
`LICENCE_DB`	required	`./config/licences.json`	Per-font permissions, read before every export.
`DEFAULT_COLOUR_PROFILE`	required	`FOGRA39`	The print profile. Screen export is the exception here, not the default.
`DEFAULT_BLEED_MM`	required	`3`	From your printer's specification rather than a guess.
`ASK_USE_AT_EXPORT`	required	`always`	Present as a constant so the answer is visible. A stored use is answered optimistically once.
`MIN_LINE_WIDTH_MM`	required	`0.25`	Below this a line disappears in print. Flagged in preflight.

The build, in order

1
Text that is really text
Typography is shaped correctly and stays editable.
1. Kerning and ligatures are the difference between typography and text.
  Files src/shape.ts
2. Alternates and stylistic sets are why display faces are bought.
  Files src/features.ts
3. A missing font changing the design without saying so is the worst outcome.
  Files src/fonts.ts
done when · tick each as it passes
watch out
- Positioning glyphs by advancing a fixed width per character ignores kerning and ligatures, which is precisely the difference between typography and text, and it is most visible in exactly the display faces this kind of design uses. Use a real shaping engine and pass through the font's own features.
next phase
2
Text on a curve, correctly
Type follows an arc without distorting or bunching.
1. Not by parameter. Parameter placement bunches on tight curves.
  Files src/textpath.tssrc/textpath.test.ts
2. Otherwise the letters stay upright on a curve, which looks broken.
  Files src/textpath.ts
3. A stated rule beats text running off the end.
  Files src/textpath.ts
done when · tick each as it passes
watch out
- Distributing glyphs by the path's parameter rather than by arc length bunches them where the curve is tight and spreads them where it is flat, which on a circular badge is immediately visible and looks like a mistake. Compute arc length and place by distance along it.
next phase
3
Effects that survive print resolution
Warps and outlines are vector operations, not filters.
1. A raster stroke prints blurred at merchandise resolutions.
  Files src/offset.ts
2. Offsetting a complex glyph produces them reliably.
  Files src/geometry.tstests/offset.test.ts
3. Editing the words afterwards is the normal case.
  Files src/effects.ts
done when · tick each as it passes
watch out
- Implementing an outline effect as a raster stroke looks correct on screen and prints as a blurred edge, because merchandise printing works at resolutions where any raster step in the chain becomes visible. Offset the actual outline geometry, and handle the self-intersections that produces rather than ignoring them.
next phase
4
Output a printer will accept
An export meets the requirements of an actual print process.
1. Silent conversion is how vivid artwork prints dull.
  Files src/colour.ts
2. Print requirements a screen export does not meet.
  Files src/export.ts
3. Fonts, colours, line widths, resolutions. What a printer would check.
  Files src/preflight.ts
done when · tick each as it passes
watch out
- Exporting in the screen colour space produces artwork whose vivid colours print noticeably duller, and the designer sees the difference only when the physical product arrives. Convert deliberately to the print profile, and warn about colours that cannot be reproduced rather than converting them silently.
5
Licences enforced where it mattersproduct builder
You cannot export artwork for a use its fonts do not permit.
1. Desktop, webfont, merchandise, embedding. Four questions, four answers.
  Files src/licences.ts
2. Not in settings. A setting is answered once, optimistically.
  Files src/export.ts
3. A silent failure teaches nothing and looks like a bug.
  Files src/export.tstests/licence.test.ts
done when · tick each as it passes
watch out
- Asking for the intended use once, in settings, means it is answered optimistically and never revisited, and every export afterwards inherits an assumption nobody re-examined. Ask at export, when the person knows what this particular file is for, and record the answer with the file.

what this build does not replace

A licensed font library.
Raster image editing.
Print fulfilment and mockups.
Legal advice about a specific licence.
specialized templates, fonts, vector effects, asset library, and mockups
huge template and asset libraries
real-time multiplayer
brand governance
professional print workflows

after v1, if you want it

Variable font axes, which display faces increasingly ship with
Colour separation preview, which is what catches print surprises before the proof
A template system, since most merchandise work is variations on a layout

Need the files? The project pack on the verdict page hands your agent the whole brief · more design.