Kanzo UI
Getting started

The Guild

The running example every page in these docs shares — five guild halls, one quest board, and forty-four contracts.

Every example on this site is about the same thing.

Five guild halls take contracts from one board. The board says what needs doing, where, how bad it is and what it pays; the roster says who can be sent. That is the whole subject matter, and once you have read this page you never have to read it again — the table on the data-table page, the chart on the analytics page and the nodes in the graph showcase are all this.

Why bother

Before this, the examples each invented their own subject: a select offered "My Dataset", a chart plotted requests against latency (ms), a table listed pipelines and a graph held RDF triples. Every one was reasonable alone. Together they made the reader re-learn the domain on every page, and they never let two components be seen agreeing about anything — which is most of what a design system has to prove.

The halls

A hall is this world's tenant, and the reason the world is a guild rather than a bakery: a hall has colours, and colours are the thing this library themes.

heraldry is not decoration. The two hexes are a brand and a neutral, which is where a theme author starts — so "the Order of Salt's colours" and "that tenant's theme" are the same sentence. Switching halls is how the white-label story gets told, with no fixture that exists only to demonstrate theming.

HallSeatStandingHeraldry
The Amber HallWe were paid to be hereThornmarchChartered#c97a1e#6f6152
The Order of SaltNothing keeps foreverSaltmereMember#1c7f92#586a70
The NineCount againColdironMember#5a4bc8#616188
Ash & CompanyBring it back coldAshfall ReachMember#b03a35#6e6764
The Lanternwood CompactSomeone has to walk itDuskfenInvited#3f7f4e#5d6a5c

The work

A contract passes through five states, in order. Two of them are terminal, which is what lets an example show a row action that is legal on some rows and not others.

StateOn the boardContracts
OpenPosted to the board. Anyone chartered may claim it.16
ClaimedA party has signed, and has not left yet.2
AfieldThe party is out. No word is expected before the due date.3
SettledDelivered, verified by an archivist, and paid.17
FailedAbandoned, expired, or the party did not come back.6

Difficulty is a grade from 1 to 5, named as well as numbered — a Rating wants the number and a tooltip wants the word. Reward tracks grade, then travel, so a reward column that sorts wrong is visibly wrong:

GradeNameWhat it meansMedian reward
1ErrandA long walk with a bad smell at the end6 gold
2NuisanceOne thing, and it is smaller than you16 gold
3ContractThe ordinary work the halls were chartered for38 gold
4HazardBring a cantor. Bring two.86 gold
5WritRequires a hall's seal and a written heir190 gold

The people

Thirty-five members across the five halls. Six roles, each with a duty a rule can actually require — which is why the rule language can say a party this size must carry a cantor and mean something.

RoleDutyOn the roster
WardenHolds the line and signs for the party7
ScoutWalks it first, alone, and comes back7
CantorKeeps the wards lit and the dead quiet5
SapperOpens doors that were not doors6
AlchemistCarries what must not be dropped5
ArchivistReads the contract before anyone signs it5

Availability is derived from the board, never authored beside it. The first version of this world authored both and they disagreed within the hour: the generator staffed a member marked missing onto a contract that had just been signed. Now being out is computed from who is on a live contract, and only the narrative exceptions — resting, wounded, missing — are written down.

Both can be true

Dagfinn Roe is wounded and afield, on a grade-5 contract that is six days overdue with a party of two and no cantor. The condition wins the label, because that is the one a quartermaster needs to see. That contract is also the one the rule examples reject — a real violation rather than a hypothetical one.

MemberHallRoleRankAvailabilitySettled
RS
Ravenna Sarkis@ravenna
Amber Hallwardengoldafieldon Q-107071
PM
Piet Marrow@marrow
Amber Hallsappersilverafieldon Q-107438
OB
Oyelaran Bell@bell
Amber Hallcantorsilverafieldon Q-107044
IV
Inés Vault@vault
Amber Hallarchivistironresting19
TQ
Tomas Quill@quill
Amber Hallscoutironready23
HV
Hesper Vane@hesper
Amber Hallalchemistsilverready40
BT
Bram Tallow@bram
Amber Hallwardenironready22
HG
Halla Grieve@grieve
Saltwardenadamantafieldon Q-1056118
SO
Sabin Okonkwo@sabin
Saltalchemistgoldready66
MC
Mirén Costa@miren
Saltscoutsilverafieldon Q-107041
OL
Otto Lindqvist@otto
Saltsappercopperwounded6
YH
Yusra Halim@yusra
Saltcantorsilverafieldon Q-105647
NS
Nerea Solano@nerea
Saltarchivistsilverready45
TC
Tobias Creel@creel
Saltscoutcopperready11
CD
Corvin Delacroix@corvin
The Ninearchivistgoldafieldon Q-107458
BS
Baruch Stiles@stiles
The Ninewardensilverready35
LV
Ludmila Vrána@vrana
The Ninealchemistadamantafieldon Q-1056103
FA
Fenn Aldabra@fenn
The Ninescoutcoppermissingon Q-10784
KA
Kesi Adeyemi@kesi
The Ninecantorironready21
ID
Ilse Danner@ilse
The Ninesappersilverready37
OV
Ozren Vuk@ozren
The Ninewardenironready26
DR
Dagfinn Roe@roe
Ash Co.wardengoldwoundedon Q-105863
SM
Solveig Marsh@solveig
Ash Co.sappersilverafieldon Q-105839
RF
Rui Ferreiro@rui
Ash Co.alchemistironready17
NK
Nadia Kestrel@kestrel
Ash Co.scoutsilverready43
EC
Emrys Coldwell@emrys
Ash Co.archivistcopperresting8
PL
Perpetua Lund@perpetua
Ash Co.cantorsilverready42
FA
Faisal Amari@faisal
Ash Co.sapperironafieldon Q-105620
WH
Wren Halloway@wren
Lanternwoodscoutadamantready96
AT
Ansel Thibault@ansel
Lanternwoodcantorgoldafieldon Q-107861
BO
Beatrix Odemba@beatrix
Lanternwoodwardenironafieldon Q-107824
SA
Silas Aughton@silas
Lanternwoodsappercopperresting9
DM
Doro Mikkelsen@doro
Lanternwoodalchemistironready18
ÁR
Ágata Reyes@agata
Lanternwoodarchivistsilverready36
CL
Cuthbert Lyle@lyle
Lanternwoodscoutcopperafieldon Q-10567

The beasts

Eight, which is not an arbitrary number: eight is how many categorical slots a theme publishes, so a chart coloured by beast is the one place in these docs where the data's cardinality and the scheme's capacity are the same number on purpose.

BeastWhere it turns upContractsSightings
WyrmUnder granaries, following the warmth215
BasiliskQuarries and cut stone210
GrimalkinRoofs, and only at the turn of the season315
Bog-houndWet ground, in threes318
HarpyCliffs above a road210
RevenantWhere a ward was allowed to go out756
MimicAnywhere with a door and a lock412
StonebackRiver fords, mistaken for the ford211

The archive

The board is what is happening. The archive is what has happened — every contract the halls have closed, going back about eight years.

It exists because of the graph. A network view is only worth a WebGL canvas when things share: the same member turns up on contract after contract, the same beast in region after region, so lassoing a cluster pulls in work you did not know was related. Forty-four contracts cannot do that.

But it is history rather than padding, and this is the part worth knowing if you ever edit the world. Each member's settled count on the roster above used to be a number with no cause. Parties in the archive are drawn against that count as a quota, until the quota is spent — so the archive is the history those numbers were counting, and a test fails if the two ever stop agreeing.

The archive holdsCount
Closed contracts536
Field reports filed against them938
Nodes, once members, beasts, regions and tags join them1543
…of which Halla Grieve closed118
…of which Ludmila Vrána closed103
…of which Wren Halloway closed96

The board

Forty-four contracts. Five pages at ten a page, so pagination is doing something and the last page is not a stub.

The derived half — ids, rewards, dates, parties — comes from one seeded stream, so this is the same board in every browser and every build. Nothing in the world reads the clock: today is 14 September 1312, and a test fails if any fixture calls Date.now(). A reader who sees 1312 in a date field knows immediately that it is the example world talking and not their own data.

ContractRegionGradeStatePartyRewardDue
Something is eating the bell-ropesQ-1041 · Amber HallThornmarch2Open161312-10-15
A wyrm under the granaryQ-1042 · Amber HallThornmarch3Failed
EC
DR
ID
331312-05-29
Nine goats, one roadQ-1043 · Amber HallThornmarch1Settled
TQ
51312-07-24
The miller's second cellarQ-1044 · Amber HallThornmarch2Settled
NS
RF
131312-05-18
The orchard is counting wrongQ-1045 · Amber HallThornmarch2Settled
BO
HV
151312-06-17
Escort the assessor as far as the fordQ-1046 · Amber HallThornmarch1Settled
OL
61312-07-15
A stoneback has taken the lower fordQ-1047 · Amber HallThornmarch3Open301312-09-14
Audit the Ash & Co. expense ledgerQ-1048 · Amber HallThornmarch1Open61312-10-17
The tide brought back the wrong boatQ-1049 · SaltSaltmere3Open411312-09-29
Whatever is in the salt-house, it is not saltQ-1050 · SaltSaltmere3Open411312-10-10
The lighthouse keeper has stopped answeringQ-1051 · SaltSaltmere4Open781312-11-03
Three fords, one stonebackQ-1052 · SaltSaltmere3Failed
LV
SO
DM
381312-05-10
Harpies above the cliff roadQ-1053 · SaltSaltmere4Settled
KA
CL
CD
+1
751312-08-14
Survey the drowned quarter before the spring tideQ-1054 · SaltSaltmere2Settled
CD
HV
181312-05-01
Do not let the assessor drink the sampleQ-1055 · SaltSaltmere1Failed
ÁR
71312-05-04
The quarry has opened onto somethingQ-1056 · Ash Co.Ashfall Reach5Afield
HG
LV
YH
+2
1941312-09-08
Recover the seal from the burned wingQ-1057 · Ash Co.Ashfall Reach3Open421312-10-03
A basilisk, and it knows the routeQ-1058 · Ash Co.Ashfall Reach5Afield
DR
SM
1901312-09-08
Cold work at the smelterQ-1059 · Ash Co.Ashfall Reach4Settled
ID
OB
ÁR
+1
1031312-07-25
The road above the cliffs, againQ-1060 · Ash Co.Ashfall Reach3Failed
NK
RF
EC
441312-06-24
Map what is left of the upper galleriesQ-1061 · Ash Co.Ashfall Reach2Open211312-09-26
Standing bounty: revenants, any regionQ-1062 · Ash Co.Ashfall Reach4Settled
TQ
IV
NK
+1
1101312-05-13
The ward on the north gate went outQ-1063 · The NineColdiron4Settled
RS
CD
ID
+1
961312-06-26
Count the graves at Coldiron and reportQ-1064 · The NineColdiron2Open211312-09-22
Sealed orders. Do not open them.Q-1065 · The NineColdiron3Failed
IV
HG
ID
451312-05-03
The locksmith's own doorQ-1066 · The NineColdiron3Settled
YH
PL
PM
451312-06-29
Winter survey: the upper terracesQ-1067 · The NineColdiron2Open201312-10-24
A wyrm has found the forge-fluesQ-1068 · The NineColdiron4Open841312-10-08
Escort the charter to ThornmarchQ-1069 · The NineColdiron2Settled
RF
FA
181312-08-10
The children say the well talksQ-1070 · Amber HallGreenhollow3Claimed
RS
OB
MC
321312-09-27
Mimics in the tithe-barnQ-1071 · Amber HallGreenhollow2Open151312-10-26
Map the drowned laneQ-1072 · LanternwoodGreenhollow2Failed
WH
SA
161312-05-11
Second attempt: the drowned laneQ-1073 · LanternwoodGreenhollow3Open361312-10-24
Bog-hounds took the herd dogQ-1074 · Amber HallGreenhollow2Claimed
PM
CD
151312-09-30
The hedge has moved eleven feetQ-1075 · LanternwoodGreenhollow1Open61312-09-25
Grimalkin, but only at duskQ-1076 · Amber HallGreenhollow2Settled
OV
CD
141312-03-24
Walk the lantern-line before the frostQ-1077 · LanternwoodDuskfen2Settled
PM
ID
161312-08-19
Something is relighting the lampsQ-1078 · LanternwoodDuskfen4Afield
FA
AT
BO
861312-09-12
Grimalkin on the chapel roofQ-1079 · LanternwoodDuskfen2Settled
ID
HV
151312-05-29
Retrieve the surveyor's kit, and the surveyorQ-1080 · LanternwoodDuskfen3Settled
LV
TQ
BS
361312-03-25
The ferryman wants a warden presentQ-1081 · LanternwoodDuskfen1Open71312-10-24
Bog-hounds, in threes, along the causewayQ-1082 · SaltDuskfen3Settled
OB
RS
NS
361312-02-17
The lamp-oil accounts do not add upQ-1083 · LanternwoodDuskfen1Settled
SM
71312-06-09
Whatever walks the causeway, it is not a lampQ-1084 · LanternwoodDuskfen5Open1721312-10-21

On this page