Skip to content

DESIGN.md

Latest commit

 

History

History
63 lines (55 loc) · 2.6 KB

DESIGN.md

File metadata and controls

63 lines (55 loc) · 2.6 KB
Raw
theme argus-mythological-brutalism
tokens
colors typography borders shadows
argus_purple argus_purple_glow atlas_cyan athena_emerald hermes_gold brand_black brand_white canvas_bg card_bg border_subtle
#7C3AED
#A855F7
#06B6D4
#10B981
#F59E0B
#000000
#FFFFFF
#090D16
#111827
rgba(124, 58, 237, 0.3)
display body mono
Syne, Impact, sans-serif
Inter, System-UI, sans-serif
JetBrains Mono, monospace
brutalist industrial
3px solid #000000
1px solid rgba(124, 58, 237, 0.3)
hard_pop purple_glow
6px 6px 0px #000000
0 0 20px rgba(124, 58, 237, 0.25)

DESIGN.md: ARGUS Mythological Brutalism System

This specification fuses high-contrast Industrial Brutalism with the ARGUS Project Vibe & Greek Mythology color palette.

1. Visual Identity & Rationale

  • The Concept: "Mythological Cyber-Observatory."
  • The Vibe: Deep royal purple, cyber cyan, emerald compliance green, and golden warning accents set against a stark midnight void canvas.
  • Depth Philosophy: Industrial 3D block offset shadows (6px 6px 0px #000000) and sharp grid line framing.

2. Color Palette & Greek Mapping

  • Argus Royal Purple (#7C3AED / #A855F7): Core brand color representing the 100-eyed all-seeing guardian. Used for primary buttons, highlights, and headers.
  • Atlas Cyber Cyan (#06B6D4 / #00F0FF): Secondary accent representing git control flow maps and visual topology flowcharts.
  • Athena Aegis Emerald (#10B981): Representing architectural compliance, shield armor, and passing builds.
  • Hermes Warning Gold (#F59E0B): Representing swift debt alerts, // TODO scanners, and security warnings.
  • Midnight Observatory Void (#090D16 / #111827): Ultra-dark canvas background.

3. Component Specifications

Buttons & Interactive States

  • Primary Interactive: Features heavy 3px black perimeter outline with physical 3D drop-down translation on hover. 
    .btn-purple {
  background: #7C3AED;
  color: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 6px 6px 0px #000000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-purple:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0px #000000;
}