Switch between the rendered Visual preview and the Raw DESIGN.md.
This design system embodies a technical, security-focused aesthetic rooted in minimalist documentation standards. The visual language prioritizes clarity, precision, and trustworthiness—essential qualities for a decentralized remote-session architecture framework. A monochromatic palette with sparse use of neutral grays creates an austere, professional environment that communicates reliability and enterprise-grade security. The typography relies on serif and monospace fonts to evoke technical documentation and command-line interfaces, reinforcing the protocol's connection to SSH authentication and terminal operations. The overall mood is authoritative yet accessible, designed for both systems architects and technical operators who require unambiguous communication without decorative flourish.
Key Characteristics
#000000): Primary text color for all body content, headings, and interface elements. Dominates 95% of visual weight across the system. Used for headlines, navigation, and primary interactive states.#000000): Primary text, headings, buttons, links, icons. Critical for readability and hierarchy establishment.#808080): Secondary text, muted labels, divider lines, and supporting content. Provides visual breathing room while maintaining contrast.#FFFFFF): Default document background, card surfaces, and content containers. Implicit default, provides contrast foundation.#808080): Subtle dividers between sections, table borders, and section separators. Used sparingly to maintain visual simplicity.Primary (Headings & Body): Liberation Serif, Georgia, serif Monospace (Code & Technical): Liberation Mono, Courier New, monospace Fallback Stack: Times New Roman for body content compatibility
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Liberation Serif | 32px | 700 | 38px | 0px | Executive overview titles, primary page headers |
| Heading 2 / H2 | Liberation Serif | 24px | 700 | 29px | 0px | Section dividers, operational sequence headers |
| Heading 3 / H3 | Liberation Serif | 18.67px | 700 | 22px | 0px | Subsection headers, phase labels |
| Body Text | Times New Roman | 16px | 400 | 24px | 0px | Primary content, paragraph text |
| Secondary Text | Times New Roman | 14px | 400 | 21px | 0px | Supporting information, descriptions |
| Code / Technical | Liberation Mono | 13.33px | 400 | 16px | 0px | Inline code, command references, terminal output |
| Link / Emphasis | Liberation Mono | 13.33px | 400 | 16px | 0px | Hyperlinks, monospace reference text |
| Caption / Meta | Times New Roman | 12px | 400 | 18px | 0px | Labels, metadata, supplementary notes |
Primary Button
#000000#FFFFFF12px 24px0px1px solid #000000none24px#808080, Border #808080, Text #FFFFFF#000000, Border #000000, Inset shadow inset 0 2px 4px rgba(0, 0, 0, 0.3)#C0C0C0, Border #C0C0C0, Text #808080, Cursor not-allowedSecondary Button
#FFFFFF#00000012px 24px0px1px solid #000000none24px#F5F5F5, Border #808080, Text #000000#E8E8E8, Border #000000, Inset shadow inset 0 2px 4px rgba(0, 0, 0, 0.15)#FFFFFF, Border #C0C0C0, Text #C0C0C0, Cursor not-allowedGhost Button
transparent#00000012px 24px0px1px solid transparentnone24pxtransparent, Border #000000, Text #000000#F0F0F0, Border #000000, Text #000000transparent, Border transparent, Text #C0C0C0, Cursor not-allowedStandard Card
#FFFFFF1px solid #8080800px24px16px 0pxnone#000000Code Block Container
#F8F8F81px solid #D3D3D30px16px#00000016pxautoSection Container
#FFFFFF1px solid #80808040px 0px16pxText Input
#FFFFFF1px solid #8080800px12px 16px#00000024px#000000, Box Shadow inset 0 0 0 1px #000000#A0A0A0#F0F0F0, Border #C0C0C0, Text Color #808080Textarea
#FFFFFF1px solid #8080800px12px 16px#00000016px#000000, Box Shadow inset 0 0 0 1px #000000120pxverticalForm Label
#0000008pxblockPrimary Navigation
#FFFFFF1px solid #80808016px 0pxNavigation Link
#0000008px 12pxnone0px#F5F5F5, Text Color #000000#000000, Text Color #FFFFFF, Font Weight 700Breadcrumb Navigation
#808080/ (gray text)#000000#40404018pxOrdered List
24px32px16pxdecimalUnordered List
24px32px16pxdisc#000000Definition List
24px16pxdt Font Weight: 700dd Margin Left: 24px1px solid #80808024px 0px0pxnone8px8px: Micro spacing (icon padding, tight list items)12px: Form label spacing, small component gaps16px: Standard margin between sections, list item separation24px: Card padding, medium section spacing32px: Container padding, subsection spacing40px: Major section padding, content block separation48px+: Full-page section breaks, hero spacing1024px (documentation-optimized for readability)32px between columns1px solid #808080)40px horizontal on desktop, 24px on tablet, 16px on mobileAggressive whitespace preservation maintains focus on technical content. Large vertical gaps between major sections (40–64px) create visual breathing room and establish clear hierarchy. Minimal inline spacing within text blocks preserves line integrity. Section dividers replace decorative spacing to establish structure through linear progression rather than visual density.
0px (zero radius universal standard)| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | No shadow | Standard cards, containers, form inputs |
| Level 1 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) | Subtle hover states, focus indicators |
| Level 2 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) | Active button states, modal overlays |
| Level 3 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) | Dropdown menus, floating panels |
| Inset | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) | Pressed button states, sunken inputs |
Shadow Philosophy: This system employs minimal, restrained shadows. The monochromatic palette lacks chromatic depth cues, so subtle shadows provide discrete elevation signaling without competing with textual hierarchy. Shadows are desaturated and restricted to grayscale for consistency. Inset shadows indicate interactive press states. Most UI elements remain flat to emphasize content clarity and protocol architecture simplicity.
#000000) as the default text color for maximum contrast and accessibility#808080#808080 for secondary labels, metadata, and muted supporting text0px)| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, 16px padding, 24px section gaps, heading sizes reduce by 2px |
| Tablet | 640px–1023px | Single column, 24px padding, 32px section gaps, full typography scale |
| Desktop | 1024px+ | Single or two-column layouts, 40px padding, 40px section gaps, max-width enforcement |
| Large Desktop | 1440px+ | Optional three-column grid for architecture diagrams, 64px section spacing |
44px × 44px for all interactive elements (buttons, links, form inputs)12px 24px ensures adequate touch surface8px 12px for inline links in navigation contexts44px for mobile accessibility12px gap to prevent accidental activation40px to 24px at tablet breakpoint, to 16px at mobile#000000)#808080)#FFFFFF)#000000), white text (#FFFFFF)#FFFFFF), black text (#000000), black border (#000000)#FFFFFF), black text (#000000), gray border (#808080)1px solid #000000 inset#F8F8F8)#808080), 1px solidMonochromatic Foundation: All colors derive from black (#000000), dark gray (#808080), and white (#FFFFFF). Do not introduce additional hues; establish hierarchy through tone variation and contrast ratios.
Strict Typography Scaling: Follow the hierarchy table precisely. Headings use Liberation Serif (700 weight), body uses Times New Roman (400 weight), code uses Liberation Mono (400 weight). Maintain exact pixel values; never interpolate sizes.
Zero Border Radius Universal: Every element—buttons, inputs, cards, containers—must have border-radius: 0px. This is non-negotiable and reinforces the technical, command-line aesthetic.
Shadow Restraint: Use shadows only to indicate interactivity (hover, focus, active states). Most elements render flat. Inset shadows signal pressed states; subtle outset shadows (0 1px 2px rgba(0, 0, 0, 0.1)) indicate slight elevation only on interactive hover.
Spacing Consistency: Apply the 8px scale religiously. Section padding: 40px on desktop, 24px on tablet, 16px on mobile. Margins between sections: 16px minimum, 40px between major architectural blocks.
Single-Column Default: Prioritize vertical stacking. Two-column layouts serve architecture diagrams and parallel process flows only; content narrative flows top-to-bottom to mirror terminal operation sequence.
Link & Code Styling: Links render in black (#000000) with Liberation Mono (13.33px, 400 weight) to indicate technical references. No underlines except on hover (text-decoration: underline). Code blocks use monospace at 13.33px with #F8F8F8 background and 1px solid #D3D3D3 border.
Contrast & Accessibility: Maintain 7:1 contrast ratio between text and background (black on white: 21:1). Secondary text in #808080 maintains 4.5:1 minimum. All interactive elements support keyboard navigation with clear focus indicators.
Form & Input Precision: Text inputs and textareas follow the same border (#808080) and focus style (black border inset). Placeholder text in #A0A0A0. Labels rendered in 14px Times New Roman, bold weight, above inputs. Disabled states use light gray background (#F0F0F0) with #C0C0C0 border.
Responsive Collapse Rule: At 639px breakpoint, shift from multi-column to single-column. Reduce padding from 40px to 24px; reduce heading sizes by 2–4px but maintain 16px minimum for body text. Horizontal scroll enabled for code blocks; table overflow permitted. Touch targets remain 44px minimum.