# Design Language for makemacro.com ## Aesthetics and Tone makemacro.com is a tool-focused experience about building, recording, and deploying keyboard macros and automation sequences. The aesthetic is sci-fi HUD meets blueprint engineering: a dark command-center environment where every element communicates precision, efficiency, and the satisfying click of automation falling into place. Think of the interface design of a submarine's sonar station crossed with a mechanical keyboard enthusiast's workshop -- dark surfaces, razor-thin luminous gridlines, and the quiet confidence of systems that run themselves. The tone is futuristic-cutting-edge yet approachable-casual, avoiding cold sterility by injecting moments of playful delight (key-click animations, satisfying sequence completions) into the technical framework. The overall feeling should be: "I am building a machine that does my work for me, and the process of building it is itself beautiful." ## Layout Motifs and Structure **Primary layout: hud-overlay with bento-box** The viewport is divided into a bento-box grid of functional panels, each representing a different aspect of macro creation. The grid uses CSS Grid with named areas: `macro-editor` (top-left, spanning 2 columns), `sequence-timeline` (bottom, full width), `keybind-palette` (top-right), and `output-preview` (mid-right). Panel gaps are exactly 2px, filled with the Grid Line cyan (#00e5ff at 0.3 opacity), creating a luminous wireframe skeleton visible between all panels. **HUD Overlay Elements:** Fixed-position indicators float above the grid: a status bar across the very top (12px tall, showing "MACRO ENGINE v2.4 // STATUS: READY" in monospace), corner brackets at all four viewport corners (L-shaped, 40px per arm, 2px stroke in Signal Cyan), and a subtle circular reticle at viewport center (60px diameter, dashed stroke, rotating at 1rpm) that represents the macro recording focus point. **Panel Interior Layout:** Each panel uses a single-column flow with 16px padding. Panel headers are 32px tall bars with a left-aligned title and right-aligned status indicator (a small pulsing dot: green for active, amber for idle). Content within panels scrolls independently, creating a multi-pane application feel rather than a traditional webpage scroll. **No page-level scrolling.** The entire experience fits within the viewport, resizing panels via CSS Grid fr units. On screens below 768px width, the grid collapses to a stacked single-column with swipe navigation between panels (horizontal-scroll within a vertical frame). ## Typography and Palette **Typography:** - **Display / Section Headers:** "Orbitron" (Google Fonts) -- a geometric, futuristic sans-serif with sharp rectangular letterforms that evoke digital readouts and spacecraft control panels. Used at 18-28px, weight 700, uppercase, letter-spacing: 0.08em. Applied exclusively to panel titles and major labels. - **Code / Macro Sequences:** "JetBrains Mono" (Google Fonts) -- a developer-focused monospace font with distinctive ligatures and excellent character differentiation. Used at 14-16px, weight 400, for all macro code, key sequences, and technical output. Line-height: 1.6. The ligatures (=>, ->, !=) add visual sophistication to code blocks. - **Body / Descriptions:** "Inter" (Google Fonts) -- the workhorse UI font, used at 14px, weight 400 for descriptions and 500 for labels. Its tall x-height and tight spacing are optimized for dense information display within confined panel spaces. - **Status / Metadata:** "Share Tech Mono" (Google Fonts) -- a monospace font with a distinctly technical, utilitarian character. Used at 11px for status bars, timestamps, and system messages. Uppercase, letter-spacing: 0.1em. **Palette:** | Role | Color | Hex | |------|-------|-----| | Void Black | Deep space background | #0a0e14 | | Panel Surface | Slightly elevated dark | #141820 | | Grid Line | Structure wireframe | #1c2430 | | Signal Cyan | Primary accent / active | #00e5ff | | Execute Green | Success / run states | #39ff14 | | Warning Amber | Idle / caution states | #ffab00 | | Key White | Primary text | #e0e6ed | | Ghost Gray | Secondary text / disabled | #5a6577 | The palette is firmly in the dark-neon family, using Void Black as the immovable base and Signal Cyan as the hero accent. Execute Green appears only for successful states and active recordings. Warning Amber marks paused, idle, or attention-needed states. This strict color-to-meaning mapping creates an information hierarchy that users can read at a glance without parsing text. ## Imagery and Motifs **Core Visual Motifs:** 1. **Keycap Glyphs**: Individual keyboard key representations rendered as 36x36px CSS shapes: slightly rounded rectangles (#141820 fill, 1px #1c2430 border) with a 1px inset shadow to simulate depth. When a macro sequence is displayed, each keypress appears as a physical keycap with the key label in Share Tech Mono. On hover, keycaps depress (translateY: 2px, shadow reduction) with a spring animation (80ms, stiffness: 400). When a macro runs, keycaps light up in sequence with Signal Cyan borders and a brief pulse effect (scale 1 to 1.08 to 1, 150ms per key). 2. **Circuit Trace Lines**: Thin SVG paths (1px, Signal Cyan at 0.2 opacity) connect related elements across panels -- from a macro definition to its output, from a keybind to its assigned sequence. These traces use right-angle routing (like PCB traces) with rounded corners (border-radius: 3px on path segments). When a macro executes, a small luminous dot (4px, Signal Cyan at full opacity) travels along the trace path from source to destination (duration: 600ms, ease-in-out). 3. **Recording Pulse Ring**: When macro recording is active, a ring emanates from the center reticle -- expanding from 60px to 200px diameter while fading from 0.4 to 0 opacity, repeating every 2 seconds. The ring uses a dashed stroke pattern (8px dash, 4px gap) in Signal Cyan. This persistent ambient animation communicates "system is listening" without being distracting. 4. **Sequence Timeline Blocks**: In the timeline panel, each action in a macro sequence is represented as a rectangular block (height: 24px, width proportional to action duration) arranged on a horizontal axis. Blocks are color-coded: keypress in Signal Cyan, delay in Ghost Gray, mouse action in Warning Amber, conditional in Execute Green. Blocks snap together with 1px gaps. Hovering a block expands it vertically (to 48px) revealing action details. 5. **Corner Bracket Frames**: Every panel is framed not by solid borders but by corner brackets -- small L-shaped marks at each corner (16px arm length, 1px Signal Cyan). This creates an open, breathable panel boundary that references camera viewfinder overlays and targeting HUDs. The brackets subtly pulse (opacity 0.5 to 1 over 3 seconds) on the currently focused panel. ## Prompts for Implementation **Full-Screen Application Experience:** The site loads directly into the HUD view -- no splash screen, no hero section. The viewport initializes as Void Black, then the corner brackets draw themselves (path animation, 200ms per bracket, staggered from top-left clockwise). The grid lines between panels fade in (opacity 0 to 0.3, 400ms). Panel surfaces then rise from below (translateY: 8px to 0, opacity 0 to 1, stagger: 100ms per panel). Finally, the status bar types its content character-by-character in Share Tech Mono (typewriter-effect, 30ms per character): "MACRO ENGINE v2.4 // STATUS: READY". The center reticle fades in last, already rotating. **Macro Recording Simulation:** The hero experience is an interactive macro recording demo. The user sees a pre-populated text in the macro-editor panel. When they click "RECORD" (a 32px-tall button with a red circle icon pulsing at 1Hz), the recording pulse ring activates, and the sequence-timeline panel begins populating with action blocks in real-time -- simulating keypress captures at 120ms intervals. Each captured key appears as a keycap in the keybind-palette lighting up with Signal Cyan. After 3 seconds, the recording auto-stops, and the complete macro plays back: keycaps fire in sequence, circuit traces light up connecting editor to timeline to output, and the output-preview panel populates with the macro's result text (typewriter-effect at 2x speed). **Panel Focus Interaction:** Clicking any panel brings it to focus: its corner brackets pulse brighter (opacity: 1, border-animate from 0.5 to 1 over 200ms), the panel surface subtly elevates (box-shadow: 0 0 20px Signal Cyan at 0.08 opacity), and other panels dim slightly (opacity: 0.85). This focus system creates a natural attention hierarchy within the dense bento layout. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero images, gradient backgrounds, serif typography, decorative illustrations, rounded playful aesthetics. **EMPHASIZE:** Information density as a feature, mechanical precision in animations, color-coded status communication, zero-scroll viewport utilization, the satisfaction of automation sequences completing successfully. ## Uniqueness Notes **Differentiators:** 1. **Zero-scroll HUD application paradigm**: No other design in the portfolio presents the entire experience within a single viewport with no page scrolling. The bento-box panel grid with independent panel scrolling creates a genuine application interface rather than a website, fundamentally different from the scroll-based narrative approach used elsewhere. 2. **Macro recording as interactive hero experience**: Instead of static demonstrations or hero images, the site's centerpiece is a live-feeling macro recording simulation where keycaps animate, timelines populate in real-time, and circuit traces light up connecting the system together. This transforms a product demo into a kinetic experience. 3. **Circuit trace connections between panels**: The PCB-style right-angle SVG paths connecting related elements across different grid panels create a visible information architecture that no other design attempts. These traces make data flow tangible and reinforce the engineering/automation metaphor. 4. **Keycap interaction design language**: Every macro action is represented as a physical keycap with depression animations, lighting states, and sequential activation patterns. This creates a tactile visual language specific to keyboard automation that cannot be confused with any other domain's design system. **Chosen seed/style:** sci-fi hud overlay stats **Avoided overused patterns:** corporate aesthetic, centered layout, gradient palette, photography imagery, parallax scrolling, elegant-serif typography, warm color palette **Preferred underused elements:** hud-overlay layout, bento-box grid, circuit motifs, dark-neon palette, tech-mono typography, border-animate pattern, shake-error for failed macros, sharp-angles motifs