Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex, nofollow"> <meta name="color-scheme" content="light"> <title>mindco — a design experiment</title> <link rel="stylesheet" href="/public/mindco.css"> <script src="/public/mindco.js" defer></script></head><body> <main> <section class="splash" aria-label="mindco"> <div class="lockup"> <h1 aria-label="mindco"> <svg id="wordmark" viewBox="0 22.42 657 165.3" aria-hidden="true" focusable="false"> <defs> <!-- One paint server for both fill and stroke: color never changes glyph weight. --> <pattern id="palette" patternUnits="userSpaceOnUse" x="570" y="65" width="120" height="120" viewBox="0 0 100 100" preserveAspectRatio="none"> <path class="clay" d="M50 50V-50H150V108Z" /> <path class="ochre" d="M50 50L150 108V150H-50V108Z" /> <path class="patina" d="M50 50L-50 108V-50H50Z" /> </pattern> <filter id="halo" x="-20%" y="-50%" width="140%" height="200%" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="9" /> </filter> </defs> <text class="halo" x="12" y="175" filter="url(#halo)">mindco</text> <text id="letters" x="12" y="175">mindc<tspan id="letter-o">o</tspan></text> </svg> </h1> <a class="tagline" href="https://cameron.stream/services"> <span>Make AI simple</span> <svg viewBox="0 0 64 32" fill="none" aria-hidden="true" focusable="false"><path d="M3 20C20 12 36 12 59 15M48 5l12 10-13 9" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" /></svg> </a> </div> </section> <details class="experiment"> <summary>Explore the palette <span aria-hidden="true">+</span></summary> <div class="panel"> <div class="panel-heading"><h2>A little color, on the o.</h2><button id="reset" type="button">Reset</button></div> <p>Three fixed hues. Adjust their lightness and intensity together, then try each color on its own.</p> <div class="controls"> <div><label for="mode">The o</label><select id="mode"><option value="black">Black</option><option value="segments">Three colored arcs</option><option value="clay">Clay</option><option value="ochre">Ochre</option><option value="patina">Patina</option></select></div> <div><label for="chroma">Intensity <output id="chroma-value" for="chroma">0.140</output></label><input id="chroma" type="range" min="0.03" max="0.20" step="0.005" value="0.14"></div> <div><label for="lightness">Lightness <output id="lightness-value" for="lightness">0.64</output></label><input id="lightness" type="range" min="0.40" max="0.85" step="0.01" value="0.64"></div> </div> <div class="swatches"> <div><div class="sample clay"></div><label for="clay-value">Clay · 35°</label><input id="clay-value" readonly value="oklch(0.64 0.140 35)" aria-label="Clay OKLCH value"></div> <div><div class="sample ochre"></div><label for="ochre-value">Ochre · 85°</label><input id="ochre-value" readonly value="oklch(0.64 0.140 85)" aria-label="Ochre OKLCH value"></div> <div><div class="sample patina"></div><label for="patina-value">Patina · 185°</label><input id="patina-value" readonly value="oklch(0.64 0.140 185)" aria-label="Patina OKLCH value"></div> </div> <div class="copy-row"><button id="copy" type="button">Copy palette CSS</button><span id="copy-status" role="status"></span></div> <p class="fine-print">Values use OKLCH; your browser may gamut-map intense colors. This is a visual experiment, not a claim of name availability.</p> <p class="fine-print">Set in Comfortaa. <a href="/public/fonts/comfortaa/OFL.txt">Font license</a>. The font license applies to the font, not this wordmark or site code.</p> <noscript><p>Palette controls need JavaScript. The wordmark and services link work without it.</p></noscript> </div> </details> </main></body></html>