Build content-free brutalist design system #6

New issue

Closed

opened 2026-06-18 16:12:30 +02:00 by vince · 0 comments

vince commented

2026-06-18 16:12:30 +02:00

Owner

Parent: #1

Design reference

Goal

Create the reusable visual language for the dashboard: hard-edged, dense, black-canvas brutalism inspired by the reference image, with no dashboard content embedded in components or CSS.

Scope

Define CSS tokens for color, spacing, borders, typography, z-index, density, and status states.
Build reusable presentational components for frame, grid, panel, telemetry card, service row, badge, status strip, weather/status module, and footer cell.
Use Iconify-compatible icon names from model data; components render icons generically and do not import service-specific icon code.
Use custom CSS as the primary design-system layer; avoid a large UI kit and avoid Tailwind as the main visual language.
Keep components Storybook-ready with generic props and fixtures; the actual Storybook setup and stories live in #13.
Match the reference direction: black canvas, fine grid lines, compact mono/condensed type, neon lime operational state, red/orange warnings, sharp borders, and dense panels.
Add responsive behavior that keeps the command-center feel on desktop and remains usable on mobile.
Add keyboard focus states, reduced-motion behavior, and accessible contrast handling.
Keep all visible text, labels, service names, links, values, and operational content out of this tier.

Acceptance criteria

Components render correctly with generic fixture props.
Searching component/CSS source finds no Dimension Lab service names, URLs, host names, or metric labels.
The visual system can render at least two different fixture dashboards without code changes.
Desktop layout closely follows the reference image's density and hierarchy.
Mobile layout is usable without overlapping text or controls.
Icon rendering is driven by model-provided icon identifiers.
Components expose enough prop/state surface for Storybook coverage in #13.

Out of scope

Data model definition.
Persistence.
Live metric fetching.
Storybook setup and story authoring; that is tracked in #13.

Parent: #1 ## Design reference ![System overview dashboard reference](https://git.dimensionlab.net/attachments/39e9396a-a4cc-4110-aadd-633bda94cd03) ## Goal Create the reusable visual language for the dashboard: hard-edged, dense, black-canvas brutalism inspired by the reference image, with no dashboard content embedded in components or CSS. ## Scope - Define CSS tokens for color, spacing, borders, typography, z-index, density, and status states. - Build reusable presentational components for frame, grid, panel, telemetry card, service row, badge, status strip, weather/status module, and footer cell. - Use Iconify-compatible icon names from model data; components render icons generically and do not import service-specific icon code. - Use custom CSS as the primary design-system layer; avoid a large UI kit and avoid Tailwind as the main visual language. - Keep components Storybook-ready with generic props and fixtures; the actual Storybook setup and stories live in #13. - Match the reference direction: black canvas, fine grid lines, compact mono/condensed type, neon lime operational state, red/orange warnings, sharp borders, and dense panels. - Add responsive behavior that keeps the command-center feel on desktop and remains usable on mobile. - Add keyboard focus states, reduced-motion behavior, and accessible contrast handling. - Keep all visible text, labels, service names, links, values, and operational content out of this tier. ## Acceptance criteria - Components render correctly with generic fixture props. - Searching component/CSS source finds no Dimension Lab service names, URLs, host names, or metric labels. - The visual system can render at least two different fixture dashboards without code changes. - Desktop layout closely follows the reference image's density and hierarchy. - Mobile layout is usable without overlapping text or controls. - Icon rendering is driven by model-provided icon identifiers. - Components expose enough prop/state surface for Storybook coverage in #13. ## Out of scope - Data model definition. - Persistence. - Live metric fetching. - Storybook setup and story authoring; that is tracked in #13.