Techniques
Craft-paper card frame
Product cards that feel like items pinned to a craft-fair board — photo-dominant with a thin warm border and gentle shadow, text tucked below.
.craft-card {
background: #FFFFFF;
border: 1px solid #EBE8E1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.craft-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.craft-card__image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.craft-card__info {
padding: 12px 16px;
background: #FFFCF2;
}
Warm cream input field
Input fields that sit naturally on the cream background, with an Etsy-orange focus ring that feels like a hand underlining something important.
.warm-input {
background: #FFFCF2;
border: 1px solid #E5E0D5;
border-radius: 4px;
padding: 10px 14px;
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: #222222;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.warm-input::placeholder {
color: #999999;
}
.warm-input:focus {
outline: none;
border-color: #F1641E;
box-shadow: 0 0 0 3px rgba(241,100,30,0.25);
}
Hand-drawn accent divider
A subtle wavy SVG divider used between sections, evoking the hand-drawn illustration style found in Etsy's marketing materials.
.handmade-divider {
width: 100%;
height: 24px;
background: url("data:image/svg+xml,%3Csvg width='200' height='12' viewBox='0 0 200 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 Q25 0 50 6 T100 6 T150 6 T200 6' stroke='%23E5E0D5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
opacity: 0.8;
margin: 32px 0;
}