a front-end library, drawn in code in Goa
Susegad UI
Konkani, from the Portuguese sossegado: the unhurried contentment of a Goan afternoon.
Susegad UI is a library for interfaces and documents that are beautiful and comfortable at the same time. It grew out of a sketchbook of code-drawn studies of Goa and India, and it keeps their craft: drawings that host your words, show something real and answer the person using them. Every piece comes in three registers, ships with the prompt you could give an AI agent to make it, and keeps its keyboard and screen reader support in a plain core underneath.
What is inside
Every piece has a page of its own, with its prompt and its install line. The indexes show a still of each; the drawing runs when you open it.
-
Scenes 32
Drawings that do a job: they hold your words, show something real, or answer the person using them.
-
Components 33
Headless behaviour that is boringly correct, with one skin per register on top.
-
Recipes 8
Components put together for a real piece of work: a booking, an enquiry, a proposal a client can open offline.
-
Foundations 16
What every piece stands on: the tokens, the engine, sound and narration, the type tier, the three.js tier and the kernels.
-
The pencil box 24
The handful of techniques that do nearly all the work, each with the scenes that use it.
Newest
-
The veranda, in depth
A Goan veranda drawn with exact depth: words on glass slide behind its pillars and settle where they can be read, and notes stay pinned to the door and the lamp as the camera walks.
-
Words on glass
Put a scene's words on frosted glass and move them by a grip or the arrow keys; the people in the square step round them. Try it in Tinto's square.
-
A year of paddy
Shet, the first scape: one Goan field from cracked April mud to the harvest, loading its first sight in under 64 KB.
Three ideas
-
One component, three registers
Every piece has a quiet, warm and playful register, set for the whole page the way colour mode is. The same progress bar is a pencil hairline for an ERP buyer, a kolam that closes for a homestay, and a string of bunting that fills up for a festival. Try the register switch at the top of this page. The whole page changes, not just the drawings.
quiet 3 of 5 photos uploaded
warm 3 of 5 photos uploaded
playful 3 of 5 photos uploaded
-
Every component ships with its prompt
Next to the code sits the prompt you could give an AI agent to make it, and a map from the words in that prompt to the techniques in the code. The library teaches as it serves. Each scene's page carries its prompt on a blue inland letter you can copy, with the map folded away just after it.
-
Behaviour and skin are separate
Keyboard, focus and screen reader support live in a headless core that is boringly correct. The theatre is a skin on top. The quiet skin has to pass an accessibility audit without a single flourish, and every drawing also says what it shows in text.