Quartz 4

spatial-glass-dashboard-stijl

2 minuten leestijd

Design-referentie: Spatial glass dashboard (monochroom)

Opgeslagen 2026-07-08. Bron: Pinterest-pin https://pin.it/CH1GT7mMS (titel “Дашборд”). Afbeelding: spatial-glass-dashboard-referentie.jpg in deze map. Eerste toepassing: Huddle trial-landingspagina “spatial” (huddle/trial-landingspagina/).

Beschrijving van de stijl

  • Scene: fotorealistisch licht penthouse-interieur (grote ramen, daglicht) als achtergrond; de UI zweeft als AR/visionOS-panelen in de ruimte.
  • Volledig monochroom: zwart, wit en grijstinten. Geen accentkleur.
  • Twee paneelsoorten: licht melkglas (wit ~55-65% + backdrop-blur) en donker smoked glass (bijna zwart ~70% + blur). Afwisselend in een bento-grid.
  • Vormen: grote border-radius (24-28px), pills voor labels/knoppen/events, dunne witte randen.
  • Typografie: grote ronde geometrische display (“Dashboard” in rounded sans, bv. Arial Rounded MT Bold / Comfortaa-achtig), verder clean sans.
  • Data-viz, minimaal en zwart-wit: verticale bar-pills per weekdag, donut-ringen met percentage, lijngrafiek, mountain-area chart, wereldkaart, progress bars, toggle switches, kalender-grid met pill-events.
  • Compositie: zwevende titelbalk boven, bento-dashboard in het midden, dock/pill-nav onderaan, mini-dock aan de zijkant.

CSS-vertaling (kern)

/* scene: CSS-interieur — lucht/ramen boven, vloer onder, blurred meubel-blobs */
.panel-light{ background:rgba(255,255,255,.55); backdrop-filter:blur(18px) saturate(.9); border:1px solid rgba(255,255,255,.7); border-radius:26px; }
.panel-dark{ background:rgba(24,24,28,.72); backdrop-filter:blur(18px); color:#fff; border-radius:26px; }
/* ringen: SVG circle met stroke-dasharray/offset-animatie */
/* bar-pills: afgeronde divs die op reveal naar hun hoogte groeien */

Toepassingsregels

  • Strikt grayscale houden — de verleiding weerstaan om een accentkleur toe te voegen; contrast komt uit licht vs. donker glas.
  • De pagina opzetten als dashboard: elke kaart is tegelijk UI-demo en boodschap.
  • Achtergrond-scene in CSS nabouwen (geen externe foto’s i.v.m. artifact-CSP): lichte gradients + raamstijlen + geblurde vormen; de blur van de panelen maakt het geloofwaardig.
  • Vergelijk glass-chrome-ui-stijl (kleurrijk, iriserend) — dit is de stille, chique tegenhanger.

Grafiekweergave

Backlinks