# Design Language for makiya.dev ## Aesthetics and Tone makiya.dev is a developer portfolio and personal site presented as a live terminal session. The aesthetic is pure terminal -- not a terminal emulator widget inside a webpage, but the entire site IS the terminal. Every interaction, every piece of content, every navigation action occurs through a command-line interface rendered in the browser. The tone is tech-tutorial meets conversational: the site speaks to visitors in the second person, guiding them through commands they can type while maintaining the relaxed personality of a developer who left comments in their codebase that are actually funny. Think of it as SSH-ing into someone's personal server and finding a thoughtfully organized home directory full of projects, a .bashrc with custom aliases, and an MOTD that feels like a warm handshake. The mood channels the quiet satisfaction of a clean terminal at 1 AM -- cursor blinking, system responsive, everything exactly where it should be. ## Layout Motifs and Structure **Primary layout: single-column with minimal-navigation** The entire viewport is a single terminal window. The background is Terminal Black (#0d1117) with no visible chrome, borders, or decorative elements outside the terminal context. Content flows in a single column, left-aligned, with a maximum width of 80 characters (the classic terminal width) centered in the viewport with generous horizontal padding on large screens. **Terminal Chrome:** The top of the viewport displays a minimal title bar (24px tall) with three small circles (close/minimize/maximize in #ff5f57, #febc2a, #28c840) at the left and a centered title reading "makiya@dev:~$" in the prompt font. Below this, the MOTD (Message of the Day) displays as pre-formatted ASCII art of the name "MAKIYA" in a simple block-letter style, rendered in Signal Green, followed by a one-line description and version info in dimmed text. **Command Prompt Interface:** After the MOTD, a blinking cursor awaits at a prompt styled as `makiya@dev:~$ `. Users can type actual commands (implemented via JS event listeners on keypress). Available commands include: `ls` (list sections), `cd projects` (navigate to projects), `cd about` (navigate to about), `cat resume.txt` (display resume), `help` (show available commands), `clear` (reset terminal). Each command triggers content to render below the prompt as if outputted by the terminal. **Content Rendering:** When a command is entered, output renders progressively below the prompt line in the same single-column flow. Project listings render as formatted tables with aligned columns (name, language, stars). The about section renders as a formatted text block. The resume renders as a structured plaintext document. After output completes, a new prompt appears below for the next command. **No scrolling navigation, no hamburger menus, no sidebars.** The only navigation is typing commands. Page-level scroll is native vertical scroll as terminal output accumulates. ## Typography and Palette **Typography:** - **Terminal / All Text:** "Fira Code" (Google Fonts) -- a monospace font with programming ligatures, used as the SOLE font across the entire site. No font mixing. 15px base size on desktop, 13px on mobile. Weight 400 for standard output, 700 for headings and emphasis (rendered as ANSI-style bold). Line-height: 1.5. Ligatures enabled for arrow operators (=>, ->), comparison operators (!=, ===), and other code symbols, adding visual refinement to code-heavy content. - **ASCII Art:** Same Fira Code at 10-12px for ASCII art banners, using letter-spacing: 0 to ensure character alignment in block art. - **No other fonts.** The single-typeface approach is the design statement itself. **Palette:** | Role | Color | Hex | |------|-------|-----| | Terminal Black | Background | #0d1117 | | Terminal Gray | UI chrome / dim text | #484f58 | | Text White | Primary text output | #c9d1d9 | | Signal Green | Prompt / success / links | #3fb950 | | Keyword Purple | Syntax highlight / emphasis | #bc8cff | | String Orange | Filenames / values | #ffa657 | | Error Red | Error messages / warnings | #f85149 | | Comment Blue | Annotations / secondary | #58a6ff | The palette directly mirrors GitHub's dark theme terminal colors, creating instant familiarity for developers. Each color maps to a semantic role borrowed from syntax highlighting conventions: green for executable/active elements, purple for keywords/navigation, orange for literal values, red for errors, blue for comments/metadata. This strict semantic color system means users can parse information by color alone. ## Imagery and Motifs **Core Visual Motifs:** 1. **Blinking Cursor**: The defining motif of the entire site. A 2px-wide, 18px-tall rectangle in Signal Green, blinking at 530ms intervals (opacity alternating between 1 and 0 via CSS keyframes). The cursor appears at the active prompt line and also after each rendered output block to indicate "ready for next command." When the terminal is processing a command, the cursor is replaced by a spinning ASCII progress indicator (|, /, -, \, cycling at 100ms intervals). 2. **ASCII Art Headers**: Each major section (projects, about, resume) begins with an ASCII art header generated in a consistent style -- simple block letters, 5 lines tall, using / and \ and _ characters. Rendered in Signal Green. The headers "type" themselves onto screen character by character (typewriter-effect at 5ms per character for fast rendering that still shows the construction process). 3. **Directory Tree Visualization**: When `ls -la` or tree commands are executed, the output renders as a properly formatted directory tree using box-drawing characters (unicode, not ASCII). The tree structure uses the standard terminal convention: vertical lines, tee connectors, and corner pieces in Terminal Gray, with file/folder names in their semantic colors (directories in Comment Blue, executables in Signal Green, text files in Text White). 4. **Command History Fade**: Previously entered commands and their output gradually fade as new content pushes them upward -- a CSS opacity gradient from 1.0 (current) to 0.4 (5+ commands ago) applied via nth-child selectors on command blocks. This creates a visual depth that mimics the natural scroll-back of a real terminal while keeping focus on the current interaction. 5. **ANSI Color Escape Simulation**: Text formatting within output uses CSS classes that mimic ANSI terminal escape codes: `.bold` (font-weight 700), `.dim` (opacity 0.6), `.underline` (text-decoration underline Signal Green), `.strike` (text-decoration line-through). This creates a rich text rendering system that stays entirely within the terminal metaphor. ## Prompts for Implementation **Full-Screen Terminal Experience:** The site boots like a real terminal session. On load, Terminal Black fills the viewport immediately. After 200ms, the title bar fades in. Then the MOTD ASCII art renders character by character (typewriter-effect, 3ms per character, total ~1.5s for the full banner). Below the ASCII art, system information renders line by line with 80ms delays: ``` Last login: Mon Mar 23 14:00:00 2026 on ttys001 System: makiya.dev v3.2.1 | Uptime: 847 days Available commands: ls, cd, cat, help, clear, whoami ``` Then the first prompt appears with its blinking cursor. The site is now interactive. **Command Processing Animation:** When the user types a command and presses Enter, the cursor stops blinking and is replaced by the ASCII spinner. After a realistic delay (200-400ms, randomized to feel authentic), the output begins rendering. Short outputs appear instantly. Long outputs (resume, project details) render line-by-line with 30ms stagger, simulating real terminal output speed. When output completes, the spinner disappears, a new prompt appears, and the cursor resumes blinking. **Tab Completion:** When the user presses Tab after typing a partial command, the terminal suggests completions in Comment Blue text on the same line. Double-tab shows all possible completions below the prompt in a columnar layout. This detail elevates the terminal simulation from visual novelty to genuine interactive experience. **Mobile Adaptation:** On touch devices, a persistent soft keyboard trigger button ("> _" in Signal Green, bottom-right, 48px) opens a custom command palette overlay with pre-built command buttons (ls, cd projects, cd about, cat resume.txt, help) styled as terminal-green-outlined rectangles. This ensures the site is navigable without a physical keyboard while maintaining the terminal aesthetic. **Easter Egg Commands:** `sudo rm -rf /` returns "nice try." in Error Red. `cowsay hello` renders an actual ASCII cow. `fortune` returns a random programming quote. `sl` renders a tiny ASCII steam locomotive scrolling across the screen. These hidden commands reward exploration and inject personality. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero images, gradient backgrounds, multiple font families, photography, decorative illustrations, rounded friendly aesthetics, sidebar navigation. **EMPHASIZE:** Absolute commitment to the terminal metaphor with zero breaks in character, type-driven interaction, progressive content revelation through commands, developer in-jokes and Easter eggs, the meditative satisfaction of a well-organized filesystem. ## Uniqueness Notes **Differentiators:** 1. **Entire site as interactive terminal session**: No other design presents the complete website experience as a functional command-line interface. Users navigate exclusively by typing commands, making this the only design where the primary interaction model is text input rather than clicking or scrolling. 2. **Single-font constraint as design philosophy**: Using Fira Code as the only typeface across the entire site is a radical constraint not found in any other design. All visual hierarchy must be achieved through color, weight, spacing, and ASCII art rather than typographic variety, creating a uniquely unified visual voice. 3. **Tab completion and command history as navigation UX**: The implementation of shell-like tab completion, command history (up/down arrow), and autocomplete suggestions transforms the terminal from a visual gimmick into a genuinely usable navigation system with interaction depth. 4. **Command history opacity fade as visual depth**: The progressive fading of older command blocks creates a novel form of visual hierarchy that mirrors real terminal behavior while solving the web-specific problem of maintaining focus in an ever-growing single-column layout. 5. **Easter egg command system**: The hidden commands (cowsay, fortune, sl, sudo) create discoverable delight moments that reward developer curiosity -- a meta-commentary on exploration that only works within the terminal metaphor. **Chosen seed/style:** terminal command line dev **Avoided overused patterns:** corporate aesthetic, centered layout, gradient palette, photography imagery, elegant-serif typography, parallax scrolling, split-screen layout, warm palette **Preferred underused elements:** terminal aesthetic, tech-mono typography (sole font), single-column layout, minimal-navigation, dark-neon palette, typewriter-effect, progressive-disclosure pattern, sharp-angles motifs