Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tilde.style</title> <link rel="stylesheet" href="site.css"> <link rel="stylesheet" href="styles/gardening/style.css"> <link rel="stylesheet" href="styles/bonfire/style.css"> <link rel="stylesheet" href="styles/sailplane/style.css"> <!-- tools/cmd/addstyle:links --><!-- new style <link> tags are inserted directly above this line --></head><body>
<section id="gallery"> <p class="gallery-lede">tilde.style is a design toolkit, not a design. Three real, contributed styles — click one to see the whole page become it.</p> <div class="gallery-strip" role="tablist" aria-label="Choose a style"> <button class="gallery-card active" data-theme="gardening" role="tab" aria-selected="true"> <span class="gc-name">Gardening</span> <span class="gc-tagline">A pond, Lernhappen floating in it, a picnic to feed new ones in.</span> <span class="gc-chip">Lernhappen</span> <span class="gc-photos" aria-hidden="true"> <img class="gc-photo" src="styles/gardening/photos/pond-teich-morgen.jpg" alt="" loading="lazy"> <img class="gc-photo" src="styles/gardening/photos/pond-overview.jpg" alt="" loading="lazy"> </span> </button> <button class="gallery-card" data-theme="bonfire" role="tab" aria-selected="false"> <span class="gc-name">Bonfire</span> <span class="gc-tagline">A small fire, a finite circle of gathered guests.</span> <span class="gc-chip">kindling</span> <span class="gc-photos" aria-hidden="true"> <img class="gc-photo" src="styles/bonfire/photos/funkenflug-sparks.jpg" alt="" loading="lazy"> <img class="gc-photo" src="styles/bonfire/photos/erntetag-gathering.jpg" alt="" loading="lazy"> </span> </button> <button class="gallery-card" data-theme="sailplane" role="tab" aria-selected="false"> <span class="gc-name">Sailplane</span> <span class="gc-tagline">Climbing on thermals — no engine, reading wind instead of a fixed route.</span> <span class="gc-chip">Variometer</span> <span class="gc-photos" aria-hidden="true"> <img class="gc-photo" src="styles/sailplane/photos/dusk-tideline.jpg" alt="" loading="lazy"> <img class="gc-photo" src="styles/sailplane/photos/aloft-cloud-deck.jpg" alt="" loading="lazy"> </span> </button> <!-- tools/cmd/addstyle:gallery --><!-- new .gallery-card buttons are inserted directly above this line --> </div> </section>
<nav id="style-switcher" aria-label="Style switcher"> <button data-theme="gardening" class="active">Gardening</button> <button data-theme="bonfire">Bonfire</button> <button data-theme="sailplane">Sailplane</button> <!-- tools/cmd/addstyle:switcher --><!-- new switcher buttons are inserted directly above this line --> </nav>
<!-- ═══════════════════════════ GARDENING ═══════════════════════════ --> <div class="theme-panel active" data-theme="gardening"> <header class="gate"> <div class="gate-inner"> <h1 class="site-name">tilde.style</h1> <p class="site-tagline">A design toolkit for intentional folk/tilde web presence.</p> <nav class="path" aria-label="Site navigation"> <a href="#constraint-gardening" class="tendril">The constraint</a> <a href="#commands-gardening" class="tendril">Commands</a> <a href="#tooling-gardening" class="tendril">Tooling</a> <a href="#styles-gardening" class="tendril">Styles</a> <a href="#install-gardening" class="tendril">Install</a> </nav> <!-- tools/cmd/wiggle:season:gardening --><!-- season-toggle buttons are inserted directly above this line --> </div> </header> <main> <section class="field-notes" id="constraint-gardening"> <div class="field-notes-inner"> <h2>The central constraint</h2> <blockquote class="specimen"><p>You bring the design intention. The AI executes it.</p></blockquote> <p>Before any generative design session, write your intention in one sentence. The toolkit enforces this. If you can't articulate what you wanted <em>before</em> the output arrived, the loop has already replaced your judgment.</p> <p>This is the <a href="https://trespass.ing" class="tendril">trespass.ing</a> principle applied to design: <strong>author-preservation is agency.</strong></p> </div> </section> <section class="field-notes" id="commands-gardening"> <div class="field-notes-inner"> <h2>Commands</h2> <p>In any Claude Code session with the skill installed:</p> <table class="lernhappen-table"> <thead><tr><th>Command</th><th>Description</th></tr></thead> <tbody> <tr><td><code>/tilde-style init</code></td><td>Design intention interview → <code>style.md</code> + <code>DESIGN.md</code></td></tr> <tr><td><code>/tilde-style gardening</code></td><td>Load the Gardening style (Teich-Morgen palette, pond vocabulary)</td></tr> <tr><td><code>/tilde-style ground</code></td><td>Write your intention before generating. Preserves authorship.</td></tr> <tr><td><code>/tilde-style tend</code></td><td>Review current state against the active metaphor. Flag drift — including season mixing.</td></tr> <tr><td><code>/tilde-style detect</code></td><td>Scan for anti-patterns. Deterministic.</td></tr> <tr><td><code>/tilde-style language</code></td><td>Define a new design language: metaphor → tokens → vocabulary</td></tr> <tr><td><code>/tilde-style document</code></td><td>Write or update <code>DESIGN.md</code> from current state</td></tr> <tr><td><code>/tilde-style season</code></td><td>Add a temporal palette variant via the <code>data-mode</code> pattern</td></tr> </tbody> </table> </div> </section> <section class="field-notes" id="tooling-gardening"> <div class="field-notes-inner"> <h2>Tooling</h2> <p>Some commands above are creative — deriving a metaphor, picking a palette from a photograph — and stay a conversation, on purpose. Others turned out to be purely mechanical, and got ported to <code>wiggle</code>, this toolkit's own compiled CLI.</p> <table class="lernhappen-table"> <thead><tr><th>Command</th><th>Mechanizes</th><th>What it does</th></tr></thead> <tbody> <tr><td><code>wiggle add <name></code></td><td>part of <code>init</code>/<code>language</code>'s file-writing step</td><td>Scaffolds <code>styles/<name>/style.css</code> — loud placeholder magenta, deliberately unfinished</td></tr> <tr><td><code>wiggle link <name></code></td><td>same</td><td>Wires an existing style into this page: <code><link></code>, gallery card, switcher button, panel</td></tr> <tr><td><code>wiggle detect</code></td><td><code>detect</code>'s deterministic checks</td><td>Real static analysis (not regex) — scale-first vocabulary, motion without a still state, raw hex instead of tokens, season mixing</td></tr> <tr><td><code>wiggle season</code></td><td><code>season</code>'s CSS-generation step</td><td>Appends a mode's token overrides, wires a toggle button</td></tr> </tbody> </table> <p><code>wiggle</code> never decides what a style should look like — every command above only runs once a real design intention already exists.</p> <pre class="kindling"><code>git clone git@tangled.org:tilde.style/toolkit ~/tilde.stylecd ~/tilde.style && make build # → ./wiggle, ./wiggle-verify</code></pre> <p>Or install directly:</p> <pre class="kindling"><code>GOPRIVATE=tangled.org go install tangled.org/tilde.style/toolkit/tools/cmd/wiggle@latest</code></pre> </div> </section> <section class="field-notes" id="styles-gardening"> <div class="field-notes-inner"> <h2>Styles</h2> <p>Three styles ship so far, all grounded in a real metaphor, none invented for this page. Every palette below is sampled from an actual photograph, not picked from a mood board — see the thumbnails in the gallery above. Create your own with <code>/tilde-style language</code>.</p> <div class="garden-card"> <h3>Gardening</h3> <p>Extracted from <a href="https://renate.chat/landing" class="tendril">chatbot-garden</a> — a vocational training knowledge assistant. The knowledge base is a <em>pond</em>, content floats as <em>Lernhappen</em>, the ingest workflow is a <em>picnic</em>, the tool server is a <em>shed</em>, the append-only event log is a <em>Rundholz</em>. Its palette — pond green, lily white, birdhouse amber — is sampled directly from the pond photos above, not a generic "nature" green.</p> <p class="gathering-log"><span class="bud">Teich-Morgen palette</span><span class="bud">Pond vocabulary</span><span class="bud">Tending interaction model</span></p> </div> <div class="garden-card"> <h3>Bonfire</h3> <p>A small fire, a finite circle of gathered guests, warmth as presence not spectacle. Two seasons: <em>Funkenflug</em> (night, sparks) and <em>Erntetag</em> (daylight, a harvest gathering) — each season's colors are sampled from the matching real photo, not invented warm tones.</p> <p class="gathering-log"><span class="bud">Funkenflug / Erntetag</span><span class="bud">hearth, kindling, embers</span></p> </div> <div class="garden-card"> <h3>Sailplane</h3> <p>A glider climbing on thermals — no engine, reading wind and light instead of a fixed route. Rooted in the Baltic tideline and a real flight above the clouds — every token, from <code>--wrack</code> to <code>--cumulus</code>, is sampled from those two photos.</p> <p class="gathering-log"><span class="bud">Aloft / Dusk</span><span class="bud">Thermal, Variometer, Outlanding</span></p> </div> <div class="garden-card contribute"> <h3>Contribute a style</h3> <ol> <li>Fork the repo on <a href="https://tangled.org/tilde.style/toolkit" class="tendril">tangled.org</a></li> <li>Run <code>/tilde-style language</code> in a Claude Code session</li> <li>Save your manifest to <code>styles/{your-style}/style.md</code></li> <li>Open a PR — include the metaphor origin and a color swatch</li> </ol> <p class="meta-text">Styles must be grounded in a real-world metaphor, not a design aesthetic.</p> </div> </div> </section> <section class="field-notes" id="install-gardening"> <div class="field-notes-inner"> <h2>Install</h2> <pre class="kindling"><code>git clone git@tangled.org:tilde.style/toolkit ~/.claude/skills/tilde-style</code></pre> <p>Then in any Claude Code session:</p> <pre class="kindling"><code>/tilde-style init</code></pre> <p class="meta-text">Requires <a href="https://claude.ai/code" class="tendril">Claude Code</a>. The skill works from any project directory.</p> </div> </section> </main> <footer class="root-note"> <div class="root-note-inner"> <p>tilde.style — MIT license — <a href="https://tangled.org/tilde.style/toolkit" class="tendril">tangled.org</a></p> <p class="meta-text">Modelled after <a href="https://impeccable.style" class="tendril">impeccable.style</a>. The <code>~</code> is the symbol of personal directories. <em>style</em> = deliberate intention.</p> </div> </footer> </div>
<!-- ═══════════════════════════ BONFIRE ═══════════════════════════ --> <div class="theme-panel" data-theme="bonfire"> <header class="hearth"> <div class="hearth-inner"> <h1 class="site-name">tilde.style</h1> <p class="site-tagline">A design toolkit for intentional folk/tilde web presence.</p> <nav class="ring" aria-label="Site navigation"> <a href="#constraint-bonfire" class="spark">The constraint</a> <a href="#commands-bonfire" class="spark">Commands</a> <a href="#tooling-bonfire" class="spark">Tooling</a> <a href="#styles-bonfire" class="spark">Styles</a> <a href="#install-bonfire" class="spark">Install</a> </nav> <!-- tools/cmd/wiggle:season:bonfire --><!-- season-toggle buttons are inserted directly above this line --> </div> </header> <main> <section class="gathered" id="constraint-bonfire"> <div class="gathered-inner"> <h2>The central constraint</h2> <blockquote><p>You bring the design intention. The AI executes it.</p></blockquote> <p>Before any generative design session, write your intention in one sentence. The toolkit enforces this. If you can't articulate what you wanted <em>before</em> the output arrived, the loop has already replaced your judgment.</p> <p>This is the <a href="https://trespass.ing" class="spark">trespass.ing</a> principle applied to design: <strong>author-preservation is agency.</strong></p> </div> </section> <section class="gathered" id="commands-bonfire"> <div class="gathered-inner"> <h2>Commands</h2> <p>In any Claude Code session with the skill installed:</p> <table class="kindling-table"> <thead><tr><th>Command</th><th>Description</th></tr></thead> <tbody> <tr><td><code>/tilde-style init</code></td><td>Design intention interview → <code>style.md</code> + <code>DESIGN.md</code></td></tr> <tr><td><code>/tilde-style gardening</code></td><td>Load the Gardening style (Teich-Morgen palette, pond vocabulary)</td></tr> <tr><td><code>/tilde-style ground</code></td><td>Write your intention before generating. Preserves authorship.</td></tr> <tr><td><code>/tilde-style tend</code></td><td>Review current state against the active metaphor. Flag drift — including season mixing.</td></tr> <tr><td><code>/tilde-style detect</code></td><td>Scan for anti-patterns. Deterministic.</td></tr> <tr><td><code>/tilde-style language</code></td><td>Define a new design language: metaphor → tokens → vocabulary</td></tr> <tr><td><code>/tilde-style document</code></td><td>Write or update <code>DESIGN.md</code> from current state</td></tr> <tr><td><code>/tilde-style season</code></td><td>Add a temporal palette variant via the <code>data-mode</code> pattern</td></tr> </tbody> </table> </div> </section> <section class="gathered" id="tooling-bonfire"> <div class="gathered-inner"> <h2>Tooling</h2> <p>Some commands above are creative — deriving a metaphor, picking a palette from a photograph — and stay a conversation, on purpose. Others turned out to be purely mechanical, and got ported to <code>wiggle</code>, this toolkit's own compiled CLI.</p> <table class="kindling-table"> <thead><tr><th>Command</th><th>Mechanizes</th><th>What it does</th></tr></thead> <tbody> <tr><td><code>wiggle add <name></code></td><td>part of <code>init</code>/<code>language</code>'s file-writing step</td><td>Scaffolds <code>styles/<name>/style.css</code> — loud placeholder magenta, deliberately unfinished</td></tr> <tr><td><code>wiggle link <name></code></td><td>same</td><td>Wires an existing style into this page: <code><link></code>, gallery card, switcher button, panel</td></tr> <tr><td><code>wiggle detect</code></td><td><code>detect</code>'s deterministic checks</td><td>Real static analysis (not regex) — scale-first vocabulary, motion without a still state, raw hex instead of tokens, season mixing</td></tr> <tr><td><code>wiggle season</code></td><td><code>season</code>'s CSS-generation step</td><td>Appends a mode's token overrides, wires a toggle button</td></tr> </tbody> </table> <p><code>wiggle</code> never decides what a style should look like — every command above only runs once a real design intention already exists.</p> <pre class="kindling"><code>git clone git@tangled.org:tilde.style/toolkit ~/tilde.stylecd ~/tilde.style && make build # → ./wiggle, ./wiggle-verify</code></pre> <p>Or install directly:</p> <pre class="kindling"><code>GOPRIVATE=tangled.org go install tangled.org/tilde.style/toolkit/tools/cmd/wiggle@latest</code></pre> </div> </section> <section class="gathered" id="styles-bonfire"> <div class="gathered-inner"> <h2>Styles</h2> <p>Three styles ship so far, all grounded in a real metaphor, none invented for this page. Every palette below is sampled from an actual photograph, not picked from a mood board — see the thumbnails in the gallery above. Create your own with <code>/tilde-style language</code>.</p> <div class="style-card"> <h3>Gardening</h3> <p>Extracted from <a href="https://renate.chat/landing" class="spark">chatbot-garden</a> — a vocational training knowledge assistant. The knowledge base is a <em>pond</em>, content floats as <em>Lernhappen</em>, the ingest workflow is a <em>picnic</em>, the tool server is a <em>shed</em>, the append-only event log is a <em>Rundholz</em>. Its palette — pond green, lily white, birdhouse amber — is sampled directly from the pond photos above, not a generic "nature" green.</p> <p class="stones"><span class="stone">Teich-Morgen palette</span><span class="stone">Pond vocabulary</span><span class="stone">Tending interaction model</span></p> </div> <div class="style-card"> <h3>Bonfire</h3> <p>A small fire, a finite circle of gathered guests, warmth as presence not spectacle. Two seasons: <em>Funkenflug</em> (night, sparks) and <em>Erntetag</em> (daylight, a harvest gathering) — each season's colors are sampled from the matching real photo, not invented warm tones.</p> <p class="stones"><span class="stone">Funkenflug / Erntetag</span><span class="stone">hearth, kindling, embers</span></p> </div> <div class="style-card"> <h3>Sailplane</h3> <p>A glider climbing on thermals — no engine, reading wind and light instead of a fixed route. Rooted in the Baltic tideline and a real flight above the clouds — every token, from <code>--wrack</code> to <code>--cumulus</code>, is sampled from those two photos.</p> <p class="stones"><span class="stone">Aloft / Dusk</span><span class="stone">Thermal, Variometer, Outlanding</span></p> </div> <div class="style-card contribute"> <h3>Contribute a style</h3> <ol> <li>Fork the repo on <a href="https://tangled.org/tilde.style/toolkit" class="spark">tangled.org</a></li> <li>Run <code>/tilde-style language</code> in a Claude Code session</li> <li>Save your manifest to <code>styles/{your-style}/style.md</code></li> <li>Open a PR — include the metaphor origin and a color swatch</li> </ol> <p class="smoke-text">Styles must be grounded in a real-world metaphor, not a design aesthetic.</p> </div> </div> </section> <section class="gathered" id="install-bonfire"> <div class="gathered-inner"> <h2>Install</h2> <pre class="kindling"><code>git clone git@tangled.org:tilde.style/toolkit ~/.claude/skills/tilde-style</code></pre> <p>Then in any Claude Code session:</p> <pre class="kindling"><code>/tilde-style init</code></pre> <p class="smoke-text">Requires <a href="https://claude.ai/code" class="spark">Claude Code</a>. The skill works from any project directory.</p> </div> </section> </main> <footer class="embers"> <div class="embers-inner"> <p>tilde.style — MIT license — <a href="https://tangled.org/tilde.style/toolkit" class="spark">tangled.org</a></p> <p class="smoke-text">Modelled after <a href="https://impeccable.style" class="spark">impeccable.style</a>. The <code>~</code> is the symbol of personal directories. <em>style</em> = deliberate intention.</p> </div> </footer> </div>
<!-- ═══════════════════════════ SAILPLANE ═══════════════════════════ --> <div class="theme-panel" data-theme="sailplane"> <header class="start"> <div class="start-inner"> <h1 class="site-name">tilde.style</h1> <p class="site-tagline">A design toolkit for intentional folk/tilde web presence.</p> <nav class="kurs" aria-label="Site navigation"> <a href="#constraint-sailplane" class="wegpunkt">The constraint</a> <a href="#commands-sailplane" class="wegpunkt">Commands</a> <a href="#tooling-sailplane" class="wegpunkt">Tooling</a> <a href="#styles-sailplane" class="wegpunkt">Styles</a> <a href="#install-sailplane" class="wegpunkt">Install</a> </nav> <!-- tools/cmd/wiggle:season:sailplane --><!-- season-toggle buttons are inserted directly above this line --> </div> </header> <main> <section class="flugbuch-entry" id="constraint-sailplane"> <div class="flugbuch-entry-inner"> <h2>The central constraint</h2> <blockquote><p>You bring the design intention. The AI executes it.</p></blockquote> <p>Before any generative design session, write your intention in one sentence. The toolkit enforces this. If you can't articulate what you wanted <em>before</em> the output arrived, the loop has already replaced your judgment.</p> <p>This is the <a href="https://trespass.ing" class="wegpunkt">trespass.ing</a> principle applied to design: <strong>author-preservation is agency.</strong></p> </div> </section> <section class="flugbuch-entry" id="commands-sailplane"> <div class="flugbuch-entry-inner"> <h2>Commands</h2> <p>In any Claude Code session with the skill installed:</p> <table class="instrument-table"> <thead><tr><th>Command</th><th>Description</th></tr></thead> <tbody> <tr><td><code>/tilde-style init</code></td><td>Design intention interview → <code>style.md</code> + <code>DESIGN.md</code></td></tr> <tr><td><code>/tilde-style gardening</code></td><td>Load the Gardening style (Teich-Morgen palette, pond vocabulary)</td></tr> <tr><td><code>/tilde-style ground</code></td><td>Write your intention before generating. Preserves authorship.</td></tr> <tr><td><code>/tilde-style tend</code></td><td>Review current state against the active metaphor. Flag drift — including season mixing.</td></tr> <tr><td><code>/tilde-style detect</code></td><td>Scan for anti-patterns. Deterministic.</td></tr> <tr><td><code>/tilde-style language</code></td><td>Define a new design language: metaphor → tokens → vocabulary</td></tr> <tr><td><code>/tilde-style document</code></td><td>Write or update <code>DESIGN.md</code> from current state</td></tr> <tr><td><code>/tilde-style season</code></td><td>Add a temporal palette variant via the <code>data-mode</code> pattern</td></tr> </tbody> </table> </div> </section> <section class="flugbuch-entry" id="tooling-sailplane"> <div class="flugbuch-entry-inner"> <h2>Tooling</h2> <p>Some commands above are creative — deriving a metaphor, picking a palette from a photograph — and stay a conversation, on purpose. Others turned out to be purely mechanical, and got ported to <code>wiggle</code>, this toolkit's own compiled CLI.</p> <table class="instrument-table"> <thead><tr><th>Command</th><th>Mechanizes</th><th>What it does</th></tr></thead> <tbody> <tr><td><code>wiggle add <name></code></td><td>part of <code>init</code>/<code>language</code>'s file-writing step</td><td>Scaffolds <code>styles/<name>/style.css</code> — loud placeholder magenta, deliberately unfinished</td></tr> <tr><td><code>wiggle link <name></code></td><td>same</td><td>Wires an existing style into this page: <code><link></code>, gallery card, switcher button, panel</td></tr> <tr><td><code>wiggle detect</code></td><td><code>detect</code>'s deterministic checks</td><td>Real static analysis (not regex) — scale-first vocabulary, motion without a still state, raw hex instead of tokens, season mixing</td></tr> <tr><td><code>wiggle season</code></td><td><code>season</code>'s CSS-generation step</td><td>Appends a mode's token overrides, wires a toggle button</td></tr> </tbody> </table> <p><code>wiggle</code> never decides what a style should look like — every command above only runs once a real design intention already exists.</p> <pre class="kindling"><code>git clone git@tangled.org:tilde.style/toolkit ~/tilde.stylecd ~/tilde.style && make build # → ./wiggle, ./wiggle-verify</code></pre> <p>Or install directly:</p> <pre class="kindling"><code>GOPRIVATE=tangled.org go install tangled.org/tilde.style/toolkit/tools/cmd/wiggle@latest</code></pre> </div> </section> <section class="flugbuch-entry" id="styles-sailplane"> <div class="flugbuch-entry-inner"> <h2>Styles</h2> <p>Three styles ship so far, all grounded in a real metaphor, none invented for this page. Every palette below is sampled from an actual photograph, not picked from a mood board — see the thumbnails in the gallery above. Create your own with <code>/tilde-style language</code>.</p> <div class="gaggle-card"> <h3>Gardening</h3> <p>Extracted from <a href="https://renate.chat/landing" class="wegpunkt">chatbot-garden</a> — a vocational training knowledge assistant. The knowledge base is a <em>pond</em>, content floats as <em>Lernhappen</em>, the ingest workflow is a <em>picnic</em>, the tool server is a <em>shed</em>, the append-only event log is a <em>Rundholz</em>. Its palette — pond green, lily white, birdhouse amber — is sampled directly from the pond photos above, not a generic "nature" green.</p> <p class="variometer"><span class="variometer-reading">Teich-Morgen palette</span><span class="variometer-reading">Pond vocabulary</span><span class="variometer-reading">Tending interaction model</span></p> </div> <div class="gaggle-card"> <h3>Bonfire</h3> <p>A small fire, a finite circle of gathered guests, warmth as presence not spectacle. Two seasons: <em>Funkenflug</em> (night, sparks) and <em>Erntetag</em> (daylight, a harvest gathering) — each season's colors are sampled from the matching real photo, not invented warm tones.</p> <p class="variometer"><span class="variometer-reading">Funkenflug / Erntetag</span><span class="variometer-reading">hearth, kindling, embers</span></p> </div> <div class="gaggle-card"> <h3>Sailplane</h3> <p>A glider climbing on thermals — no engine, reading wind and light instead of a fixed route. Rooted in the Baltic tideline and a real flight above the clouds — every token, from <code>--wrack</code> to <code>--cumulus</code>, is sampled from those two photos.</p> <p class="variometer"><span class="variometer-reading">Aloft / Dusk</span><span class="variometer-reading">Thermal, Variometer, Outlanding</span></p> </div> <div class="gaggle-card contribute"> <h3>Contribute a style</h3> <ol> <li>Fork the repo on <a href="https://tangled.org/tilde.style/toolkit" class="wegpunkt">tangled.org</a></li> <li>Run <code>/tilde-style language</code> in a Claude Code session</li> <li>Save your manifest to <code>styles/{your-style}/style.md</code></li> <li>Open a PR — include the metaphor origin and a color swatch</li> </ol> <p class="cloudshadow-text">Styles must be grounded in a real-world metaphor, not a design aesthetic.</p> </div> </div> </section> <section class="flugbuch-entry" id="install-sailplane"> <div class="flugbuch-entry-inner"> <h2>Install</h2> <pre class="kindling"><code>git clone git@tangled.org:tilde.style/toolkit ~/.claude/skills/tilde-style</code></pre> <p>Then in any Claude Code session:</p> <pre class="kindling"><code>/tilde-style init</code></pre> <p class="cloudshadow-text">Requires <a href="https://claude.ai/code" class="wegpunkt">Claude Code</a>. The skill works from any project directory.</p> </div> </section> </main> <footer class="landung"> <div class="landung-inner"> <p>tilde.style — MIT license — <a href="https://tangled.org/tilde.style/toolkit" class="wegpunkt">tangled.org</a></p> <p class="cloudshadow-text">Modelled after <a href="https://impeccable.style" class="wegpunkt">impeccable.style</a>. The <code>~</code> is the symbol of personal directories. <em>style</em> = deliberate intention.</p> </div> </footer> </div>
<!-- tools/cmd/addstyle:panels --><!-- new .theme-panel divs are inserted directly above this line -->
<script>(function(){ var buttons = Array.prototype.slice.call(document.querySelectorAll('#style-switcher button')); var cards = Array.prototype.slice.call(document.querySelectorAll('.gallery-card')); var panels = Array.prototype.slice.call(document.querySelectorAll('.theme-panel'));
function setTheme(theme, opts){ opts = opts || {}; buttons.forEach(function(b){ b.classList.toggle('active', b.dataset.theme === theme); }); cards.forEach(function(c){ var active = c.dataset.theme === theme; c.classList.toggle('active', active); c.setAttribute('aria-selected', active ? 'true' : 'false'); }); panels.forEach(function(p){ p.classList.toggle('active', p.dataset.theme === theme); }); try { localStorage.setItem('tilde-style-theme', theme); } catch(e){} if (opts.scroll){ var panel = document.querySelector('.theme-panel[data-theme="' + theme + '"]'); if (panel) panel.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }
buttons.forEach(function(b){ b.addEventListener('click', function(){ setTheme(b.dataset.theme, { scroll: true }); }); }); cards.forEach(function(c){ c.addEventListener('click', function(){ setTheme(c.dataset.theme, { scroll: true }); }); });
var saved = null; try { saved = localStorage.getItem('tilde-style-theme'); } catch(e){} if (saved && document.querySelector('.theme-panel[data-theme="' + saved + '"]')){ setTheme(saved, { scroll: false }); }})();</script>
</body></html>