DESIGN.md

name	Helmryth
description	A light-first editorial instrument panel for persistent, accountable digital operators.
colors	canvas canvas-muted surface surface-raised surface-sunken ink ink-soft ink-faint rule rule-strong command command-hover command-soft signal signal-soft success success-soft warning warning-soft danger danger-soft focus oklch(0.974 0.012 83) oklch(0.948 0.016 83) oklch(0.988 0.008 83) oklch(0.997 0.004 83) oklch(0.925 0.018 83) oklch(0.245 0.025 255) oklch(0.425 0.024 255) oklch(0.585 0.020 255) oklch(0.835 0.020 83) oklch(0.690 0.025 83) oklch(0.565 0.185 32) oklch(0.505 0.178 32) oklch(0.925 0.045 32) oklch(0.500 0.105 195) oklch(0.915 0.040 195) oklch(0.535 0.120 150) oklch(0.930 0.040 150) oklch(0.49 0.115 75) oklch(0.940 0.050 78) oklch(0.545 0.190 24) oklch(0.925 0.050 24) oklch(0.500 0.105 195)
typography	display title heading body body-sm label fontFamily fontSize fontWeight lineHeight letterSpacing Geologica 2rem 620 2.25rem -0.035em fontFamily fontSize fontWeight lineHeight letterSpacing Geologica 1.25rem 590 1.55rem -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Geologica 1rem 580 1.3rem -0.012em fontFamily fontSize fontWeight lineHeight Atkinson Hyperlegible Next 0.9375rem 400 1.4rem fontFamily fontSize fontWeight lineHeight Atkinson Hyperlegible Next 0.8125rem 400 1.15rem fontFamily fontSize fontWeight lineHeight letterSpacing Atkinson Hyperlegible Next 0.6875rem 650 0.9rem 0.075em
rounded	xs sm DEFAULT md lg full 0.1875rem 0.375rem 0.5rem 0.75rem 1rem 9999px
spacing	unit xs sm md lg xl 2xl 3xl 4xl 4px 4px 8px 12px 16px 24px 32px 48px 64px
components	panel button-primary button-secondary field operator-sigil gate backgroundColor textColor borderColor rounded padding {colors.surface} {colors.ink} {colors.rule} {rounded.md} {spacing.xl} backgroundColor textColor typography rounded height padding {colors.command} {colors.surface-raised} {typography.body-sm} {rounded.sm} 36px 0 16px backgroundColor textColor borderColor typography rounded height padding {colors.surface-raised} {colors.ink} {colors.rule-strong} {typography.body-sm} {rounded.sm} 36px 0 16px backgroundColor textColor borderColor typography rounded height padding {colors.surface-raised} {colors.ink} {colors.rule} {typography.body} {rounded.sm} 38px 0 12px backgroundColor textColor borderColor rounded {colors.signal-soft} {colors.signal} {colors.rule} {rounded.sm} backgroundColor textColor borderColor rounded padding {colors.warning-soft} {colors.ink} {colors.warning} {rounded.md} {spacing.lg}

Brand & Style

Helmryth is a light-first operating surface for autonomous work. Its identity combines the precision of an instrument panel with the humanity of an annotated field notebook. The interface is dense enough for serious work but never visually anxious. The memorable element is the score line: a fine, living signal connecting operators, gates, tools, and outcomes.

The master tagline is “The work moves. You hold the helm.” Supporting copy is factual and active: persistent operators, real tools, visible decisions.

Colors

Warm mineral neutrals dominate. Vermilion is command: selected actions, consequential buttons, and the Helmryth mark. Petrol is signal: connected, live, streaming, or focused. Neither accent may become a page background. Semantic fills are pale and bordered; status must also include iconography or text.

Dark mode is not part of the initial Helmryth identity. Never use pure black, pure white, purple-blue gradients, neon, or glow.

Typography

Geologica gives headings a shaped, engineered voice; Atkinson Hyperlegible Next keeps long workstreams readable and accessible. Product UI uses a five-step hierarchy, not a cloud of near-identical text sizes. Labels may use uppercase only when shorter than three words.

Do not use Inter, system UI, Space Grotesk, Instrument Sans, monospace-as-technology, gradient text, or oversized marketing typography inside the application.

Layout & Spacing

The application uses an asymmetric three-zone shell: a narrow score rail, a flexible roster/workstream column, and an optional trace/workbench surface. Separation comes from fine rules and rhythm, not nested cards. Use the 4px spacing system and favor gap over margins.

On narrow screens, the score rail becomes a compact bottom score and secondary surfaces become full-screen sheets. No critical action disappears.

Elevation & Depth

Depth is quiet and physical. Use a 1px warm rule, a subtle tonal surface shift, and at most one low-opacity shadow for floating menus. Modals are reserved for destructive confirmation, authentication, or truly blocking gates. No glassmorphism or decorative blur.

Shapes

Corners are tailored rather than pillowy: 6px controls, 8–12px work surfaces, pills only for compact state chips. The Helmryth mark and operator sigils use square geometry, clipped corners, and braided diagonals. Avatars are abstract instruments, never faces, animals, blobs, or placeholder initials in circles.

Components

Score Rail

The score rail is the primary global navigation. Each destination pairs a line icon with a direct Helmryth term: Roster, Crews, Cadences, Capabilities, Operations map, and System. Active state uses ink weight, a small vermilion notch, and an accessible label—not a glowing background.

Operator Sigils

Every operator receives a deterministic sigil composed from a frame, weave, and pulse. Activity changes the pulse pattern and accessible status label, not the identity. User-supplied portraits remain supported but are cropped into the same tailored frame.

Workstreams

Messages sit directly on the canvas with alternating alignment, measured line length, and sparse tonal plates. Tool activity, files, decisions, and gates use distinct document-like structures. Avoid generic rounded chat bubbles for every event.

Gates

Gates state the requested action, resource, consequence, and requesting operator before controls. “Allow once” is the emphasized action; persistent grants are progressively disclosed.

Empty States

Every empty state teaches one concrete next action and shows an example grounded in the current surface. Never use “Nothing here yet,” generic sparkle art, or fake sample metrics.

Do's and Don'ts

• Do make running work, waiting work, and blocked work distinguishable without color.
• Do use precise, accountable language and visible consequences.
• Do preserve keyboard operation, focus visibility, reduced motion, and 4.5:1 text contrast.
• Do keep legal attribution and third-party notices accurate.
• Don't use “bot,” “assistant,” “copilot,” “AI-powered,” “supercharge,” “unlock,” or “magic” in product copy.
• Don't use sigil faces, emoji icons, card grids, glass, glow, dark command-center styling, or purple-blue gradients.
• Don't hide complexity behind vague labels; use progressive disclosure with exact wording.