Skip to content

DESIGN.md

Latest commit

 

History

History
210 lines (189 loc) · 7.83 KB

DESIGN.md

File metadata and controls

210 lines (189 loc) · 7.83 KB
Raw
version alpha
name CounterLab Monochrome Instrument
description A black-first scientific workspace built from one white, one black, neutral depth, precise interface typography, and scarce evidence-state accents. The interface keeps one learner action dominant while technical authority stays available through progressive disclosure.
colors
canvas surface surface-soft control ink ink-soft line line-strong primary primary-active on-primary verified verified-soft prediction prediction-soft replay replay-soft danger danger-soft focus
#000000
#0a0a0a
#141414
#202020
#fafafa
#a1a1a1
#262626
#3d3d3d
#fafafa
#cfcfcf
#090909
#2ec4a0
rgba(46, 196, 160, 0.14)
#e0b356
rgba(224, 179, 86, 0.13)
#a79bff
rgba(167, 155, 255, 0.13)
#e5484d
rgba(229, 72, 77, 0.13)
#91b7ff
typography
display heading title body secondary label proof
fontFamily fontSize fontWeight lineHeight letterSpacing
Instrument Sans Variable, Avenir Next, sans-serif
64px
560
1.02
-2.4px
fontFamily fontSize fontWeight lineHeight letterSpacing
Instrument Sans Variable, Avenir Next, sans-serif
36px
560
1.12
-1px
fontFamily fontSize fontWeight lineHeight letterSpacing
Instrument Sans Variable, Avenir Next, sans-serif
20px
700
1.3
-0.2px
fontFamily fontSize fontWeight lineHeight letterSpacing
Instrument Sans Variable, Avenir Next, sans-serif
15px
450
1.6
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Instrument Sans Variable, Avenir Next, sans-serif
13px
500
1.5
0
fontFamily fontSize fontWeight lineHeight letterSpacing
SFMono-Regular, Consolas, Liberation Mono, ui-monospace, monospace
12px
700
1.4
1px
fontFamily fontSize fontWeight lineHeight letterSpacing
SFMono-Regular, Consolas, Liberation Mono, ui-monospace, monospace
13px
500
1.55
0
rounded
control card panel pill
10px
14px
18px
9999px
spacing
xs sm md lg xl xxl section
4px
8px
12px
16px
24px
32px
64px
components
learner-canvas evidence-sidebar evidence-sidebar-item card card-title secondary-copy section-label proof-drawer button-primary button-primary-active focus-ring verified-seal prediction-lock rejection-state
backgroundColor textColor typography padding
{colors.canvas}
{colors.ink}
{typography.body}
{spacing.xxl}
backgroundColor textColor typography padding
{colors.surface}
{colors.ink}
{typography.secondary}
{spacing.lg}
backgroundColor textColor typography rounded padding
{colors.surface-soft}
{colors.ink-soft}
{typography.secondary}
{rounded.control}
{spacing.md}
backgroundColor textColor typography rounded padding
{colors.surface}
{colors.ink}
{typography.body}
{rounded.card}
{spacing.xl}
backgroundColor textColor typography
{colors.surface}
{colors.ink}
{typography.title}
backgroundColor textColor typography
{colors.surface}
{colors.ink-soft}
{typography.secondary}
backgroundColor textColor typography
{colors.surface}
{colors.ink-soft}
{typography.label}
backgroundColor textColor typography
{colors.surface-soft}
{colors.ink-soft}
{typography.proof}
backgroundColor textColor typography rounded padding height
{colors.primary}
{colors.on-primary}
{typography.body}
{rounded.control}
{spacing.md} {spacing.lg}
44px
backgroundColor textColor
{colors.primary-active}
{colors.on-primary}
backgroundColor textColor rounded
{colors.focus}
{colors.on-primary}
{rounded.control}
backgroundColor textColor typography rounded
{colors.verified-soft}
{colors.verified}
{typography.label}
{rounded.pill}
backgroundColor textColor typography rounded
{colors.prediction-soft}
{colors.prediction}
{typography.label}
{rounded.pill}
backgroundColor textColor typography rounded
{colors.danger-soft}
{colors.danger}
{typography.secondary}
{rounded.card}

CounterLab Evidence Instrument

Direction

CounterLab should feel like a precise scientific instrument, not an agent dashboard and not a light product with dark paint applied. The learner works on a true-black field. Near-black surfaces, hairline gray borders, disciplined spacing, and high-contrast sans typography establish depth without card clutter or decorative glow.

White belongs to the dominant learner action. Blue is limited to the keyboard focus indicator. Gold marks what the learner committed, aqua marks what fixed computation verified, purple labels replay authority, and red appears only for rejected invariants or contradicted expectations. Semantic color never decorates unsupported claims.

Layout

  • Keep one dominant action in the main Experiment Theater.
  • Use one compact project-and-evidence rail on desktop. Do not show a permanent agent cockpit.
  • Keep Activity and Evidence & proof collapsed until the learner opens them or compilation needs attention.
  • Cards use sober 10–18 px geometry, fine borders, and shallow shadows. Avoid a wall of floating cards.
  • Preserve a minimum 15 px body, 13 px secondary text, 12 px labels, and 44 px interactive targets.
  • At 900 px and below, remove the persistent rail and let the learner canvas own the viewport.
  • At 390 px, stack quantitative comparisons and keep all tables or code excerpts scrollable within their own bounds.

Components and states

  • Primary buttons are rectangular white controls with black text and a 44 px minimum height. Pills are reserved for status.
  • Evidence cards pair a plain-language statement with an adjacent source reference; they do not decorate unsupported claims.
  • Verified seals use aqua only after technical and epistemic verification.
  • Prediction locks use gold and remain visibly immutable after commitment.
  • Rejected states use red without learner-blaming language and release no result.
  • The proof drawer contains schemas, events, hashes, command summaries, and verifier details. It is not the primary workspace.
  • Focus uses a high-contrast three-pixel ring with spacing from the component edge.

Motion

Use 160–240 ms opacity and transform transitions for drawers, focus changes, and stage entry. Preserve layout dimensions while loading. Disable nonessential motion for prefers-reduced-motion and never animate a result before signed data is available.

Inspiration synthesis

  • Apple informs the black field, exact type hierarchy, generous negative space, and preference for one obvious action.
  • Vercel informs monochrome surfaces, fine borders, compact geometry, white primary actions, and technical clarity without dashboard density.
  • ChatGPT informs the calm conversational entry and centered composer, without turning the scientific workflow into an unstructured chat transcript.
  • ClickHouse informs the use of real computed values and code-shaped evidence as visual proof, never abstract AI decoration.

Do

  • Show the real Question, Prediction, Test, controls, observable, and signed outcome.
  • Make evidence provenance available without forcing it into the learner's primary reading path.
  • Use spacing and typography before adding color or shadow.
  • Keep mode labels persistent and honest.
  • Keep quantitative visuals paired with accessible tables.

Do not

  • Do not create a permanent multi-agent cockpit.
  • Do not use decorative gradient blobs, glass-card walls, or generic AI illustrations.
  • Do not shrink labels below 12 px or secondary copy below 13 px.
  • Do not use red to judge a learner.
  • Do not imply live authority for sample or replay evidence.