FFP UI Design System — BlueprintJS

Component conventions, design philosophy, and BlueprintJS usage guidelines shared across all Federal Frontier Platform GUI applications.

Federal infrastructure operators work in high-stakes, information-dense environments. The Federal Frontier Platform GUI layer is designed for that reality. Every component choice reflects a deliberate philosophy: show more, click less, never hide operational state behind visual chrome.

Two applications share this design system:

• Compass — the digital twin UI for infrastructure visibility, AI chat, graph visualization, and storage monitoring (https://compass.vitro.lan)
• OutpostAI — the mission control and human-in-the-loop dispatch console for autonomous SRE agent governance (https://outpostai.vitro.lan)

Both applications use BlueprintJS as their component foundation and ship in dark mode by default.

BlueprintJS — Built for Mission-Critical Interfaces

BlueprintJS is an open-source React component library developed by Palantir and purpose-built for complex, data-dense enterprise applications. It is the same UI framework underlying Palantir’s government analytics platforms — designed from the ground up for operators who need to process large volumes of structured information quickly, in environments where a missed detail has real consequences.

FFP’s GUI applications use BlueprintJS as their component foundation for three reasons:

Information density. BlueprintJS components are designed for dense layouts: compact tables, multi-column forms, nested tree views, and data-rich overlays that surface operational state without requiring navigation. Infrastructure operators need the full picture on one screen.

Operational vocabulary. Federal operators familiar with Palantir Foundry, Gotham, or Apollo environments will recognize BlueprintJS interaction patterns immediately. FFP provides a shared visual language across the tooling that governs federal infrastructure.

Accessibility and keyboard navigation. BlueprintJS components meet WCAG 2.1 AA accessibility standards and support full keyboard navigation — essential in operational environments where keyboard shortcuts take priority over mouse interaction.

BlueprintJS is Apache 2.0 licensed and maintained as an active open-source project. FFP does not require any Palantir commercial product — it uses only the open-source component library.

Dark Mode by Default

Both Compass and OutpostAI ship in dark mode. This is an operational decision, not an aesthetic one. Infrastructure operations centers — NOCs, SOCs, and mission operations environments — run on dark backgrounds for three reasons: reduced eye strain during extended operational shifts, better contrast for status indicators and alert states, and lower ambient light emission in shared operations rooms.

The BlueprintJS dark theme (Classes.DARK) is applied at the application root in both applications. All components — tables, dialogs, overlays, toasts, trees, and navigation — render in dark mode without per-component configuration.

Light mode is not currently supported. If your deployment environment requires light mode, open an issue in the relevant repository with your use case.

Component Conventions

The following conventions apply to both Compass and OutpostAI. All contributors to either application must follow them.

Tables

All tabular data uses the BlueprintJS HTMLTable component with compact and striped props enabled. This maximizes row density and improves row tracking for wide data sets. Horizontal scrolling is enabled for tables wider than the viewport. Do not use raw <table> elements.

Status Indicators

Operational health states map to BlueprintJS Tag components with intent props:

State	Intent
Healthy / OK	Intent.SUCCESS
Warning / Degraded	Intent.WARNING
Critical / Failed	Intent.DANGER
Pending / Unknown	Intent.NONE

Color is never the only indicator — tags always include a text label for accessibility.

Toasts and Alerts

Transient notifications (MCP tool call results, agent dispatch confirmations, storage alerts) use the BlueprintJS Toaster anchored to the top-right of the viewport. Persistent alerts requiring operator acknowledgment use Alert dialogs with explicit confirm/cancel actions.

Tree Views

Hierarchical navigation — the Ontology Browser in Compass and the session tree in OutpostAI — uses the BlueprintJS Tree component. Parent nodes are expandable; leaf nodes show counts or state indicators.

Icons

Both applications use the BlueprintJS built-in icon set (@blueprintjs/icons). A shared icon convention (lib/icons.ts) defines standard mappings for every entity, action, status, and concept across both UIs. Consistent icon usage:

Icon	Usage
database	TypeDB / FFO references
cube	Compute entities
layers	Storage
shield	Security / compliance
people	Identity
git-branch	Deployments / GitOps
notifications	Alerts and dispatch events
play	Running / active agents
stop	Kill / terminate actions
tick-circle	Completed / approved
cross-circle	Failed / rejected

Extending FFP UIs

If you are contributing a new view, panel, or page to either Compass or OutpostAI, follow these rules:

• Import components from @blueprintjs/core and @blueprintjs/icons only. Do not introduce additional component libraries — consistency matters more than per-feature convenience.
• Use Intent constants for all color-semantic props. Do not use raw color values or custom CSS classes for operational state.
• All tables must use HTMLTable with compact and striped. Do not use raw <table> elements.
• New dialogs must use the BlueprintJS Dialog component. Do not use browser-native <dialog> or custom modal implementations.
• New status badges must use Tag with an appropriate Intent. Do not add custom badge components.
• Test all new components in dark mode. Light mode rendering is not a support requirement.
• One React component per file. Co-locate CSS modules with their component file.