Understory Array

About Understory Array

Overview

Understory Array is for analysts, researchers and operators who watch emissions, sensor networks and energy models for hours at a time. It is dark-first because dashboards stay open on secondary screens. It is compact because the job is comparing many numbers at once: 32px controls, 28–32px table rows, 16px card padding. The target feel is an instrument panel: exact, quiet, and legible at 12–14px.

Color

One action color, Signal Green (OKLCH hue ≈150), carries primary, ring and selected states. Light mode uses brand.700 #0f7144 (6.1:1 with white primary-foreground, 5.5:1 on background) and dark mode uses brand.400 #3ecf82 with brand.950 text (8:1). Brand.400 is bright but not neon. Neutrals are blue-green slates at hue ≈195 with low, even chroma, so green accents and chart series sit on a related ground. Success is teal-green (hue ≈175), close in temperature to the brand but separate from primary. Warning is amber, and destructive is crimson (danger.600 light, danger.400 dark). Destructive sits at hue ≈15, far from primary green in both modes. Input borders use neutral.500 in both modes so field edges reach 3:1 against the page. Dark mode is the reference design: neutral.950 page, neutral.900 card, neutral.800 muted and secondary.

Typography

Atkinson Hyperlegible is used for display and UI text. Its distinct 1/l/I and 0/O shapes stay clear in dense tables. Use only its shipped weights, 400 and 700. JetBrains Mono at 400/500 sets sensor IDs, coordinates, units and code. The scale steps by about 1.25 from a 14px body: 12, 13, 14, 16, 18, 22, 28, 36. Every line height lands on the 4px grid: body-md 14/20, body-lg 16/24, heading-md 18/24, heading-lg 22/28, display-md 28/32, display-lg 36/40. Letter spacing tightens as size grows, from -0.022em at 36px to 0 at 14px and below. Caption opens up to +0.01em. Enable tabular figures on every numeric column.

Layout

Compact density on a 4px base grid. Controls are 32px tall and table rows are 28–32px. Cells use space.2 (8px) padding and cards use space.4 (16px). Divide regions with 1px border lines instead of extra whitespace. Page content can run full width with 12–16px gutters.

Elevation

Almost flat. Surfaces step up in neutral value: 950 page, 900 card, 800 raised and muted. They are separated by 1px border. Cards use only shadow.sm. Use shadow.md for menus and popovers and shadow.lg for dialogs. All shadows are dark and tight.

Shapes

Small radii keep edges crisp: radius.sm 2px for badges and chips, radius.md 4px for buttons and inputs, radius.lg 6px for cards. radius.xl 10px is for dialogs only. radius.full is only for status dots and count badges.

Do

• Design in dark mode first, then verify light. Use background (neutral.950) for the page, card (neutral.900) for cards and muted (neutral.800) for table header rows.
• Apply font-variant-numeric: tabular-nums to every number in tables, stat tiles and chart axis labels. Right-align numeric columns.
• Keep button and input at 32px height and table rows at 28–32px. Use space.2 (8px) horizontal padding inside cells.
• Separate regions with a 1px border token instead of extra padding or shadow.
• Use one primary button (brand.700 light, brand.400 dark) per view. Make other actions secondary or ghost.
• Show focus with a 2px ring token outline at 2px offset on every interactive element, including table rows that open detail panels.
• Set sensor IDs, coordinates and units in JetBrains Mono using the code style (13/20, weight 400). Use weight 500 only for the selected or active value.
• Use display-lg (36px) only for single headline KPIs. Page titles use heading-lg (22px) and card titles use heading-sm (14px, weight 700).

Don’t

• Don't use primary green to mean 'good' or 'low emissions'. Use the success token (teal-green) with a label.
• Don't put shadow.md or shadow.lg on cards. Use shadow.md for menus and popovers and shadow.lg for dialogs.
• Don't use radius above radius.lg (6px) on cards or controls. Only badges and status dots may use radius.full.
• Don't set body text below 13px (body-sm) or captions below 12px. Use Atkinson Hyperlegible at weights 400 and 700 only.
• Don't use pure black (#000) backgrounds. Use neutral.950 so neutral.800 borders and neutral.900 cards stay visible.
• Don't use destructive crimson for warnings. Warnings use warning tokens: warning.200 fill in light, warning.400 fill in dark.
• Don't use input borders lighter than neutral.500. Field edges must stay at 3:1 or more against background.
• Don't rely on proportional figures in data columns. They misalign digits across rows.