Product UI Patterns

App frame

A fixed sidebar (sidebar-width, 248px) on the left, content on the right. The sidebar holds the wordmark at 24px, the module nav (Pulse, Projects, Flow, Connect) and Workspace settings at the foot. The active nav item uses ignition-tint with ignition-text and a filled dot. Content has a page title (h1), one primary action at the top right, and space-6 between sections.

Pulse: the dashboard

Pulse is the daily destination, so it is calm and sorted by what needs a decision.

1. Portfolio first. A list of project cards sorted Stalled, At risk, On track. Each card shows name, stage, health badge, three metrics and a last-synced line.
2. Few signals. A project dashboard shows five panels: health, velocity, open blockers, release status, recent activity. Add a sixth only by removing one.
3. Explain every state. Clicking a health badge lists the rules that triggered it. A health state is never a black box.
4. Show freshness. Every panel carries a "Last synced" time. A stale source is flagged, never hidden.
5. One accent. The current stage bar is the only ignition element on a project card. The portfolio view has no other orange.

Health states

Use the .badge classes: badge-on-track, badge-at-risk, badge-stalled, badge-neutral.

Data visualisation

• Choose the chart for the question. Trend over time: a line. Compare items: bars from zero. Parts of a whole: a stacked bar, only when the parts sum to a whole. Ranges: a point with a whisker, not floating bars.
• Colour. chart-1 leads, chart-2 (ignition) is for the single series to emphasise, chart-3 to chart-5 follow. Five series maximum.
• Always label directly at the line end or bar, with a legend only as a fallback. Axis text is caption in ink-muted; gridlines are line.
• Numbers use tabular figures. Show units in the axis title, not in every label.
• Previous period is drawn in chart-5 (slate) as a thinner line, never in a competing hue.
• Never use gradient fills, 3D, or dual axes. Every chart gets a text summary or data table for accessibility.

Forms

Labels sit above fields (field-label). Hints sit below (field-hint). Errors replace the hint and use field-error with a leading sentence that says what to do: "Enter a project name." Required is the default; mark optional fields "(optional)". Primary action bottom-left, aligned with the fields.

Empty, loading and error states

• Empty: one sentence and one action. "Connect a tool to see your first project." plus the Connect tool button.
• Loading: skeleton blocks in surface-2 at the size of the final content, with no shimmer longer than 1.5 seconds. After 10 seconds, say what is slow.
• Error: what failed, whether data is safe, what to do. Offer Retry and, where it helps, the sync log.

Writes and destructive actions

BAFOS reads first and writes carefully. Every write to a connected tool shows a preview of exactly what will change, and says whether it can be undone. Destructive actions are confirmed in a dialog, with btn-danger on the confirm button and a calm way out beside it. They are never an accent button.

Responsive behaviour