name: monochrome-grid-design
version: alpha
description: >
  A Swiss-style, near-monochrome enterprise database dashboard: an off-white
  canvas (#F8F9FA) with white cards, near-black slate ink (#111827 / #0F172A),
  and a disciplined grey hairline system (#E5E7EB). Color is almost absent —
  emerald (#10B981/#059669) is the only accent, reserved for positive deltas,
  health and "executing" status. Type pairs Inter (headings/numbers), DM Sans
  (body) and Fira Code (mono for IDs, SQL, metrics). The signatures are sharp
  zero-radius "swiss" cards with a hard 2–4px slate offset shadow, a slate
  heatmap grid, a bento capacity cluster, and a dark SQL snippet panel.
colors:
  # Brand / ink
  ink: '#111827'              # primary near-black (gray-900)
  slate-900: '#0F172A'        # borders + hard shadows + dark panels
  on-ink: '#FFFFFF'
  # Surface
  surface: '#F8F9FA'          # canvas
  surface-card: '#FFFFFF'     # cards
  surface-muted: '#F9FAFB'    # gray-50 wells, hover
  surface-dark: '#0F172A'     # SQL/capacity/audit dark panels
  on-dark: '#FFFFFF'
  on-dark-muted: '#94A3B8'    # slate-400 labels on dark
  # Text
  on-surface: '#111827'
  on-surface-secondary: '#6B7280' # gray-500
  on-surface-muted: '#9CA3AF'     # gray-400 captions
  # Hairlines
  border: '#E5E7EB'           # gray-200 dividers/card borders
  border-strong: '#0F172A'    # slate-900 emphasis borders
  # Semantic (the only color)
  success: '#10B981'          # emerald — health, executing, deltas
  success-strong: '#059669'   # emerald-600 text
  warn: '#D97706'             # amber-700 "Locked" status
typography:
  display:
    fontFamily: '"Inter", sans-serif'
    fontSize: 30px            # page h1 (text-3xl)
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  metric:
    fontFamily: '"Inter", sans-serif'
    fontSize: 30px            # stat numbers
    fontWeight: 700
  headline:
    fontFamily: '"Inter", sans-serif'
    fontSize: 18px            # card titles (text-lg)
    fontWeight: 700
  body:
    fontFamily: '"DM Sans", sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  mono:
    fontFamily: '"Fira Code", monospace'
    fontSize: 12px           # session IDs, SQL, metrics
    fontWeight: 400
  label:
    fontFamily: '"DM Sans", sans-serif'
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 0.1em      # uppercase column heads / eyebrows
rounded:
  none: 0px                   # swiss-border: enforced radius 0 on key cards
  sm: 6px                     # nav items, search, soft buttons
  md: 8px                     # secondary panels / pills
  full: 9999px                # status dots, avatars
spacing:
  # base unit = 4px; 12-col grid, gap-6/8
  sm: 16px
  md: 24px
  lg: 32px
components:
  card-swiss:
    background: '{colors.surface-card}'
    border: '1px solid {colors.slate-900}'
    rounded: '{rounded.none}'
    boxShadow: '2px 2px 0px 0px {colors.slate-900}'   # hard offset, no blur
    hover: 'bg {colors.surface-muted}'
  card-soft:
    background: '{colors.surface-card}'
    border: '1px solid {colors.border}'
    rounded: '{rounded.none}'
    boxShadow: 'sm'                                    # lighter list/table cards
  panel-dark:
    background: '{colors.surface-dark}'
    textColor: '{colors.on-dark}'
    boxShadow: '4px 4px 0px 0px rgba(15,23,42,0.3)'
  button-primary:
    background: '{colors.ink}'                          # black
    textColor: '{colors.on-ink}'
    rounded: '{rounded.sm}'
    boxShadow: '0 10px 15px rgba(0,0,0,0.15)'
    hover: 'bg neutral-800, active scale 0.95'
  status-pill:
    success: 'emerald-100 bg / emerald-700 text'
    warn: 'amber-100 bg / amber-700 text'
  heatmap:
    cells: 'slate ladder 100→200→300→400→600→700→800→900'  # load intensity
    cell: 'aspect-1, 1px rgba(0,0,0,0.03) border'
  status-dot:
    pulse: 'status-dot-pulse ring (emerald-400) over emerald-500'
  sparkline:
    stroke: 'black 2px, dash-in animation; gradient fill @ 0.05'
motion:
  signatures: 'dash 2s (sparkline draw), pulse-ring 1.5s (status dot)'
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont  # ti-database, ti-server, ti-shield-lock, ti-brand-postgresql
  style: line / outline
  colorRule: 'inherit slate ink; emerald only for positive/health'

Monochrome Grid — "DataCore"

Design spec — version alpha. Source: static HTML (monochrome-grid.html); tokens read from :root and component CSS. Fictional enterprise-database dashboard; described factually.

Overview

A Swiss-style, near-monochrome enterprise dashboard. The canvas is off-white {colors.surface} #F8F9FA with white cards and near-black slate ink ({colors.ink} #111827, {colors.slate-900} #0F172A), organized by a strict grey hairline system. Color is almost entirely absent — emerald {colors.success} #10B981 is the only accent, rationed for positive deltas, "Healthy"/"Executing" status and health metrics (amber appears once for a "Locked" state). Type is a precise trio: Inter (headings, stat numbers), DM Sans (body), Fira Code (mono for session IDs, SQL and metrics). The signature is the swiss-border card — radius forced to 0 with a hard 2px slate offset shadow (no blur) — alongside a slate heatmap grid, a bento capacity cluster, a dark SQL snippet panel, and an animated sparkline. It reads as rigorous, data-dense and typographic.

Colors

Ink & surfaces. {colors.ink} #111827 is the primary text/black-button color; {colors.slate-900} #0F172A is the border + hard-shadow + dark-panel color. Cards are {colors.surface-card} white on {colors.surface} canvas, with {colors.surface-muted} #F9FAFB wells/hover and dark {colors.surface-dark} #0F172A for SQL/capacity/audit panels.

Hairlines. {colors.border} #E5E7EB for light dividers/cards; {colors.border-strong} #0F172A for emphasized swiss cards.

Semantic (the only color). Emerald {colors.success} / {colors.success-strong} for health, executing status, deltas and the pulse dot; amber {colors.warn} #D97706 for the single "Locked" status. Discipline: greyscale everywhere, emerald only signals "good/active."

Typography

Inter for headings and tracking-tight numbers; DM Sans for body and uppercase labels; Fira Code for IDs, SQL and metric strings.

Token	Family	Size	Weight	Tracking	Usage
display	Inter	30px	700	-0.02em	Page h1 "System Overview"
metric	Inter	30px	700	normal	Stat numbers (24, 1.2 TB)
headline	Inter	18px	700	normal	Card titles
body	DM Sans	14px	400	normal	Body, descriptions
mono	Fira Code	12px	400	normal	Session IDs, SQL, metrics
label	DM Sans	10px	700	0.1em	Column heads, eyebrows

Layout

Base 4px on a 12-col grid. A 256px left sidebar (logo tile, grouped nav with a black active item, user card) beside a column with a sticky search header and a max-w-[1400px] main: a 4-up KPI row of swiss cards, then an 8/4 split — left has a recent-databases list, a 24-col performance heatmap, and an active-sessions table with an expandable dark SQL snippet; right is a bento capacity cluster (dark total tile, health ring, node/region stats), a sparkline CPU card, and a dark security-audit panel.

Elevation & Depth

Sharp and graphic. The hallmark is the hard offset shadow — 2px 2px 0 #0F172A on swiss cards, 4px 4px 0 rgba(15,23,42,0.3) on dark panels — with no blur. Lighter list/table cards use a soft shadow-sm. Depth is communicated through hairline grids, the heatmap's slate ladder, and inset dark panels rather than ambient shadow.

Shapes

Mostly sharp — swiss-border enforces radius 0 on KPI/heatmap/bento/audit cards. Small UI (nav items, search, soft buttons) use {rounded.sm} 6px or {rounded.md} 8px; status dots and avatars are {rounded.full}. The geometric philosophy is rectilinear and grid-locked.

Components

• card-swiss — white, 1px slate border, 2px hard offset shadow, radius 0; hover tints to #F9FAFB.
• card-soft — lighter list/table card with border-gray-200 + shadow-sm.
• panel-dark — slate-900 panel (SQL snippet, total capacity, audit) with 4px hard shadow.
• button-primary — black, white label, rounded-sm, soft drop shadow, press-scale.
• status-pill — emerald-100/700 (good) or amber-100/700 (locked) flat pills.
• heatmap — 24-col grid of square cells on a slate intensity ladder (100→900).
• sparkline — black 2px path with a dash-draw animation and faint gradient fill.

Motion

Minimal and precise: the sparkline draws via stroke-dashoffset (dash 2s ease-in-out), and the live status dot uses a pulse-ring 1.5s emerald ripple. Otherwise the UI is static with color-only hovers. (Transitions are globally disabled in the capture source, so timings are authored intent.)

Iconography

Tabler line icons (ti-database, ti-server, ti-shield-lock, ti-brand-postgresql/mysql, ti-activity), inheriting slate ink; emerald only on positive/health indicators; ~16–24px.

Do's and Don'ts

• Do keep the off-white/white/slate greyscale system with disciplined hairlines.
• Do reserve emerald for health, "executing"/positive states and deltas only.
• Do use swiss-border (radius 0) + hard 2px offset shadows on key cards.
• Do set IDs, SQL and metrics in Fira Code; numbers/headings in Inter.
• Don't introduce additional accent colors or soft/blurred shadows on swiss cards.
• Don't round the KPI/heatmap/bento cards — sharpness is the brand.
• Don't let emerald spread beyond status/positive semantics.

Known Gaps

• Values read from the implementation's resolved :root. Slate/emerald/amber steps use Tailwind's default scale. Copy, data and SQL are sample content; the source disables transitions globally.