The Kairon system.
Every variable, type style and component used across the template. Change a variable and every page follows.
Colours
Every colour is a CSS variable. Classes use the Theme tokens, and Theme tokens point to Primitives. Change a primitive to retint every token that uses it.
Typography
Instrument Sans carries headings and body. Newsreader italic adds one or two accent words per heading. JetBrains Mono is for small labels and code. Heading sizes come from the Layout Font Size variables and scale at each breakpoint.
Font Size/H1 · 96px
Agents that ship.
Built for real work.
Every tool call, traced and replayable
Approvals that live where your team works
Scoped permissions per agent
Product updates, monthly
Give Kairon a goal in plain language. It picks the right tools and reports back with a full trace.
Agents read context from the tools you connect, plan small steps and ask before anything touches money.
Agents read context from the tools you connect, plan small steps, and ask for approval before anything touches money or customers. You see every decision in the trace.
Free up to 10,000 steps a month. No credit card needed.
Rich text
Blog posts and job descriptions use the native Rich Text element with the post-rich class. Its headings, lists, links and quotes are styled with nested selectors (When nested inside post-rich), so any rich text with that class matches this sample.
How we cut month-end close from nine days to two
Our finance team used to spend the first week of every month matching charges to ledger entries by hand. We gave an agent read access to Payly and Bookwise, plus one rule: never post an entry above $500 without a human.
Start with the boring part
We picked the task nobody wanted. Reconciliation is repetitive, rule-based and easy to verify, which makes it a safe first job for an agent.
- Match every charge to a ledger line by amount, date and reference.
- Flag anything that does not match within one cent.
- Draft the journal entry and route it for approval.
The agent did not replace our controller. It gave her the first week of the month back.
What we measured
- Days to close, before and after.
- Mismatches caught by the agent versus by people.
- Hours spent on approvals each week.
The setup took one afternoon. The agent runs every night at 2am and posts a summary to the finance channel before anyone logs in.
Buttons
One primary style with a rolling label on hover, plus light, dark and white variants. Add is-small for the compact size. Use one primary button per view.
Form elements
Inputs sit on the card surface with an inset line and a 12px radius. Focus adds an ember ring, and errors use text as well as colour.
Components
Reusable pieces that appear across pages. Global ones are Components; the rest are class combos you can copy from this page.
- ✓3 agents
- ✓10k steps a month
- ✓Community support
Only within the limits you set. Anything above a threshold waits for a person in Relay.
Yes. Pro and Enterprise plans can route steps to any hosted or self-hosted model.
Spacing & radius
Spacing and radius are Layout variables. Section spacing, gutter and gap switch values at each breakpoint through the Tablet, Mobile and Portrait modes, so the bars below resize with the screen.
Icons
All icons are Phosphor duotone (MIT), placed inline as SVG so they inherit currentColor. Use them at 18, 22 or 28px.