teamBeginner
Cottage Team
Sage and terracotta team grid with handmade serif and warm cream paper.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a warm 'cottagecore' team section with Tailwind: rich cream paper background (#f5e6c8), a centered Fraunces serif header with an italic terracotta accent word, then a 4-up grid of team cards. Each card is a slightly lighter cream with a thin warm-brown border, rounded-xl corners, and a soft hover lift. Inside: a circular initials avatar with one of four earthy backgrounds (sage, terracotta, mustard, olive), a Fraunces serif name, a JetBrains Mono mustard role line, and a Fraunces serif bio. The vibe is hand-crafted-by-real-people — not the SaaS-team grid.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-cottage-team
-->
<section class="section"><div class="head"><span class="kicker">— OUR FOLKS —</span><h2>Made by hand,<br><em>by humans.</em></h2></div><div class="team"><article class="member"><div class="avatar a1">CM</div><h3>Casey Morgan</h3><span class="role">Engineering · est. 2018</span><p>Likes long talks about cache invalidation and short walks at lunch.</p></article><article class="member"><div class="avatar a2">RB</div><h3>Robin Bell</h3><span class="role">Design · est. 2019</span><p>Believes in deadlines, thick paper, and never shipping a placeholder.</p></article><article class="member"><div class="avatar a3">JT</div><h3>Jordan Tran</h3><span class="role">Operations · est. 2020</span><p>Manages the impossible bits. Knows where every Stripe receipt lives.</p></article><article class="member"><div class="avatar a4">AS</div><h3>Avery Stein</h3><span class="role">Research · est. 2022</span><p>Reads three papers before breakfast. Would rather draw than slide-deck.</p></article></div></section>