DESIGN.md

version	alpha
name	Optical Research Console
description	A precise research instrument that remains calm and highly readable for long technical reports.
colors	primary secondary tertiary neutral surface rule signal evidenceText positive warning danger mediaBlack #071513 #536764 #007D78 #F3F7F6 #FFFFFF #C9D6D3 #16C8BD #C3FFF8 #117A4E #C88912 #C14343 #030A09
typography	h1 h2 body-md interface body-sm interface-sm label caption micro metadata fontFamily fontSize fontWeight lineHeight letterSpacing IBM Plex Sans Variable 6.6rem 620 0.94 -0.052em fontFamily fontSize fontWeight lineHeight letterSpacing IBM Plex Sans Variable 3rem 600 1 -0.035em fontFamily fontSize fontWeight lineHeight Newsreader Variable 1.125rem 400 1.8 fontFamily fontSize fontWeight lineHeight IBM Plex Sans Variable 1rem 400 1.6 fontFamily fontSize fontWeight lineHeight IBM Plex Sans Variable 0.94rem 400 1.65 fontFamily fontSize fontWeight lineHeight IBM Plex Sans Variable 0.8rem 400 1.6 fontFamily fontSize fontWeight lineHeight IBM Plex Sans Variable 0.78rem 650 1.2 fontFamily fontSize fontWeight lineHeight IBM Plex Sans Variable 0.7rem 400 1.5 fontFamily fontSize fontWeight lineHeight IBM Plex Mono 0.56rem 500 1.2 fontFamily fontSize fontWeight lineHeight letterSpacing IBM Plex Mono 0.625rem 500 1.2 0.08em
rounded	sm md lg focus mark inline code media 0px 0px 0px 0.125em 0.2em 0.35em 0.5em 0.6em
spacing	xs sm md lg xl 4px 8px 16px 32px 64px
components	filter-active evidence-label focus-control separator signal-label status-positive status-warning status-danger media-stage backgroundColor textColor rounded padding {colors.primary} {colors.neutral} {rounded.sm} 8px backgroundColor textColor typography rounded padding {colors.primary} {colors.evidenceText} {typography.metadata} {rounded.sm} 6px backgroundColor textColor rounded padding {colors.neutral} {colors.primary} {rounded.sm} 8px backgroundColor textColor rounded padding {colors.rule} {colors.primary} {rounded.sm} 4px backgroundColor textColor typography rounded padding {colors.primary} {colors.signal} {typography.micro} {rounded.sm} 4px backgroundColor textColor rounded padding {colors.positive} {colors.surface} {rounded.sm} 4px backgroundColor textColor rounded padding {colors.warning} {colors.primary} {rounded.sm} 4px backgroundColor textColor rounded padding {colors.danger} {colors.surface} {rounded.sm} 4px backgroundColor textColor rounded padding {colors.mediaBlack} {colors.evidenceText} {rounded.sm} 4px

Overview

Optical Research Console treats the progress archive as a scientific instrument, not a magazine and not a science-fiction dashboard. The primary surface is Monitor: readers scan current state, open investigations, and inspect evidence. Dense labels, calibrated rules, coordinate grids, and tabular numerals establish technical credibility; generous reading measures and a dedicated long-form serif preserve comfort.

Colors

• Primary is a deep green-black used for core text and the lead investigation slab.
• Neutral is a cool laboratory canvas rather than warm paper.
• Tertiary is the accessible interaction accent. Use it for links, focus, indices, and measured status.
• Signal is a brighter spectral cyan reserved for dark surfaces and evidence labels.
• Grid lines use a low-opacity mixture of Primary. They organize space but must never compete with text.
• Dark mode keeps the green-tinted optical character rather than becoming neutral charcoal.

Typography

• IBM Plex Sans Variable carries titles and interface copy. It feels engineered without sacrificing legibility.
• Newsreader Variable is reserved for long report bodies. Research findings should remain comfortable over thousands of words.
• IBM Plex Mono carries metadata, experiment IDs, dates, status, and tabular values. Never use mono for paragraphs.
• Headings are assertive but not monumental. The hierarchy comes from weight, alignment, and information density—not decorative display typography.

Layout

• Homepage: calibrated masthead, one dark lead investigation paired with primary evidence, then compact ruled archive rows.
• Entry: technical title field with subtle vertical coordinates, full-width evidence, then a 760px reading column.
• Imagery is evidence and should be shown large enough to inspect.
• Use square corners, hairline rules, and explicit alignment. Avoid floating cards and arbitrary elevation.
• Mobile preserves the reading sequence: status, title, evidence, report. Tables scroll horizontally rather than compressing numeric columns.

Elevation & Depth

No box shadows and no glass layers. Depth is communicated by ink-on-canvas contrast, full-bleed evidence, rules, and surface changes. The site should resemble a calibrated optical workstation rather than a stack of cards.

Shapes

Application chrome uses square corners. Small proportional radii in the inherited Typeset layer remain available for focus outlines, code, keys, and inline semantics. The only circles are semantic status indicators. The crosshair wordmark and corner registration marks are functional visual signatures for the research system.

Components

• Filters are outlined metadata controls; active filters invert to Primary.
• Evidence labels sit directly on dark image/video surfaces using Signal text.
• Status colors must accompany text labels and never communicate meaning alone.
• Focus states use Tertiary with sufficient contrast and must remain visible in both themes.

Do's and Don'ts

Do use spectral cyan sparingly, show real experiment outputs, favor tabular numerals, preserve article measure, and let rules establish structure.

Don't use neon-on-black for full articles, blue-violet gradients, glassmorphism, pill-shaped UI, fake telemetry, tiny decorative evidence, or mono body copy.