The interface language for a 50-day operating system

Brand direction

A near-white paper substrate, warm grey ink, and one desaturated blue that means “Vecto” and nothing else. The palette is deliberately quiet so the status scale can be the loudest thing on the page.

Rule. The brand blue is structural only — identity, focus, current position, selection. It never encodes health, so it can never be mistaken for the RAG scale.

Surfaces

Every neutral surface and every line is the text colour at a low alpha, so nothing in the interface is a separate grey that has to be kept in tune.

Lines and focus

Three weights of hairline, used deliberately. Most surfaces need none at all — space separates them.

Rule. Reach for the lightest line that works. A border is for a real structural boundary, not for outlining every element.

Semantic tones

Seven tones cover every state in the product. Blocked is violet rather than red so “someone must unblock this” never reads as “this failed”.

Rule. A component picks a tone from the domain and looks its classes up in ui/tone.ts. No status colour is written inline anywhere.

Token reference

Each role has a paired foreground that is contrast-safe on its own tinted surface in both themes.

Hierarchy

Rules

Numbers are tabular everywhere by default, so a column of figures is always comparable without extra classes.

Rule. Metadata is sentence case at text-xs in the muted colour. No tracked uppercase labels — they shout, and almost nothing in an operating system needs to shout.

Spacing and density

A 4px base grid. Density switches the padding inside information-dense patterns via CSS variables, and never changes type size.

Radius

Small and even. Corners should be felt rather than noticed, and nothing in the system is a pill except a progress track.

Elevation

Three levels, and the first two are barely there. Height in this product means “temporarily on top of your work”, so real shadow is reserved for things you dismiss.

Icons

Lucide, 1.5px stroke, sized to the line box. Icons clarify a label; they never replace one except in a control with an accessible name.

Rule. No icon-only button without an aria-label. No status communicated by icon colour alone.

Motion

Motion confirms a change; it never announces one. Everything is suppressed under prefers-reduced-motion, which the global stylesheet handles once for the whole system.

Variants

Rule. One filled button per surface. If a card offers two things, the second is ghost or outline — the reader must never have to choose between two equal-weight actions.

Focus

Focus is a single global treatment: a two-pixel ring in the brand colour with a two-pixel offset, applied by :focus-visible in the base layer rather than per component.

Text inputs

Rule. No placeholder-as-label. A field that can be filled in has a visible label, and the description explains the consequence, not the format.

Select and combobox

Select for a short, known list. Combobox once the list is long enough that a person would rather type than scan.

Choice and range

Choice controls carry the consequence in their description. Switches apply immediately; checkboxes and radios are part of a form that is submitted.

Tabs

The underline variant is the default in Vecto — it reads as document structure. The filled variant is reserved for switching a small control's mode.

Badges

Rule. A bare Coss badge labels a thing. A Vecto status is never a bare badge — it goes through StatusBadge so it always carries a shape or glyph.

Alerts

Alerts are for something that has happened and needs a decision. Anything permanent belongs in the page itself, not in an alert.

Tooltip and popover

Rule. A tooltip may never carry information that is not available elsewhere, because it does not exist on touch.

Dialog and sheet

A dialog for a decision with a small amount of context; a sheet when the reader needs the underlying record while they decide.

Toasts

Rule. A toast confirms something that already happened. It never carries the only copy of a decision, and never asks a question.

Shapes

Rule. Colour is never the only carrier. Each state also has a shape, and health additionally carries its RAG letter, so the system survives greyscale printing and colour-vision deficiency.

Action status

What an action item is currently asking of the signed-in person. Distinct from the underlying task status, which describes the work.

Urgency and priority

Urgency is derived from the due date at read time, never stored. It outranks status when deciding how loud an item should be.

Dates

Every task and action deadline is rendered by DueDate, on every surface — cards, rows, lists, tables, roadmap milestones and the work panel. What varies is loudness, not the component: work that is late or lands today carries a badge on the date, and everything else is quiet metadata, because a list where every date is coloured has no urgent dates in it.

Rule. A task or action due date is always a DueDate. Show the urgency once: where the badge appears, the text beside it carries only what the badge has not already said.

Task, gate and health

Task status describes the work itself. Gate state describes a human decision. Health describes a venture. They are deliberately drawn differently so they are never confused at a glance.

Sources

Action items are projected from many places in the system. The source icon tells the reader what kind of object they are about to open before they open it.

The base chip

StatusBadge is the base chip. Everything above is a thin wrapper around it bound to one registry, which is why a new state can never be introduced without a label, a shape and a definition.

Anatomy

Rule. Every card answers four questions in a fixed order — what is being asked, why it is being asked, what it is holding up, and the single next action. The primary action is always the filled button, and there is only ever one.

Every state

The status marker carries the loudest fact about the item. Urgency outranks status: an overdue item in review reads as overdue, because that is what the reader has to act on.

Row variant

The dense variant for grouped lists, where cards would cost too much vertical space. Same information priority, same status marker, no loss of state.

The tenancy boundary

Rule. Anything marked Vecto internal must be visually distinguishable at a glance and must never be rendered in a company-facing view. The badge is a reminder, not the enforcement — that lives in the query.

Stage markers

Stage markers carry the code, not just a colour, so O4 is identifiable in a dense list and in a sentence.

Stage track

Position and health are separate properties. Northwind sits on O4 and O4 is blocked, so the card is branded and the marker is not.

Rule. The current stage is the only element on the track that uses the brand colour. Brand marks position, never health.

The 50-day cycle

Progress is shown against the plan, not in isolation. The tick is where the methodology says the venture should be today, and the variance is stated in words as well as in position.

Pillars

Pillars group work above the stage level. They are a label, not a status, so they are drawn quietly.

Standard review

Rule. A gate never opens itself. Entry criteria are shown before the decision, unmet criteria are stated plainly, and every decision — including an override — demands a note that is kept.

With override permission

Override is granted per venture, never as a global role. When it is present the control is visible but weighted below the ordinary decisions, and it requires a reason.

Avatars

Rule. An avatar always encodes the person's kind. Vecto Admins are ink, Vecto Team Members carry the brand surface, and company people are neutral. Nobody should have to hover to find out whether they are talking to the client.

Chips and stacks

Chips name the person and, where it matters, their relationship to the item — owner, requester, approver.

Roles

The roles the prototype models. Capability is always scoped to a venture; there is no global superuser in the interface.

Metrics

Rule. A metric never appears without the sentence that makes it actionable. Direction is coloured by whether the movement is good, not by whether it is up.

Venture cards

The portfolio unit. Health is stated with the reason that produced it, the position in the 50-day cycle, and the people accountable.

Task table

Rule. Numerals are tabular everywhere so columns of figures align. Columns drop from the right as the viewport narrows; the reference, the task and its status always survive.

Company-facing variant

The same table rendered for a Company Member. The internal/shared column is gone, because the distinction is meaningless to them and the internal rows never reach the client.

Empty

Rule. An empty queue is good news and should look like it. An empty list that has never been filled is neutral. They are different states and they get different copy.

Loading

Skeletons mirror the shape of the content that will replace them, so the layout does not jump. They are announced politely rather than silently.

Error

Rule. An error says what failed, what the reader can do, and carries a reference they can quote. It never blames the reader and never shows a stack trace.

Restricted

Rule. Restricted is not an error. It explains the boundary and names the capability, without leaking what sits behind it.