Cost and budget meter

Overview

Track project spend against monthly budget and shutdown thresholds. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Cost and budget meter when you need to track project spend against monthly budget and shutdown thresholds. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<section class="he-budget-meter"><header class="he-section-header"><h3>Cloud budget</h3><span class="he-status-badge he-status-badge--healthy">Within budget</span></header><p>€18.40 of €50.00</p><div class="he-progress__track"><div class="he-progress__value" style="width:37%"></div></div><small>Temporary shutdown threshold: 100%</small></section>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Write current spend, budget, percentage, forecast date and enforcement state in text.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components