Creative North Star: “The Calm Control Room”
StreamPipes should feel like a calm, well-organized control room: technically capable, operationally trustworthy, and immediately legible. Its visual system uses restrained surfaces, compact controls, clear hierarchy, and semantic color so industrial domain experts can work confidently with complex data and stateful workflows.
The visual identity is deliberately subordinate to the task. Beauty comes from alignment, rhythm, consistent interaction states, and an uncluttered reading order—not from decoration. The interface should never feel like a flashy consumer product, a dense legacy enterprise application, or a collection of unfamiliar custom controls.
The palette is deployment-configurable by design. Default brand values live in ui/deployment/theme/ and are copied into ui/src/scss/custom-theme/ by the prebuild script; operators may replace them through THEME_VARIABLES and THEME_COLORS. Components must consume semantic CSS variables rather than embedding the default hex values documented here.
Key Characteristics:
The default palette pairs grounded indigo with clear operational green and a telemetry-blue tertiary, set against neutral tonal layers. These are default role values, not tenant-locked brand colors.
#1b1464): Default primary action, focus, selection, step, and identity color. Use through --color-primary or Material system roles so operator themes remain effective.#83a3de): Accessible primary role on dark surfaces, exposed as --color-primary-dark.#39b54a): Default navigation and complementary brand role. It communicates active, connected operation without replacing the distinct success token.#7ac98a): Dark-mode counterpart for the secondary role.#0062a0): Material tertiary role for secondary emphasis and data-oriented accents when primary and semantic colors are already occupied.#fafafa): Default page background and low surface layer.#ffffff): Primary content, input, table, and dialog surface.#eeeeee) and Surface Highest (#e0e0e0): Dividers, grouped regions, inactive controls, and structural layering.#1a1a1a): Default light-mode foreground.#5e5e5e): Supporting copy that still needs readable contrast.#121212), Night Surface (#1e1e1e), and Night Ink (#e0e0e0): Dark-mode background, surface, and foreground foundations.#2563eb), Success (#16a34a), Warning (#f59e0b), and Error (#dc2626): Dedicated semantic roles. Always pair them with text, iconography, or shape; never communicate state through hue alone.#60a5fa), Dashboard (#4f81bd), Adapter (#b48c5f), Data Source (#eab308), Pipeline (#4ab69b), Measurement (#38b2ac), File (#a855f7), Processor (#009688), and Sink (#3f51b5). These distinguish domain objects and must not be repurposed as generic state colors.The Theme Boundary Rule. Default values belong in ui/deployment/theme/. Feature and shared-component styles use semantic CSS variables; do not edit the generated ui/src/scss/custom-theme/ output as the source of truth or hard-code default brand hex values in components.
The Operational Signal Rule. Primary color marks action and selection; semantic colors communicate state; domain colors identify object types. Do not collapse these three vocabularies into one ambiguous accent system.
Display Font: Roboto (with Arial and sans-serif fallback)
Body Font: Roboto Regular (with Arial and sans-serif fallback)
Label/Mono Font: Roboto Regular for labels; the configured editor font for code
Character: A single pragmatic sans-serif family keeps dense product screens coherent and familiar. Weight, size, spacing, and surface hierarchy—not a decorative font pairing—create emphasis.
--font-size-3xl, 1.2): Page-level headings and the largest in-product titles; avoid marketing-scale typography in working screens.--font-size-2xl, 1.2): Primary page headers and major panels.--font-size-xl, 1.2): Section titles and prominent card headers.--font-size-md, 1.4; 1.6 for prose): Instructions, descriptions, and primary content. Keep explanatory prose within roughly 65–75 characters.--font-size-sm, -0.01em): Buttons, form labels, table controls, and compact UI. Uppercase is reserved for real categorical labels, not every heading.The One Working Voice Rule. Use the shared Roboto scale and weight tokens across labels, data, navigation, and headings. Do not introduce display fonts or component-local type scales into product workflows.
Page-level working views follow one stable vertical hierarchy: sp-page-header establishes identity and global actions, optional sp-page-nav-tabs provides sibling-view navigation directly beneath it, and the active content follows after one --space-lg interval. The composition lives inside sp-basic-view with hideNavbar and token-driven padding; do not add an outer page margin or a second padded navigation shell.
Pages that share identity across routes—details, settings, and monitoring views—should provide a small feature layout component that owns the header, tabs, loading and not-found states, and responsive behavior. Route components then supply only their content and projected pageActions. On narrow containers, header actions wrap below the identity, tabs scroll horizontally, and the content interval reduces to --space-md without changing DOM order.
The One Page Identity Rule. A working view has one page header. Page-wide status, identifiers, and actions belong in its action area; route names belong in the tab row; section titles belong in sp-split-section.
The system is tonal and structural by default. Most hierarchy comes from surface-container steps, one-pixel dividers, and selected-state tints. Shadows are reserved for content that genuinely floats above the working plane—dialogs, menus, popovers, and persistent navigation—not ordinary cards or buttons.
0 12px 32px rgba(0, 0, 0, 0.16)): Dialogs, menus, and other temporary layers above the application surface.0 10px 30px rgba(0, 0, 0, 0.25) plus an inset divider): The persistent sidebar boundary; do not repeat this treatment on content panels.0 2px 6px rgb(0 0 0 / 18%)): Keyboard-shortcut hints only.The Flat Working Plane Rule. Content surfaces are flat at rest. Use tonal layers or a border for structure; use a shadow only when the element is spatially above adjacent content.
Shared components are compact, dependable, and familiar. Prefer the existing sp-* and Angular Material patterns before creating a feature-local equivalent.
--radius-sm (0.5rem).mat-flat-button with the theme primary fill, medium-weight label, -0.01em tracking, and 1.3rem horizontal padding.sp-label supports solid, soft, and outline variants with semantic or domain-specific color input. Default labels use a pill shape (999px) and compact horizontal padding.--radius-sm to --radius-md (0.5rem–0.75rem); large rounding is not part of the system.--space-md through --space-xl scale.2.5rem high, with --radius-sm. Wrap feature inputs in sp-form-field; do not use floating labels.The persistent sidebar expands from 62px to 260px, groups product areas, and uses icons, labels, hover fills, and aria-current for orientation. Motion is short (120–220ms) and state-driven. Preserve collapse behavior and ensure the operator-configured navigation colors retain readable foregrounds.
Within a page, use sp-page-nav-tabs directly below sp-page-header. Tabs may include established Material icons, use the primary theme role for active and focus states, and scroll horizontally when space is constrained. When the same position switches local content instead of navigating between routes, use mat-tab-group with the shared sp-page-tabs class and disable stretched tabs. This preserves the same height, spacing, typography, divider, active indicator, focus treatment, and narrow-screen behavior without making local state look like route navigation. sp-basic-nav-tabs is a legacy compatibility wrapper and must not be introduced in new page-level work or retained when that page is migrated to the current shell.
Use sp-table for paging, sorting, grouping, selection, and action menus. Headers are semibold on the base surface; rows use subtle hover and selected-state fills. Dense tabular information is appropriate when hierarchy and keyboard focus remain clear.
Use sp-alert-banner for info, success, warning, and error messages. Each alert combines a tinted background, semantic foreground, one-pixel border, icon, title, and optional description or action.
ui/deployment/theme/ as the source of default theme values and preserve operator overrides through the prebuild pipeline.sp-basic-view, sp-page-header, and, when needed, sp-page-nav-tabs; use sp-split-section, sp-form-field, sp-table, and alert components within page content.pageActions and keep section-specific actions with their section.THEME_VARIABLES and THEME_COLORS.sp-basic-nav-tabs for new or migrated page-level views, or add a second title beneath sp-page-header.