▸ in1t
Fromin1t · Rotterdam
Invoice 2026-041
Atlas phase 2 — August 2026
Total incl. VAT€ 7,850.00
VAT reverse-charged, art. 12(3).
Design system
The visual language of this site, written down and extended into a working surface. Tokens live in in1t.scss; the components on this page live in in1t-ops.scss and are only loaded where they are used. Full reference: docs/design-system.md · brand rules: docs/branding.md.
- Dark by default — the site ships one theme; ops surfaces may run light via
data-theme="light" - One accent —
#ff6b35marks the active thing, the primary action and the brand - Lines over shadows — hierarchy is hairlines and surface steps; shadow means "floating"
- One face — the system mono stack, sized and tracked for hierarchy
- Paper is not terminal — invoices, quotes and mail use a plain document face
Surfaces
Every swatch below is painted from its token, not from a copied hex value — if a token changes in in1t.scss, these repaint and the page stays honest.
--bgPage ground
--surfaceCards, panels, rows
--surface-2Inputs, table head
--lineHairline
Ink and accent
- --inkHeadings, values, strong text
- --ink-2Body copy, meta, labels
- --ink-3Placeholders, disabled, timestamps — decorative only, never information
- --accent-inkAccent as text. On white it darkens so type stays legible
--accentFills, rules, active borders
--accent-tint-5Table head, selection
--accent-tint-8Masthead grid
--accent-lineBrand pill borders
Status
Four semantic colours, new for the backoffice. They share the accent's chroma family so a status pill never fights the brand. One state per record.
Draft Sent Paid Overdue 12d Archived Retainer
Type
One face on screen. Hierarchy comes from size, weight and letter-spacing — never from a second family. Uppercase with 1–2px tracking is the label voice; sentence case is the reading voice.
| Role | Size | Notes |
|---|---|---|
| Display | 40 / 700 | Name, page hero |
| Page title | 28 / 700 | Backoffice views |
| Record heading | 20 / 700 | Job, customer, project |
| Lead | 17 / 1.6 | Masthead summary |
| Body | 16 / 25 | Muted ink, 72ch measure |
| Section label | 14 / +2px caps | Accent coloured, 60×2 rule |
| Meta | 13 / +1px caps | Dates, locations, counts |
| Control | 12 / +1px caps | Buttons, table heads, chips |
Buttons
The base .btn and .btn--primary live in in1t.css, so they work on any page — button and a.button are aliases of the base. The remaining variants below need in1t-ops.css.
The site's bordered ghost fills orange on hover; the backoffice needs that fill at rest, so the hover state becomes .btn--primary. One primary per view.
Fields
Tables
| No. | Customer | Due | Status | Amount |
|---|---|---|---|---|
| 2026-041 | Kernel B.V. | 2026-08-03 | Overdue | € 7,850.00 |
| 2026-040 | Trillium Studio | 2026-08-28 | Sent | € 3,200.00 |
| 2026-039 | Menus NL | 2026-07-30 | Paid | € 5,400.00 |
| Outstanding | € 17,570.00 | |||
Stats and feedback
Outstanding
€ 17,570
▸ € 7,850 overdue
Unbilled
36.5 h
▸ ≈ € 4,015 at € 110
Paid · Q3
€ 41,300
▸ +18% vs Q2
Utilisation
72%
Two invoices past due. Reminders go out automatically on day 14.
Invoice 2026-041 sent to Kernel B.V.
No invoices yet
Bill unbilled hours or start from a template.
.empty also lives in in1t.css: /404 and /offline are the same pattern as an empty list.
Shell
The backoffice keeps this site's bordered-card container and splits it into a fixed rail and a working pane: rail → breadcrumb → record title → tabs → content. Nav groups are Work, Money, Comms & files, with settings pinned to the bottom.
Real .ops markup — rail width comes from --rail, so this specimen cannot drift from the stylesheet. Only the height is set inline, to keep the example short.
Overlays, loading and history
Skeleton
Timeline
-
Invoice 2026-041 sent2026-08-14
-
Reminder sent2026-08-10
-
Quote accepted2026-07-28
Modal
Void invoice 2026-041?
The number stays reserved. This cannot be undone.
Menu
Document face
What a customer receives. Plain document face, black on white, accent exactly twice — never the terminal palette.
Light theme
Ops surfaces may run data-theme="light". The tokens swap; the components do not change. Note the accent as text darkens to --accent-ink so it stays legible on white, while accent fills keep the brand orange.
Draft
Sent
Paid
Overdue 12d
Archived
Retainer
| No. | Customer | Amount |
|---|---|---|
| 2026-041 | Kernel B.V. | € 7,850.00 |
| 2026-040 | Trillium Studio | € 3,200.00 |
Content layer
The public pages beyond the résumé — Open source and Thoughts — use these. They live in in1t.scss (public pages never load in1t-ops.css); full entries in docs/components.md.
Site nav
Tags and format marks
serverless
Article · 6 min
A .tag is clickable taxonomy (#tag, ▸ Category); a .pill is record status and never clickable.
Thought index rows
- 2026
-
2026-08-14 Article
Dollar budgets that stop runaway agents
Token metering tells you what happened. A hard dollar ceiling is what stops the next one.
-
2026-06-02 Note
Java to serverless, one endpoint at a time
Incremental replacement beats the big rewrite. No cutover weekend.
Project cards
▸ Rust · crates.io · MIT
Ktesio
Rust CLI and engine that runs AI agents like services: lifecycle supervision, real token metering, and dollar budgets that stop runaway spend.
cargo install ktesio
agentic-airust
▸ Eleventy · Sass · MIT (code)
in1t.com
This site: a static résumé with a documented design system.
Rules
- One accent, many jobs. Orange marks the active thing, the primary action and the brand. It never means "good" — that is
--ok's job. - Brackets are rare. One bracketed block per screen, on the thing that matters most. Two makes them decoration.
- Money right, text left. Amounts align right, currency ahead of the figure, two decimals always.
- Dates are ISO inside the tool —
2026-09-14. Long form only on documents a customer reads. - Uppercase is for labels. Never for a sentence, a name, or a customer's own copy.
- 150ms, ease, colour only. Background, border and colour transition. Nothing slides or scales.