# Design Language for ethica.dev ## Aesthetics and Tone A philosophical-game development environment where ethical dilemmas are coded into interactive experiences -- ethica.dev renders as a developer IDE themed around moral philosophy: a dark editor interface where code blocks contain ethical scenarios, comments pose moral questions, and the syntax highlighting uses a palette derived from the Trolley Problem (red for harm, green for salvation, yellow for uncertainty). The IDE aesthetic makes ethics feel like something you build, test, and debug -- not just discuss. The tone is ethicist-developer: combining philosophical rigor with engineering pragmatism. "If the utility function returns negative for all branches, we have a genuine dilemma." ## Layout Motifs and Structure **IDE System:** Three-panel IDE layout -- file explorer sidebar (20%), main editor (55%), output panel (25%). **Section Flow:** 1. **The IDE Frame:** Full-viewport IDE shell with panels and a top menu bar. 2. **File Explorer:** Left sidebar with "project files" listing ethical scenarios as .eth files. 3. **Main Editor:** Code-style content with syntax highlighting, line numbers, and comment annotations. 4. **Output Panel:** Right sidebar showing "ethical analysis" output for the current scenario. ## Typography and Palette - **All Text:** "Fira Code" (Google Fonts) -- monospace with ligatures. Code context demands it. - **Menu/System:** "Inter" at 0.75rem for non-code UI elements. **Palette:** Editor Dark (#1e1e2e), Sidebar (#171722), Syntax Green (#50fa7b) for positive outcomes, Syntax Red (#ff5555) for harmful outcomes, Syntax Yellow (#f1fa8c) for uncertain, Syntax Purple (#bd93f9) for keywords, Syntax Cyan (#8be9fd) for parameters, Comment Grey (#6272a4), Text (#f8f8f2). ## Imagery and Motifs **Syntax Highlighting:** Content styled as code with color-coded ethical categories: green for beneficial, red for harmful, yellow for ambiguous, purple for principles, cyan for actors. **Line Numbers:** Every content line has a grey line number in the gutter, maintaining the code-editor fiction. **File Tabs:** The editor panel has file tabs for different ethical scenarios, styled with the familiar IDE tab pattern. **Console Output:** The right panel shows formatted "output" with timestamps, analysis results, and ethical verdicts in monospace. ## Prompts for Implementation Build as a working IDE the user explores. The IDE frame loads as a single-page layout with all three panels visible. Clicking file names in the explorer "opens" different ethical scenario content in the main editor. Syntax highlighting makes ethical content color-coded and scannable. The output panel updates to show analysis relevant to the active scenario. Line numbers and editor chrome maintain the illusion. Cursor blinking in the editor (a thin 1px line in cyan) adds to the active-IDE feel. No animations beyond cursor blink and tab switching. The code-as-ethics concept IS the innovation. ## Uniqueness Notes 1. **IDE as ethical philosophy interface:** Presenting ethical dilemmas as code is a unique conceptual fusion. 2. **Ethical syntax highlighting:** Color-coding ethical categories (harm, benefit, uncertainty) as syntax creates a novel information design. 3. **Three-panel IDE layout:** The authentic editor layout with file explorer, code, and output is rare in non-code websites. 4. **Console-as-ethical-analysis:** Using terminal output format for philosophical analysis creates a distinctive reading experience. Document chosen seed/style: aesthetic: ide-theme, layout: three-panel-ide, typography: monospace-only, palette: dracula-variant, patterns: syntax-highlighting, imagery: line-numbers, motifs: file-explorer, tone: ethicist-developer