2 lines
4.2 KiB
HTML
2 lines
4.2 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hope — A softer direction</title><style>*{box-sizing:border-box}body{margin:0;background:linear-gradient(120deg,#f2e8e4,#eee7f4 45%,#ececf7);color:#342a3d;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1360px;margin:auto;padding:50px 40px}header{max-width:750px;margin-bottom:38px}.brand{font-size:17px;font-weight:600}h1{font-weight:450;font-size:49px;letter-spacing:-.035em;line-height:1.1;margin:18px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#9464aa}p{font-size:16px;line-height:1.7;color:#685b73;margin:0}.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}.option{display:block;text-decoration:none;color:inherit}.preview{height:650px;display:flex;justify-content:center;overflow:hidden;margin-bottom:23px}.preview img{height:100%;width:auto;max-width:100%;object-fit:contain}.icon-row{display:flex;gap:10px;align-items:center;margin:14px 0 4px;font-size:12px;color:#685b73}.icon-row img{width:38px;height:38px;border-radius:9px}.option h2{font-weight:500;font-size:27px;letter-spacing:-.02em;margin:0 0 11px}.option p{font-size:14px}.open{display:inline-flex;align-items:center;min-height:44px;color:#815099;font-size:14px;font-weight:600;margin-top:12px}.option:focus-visible{outline:3px solid #815099;outline-offset:7px}.note{display:flex;gap:35px;border-top:1px solid #d7c9e0;margin-top:35px;padding-top:24px}.note strong{font-size:17px;font-weight:500;white-space:nowrap}.note p{font-size:14px;max-width:75ch}.footer{font-size:12px;margin-top:25px}@media(max-width:850px){main{padding:30px 20px}.options{gap:20px}.preview{height:510px}h1{font-size:40px}}@media(max-width:680px){.options{grid-template-columns:1fr;gap:40px}.preview{height:690px;max-width:390px;margin:auto auto 22px}h1{font-size:36px}.note{display:block}.note p{margin-top:10px}.option p{max-width:45ch}}</style></head><body><main><header><div class="brand">hope / a new design exploration</div><h1>A softer space.<br><em>Three fresh possibilities.</em></h1><p>Inspired by your reference: luminous white, pearlescent color, sculptural voice visuals, and lighter controls. Three new interfaces—not variations of the first set.</p></header><section class="options" aria-label="New design directions"><a class="option" href="opal.html"><div class="preview"><img src="opal-phone.png" alt="Opal: luminous white home with a pearlescent sphere"></div><h2>Opal</h2><div class="icon-row"><img src="opal-icon.svg" alt="New Opal app icon">New icon direction</div><p>A luminous home, a reflective pearl, and a personal welcome. The closest to your inspiration, with voice and text sharing one floating composer.</p><span class="open">Try Opal ↗</span></a><a class="option" href="ribbon.html"><div class="preview"><img src="ribbon-phone.png" alt="Ribbon: translucent sculptural waveform and focused voice controls"></div><h2>Ribbon</h2><div class="icon-row"><img src="ribbon-icon.svg" alt="New Ribbon app icon">New icon direction</div><p>A flowing pastel ribbon turns voice into a sculptural listening space. Focused, spacious, and designed around speaking rather than browsing.</p><span class="open">Try Ribbon ↗</span></a><a class="option" href="prism.html"><div class="preview"><img src="prism-phone.png" alt="Prism: a soft conversation interface with pearlescent sculptural forms"></div><h2>Prism</h2><div class="icon-row"><img src="prism-icon.svg" alt="New Prism app icon">New icon direction</div><p>A quiet conversation that unfolds into useful answers. A compact pearlescent identity, readable replies, and a floating voice-and-text composer.</p><span class="open">Try Prism ↗</span></a></section><section class="note"><strong>My pick: Opal.</strong><p>It captures the reference’s personality most directly. Ribbon is the strongest voice-first option; Prism gives the most space to reading replies. Each demo includes a different replacement app icon, shown large and small.</p></section><p class="footer">Interactive HTML concepts only. All replies and voice states are simulated. No microphone access, live account actions, or changes to the installed app.</p></main></body></html>
|