Primer / Published template

Cloud Cost Governance Dashboard

A developer-finance workspace for reviewing spend, ownership, budget variance, commitments, anomalies, and accountable optimization work.

Prompt reference v1

Structure blueprint

Data-driven fallback
PrimerStructure v1

Period and account filters lead into spend context, variance drivers, ownership, commitments, anomalies, and prioritized actions.

Analytics DashboardDeveloper PortalData DenseContent First

Composition principles

Keep currency, period, source time, budget basis, and ownership visible. Separate invoiced facts from forecasts and recommendations.

Behavior and access

Filters deep link, cost details disclose scope, and ownership or budget changes require confirmation.

Engineering boundaries

Use server-owned billing facts and explicit forecast versions. Never calculate chargeback or commitment decisions in the client.

Primer token ledger

Structure v1

GitHub's open-source design system for productive developer interfaces.

Color roles

model
functional scales
requiredRoles
canvas, foreground, border, accent, success, danger

Typography

approach
interface and code typography
requirements
readable code, compact metadata

Spacing

approach
compact developer workflow
baseUnitPx
4

Component rules

code
Separate code, output, and explanatory prose semantically.
navigation
Keep repository or product context visible.

Where this template fits