name: gridsense-design
version: alpha
description: >
  GridSense (B—OPS) is a building-operations command console rendered as a
  Swiss/Bauhaus instrument panel: a warm bone canvas (#F4F3EE) carved into hard
  black (#141410) hairline cells with no rounded corners and no shadows. Three
  primary "voltages" — a red (#E23A2A), a blue (#2A48C2), and a yellow
  (#F0C832) — map to the building's subsystems (HVAC / Access / Lighting) and
  appear as triangle, square, and circle primitives throughout. The type story
  pairs a tight Space Grotesk display with an Inter body and a JetBrains Mono
  data face that carries every metric, label, and timestamp. The signature move
  is an interactive SVG floorplan with a draw-on grid, pulsing anomaly markers,
  and growing energy bars, all framed inside a rigid full-bleed grid.
colors:
  # Surface
  bone: '#F4F3EE'        # page background, light cells, inverse text on dark panels
  ink: '#141410'         # near-black, all borders/hairlines, text, dark panels (.ink)
  # Brand voltages (subsystem colors)
  red: '#E23A2A'         # HVAC, critical alerts, anomaly count, triangle marks
  blue: '#2A48C2'        # Access system, square marks
  yellow: '#F0C832'      # Lighting system, warnings, circle marks
  # Text
  text: '#141410'        # default body/heading text on bone
  text-inverse: '#F4F3EE' # text on ink panels and red rows
  # Hairlines / overlays
  hairline-on-dark: 'rgba(255,255,255,0.20)' # border-white/20 dividers inside ink panels
  zone-fill: 'rgba(20,20,16,0.04)'           # selected/hover zone wash on floorplan
  grid-line: 'rgba(20,20,16,0.15)'           # 40px SVG background grid (#141410 @ 0.15)
  baseline-dash: 'rgba(0,0,0,0.40)'          # dashed baseline marker on energy bars
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 24px        # ranges 14px (nav/section) to 24px (logo, hero)
    fontWeight: 700
    letterSpacing: -0.02em
  display-label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 14px
    fontWeight: 700
    letterSpacing: 0.1em  # tracking-widest on nav tabs / section titles
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 400
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px        # data face; ranges 9px labels to 30px (text-3xl) metrics
    fontWeight: 400
  mono-metric:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 30px        # text-3xl big numbers (temp/humid/lux/anomaly count)
    fontWeight: 700
    lineHeight: 1
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px        # ranges 9px–10px micro labels
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:                  # almost entirely sharp; circles are the only curve
  none: 0px               # every panel, cell, button, marker
  full: 9999px            # status dots, lighting circles, legend dots
spacing:                  # base unit 4px (Tailwind); common steps below
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 24px
components:
  nav-tab:
    backgroundColor: '{colors.bone}'
    textColor: '{colors.text}'
    typography: '{typography.display-label}'
    rounded: '{rounded.none}'
    padding: 'py-5 (20px) full-width cell'
    # hover: black panel wipes up from bottom (::after height 0->100%), text -> bone
  sys-button:
    backgroundColor: '{colors.bone}'   # or a voltage fill when active
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '56x56px square (w-14 h-14)'
    # active subsystems filled red/yellow; contains triangle/circle/square/cross glyph
    # :active scales to 0.92
  ink-panel:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-inverse}'
    rounded: '{rounded.none}'
    padding: '24px (p-6)'
    # internal dividers use {colors.hairline-on-dark}
  metric-cell:
    backgroundColor: 'transparent'
    textColor: '{colors.text}'
    typography: '{typography.mono-metric}'
    # micro label above in {typography.mono-label}
  energy-bar:
    backgroundColor: '{colors.bone}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    # fill = subsystem voltage, animated scaleX; dashed baseline at 60%
  alert-row:
    backgroundColor: '{colors.bone}'   # red row for CRIT
    textColor: '{colors.text}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.ink}'   # row dividers + outer box
    padding: 'px-3 py-2 (12x8px)'
  tooltip:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-inverse}'
    typography: '{typography.mono}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    # CSS triangle caret pointing up
  status-bar-cell:
    backgroundColor: '{colors.bone}'
    textColor: '{colors.text}'
    typography: '{typography.mono-label}'
    border: 'border-r border-ink'
    padding: 'px-4 py-2 (16x8px)'
motion:
  pulse: 'scale(1)->scale(1.08) + opacity 1->0.7, 1.4s ease-in-out infinite alternate (live dot, anomaly marker)'
  draw-line: 'SVG stroke-dashoffset 2000->0, 2.5s ease-in-out forwards (floorplan walls draw on)'
  bar-grow: 'scaleX(0)->scaleX(1), 1.2s cubic-bezier(.2,.8,.2,1), staggered 0.1s delays (energy bars)'
  count-roll: 'translateY(8px)+opacity 0 -> settled, 1.5s ease-out (anomaly counter)'
  tab-wipe: 'black ::after panel grows height 0->100%, 0.25s ease on hover'
  sys-press: 'transform scale(0.92) on :active, 0.15s ease'
icons:
  library: inline SVG + CSS-shape glyphs (no icon font)
  style: geometric primitives — triangle (HVAC), circle (lighting), square (access), plus/cross (water)
  stroke: 2px (floorplan walls); 0.4px (background grid)
  sizes: { sm: 12px, md: 24px, lg: 56px }
  color: '{colors.ink}'   # glyphs on voltage fills; voltages used as fills elsewhere

GridSense

gridsense-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

GridSense — branded B—OPS in the header — is a smart-building operations console drawn as a Bauhaus instrument panel. The whole screen is a single rigid grid of cells separated by 2px black hairlines (#141410) on a warm bone field (#F4F3EE); nothing is rounded except true circles, and there is not a single drop shadow. The system runs on three primary voltages that double as the building's subsystems: red #E23A2A for HVAC, blue #2A48C2 for Access, and yellow #F0C832 for Lighting — each also bound to a geometric primitive (triangle, square, circle) and a plus/cross for Water. The type story is a three-face split: a tracked-tight Space Grotesk for display and section labels, Inter for the small body copy, and JetBrains Mono carrying every number, label, and timestamp — which gives the UI its telemetry feel. The signature move is the center SVG floorplan: a 40px background grid, walls that draw themselves on load, translucent voltage zones overlaid for HVAC/ lighting/access, a pulsing red anomaly marker, an ink tooltip with a CSS caret, and a corner compass/scale. Flanking it, energy bars grow from zero against a dashed baseline and an anomaly count rolls up — a console that animates once, then sits still and legible.

Colors

Surface. The page is bone #F4F3EE (set on body and .bone); dark panels use ink #141410 (.ink), which flips text to bone. Ink is also the universal border color — every hairline, cell divider, and 2px frame is #141410.

Brand voltages. Three saturated subsystem colors recur as fills and marks: red #E23A2A (.red) for HVAC, the critical-alert row, the active anomaly count (07), and the live status dot; blue #2A48C2 (.blue) for the Access system and square markers; yellow #F0C832 (.yel) for Lighting, warnings, and circle markers. On the floorplan these same colors appear at reduced opacity (0.4–0.85) to read as zones rather than solids.

Text. Default text is ink #141410 on bone; inside ink panels and the red CRIT row it is bone #F4F3EE. Micro-labels frequently run at opacity-60/-50.

Hairlines & overlays. Inside dark panels, dividers are border-white/20 (rgba(255,255,255,0.20)). The SVG background grid is #141410 at opacity 0.15; selected/hover zones wash with #141410 at 0.04; the energy-bar baseline marker is a dashed border-black/40.

Typography

Loaded from one Google Fonts @import (Space Grotesk 500/700, Inter 400/500/600, JetBrains Mono 400/500/700). All three are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	24px (14–24)	700	normal	-0.02em	Logo B—OPS, hero zone titles
display-label	14px	700	normal	0.1em, UPPER	Nav tabs, section headings (ENERGY VS BASELINE)
body	12px	400	normal	—	Alert titles, small running copy (Inter)
mono	12px (9–14)	400/700	normal	wide	Sub-labels, tooltip values, timestamps
mono-metric	30px (text-3xl)	700	1	—	Big numbers: temp/humid/lux, anomaly 07
mono-label	9–10px	400	normal	0.1em, UPPER	Micro field labels (TEMP, AREA, footer)

Layout

Base unit is 4px (Tailwind). The page is a full-height flex column: a three-cell header grid [200px_1fr_280px], a body grid [80px_1fr_420px] (icon rail / floorplan / data panel), and a 6-column mono footer status bar. Everything is divided by 2px ink borders at the panel edges and 1px ink borders between sub-cells — the composition reads as a single sheet of graph paper partitioned into instruments. The center floorplan is an absolutely-stacked SVG composition (viewBox 0 0 800 560): background grid, wall geometry, color zones, markers, labels, hover overlays, plus floating bone/ink chips for tooltip, legend, and compass. Whitespace is minimal and structural; density is high and deliberate, like a control room.

Elevation & Depth

There are no drop shadows and no glass. Depth comes entirely from (a) the 2px ink hairline grid, (b) inverted ink panels punched into the bone field, and (c) translucent color zones and 0.04 ink washes layered in the SVG. Active buttons are filled with their voltage color rather than raised. The only "lift" is the tooltip and legend chips, which sit above the plan via absolute positioning and a 2px border, not a shadow.

Shapes

Sharpness is the rule: border-radius: 0 on every panel, cell, button, energy bar, and tooltip. The only curves are genuine circles (rounded-full) — status dots, the lighting-zone circles, the small zone marker — and circular subsystem glyphs. Subsystem identity is carried by hard primitives: triangle = HVAC, square = Access, circle = Lighting, plus/cross = Water.

Components

• Nav tab — bone cell, Space Grotesk 14px bold uppercase tracked-wide, no radius, py-5; on hover a black panel wipes up (::after 0→100% height) and text flips to bone. First tab (FLOORPLAN) is pre-inverted (.ink).
• System button — 56×56 square, 2px ink border, no radius; active subsystems filled red/yellow with an ink glyph inside; :active scales to 0.92. Floor selectors (F1–F4) are 40×40 variants.
• Ink panel — #141410 block, bone text, p-6, internal dividers in white/20; used for the hero zone stat and tooltip/legend chips.
• Metric cell — transparent, JetBrains Mono 30px bold number over a 9px uppercase mono label; superscript unit in text-sm.
• Energy bar — bone track, 2px ink border, voltage-colored fill that grows via scaleX, with a dashed black/40 baseline marker at 60%; mono value at right.
• Alert row — bordered list, 2px ink dividers; CRIT row is filled red with bone text and a triangle glyph; severity tag (CRIT/WARN/INFO) in 9px mono at right.
• Tooltip — ink chip, mono text, 2px ink border, CSS triangle caret.
• Status-bar cell — footer cell, 10px mono uppercase, label at opacity-60 and value in bold, separated by 1px ink borders.

Motion

Animations play once on load, then the console rests. draw-line strokes the floorplan walls on via stroke-dashoffset (2.5s ease-in-out). bar-grow scales energy bars from 0 to full width with a cubic-bezier(.2,.8,.2,1) ease and staggered 0.1s delays. count-roll lifts the anomaly count into place (1.5s). The only looping motion is pulse — the live dot and the active anomaly marker breathe (scale 1→1.08, opacity 1→0.7, 1.4s alternate). Interaction motion: nav tab hover wipe (0.25s) and system-button scale(0.92) press (0.15s).

Iconography

No icon font. All marks are inline SVG or CSS-shape primitives built from borders/clip-paths: triangle (HVAC), circle (lighting), square (access), and a plus/cross (water). Floorplan walls are 2px ink strokes; the background grid is a 0.4px stroke at 0.15 opacity. Glyph sizes run ~12px (legend/bar markers), ~24px (button glyphs), up to the 56px button frames. Color follows the subsystem voltage, with ink glyphs sitting on filled voltage buttons.

Do's and Don'ts

• Do keep every divider a crisp ink hairline (1px between sub-cells, 2px at panel edges) and keep corners square.
• Do bind each subsystem to its fixed voltage + primitive (HVAC/red/triangle, Access/blue/square, Lighting/yellow/circle, Water/ink/cross).
• Do route all numbers, labels, and timestamps through JetBrains Mono.
• Don't add drop shadows, gradients, or rounded corners to panels — depth is hairlines and inverted ink blocks only.
• Don't introduce a fourth brand color or recolor a subsystem.
• Don't loop the load animations; only the live/anomaly pulse repeats.

Known Gaps

• Font sizes are read from Tailwind classes; tokens record representative values with the observed range noted in comments (e.g. mono spans 9–30px).
• letterSpacing for display-label/mono-label is the Tailwind tracking-widest value (~0.1em), approximated.
• Spacing scale is inferred from the Tailwind padding utilities actually used (4px base); not an explicitly declared token set.
• Several SVG zone colors reuse the three voltages at varied opacity (0.4–0.85); only the base hex values are tokenized.