--- version: alpha name: Meter Room description: A mint-grey plant room with steel-blue plant and an electric violet for the reading out of band — and a y-axis that never moves. meta: id: "theme-meter-room" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:18+09:00" updatedAt: "2026-09-02T00:58:18+09:00" version: "1.0.0" isNew: false lookbook: tagline: The scale is fixed so two screens can be compared by eye. bestFor: Energy and utility monitoring, building management, sub-metering, tariff and consumption reporting, plant rooms avoidFor: Exploratory analytics, anything where the interesting range is unknown in advance defaultMode: dark surfaceStyle: filled accentUse: bar caseStyle: labels-upper borderWidth: 1px imageTreatment: cool motion: intensity: 1 duration: 200ms ease: "cubic-bezier(0.33, 1, 0.68, 1)" signature: "Traces redraw left to right at the speed of the data. The axis never animates, because the axis never changes." displayFont: Familjen Grotesk displayKind: sans bodyFont: Familjen Grotesk monoFont: Geist Mono colors: background: "#CAD9CA" foreground: "#090E06" card: "#CACDCA" card-foreground: "#090E06" popover: "#CACDCA" popover-foreground: "#090E06" primary: "#1A5B67" primary-foreground: "#F8FBF8" secondary: "#C0C4C0" secondary-foreground: "#090E06" muted: "#C0C4C0" muted-foreground: "#4A5243" accent: "#532CAB" accent-foreground: "#F8FBF8" destructive: "#990E13" destructive-foreground: "#F8FBF8" border: "#B1B4B1" input: "#B1B4B1" ring: "#1A5B67" chart-1: "#2D7E8D" chart-2: "#50919F" chart-3: "#2E646F" chart-4: "#7BA7B1" chart-5: "#2E4D54" colorsDark: background: "#0D1E0E" foreground: "#EBF0E7" card: "#202720" card-foreground: "#EBF0E7" popover: "#202720" popover-foreground: "#EBF0E7" primary: "#5E9BA8" primary-foreground: "#071007" secondary: "#2B352B" secondary-foreground: "#EBF0E7" muted: "#2B352B" muted-foreground: "#989D93" accent: "#876AEC" accent-foreground: "#071007" destructive: "#E65F55" destructive-foreground: "#071007" border: "#3C453C" input: "#3C453C" ring: "#5E9BA8" chart-1: "#65B2C3" chart-2: "#5394A2" chart-3: "#91C8D5" chart-4: "#4F7983" chart-5: "#B5D8E0" typography: display-lg: fontFamily: Familjen Grotesk fontSize: 50px fontWeight: 700 lineHeight: 1.04 letterSpacing: -0.025em headline-lg: fontFamily: Familjen Grotesk fontSize: 29px fontWeight: 600 lineHeight: 1.18 letterSpacing: -0.012em headline-md: fontFamily: Familjen Grotesk fontSize: 18px fontWeight: 600 lineHeight: 1.32 body-lg: fontFamily: Familjen Grotesk fontSize: 15.5px fontWeight: 400 lineHeight: 1.58 body-md: fontFamily: Familjen Grotesk fontSize: 14px fontWeight: 400 lineHeight: 1.55 body-sm: fontFamily: Familjen Grotesk fontSize: 12.5px fontWeight: 400 lineHeight: 1.45 label-caps: fontFamily: Familjen Grotesk fontSize: 10px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.14em label-mono: fontFamily: Geist Mono fontSize: 12.5px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.01em numeral-xl: fontFamily: Geist Mono fontSize: 54px fontWeight: 500 lineHeight: 1 letterSpacing: -0.03em rounded: none: 0px sm: 3px md: 4px lg: 6px xl: 8px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 14px lg: 22px xl: 40px gutter: 14px margin: 22px measure: 64ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.sm}" padding: 10px button-ghost: backgroundColor: transparent textColor: "{colors.foreground}" rounded: "{rounded.sm}" padding: 10px card-panel: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 16px badge-label: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Meter Room ## Overview Meter Room watches buildings consume things. Its rule is unusual and it is the whole system: **a chart may never auto-scale to its data.** Every consumption chart in the library uses the same fixed y-scale for its unit, so two charts on two screens on two days can be compared by eye without reading an axis. Auto-scaling is the default in every charting library and it quietly destroys comparison: a quiet Sunday and a peak Tuesday both fill the frame, and the shape looks identical. Fixing the scale means a quiet day is a low trace with empty space above it — which looks worse, and is true. The scale per unit is declared once, in the theme, and every chart inherits it. A value that exceeds the fixed ceiling clips at the top and the clipped segment is drawn in violet, which is more informative than silently rescaling. Mint-grey plant room, steel blue plant, electric violet out of band. It is wrong for exploratory analytics, where the range genuinely is unknown. ## Colors A cold plant room, one blue for the plant, one violet for the exception. - **Ground:** mint-grey. Dark by default — these screens live on a wall. - **Primary (steel blue):** the plant. Every trace, every normal reading, every navigation element. - **Accent (electric violet):** a **bar**, used for the out-of-band segment of a trace, the exceedance marker, and the 4px bar on an alarming meter. Solved to 3:1 as a graphical object. It is deliberately the loudest colour available against a mint-grey ground. - **Neutrals** are mint-tinted with a large step (0.049), giving strong tier separation on a wall display seen from across a room. - Charts are monochrome plus the violet exception. There is no second series colour, because comparing two meters means putting two charts side by side on the same fixed scale, not overlaying them. ## Typography Familjen Grotesk for everything, Geist Mono for every reading. - **Display and body are one face.** Familjen Grotesk is a Swedish grotesque with slightly quirky details at large sizes and complete neutrality at small ones, which suits a system that is a wall display and a report. - **Geist Mono** for kWh, m³, kW, timestamps and meter serials. Every measured value, without exception. - **numeral-xl at 54px weight 500** is the current demand figure. On a wall display it is the only thing readable from the door and it is sized for that. - Uppercase at 0.14em for meter names, units and tariff bands. ## Layout **Fixed axes, side by side.** The comparison layout is the primary one: two to four charts in a row, each with the same y-axis, each labelled with its meter and period. There is no overlay mode. A meter tile is 320px wide: name in uppercase, current value in Geist Mono at numeral-xl, a 96px-tall trace on the fixed scale, and the tariff band beneath. Tiles are a uniform grid — this is a wall, and a wall is regular. Margins 22px, gutters 14px, at 1440px. Dense, but not as dense as the crane. ## Elevation & Depth Filled tiles with 1px borders and no shadow. Wall displays are viewed at an angle and shadows read as smudges. Traces redraw left to right at data speed. The axis never animates because the axis never changes — which is the visible proof of the system's central rule. ## Shapes Small radii — 3px on controls, 4px on tiles. Sober. Photography is cool-graded: plant rooms, pipework, meters, switchgear, cable trays. It appears on marketing and login only. ## Components - **Meter tile:** uppercase name, Geist Mono value at 54px, 96px trace on the fixed scale, tariff band label. Uniform size across the grid. - **Fixed-scale chart:** y-axis declared per unit in the theme, gridlines at fixed intervals, out-of-band segments in accent violet, clipped segments drawn at the ceiling in violet with a 2px cap. - **Comparison row:** two to four charts sharing one axis label at the left. No overlay, ever. - **Tariff band:** uppercase label on secondary with the rate in Geist Mono. - **Buttons:** steel blue fill, 3px radius, uppercase at 10px. ## Do's and Don'ts - Do declare the y-scale per unit and let every chart inherit it. - Do draw clipped values at the ceiling in violet rather than rescaling. - Do compare by placing charts side by side on the same axis. - Don't auto-scale any chart to its data. - Don't overlay two meters on one chart. - Don't add a shadow to a tile on a wall display. - Don't use a second series colour.