spb/khaelor Public
KHAELOR — a terminal-native autonomous engineering agent powered by Anthropic.
TypeScript 82.9%
HTML 14.9%
CSS 1.1%
JavaScript 0.7%
1<!doctype html>2<!--3KHAELOR4File: website/public/docs/theming.html5Description: Docs — The khaelis theme, OKLCH gradients, the capability ladder, the motion doctrine, and --doctor-tui.6Author: Simon-Pierre Boucher7Contact: contact@spboucher.ai8-->9<html lang="en">10<head>11<meta charset="utf-8">12<meta name="viewport" content="width=device-width, initial-scale=1">13<title>Theming & terminal — KHAELOR docs</title>14<meta name="description" content="The khaelis theme, OKLCH gradients, the capability ladder, the motion doctrine, and --doctor-tui.">15<link rel="stylesheet" href="/styles.css">16<script>17(function(){try{var t=localStorage.getItem("khaelor-theme");if(!t&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches)t="light";if(t==="light")document.documentElement.setAttribute("data-theme","light");}catch(e){}})();18</script>19<script defer src="/site.js"></script>20</head>21<body>2223<header class="site-header"><div class="inner">24 <a class="wordmark" href="/"><span class="glyph">❯</span><span class="g-ember">KHAELOR</span></a>25 <nav>26 <a href="/docs/getting-started.html">Docs</a>27 <a href="/#install">Install</a>28 <button id="theme-toggle" type="button" aria-label="Toggle color theme">light</button>29 </nav>30</div></header>3132<main class="page"><div class="docs-layout">3334<aside class="sidebar">35 <div class="group"><div class="group-title">Start</div>36 <a href="/docs/getting-started.html">Getting started</a>37 <a href="/docs/cookbook.html">Cookbook</a>38 </div>39 <div class="group"><div class="group-title">Using KHAELOR</div>40 <a href="/docs/usage.html">The TUI</a>41 <a href="/docs/commands.html">Commands & keyboard</a>42 <a href="/docs/tools.html">Tools</a>43 <a href="/docs/sessions.html">Sessions</a>44 </div>45 <div class="group"><div class="group-title">Autonomy</div>46 <a href="/docs/phases.html">Phase gates</a>47 <a href="/docs/verification.html">Verification</a>48 <a href="/docs/worktrees.html">Parallel worktrees</a>49 <a href="/docs/daemon.html">The daemon</a>50 </div>51 <div class="group"><div class="group-title">Intelligence</div>52 <a href="/docs/repograph.html">Semantic index</a>53 <a href="/docs/memory.html">Project memory</a>54 <a href="/docs/context.html">Context engine</a>55 <a href="/docs/fork-replay.html">Fork · replay · sdiff</a>56 </div>57 <div class="group"><div class="group-title">Control</div>58 <a href="/docs/permissions.html">Permissions</a>59 <a href="/docs/configuration.html">Configuration</a>60 <a href="/docs/cli.html">CLI reference</a>61 </div>62 <div class="group"><div class="group-title">Internals</div>63 <a href="/docs/architecture.html">Architecture</a>64 <a href="/docs/events.html">The event model</a>65 <a href="/docs/theming.html">Theming & terminal</a>66 </div>67 <div class="group"><div class="group-title">Help</div>68 <a href="/docs/faq.html">FAQ & troubleshooting</a>69 </div>70</aside>7172<article class="content">7374<h1>Theming & the terminal</h1>75<p class="lead">KHAELOR's identity is <strong>khaelis</strong>: obsidian and magma. A warm ember76that flows through the phase ribbon, the prompt, the panels — not another violet-cyan CLI theme.</p>7778<h2 id="palette">The khaelis palette<a class="anchor" href="#palette">#</a></h2>79<table>80 <tr><th>Token</th><th>Value</th><th>Used for</th></tr>81 <tr><td>ember</td><td><code>#FF6B35</code></td><td class="wrap">The accent: active phase, prompt, actions, panel borders.</td></tr>82 <tr><td>ember-glow</td><td><code>#FFB86B</code></td><td class="wrap">Gradient top: highlights, warm success.</td></tr>83 <tr><td>teal</td><td><code>#2DD4BF</code></td><td class="wrap">The cool counterpoint: info, paths, symbols.</td></tr>84 <tr><td>bg / text</td><td><code>#0B0E14</code> / <code>#C9D1E3</code></td><td class="wrap">Cold near-black, calm foreground.</td></tr>85 <tr><td>success / warning / error</td><td><code>#7EE787</code> / <code>#F0B429</code> / <code>#FF5C57</code></td><td class="wrap">States — always paired with a symbol or word, never color alone.</td></tr>86</table>8788<h2 id="gradients">OKLCH gradients<a class="anchor" href="#gradients">#</a></h2>89<p>The signature ember→glow ramps (wordmark, phase ribbon, active panel borders, splash sweep) are90interpolated in OKLCH — perceptually uniform, so the midpoints never turn muddy the way naive RGB91lerps do. Ramps are precomputed per length and cached: painting a gradient is a string concat, well92inside the 16 ms frame budget.</p>9394<h2 id="ladder">The capability ladder<a class="anchor" href="#ladder">#</a></h2>95<table>96 <tr><th>Detected</th><th>Rendering</th></tr>97 <tr><td>truecolor (<code>COLORTERM=truecolor</code>)</td><td class="wrap">Full khaelis + gradients + line tints.</td></tr>98 <tr><td>256 colors</td><td class="wrap">Precomputed quantization — no math at paint time.</td></tr>99 <tr><td>16 colors</td><td class="wrap">Role-mapped SGR codes.</td></tr>100 <tr><td>mono (<code>NO_COLOR</code>, dumb, piped)</td><td class="wrap">Identity — zero escape codes. Every state keeps its symbol or word, so nothing loses meaning.</td></tr>101</table>102103<h2 id="motion">The motion doctrine<a class="anchor" href="#motion">#</a></h2>104<p>Exactly six animations exist, each carrying meaning: the splash sweep · the phase-transition105flash · the approval panel's breathing · the gauge drain on compact · post-stream code106colorization · the verify strip contraction. Three hard rules:</p>107<ol>108 <li>An animation is a <em>state</em> advanced only inside the existing render tick — zero extra109 timers, zero re-renders outside the 16 ms budget.</li>110 <li>Transitions ≤ 300 ms; waiting indicators ≤ 1 Hz.</li>111 <li><code>--motion off</code> (and screen-reader detection) reduces everything to static states112 instantly. Accessibility is not negotiable.</li>113</ol>114115<h2 id="doctor">--doctor-tui<a class="anchor" href="#doctor">#</a></h2>116<div class="termwrap"><div class="termbar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="title">khaelor --doctor-tui</span></div>117<pre class="term" data-no-copy><code> <span class="t-b">doctor-tui · detected capabilities</span>118 tty true stdout is a terminal119 colors truecolor COLORTERM=truecolor · TERM=xterm-256color120 unicode utf-8 LANG=en_US.UTF-8121 width 142 full layout122 osc8 links yes TERM_PROGRAM=iTerm.app — fallback: text (url)123 osc52 clipboard yes fallback: copy hint hidden124125 theme: khaelis (obsidian + magma) · degradation: truecolor → 256 → 16 → mono126 <span class="t-dim">report display bugs with this block attached.</span></code></pre></div>127<p>Every capability comes with the <em>reason</em> it was detected — a display bug report with this128block attached is already half-diagnosed.</p>129130<h2 id="site">This site, same system<a class="anchor" href="#site">#</a></h2>131<p>The documentation you are reading uses the same tokens: khaelis dark by default, and a warm132paper-and-ink light theme where the terminals deliberately stay obsidian — the contrast between a133bright modern page and dark living terminals is the look. Toggle it in the header.</p>134135<div class="pager">136 <div><span class="label">Previous</span><a href="/docs/events.html">← The event model</a></div>137 <div class="next"><span class="label">Next</span><a href="/docs/faq.html">FAQ →</a></div>138</div>139140</article>141</div></main>142143<footer class="site-footer"><div class="inner">144 <span>KHAELOR — Simon-Pierre Boucher · <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a></span>145 <span>Anthropic-powered · terminal-native by design</span>146</div></footer>147148</body>149</html>150