Design
Infrared is built for the person who manages change while agents do the building. Its design has one job: let you see what happened, what waits for you and why, and decide with confidence. The brand rules and the voice below serve that, in the app, in ir and in these docs.
Brand rules
| Rule | What it means in practice |
|---|---|
| One primary action per view | Ember (#c4443d light, #f0736b dark) marks the single most important action on a screen, such as Ask for a change or Start a deployment. A view with two ember buttons has one too many. Links are ember too. The brighter infrared red, #ff4549, is kept for the Infrared mark. |
| Thermal marks agent work | Thermal (#2d6168 light, #8cc7c6 dark) marks work an agent did or is doing: AgentRole avatars, agent tags, the Todo: agent lane, figures that belong to agents. Human work never uses it. Thermal is also the focus ring. |
| Heat marks waiting | Heat (#e0a038 light, #f0b44c dark) marks time spent waiting, such as a step waiting for a person. |
| Status is an icon and a word | Sync and health are always Argo CD's words, exactly: Synced, OutOfSync, Healthy, Progressing, Degraded, Suspended and Missing. Other states (a deployment's phase, a step's verdict, an incident) use the same badge in the same five status colors: healthy, progressing, warning, degraded and suspended. Every badge has an icon and a word, so color never carries meaning alone. |
| Type | IBM Plex Sans for the interface and body text, IBM Plex Mono for code, pins and identifiers, and Archivo for headings. |
| Neutrals | Ink #1d1418 on surface #f6f4f3 in light mode, and ink #efe9eb on surface #120e11 in dark mode. The rail is dark in both. |
| Teams have a colour | Each Team on Workforce has a hue from a fixed palette that reads the same in light and dark, and its AgentRoles wear it. |
| Real data only | Every figure comes from the API, and an unknown value shows "—". A view with no data yet says how its data arrives. |
| No stock imagery | Diagrams and real screens only. |
| These docs are infrared red | The docs site uses infrared red for links and its primary color: #c8102e light and #ff5c6c dark, each readable at 4.5:1 or better on its background. |
Voice
Infrared speaks like a calm, capable colleague who has done the legwork and hands you what you need to decide. It is warm without being chatty, and plain without being curt.
- Talk to the reader. Use "you", the active voice and the present tense. Infrared never says "I" or "we" in the app.
- Lead with what the reader gets. Say what something does for them first, then how it works.
- Write whole, natural sentences. Avoid clipped headline grammar, long possessive chains, and sentences held together by colons and semicolons.
- Be specific. Name the Product, the zone, the step and the number. An error says what failed, on which resource, and how to fix it.
- Keep it short. Short paragraphs, a table or list where people scan, and prose where they need to understand.
- Say how it works now. Leave out how it came to be, when it changed, and internal references.
- Buttons say what happens, such as Start a deployment or Save AgentRole.
- Use sentence case for headings and buttons. Resource names such as Product, Change and AgentRole keep their capitals.
- No emoji and no exclamation marks.
- Use the glossary. Use the terms in the glossary exactly, and nothing from its "never say" column.
Some words read as filler and make text sound machine-written. Leave out "seamless", "leverage", "robust", "delve", "empower", "unlock", "streamline", "it's worth noting" and "in today's", and don't end a page with a paragraph that repeats it.