md_to_gost/NewGUI/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
GhostEditor Desktop	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #0b1326 #0b1326 #31394d #060e20 #131b2e #171f33 #222a3d #2d3449 #dae2fd #bdc8d1 #dae2fd #283044 #87929a #3e484f #7bd0ff #8ed5ff #00354a #38bdf8 #004965 #00668a #c0c1ff #1000a9 #3131c0 #b0b2ff #56e5a9 #003824 #30c88f #004e34 #ffb4ab #690005 #93000a #ffdad6 #c4e7ff #7bd0ff #001e2c #004c69 #e1e0ff #c0c1ff #07006c #2f2ebe #6ffbbe #4edea3 #002113 #005236 #0b1326 #dae2fd #2d3449	headline-lg headline-md headline-sm body-lg body-md body-sm code-editor code-gutter label-md label-sm status-indicator fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 18px 600 24px -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 15px 600 20px -0.005em fontFamily fontSize fontWeight lineHeight Space Grotesk 13px 500 18px fontFamily fontSize fontWeight lineHeight Inter 13px 400 20px fontFamily fontSize fontWeight lineHeight Inter 12px 400 18px fontFamily fontSize fontWeight lineHeight Inter 11px 400 16px fontFamily fontSize fontWeight lineHeight JetBrains Mono 13px 400 22px fontFamily fontSize fontWeight lineHeight JetBrains Mono 11px 400 22px fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 11px 500 14px 0.02em fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 10px 500 12px 0.03em fontFamily fontSize fontWeight lineHeight JetBrains Mono 10px 600 12px	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	gutter-xs gutter-sm gutter-md gutter-lg panel-padding-compact panel-padding-default window-bar-height status-bar-height sidebar-min-width sidebar-default-width sidebar-max-width page-canvas-padding 0.25rem 0.5rem 0.75rem 1rem 0.375rem 0.75rem 2.25rem 1.625rem 15rem 18rem 26rem 2rem

Brand & Style

This design system defines an engineering-grade, native-feeling desktop IDE engineered specifically for rigorous academic, standard-compliant (ГОСТ / md2gost), and technical document authoring.

Personality & Tone

• Precision-Engineered: Every line, margin, and rule feels calibrated with CAD-like certainty. There are no ornamental flourishes or arbitrary paddings.
• Academic Authority Meets Modern Tooling: Bridges the gap between contemporary developer tooling (VS Code, Obsidian) and the strict, formal demands of state academic and technical publishing standards.
• Unobtrusive Immersion: The dark UI recedes into the background, leaving center stage for high-contrast, mathematically correct A4 sheet previews and clean markdown source code.

Design Style Movement

• Technical Studio Minimalism with Skeuomorphic Document Fidelity: A high-density dark workspace environment composed of tonal layers, precise 1px borders, and low-saturation slate panels. This directly contrasts with an authentic physical paper canvas viewport simulating A4 aspect ratios, metric margins, and physical paper drop shadows.

Colors

The palette establishes an ergonomic, fatigue-reducing environment for long-form writing and technical auditing.

Palette Roles

• Primary (#38bdf8 - Sky Blue): Active cursor cues, focused outline nodes, live sync indicators, and interactive syntax tokens.
• Secondary (#6366f1 - Indigo): Structural elements, secondary selection bounds, active tabs, and git branch states.
• Tertiary / Success (#10b981 - Emerald): Passed ГОСТ compliance rules, healthy compilation states, and PlantUML render success.
• Warning (#f59e0b - Amber): Lint warnings, missing references, table overflow notices, and unformatted bib items.
• Critical / Error (#f43f5e - Rose): ГОСТ structural violations, syntax errors, and missing image anchors.
• Neutrals (Slate Tiers):
  • Deepest Base (#0b0f19): Main application backdrop, title bar, and canvas workspace gutter.
  • Surface Level 1 (#0f172a): Primary sidebars, status bar, and panel trays.
  • Surface Level 2 (#1e293b): Active pane backgrounds, editor gutters, and menu flyouts.
  • Borders & Dividers (#334155): Strict 1px panel separations and tab dividers.
  • Muted Text (#64748b): Line numbers, metadata tags, and disabled states.
  • Primary UI Text (#f1f5f9): High-legibility UI labels, inspector values, and navigation titles.

Document Preview Isolation

• Paper Canvas (#ffffff): Pure print white, explicitly decoupled from the UI theme.
• Paper Ink (#000000 to #111827): High-density text reproduction conforming to strict print standards.

Typography

The type system separates application chrome, markdown code editing, and compiled document rendering into three distinct semantic layers:

1. Application Shell (Space Grotesk & Inter): Space Grotesk provides structured, technical authority to section headers, panel drawers, and modal dialogs. Inter maintains neutral, uncompromised legibility for inspector panels, tree views, and configuration screens.
2. Editor Core (JetBrains Mono): Dedicated to the markdown source pane, status metrics, and terminal diagnostics. It uses ligatures, fixed character bounds, and balanced punctuation to keep dense markdown, LaTeX math equations, and ГОСТ macro tags aligned.
3. Print Output Pane (Independent Document Engine): The live ГОСТ preview bypasses application UI font rules entirely. It renders in true Times New Roman (or standard metrically equivalent Liberation Serif fallback) with explicit 14pt sizing, 1.5 line pitch, and standard 1.25cm paragraph indents as required by standard specifications.

Layout & Spacing

This layout uses a continuous, rigid docked IDE grid without floating fluid gutters. The viewport is divided into distinct, resizable operational sectors:

Grid & Pane Distribution

• Top Window Bar (36px): Native OS controls, project switcher, build trigger, and quick layout toggles.
• Left Tool Palette & Sidebar (Collapsible, 240px–416px): Accommodates file navigation, ГОСТ table-of-contents hierarchy, diagnostics inspector, and diagram snippets.
• Center Editor Workcell (Split 50/50 Default):
  • Left Sub-cell (Source): Full-bleed markdown code buffer with fixed line gutters and diagnostic minimap.
  • Right Sub-cell (Canvas): Dark virtual desk (#0b0f19) containing an A4 sheet rendered to scale (ratio 1:1.414) with dynamic zoom levels.
• Bottom Status Ribbon (26px): Persistent hardware and compilation state (active ГОСТ profile, word/page totals, syntax engine, PlantUML daemon state).

Spacing Rules

• UI density is compact; standard horizontal padding between metadata elements is 6px to 8px.
• Pane splitters are 1px visual rules backed by a 5px interactive hit zone.
• Paper canvas maintains an isolated virtual viewport with centered dynamic padding (minimum 32px on all sides) to preserve document boundary clarity.

Elevation & Depth

This system avoids expressive blur-heavy shadows in the application chrome, relying instead on mechanical surface layering and razor-sharp separation:

Tonal Hierarchy

• Level 0 (App Shell/Workspace Cavity): #0b0f19 — the deepest recessed floor, visible beneath the canvas and title bar.
• Level 1 (Side Panels & Status Bar): #0f172a — anchored static modules, bordered with 1px #334155 solid strokes.
• Level 2 (Active Editor & Tool Panels): #1e293b — interactive focal spaces.
• Level 3 (Overlays & Menus): #1e293b with a 1px border of #475569 and a precise drop shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.5).

Document Skeuomorphism

The central preview pane treats the A4 sheet as a tangible physical substrate:

• Sheet Surface: Solid #ffffff.
• Sheet Elevation: A layered, neutral shadow that conveys true physical weight:
  • box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 32px -4px rgba(0, 0, 0, 0.65);
• Page Breaks: Explicit 16px gap between consecutive A4 sheets in continuous preview mode, showing paper borders and cut lines.

Shapes

The design system uses a strict Soft (roundedness: 1) geometric model to preserve an industrial, engineering-focused look.

Radii Tokens

• Base (0.25rem / 4px): Form inputs, buttons, status chips, inspector rows, and tree nodes.
• Large (0.5rem / 8px): Dialog windows, hover popovers, and quick-picker modals.
• Zero (0px): Editor panes, status bar, title bar, tabs, preview paper, and pane divider rails.

Sharp geometric discipline ensures that nested panels lock cleanly into the desktop frame without wasteful dead corner space.

Components

Action Controls (Buttons)

• Primary Action (e.g., "Build PDF / ГОСТ"): Solid #38bdf8 fill, #0f172a bold text, 4px corner radius, 28px height. Focus states apply a 2px outer ring in #38bdf8 with 2px offset.
• Secondary / Ghost Action: Flat background with a 1px #334155 border, #f1f5f9 text, transitioning to #1e293b fill on hover.
• Icon Quick-actions: 24x24px bounds, 0px border, transparent background, #94a3b8 icon fill, transitioning to #ffffff with a #334155 background on hover.

Status Indicators & Badges

• Format Audit Badges: Monospace text in 10px uppercase, padding 2px 6px, radius 2px.
  • Compliant: #10b981 text over rgba(16, 185, 129, 0.1) background with rgba(16, 185, 129, 0.25) border.
  • Non-compliant: #f43f5e text over rgba(244, 63, 94, 0.1) background with rgba(244, 63, 94, 0.25) border.
• Compiler Daemon Light: 6px circular dot with a soft radial glow when compiling, turning solid emerald when idle and amber during recalculation.

Editor & Workspace Tabs

• Tab Header: 32px height, 0px border radius, separated by 1px #334155 vertical rules.
• Active Tab: #1e293b background with a top 2px indicator line in #38bdf8.
• Inactive Tab: #0f172a background with #94a3b8 text.

Tree Navigation (File Explorer & Outline)

• 24px row height with a strict hierarchical indentation of 12px per level.
• Left-aligned indicator caret with hover highlights spanning the full panel width (rgba(51, 65, 85, 0.4)).
• Active item uses #38bdf8 text with a subtle rgba(56, 189, 248, 0.08) background fill and a 2px left-border accent.

Input Fields & Search Bars

• Background #0b0f19, border 1px solid #334155, text #f1f5f9, font JetBrains Mono 12px.
• Focused state transitions border to #38bdf8 without changing the bounding box dimensions.

Diagnostics & Validation Panel

• List view segmented by file position [Line:Col].
• Severity icons: 12px monospace indicators ([E] in Rose, [W] in Amber, [I] in Sky Blue).
• Direct click jumps the markdown source line and centers the preview canvas on the corresponding page section.