Pushleft product design baseline

Status: locked for implementation on 2026-10-16.

This baseline governs the developer product. Fleet administration is intentionally outside this UI and will be designed later as a desktop-only tool reachable through the private Tailscale network.

Visual language

• Full dark interface; avoid default light SaaS styling.
• Manrope for UI text. Use the native operational stack (SFMono-Regular, Cascadia Code, Consolas, monospace) for commands, logs, identifiers, and metrics.
• Use larger text than a dense infrastructure console: 16px body minimum and 14px operational metadata minimum at desktop scale.
• Electric blue (#1677ff) is the primary action and service color.
• Pink (#ff4f8b) is the counter-accent and the solid selected-navigation color.
• Green is reserved for small health signals. Do not use large green surfaces.
• Statuses, controls, and icon treatments use solid fills. Avoid translucent “AI glass” pills and decorative circles.
• Cards should read like technical instruments: direct hierarchy, strong alignment, restrained borders, charts, gauges, and operational labels. Avoid generic icon-and-copy feature cards.
• The blue-to-pink-to-orange gradient is a brand surface, not a universal container style. It may appear in the full-bleed hero, onboarding title, and cover material.
• Hero content is full width and fades into black using quiet, wavy cloud shading. Selective hero elements may use restrained glass to remain readable.
• Buttons have physical depth through a bottom inset/shadow and a clear pressed state. Do not add a decorative left border.

Product shell

• Sidebar selected state: full-width solid pink with white foreground.
• Header branch context and platform state are compact, high-contrast controls rather than floating translucent pills.
• Overview includes an application switcher above a single dark “stream scope” that contains metrics, live stream, and service roles.
• Service-role glyphs are blue or pink line icons without colored background tiles.
• Live output favors readability and scanning over maximum density.
• Fleet admin is not linked or shipped in the public developer web surface.

Interaction rules

• Primary task is always obvious: deploy, inspect, or recover.
• Status color never carries meaning alone; pair it with text.
• Every live stream can pause, filter, tail, and resume from a cursor.
• Destructive actions identify the exact environment and are idempotent.
• Do not expose cloud credentials in the browser or require them for managed pl up.

Public site (pushleft.dev), approved 17 October 2026

The marketing site and the manual under site/ use a system of their own, chosen by Waseem from the design-direction review (“Direction E”): a stone ground (#F5F5F4), ink (#1C1917), one blue (#1F5BD8) used for the accent and for blue graph-paper drawing panels, hairline rules on a framed sheet with dashed panels, Geist for text with medium-weight sentence-case display headings and Geist Mono for every label, and a “built on” strip of the real marks of the projects Pushleft runs on (Simple Icons set; trademarks belong to their owners). Reference points were extend.ai (page structure, neutrals, blue, panels) and heronaiapp.com (framed sheet, type pairing); no assets or copy were taken from either. The mark is the console’s own (assets/pushleft-mark-v4.png, a white isometric cube on a black rounded square), reused on the site’s header and favicon. The developer console keeps the baseline above until it is re-skinned deliberately; the two are not meant to match yet.