name: graphite-paper-design
version: alpha
description: >
  A terminal-meets-newsprint tech magazine: a flat graphite-alabaster paper
  canvas (#E5E4E2) with onyx ink (#111111) and a single phosphor-green CRT
  accent (#00FF41). The entire UI is monospaced (IBM Plex Mono) for body/labels
  with a heavy Space Grotesk black display for headlines, set in a rigid
  bordered editorial grid (8px black rules, sidebar + main). Hard offset black
  shadows (8px 8px 0), scanline and CRT-dot overlays, blinking terminal cursors
  and a live log marquee give it a hacker-console personality.
colors:
  # Brand
  ink: '#111111'               # onyx — text, borders, fills (the dominant color)
  on-ink: '#FFFFFF'
  accent: '#00FF41'            # phosphor green — status, highlights, hovers
  on-accent: '#111111'
  # Surface
  surface: '#E5E4E2'           # alabaster/graphite paper canvas
  surface-card: '#FFFFFF'      # cards / metric panels
  surface-invert: '#111111'    # black header bars, image wells, footer
  # Text
  on-surface: '#111111'
  on-surface-muted: 'rgba(17,17,17,0.6)' # opacity-40/60 mono captions
  # Semantic (log severities)
  warn: '#EAB308'             # yellow-500 WARN
  critical: '#DC2626'         # red-600 CRITICAL / system alert
typography:
  display:
    fontFamily: '"Space Grotesk", sans-serif'
    fontSize: 128px            # masthead h1 (text-8xl)
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.05em     # tracking-tighter, UPPERCASE
  headline:
    fontFamily: '"Space Grotesk", sans-serif'
    fontSize: 36px             # article h4 (text-3xl/4xl)
    fontWeight: 900
    lineHeight: 0.9
    textTransform: uppercase
  body-mono:
    fontFamily: '"IBM Plex Mono", monospace'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  label-mono:
    fontFamily: '"IBM Plex Mono", monospace'
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 0.1em       # uppercase IDs, timestamps, tags
rounded:
  none: 0px                    # sharp, print-grid aesthetic
spacing:
  # base unit = 4px; rigid 8px black rule grid
  sm: 16px
  md: 32px
  lg: 48px
components:
  card-article:
    background: '{colors.surface-card}'
    border: '4px solid {colors.ink}'
    rounded: '{rounded.none}'
    boxShadow: '8px 8px 0px 0px {colors.ink}'      # hard-shadow
    hover: 'translate(-4px,-4px), title → {colors.accent}'
  card-header-bar:
    background: '{colors.ink}'
    textColor: '{colors.on-ink}'
    font: '{typography.label-mono}'                # MODULE / ID / PRIORITY strip
  button-primary:
    background: '{colors.ink}'
    textColor: '{colors.on-ink}'
    border: '2px solid {colors.ink}'
    boxShadow: '8px 8px 0px 0px {colors.ink}'
    hover: 'bg {colors.accent}, text {colors.ink}'
    cursor: 'blinking terminal-cursor block'
  tag:
    background: '{colors.ink}'
    textColor: '{colors.accent}'                   # "#QUANTUM_ENG"
    font: '{typography.label-mono}'
  status-pill:
    border: '2px solid {colors.ink}'
    variants: 'green NODE:ONLINE / black AUTH / red CRITICAL'
  metric-bar:
    track: '1px ink border'
    fill: '{colors.ink}'                           # CPU/MEM load bars
motion:
  signatures: 'scan 12s linear (scanline), blink 1s step-end (cursor), marquee 60s linear (log ticker), animate-ping/pulse status'
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont   # ti-terminal, ti-microchip, ti-antenna, ti-alert-triangle
  style: line / outline
  colorRule: 'inherit ink; accent green inside black wells'

Graphite Paper — "TECH_ED"

Design spec — version alpha. Source: static HTML (graphite-paper.html); tokens read from :root and component CSS. Fictional tech-news/terminal brand; described factually.

Overview

A terminal-meets-newsprint tech magazine. The canvas is flat graphite-alabaster paper ({colors.surface} #E5E4E2), inked in onyx {colors.ink} #111111 which doubles as the border and fill color throughout. The single accent is phosphor green {colors.accent} #00FF41 — status badges, tags, hover states and the blinking terminal cursor — evoking an old CRT console. The whole interface is monospaced (IBM Plex Mono) for body, labels, IDs and timestamps, with a heavy Space Grotesk black display for the masthead and article headlines. Structure is a rigid editorial grid bounded by 8px black rules (masthead, left metrics sidebar, main feed). Depth is hard offset black shadows (8px 8px 0). Atmospheric overlays — a moving scanline, a CRT dot-grid, and a bottom live-log marquee — reinforce the hacker-console mood.

Colors

Brand. Onyx {colors.ink} #111111 is the dominant color — text, every border, header bars, image wells and footer. Phosphor green {colors.accent} #00FF41 is the lone accent: NODE: ONLINE badges, #TAG chips (green-on-black), button hovers and the blinking cursor.

Surfaces. Paper {colors.surface} #E5E4E2, white cards {colors.surface-card}, inverted black bars/wells ({colors.surface-invert}).

Semantic (log feed). Yellow {colors.warn} #EAB308 = WARN, red {colors.critical} #DC2626 = CRITICAL/alert; green = INFO. These appear in the ticker and on the "system alert" article card.

Typography

Space Grotesk (900, uppercase, tight) for masthead and article headlines; IBM Plex Mono for everything else — body, captions, IDs, timestamps, metrics.

Token	Family	Size	Weight	Tracking	Usage
display	Space Grotesk	128px	900	-0.05em	Masthead "TECH_ED"
headline	Space Grotesk	36px	900	tight	Article titles (uppercase)
body-mono	IBM Plex Mono	14px	400	normal	Article body
label-mono	IBM Plex Mono	10px	700	0.1em	IDs, tags, timestamps, status

Layout

Base 4px on a rigid 8px-rule grid. A full-width masthead (logo tile + session IDs left, date/auth badges right) sits over a 12-col body: a 2-col metrics sidebar (categories nav + CPU/MEM load bars) beside a 10-col main, which holds a split hero (text + image well) and a DATA_FEED of bordered article cards (one wide 2-col feature + smaller cards, including a black "critical alert" card). A sticky black log-ticker footer marquees severity-tagged events.

Elevation & Depth

Flat print aesthetic with hard offset shadows (8px 8px 0 #111, 4px 4px 0 small). No blur or gradient on chrome. Layering reads through black rules, inverted header strips inside cards, and the scanline/CRT-dot overlays floating above.

Shapes

Sharp radius 0 everywhere — the look is rules, boxes and bars. Only avatars and small status dots are circular.

Components

• card-article — white, 4px border, 8px hard shadow, black MODULE/ID/PRIORITY header strip, footer meta row; hover lifts and turns the title green.
• button-primary — black fill, white mono label, 8px shadow, hover → green; trailing blinking cursor block.
• tag — green text on black mono chip (#QUANTUM_ENG).
• status-pill — bordered variants (green ONLINE, black AUTH, red CRITICAL).
• metric-bar — thin black-bordered track with a solid ink fill (CPU/MEM load).

Motion

CRT/terminal signatures: a scanline sweeps (scan 12s linear), the cursor blinks (blink 1s step-end), the footer log ticker marquees (60s linear), and live dots animate-ping/pulse. (Transitions are globally disabled in the capture source, so timings are the authored intent.)

Iconography

Tabler line icons (ti-terminal, ti-microchip, ti-antenna, ti-alert-triangle), inheriting ink, switching to green inside black wells. Sizes ~20–40px.

Do's and Don'ts

• Do keep the graphite-paper canvas with onyx ink as both text and borders.
• Do reserve phosphor green for status, tags, hovers and the cursor.
• Do set body/labels in IBM Plex Mono and headlines in heavy uppercase Space Grotesk.
• Do use hard offset shadows and the rigid 8px black-rule grid.
• Don't round corners or add soft shadows/gradients.
• Don't use green for long-form text; it's an accent only.
• Don't drop the scanline/CRT overlays — they carry the terminal mood.

Known Gaps

• Values read from the static implementation's resolved :root. Severity colors (yellow/red) are Tailwind defaults used in the log feed. Copy/imagery are sample content.