Techniques
Apothecary Label Card
A paper-framed card with a thin walnut border that evokes Aesop's printed product labels.
.apothecary-card {
background: #FFFFFF;
border: 1px solid #3D2817;
border-radius: 4px;
padding: 32px;
position: relative;
}
.apothecary-card::after {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(61, 40, 23, 0.15);
border-radius: 2px;
pointer-events: none;
}
Amber CTA with Ink Transition
A filled amber button that darkens on hover like ink absorbing into paper, using no shadow or scale.
.amber-cta {
background: #9F4A2E;
color: #FFFFFF;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-family: 'Spectral', Georgia, serif;
font-weight: 500;
letter-spacing: 0.01em;
transition: background 280ms cubic-bezier(0, 0, 0.2, 1);
cursor: pointer;
}
.amber-cta:hover {
background: #703320;
}
Editorial Whitespace Section
A full-width section using exaggerated vertical padding and a single centered text block, replicating the pacing of Aesop's reading-room editorials.
.editorial-section {
background: #FFFFFF;
padding: 120px 24px;
max-width: 640px;
margin: 0 auto;
}
.editorial-section h2 {
font-family: 'Spectral', Georgia, serif;
font-size: 2.25rem;
font-weight: 600;
line-height: 1.3;
color: #3D2817;
letter-spacing: 0.01em;
margin-bottom: 32px;
}
.editorial-section p {
font-family: 'Spectral', Georgia, serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.75;
color: #3D2817;
}