name: northbeam-design
version: alpha
description: >
  Northbeam is a product-analytics dashboard rendered as a flat, ledger-like
  document on a warm off-white paper (`#FAFAF7`) ruled by hairline borders
  (`rgba(27,29,33,0.12)`). One electric blue voltage (`#2D5BFF`) carries every
  data mark — funnel bars, retention heatmap, adoption bars — while near-black
  ink (`#1B1D21`) handles text. Type is a three-face system: Archivo for display
  headings, Inter for body, and IBM Plex Mono with tabular numerals for every
  metric. There are zero rounded corners and zero shadows; structure comes
  entirely from divider grids. Numbers count up and bars draw in on load.
colors:
  # Brand / Voltage
  voltage: '#2D5BFF'          # the single accent: funnel bars, heatmap, adoption bars, conv % text, logo mark
  # Surface
  paper: '#FAFAF7'            # page background and funnel column fills
  card: '#FFFFFF'             # white panels (time-to-convert, retention, adoption)
  # Text / Ink
  ink: '#1B1D21'             # headings, body, primary numbers
  ink-muted: 'rgba(27,29,33,0.45)'   # labels, captions (also used at /40 and /30)
  ink-faint: 'rgba(27,29,33,0.06)'   # tint fills behind bars (used /[0.02], /[0.03], /[0.06])
  # Hairlines
  hair: 'rgba(27,29,33,0.12)'        # every border and grid divider
  # Semantic
  positive: '#19C37D'        # upward KPI deltas (▲)
  negative: '#FF5C5C'        # downward deltas (▼) and drop-off counts
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 19px
    fontWeight: 600
    letterSpacing: -0.01em
  display-strong:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 15px
    fontWeight: 700
    letterSpacing: -0.01em
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 500
  metric:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1
  label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:                      # there is no radius — everything is square
  none: 0px
spacing:                      # base unit 4px; common steps below
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 40px
components:
  header-button:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '1px solid {colors.hair}'
    rounded: '{rounded.none}'
    padding: '6px 16px'
  kpi-cell:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.metric}'
    border: '1px solid {colors.hair}'
    rounded: '{rounded.none}'
    padding: '32px 40px'
  panel:
    backgroundColor: '{colors.card}'
    textColor: '{colors.ink}'
    border: '1px solid {colors.hair}'
    rounded: '{rounded.none}'
  funnel-bar:
    backgroundColor: '{colors.voltage}'   # at per-stage opacity 0.92→0.22
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
  adoption-bar:
    backgroundColor: '{colors.voltage}'   # rgba(45,91,255,0.8)
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
motion:
  kpi-countup: 'KPI numbers animate 0→target over 600ms, ease outQuad (anime.js)'
  funnel-draw: 'funnel bars scaleY 0→1 over 700ms, ease outCubic, stagger 80ms start 150ms'
  adoption-draw: 'adoption bars width 0→target over 650ms, ease outQuad, staggered 60ms'
icons:
  library: inline unicode glyphs
  style: text characters (▲ ▼ ▾ −)
  color: '{colors.positive} / {colors.negative} / {colors.ink-muted}'

Northbeam

northbeam-design · alpha

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

Overview

Northbeam is a product-analytics dashboard styled as a precise paper ledger. The page sits on a warm off-white #FAFAF7 and is organized entirely by hairline rules — rgba(27,29,33,0.12) borders and divide-x/divide-y grids — with no rounded corners, no shadows, and no glass. A single electric blue voltage #2D5BFF carries all of the data: it draws the activation-funnel bars (stepping down in opacity from 0.92 to 0.22), the W0–W7 retention heatmap (a blue tint ramp from 0.08 to 0.9), the feature-adoption bars (rgba(45,91,255,0.8)), and inline conversion-percentage text. Near-black ink #1B1D21 does all the type. The signature move is its three-face typographic discipline: Archivo for display headings, Inter for the rare body line, and IBM Plex Mono with tabular numerals (.tnum) for every number on the page — KPIs render at a huge 44px mono, section labels at a tracked 10px uppercase mono. Green #19C37D and red #FF5C5C mark deltas. On load the KPI figures count up and the bars draw in.

Colors

Brand / Voltage. One accent only: voltage #2D5BFF. It is the funnel-bar fill (modulated by per-stage alpha), the retention heatmap base, the adoption-bar fill at 0.8 alpha, the conversion-% text, and the small square logo mark in the header.

Surface. paper #FAFAF7 is the page background and is reused as the fill of each funnel column. card #FFFFFF is the fill of the white panels (Median Time to Convert, Retention, Feature Adoption).

Text / Ink. ink #1B1D21 is heading, body, and primary-number color. ink-muted rgba(27,29,33,0.45) covers labels and captions; the same ink is used at /40 and /30 opacities for progressively fainter captions. ink-faint appears as tint fills behind bars at /[0.02], /[0.03], and /[0.06].

Hairlines. hair rgba(27,29,33,0.12) is the only structural color — every border, every grid divide-*, and the .hair utility class.

Semantic. positive #19C37D marks upward KPI deltas (▲); negative #FF5C5C marks downward deltas (▼) and the red drop-off counts under the funnel.

Typography

Three Google Fonts loaded via one @import: Archivo (.font-display, weights 400–700), Inter (.font-body, 400–600), and IBM Plex Mono (.font-mono, 400–600). The default page class is font-body (Inter). Mono is the workhorse — almost every numeral, label, and caption is Plex Mono with font-variant-numeric: tabular-nums (.tnum). Archivo appears only on section headings and panel titles. Closest open substitutes are all the originals (these are open-source Google Fonts).

Token	Size	Weight	Line-height	Tracking	Usage
display	19px	600	—	tight	Section headings ("Activation Funnel")
display-strong	15px	700	—	tight	Logo wordmark "Northbeam"
display (sm)	14px	600	—	—	Panel titles ("Median Time to Convert")
metric	34–44px	500	1	—	KPI numbers (mono, tabular)
funnel-num	24px	500	1	—	Funnel stage counts (mono)
label	10px	400	—	0.14–0.18em	Uppercase mono captions/labels
body	12px	400–600	—	—	Buttons, adoption feature names

Layout

Base unit 4px. The page is a single 1440px-max-width centered document (max-w-[1440px] mx-auto) with a stacked structure: header → KPI strip → main grid → footer, each section separated by a border-b hair. The KPI strip is a 2-up/4-up grid (grid-cols-2 lg:grid-cols-4) joined by divide-x divide-y hairlines. The main area is a 12-column grid (xl:grid-cols-12 gap-10) split 7/5: the activation funnel (5-column inner grid of stages) on the left, the retention heatmap and feature-adoption panels stacked on the right. Generous px-10 py-8/10 padding gives the document airy, account-statement whitespace. The funnel and heatmap scroll horizontally inside overflow-x-auto wrappers on narrow viewports.

Elevation & Depth

Completely flat. There are no box-shadows, no backdrop-filter, and no glows. All depth and separation come from 1px hairline borders (rgba(27,29,33,0.12)) and divider grids, plus very light tint fills (bg-[#1B1D21]/[0.02] behind funnel bars, /[0.06] behind adoption tracks). Layering reads as a printed ledger, not a stack of cards.

Shapes

Strictly rectangular. Every surface — buttons, KPI cells, panels, bars, the logo mark — has border-radius: 0. There are no pills and no soft corners anywhere. The sharp geometry is the system's identity.

Components

• Header button — paper fill, 1px hair border, mono uppercase label (RANGE, SEGMENT) plus a value and a ▾ glyph; hover tints bg-[#1B1D21]/[0.03]; buttons sit flush against each other (shared borders).
• KPI cell — paper fill in a 4-up divided grid; 10px tracked mono uppercase label over a 34–44px mono number with a colored delta (green/red) right-aligned.
• Panel — white (#FFFFFF) card bounded by hair, with a border-b hair title row (Archivo title + mono uppercase tag) over a body region.
• Funnel column — 340px-tall paper cell holding label, count, conversion %, and a 170px blue bar (draw-bar) whose height = relative count and whose opacity steps 0.92→0.22 down the funnel.
• Drop-off row — small red mono "−N" counts ("entry" under the first stage).
• Retention heatmap — mono 10px grid, row labels + W0–W7 columns, each cell filled with rgba(45,91,255, opacity) and text flipping to paper at high values; legend ramps 0%→100%.
• Adoption bar — feature name (12px Inter 500), a 2px-tall track on ink/[0.06], a blue (0.8) fill, and a right-aligned mono %.

Motion

Driven by anime.js (animejs@4 via esm.sh), all on window load. KPI numbers count up 0→target over 600ms ease outQuad (formatted as int / pct / pctint). Funnel bars animate scaleY 0→1 over 700ms ease outCubic with an 80ms stagger starting at 150ms (the "spilling-sand" reveal). Adoption bars grow width 0→target% over 650ms ease outQuad, staggered 60ms each. No looping or hover-triggered motion.

Iconography

No icon library. Iconography is unicode text glyphs only: ▲ (up delta, green), ▼ (down delta, red), ▾ (dropdown chevron, muted ink), and − (drop-off minus, red). All are inline characters sized via surrounding mono type; the small square-in-square logo mark is built from two divs, not an icon.

Do's and Don'ts

• Do keep one voltage (#2D5BFF) for all data marks and modulate it by opacity rather than introducing new hues.
• Do render every number in IBM Plex Mono with .tnum tabular numerals.
• Do build structure from 1px hairline borders and divider grids.
• Don't add rounded corners, shadows, or glass — the system is flat and square.
• Don't let display (Archivo) creep onto numbers, or mono onto headings.
• Don't introduce a second accent color; green/red are deltas only.

Known Gaps

• Heatmap cell colors are computed at runtime from a decay formula (100*0.78^c …), so individual cell alphas (0.05–0.95) are generated, not fixed tokens; the 0.08/0.25/0.45/0.68/0.9 legend stops are the authored ramp.
• Funnel bar heights are data-derived percentages; per-stage opacities (0.92, 0.74, 0.56, 0.38, 0.22) come from the stage data array.
• letterSpacing: -0.01em for display tokens approximates Tailwind's tracking-tight; spacing steps are inferred from the px values actually used.