Thumbtack Thumbprint 디자인 시스템.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Home project shortlist</title><style>
:root{--ink:#2b2d2f;--muted:#595c61;--line:#dddee1;--soft:#f5f6f6;--action:#0175a3;--selected:#f0faff}*{box-sizing:border-box}body{margin:0;padding:32px;font:400 16px/1.4 system-ui,sans-serif;color:var(--ink);background:white}h1{font-size:36px;line-height:1.05;letter-spacing:-.02em;margin:12px 0}h2{font-size:22px;margin:0 0 8px}p{margin:8px 0 20px}.eyebrow,.meta{font-size:14px;color:var(--muted)}header{display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:24px}svg{width:180px;height:120px}.filters{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}select,button{font:inherit;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:10px 16px;background:white;color:var(--ink)}label{display:flex;align-items:center;gap:8px}input{accent-color:var(--action);width:18px;height:18px}main{display:grid;grid-template-columns:2fr 1fr;gap:24px}.cards{display:grid;gap:16px}.card{padding:24px;border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:start}.avatar{display:grid;place-items:center;border-radius:50%;height:48px;background:var(--selected);color:var(--action);font-weight:700}.card p{margin:4px 0 12px}.card button[aria-pressed=true]{background:var(--selected);border-color:var(--action);color:var(--action)}.badge{display:inline-block;background:#eefbf4;color:#126a4b;padding:4px 8px;border-radius:6px;font-size:14px}aside{align-self:start;border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--soft)}aside ul{padding-left:20px}aside li{margin:12px 0}.primary{background:var(--action);color:white;border-color:var(--action)}button{cursor:pointer}button:hover{border-color:var(--action)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #066286;outline-offset:3px}#notice{font-size:14px;color:#126a4b}footer{font-size:12px;color:var(--muted);margin-top:24px}#empty{padding:24px;border:1px dashed var(--line);border-radius:12px}[hidden]{display:none!important}@media(max-width:699px){body{padding:20px}header{grid-template-columns:1fr}header svg{display:none}h1{font-size:28px}main{grid-template-columns:1fr}.card{grid-template-columns:40px 1fr;padding:16px}.avatar{height:40px}.card button{grid-column:2;justify-self:start}}
</style><body><header><div><span class="eyebrow">HOME PROJECT / FICTIONAL DIRECTORY</span><h1>Find the right help for home</h1><p>Compare the details, then build a shortlist for a garden project.</p></div><svg viewBox="0 0 180 120" aria-hidden="true"><path d="M20 66 84 16l64 50v45H20z" fill="#e0f4fe"/><path d="m9 68 75-58 75 58" fill="none" stroke="#0175a3" stroke-width="5"/><path d="M65 110V70h38v40" fill="#fff" stroke="#066286" stroke-width="3"/><circle cx="146" cy="80" r="24" fill="#b0eacb"/><path d="M146 80v35" stroke="#126a4b" stroke-width="4"/></svg></header><div class="filters"><label>Project type <select id="category"><option value="all">All garden services</option><option value="design">Garden design</option><option value="care">Garden care</option></select></label><label><input id="available" type="checkbox">Available this week</label><span id="count" class="meta" aria-live="polite"></span></div><main><section aria-label="Service providers"><div id="cards" class="cards"></div><div id="empty" hidden><h2>No matching services</h2><p>Try a different project type or include later availability.</p><button id="reset">Reset filters</button></div></section><aside><h2>Project shortlist</h2><p class="meta">Saved only while this preview is open.</p><ul id="saved"></ul><p id="savedEmpty">Save a provider to compare your options.</p><button class="primary" id="review">Review shortlist</button><p id="notice" role="status"></p></aside></main><footer>Original HTML study using documented Thumbprint v2 primitives. System font fallback; no Thumbtack service, ratings or contact request.</footer><script>
const providers=[{id:'fern',name:'Fern & Field',type:'design',description:'Planting plans for small outdoor spaces.',timing:'This week',available:true,initials:'FF'},{id:'grove',name:'Grove Garden Care',type:'care',description:'Seasonal pruning, planting and routine care.',timing:'Next week',available:false,initials:'GG'},{id:'yard',name:'Yard Workshop',type:'design',description:'Practical layouts for shared courtyards.',timing:'This week',available:true,initials:'YW'}];const chosen=new Set();const $=id=>document.getElementById(id);
function render(){const shown=providers.filter(p=>($('category').value==='all'||p.type===$('category').value)&&(!$('available').checked||p.available));$('cards').replaceChildren(...shown.map(p=>{const card=document.createElement('article');card.className='card';card.innerHTML=`<span class="avatar" aria-hidden="true">${p.initials}</span><div><h2>${p.name}</h2><p>${p.description}</p><span class="badge">${p.timing}</span></div><button aria-pressed="${chosen.has(p.id)}" aria-label="${chosen.has(p.id)?'Remove':'Save'} ${p.name}">${chosen.has(p.id)?'Saved':'Save'}</button>`;card.querySelector('button').onclick=()=>{chosen.has(p.id)?chosen.delete(p.id):chosen.add(p.id);$('notice').textContent='';render()};return card}));$('count').textContent=`${shown.length} of ${providers.length} sample providers`;$('empty').hidden=shown.length>0;$('saved').replaceChildren(...providers.filter(p=>chosen.has(p.id)).map(p=>{const li=document.createElement('li');li.textContent=p.name;return li}));$('savedEmpty').hidden=chosen.size>0;}
$('category').onchange=render;$('available').onchange=render;$('reset').onclick=()=>{$('category').value='all';$('available').checked=false;render()};$('review').onclick=()=>{$('notice').textContent=chosen.size?`Shortlist ready: ${chosen.size} provider${chosen.size===1?'':'s'}. No contact request has been sent.`:'Save at least one provider first.'};render();
</script></body></html>