Techniques
Polaroid photo frame
The signature card. White photo border on three sides, a fat caption border at the bottom, drop shadow to lift it off the paper background, and an optional 2° casual tilt.
.polaroid-card {
background: #F5F5F0;
padding: 16px 16px 48px 16px; /* fat bottom = caption space */
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
transform: rotate(-2deg);
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 280ms ease;
}
.polaroid-card:nth-child(even) { transform: rotate(3deg); }
.polaroid-card:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.polaroid-card__image {
width: 100%;
aspect-ratio: 1 / 1; /* square photo */
object-fit: cover;
border-radius: 2px;
filter: saturate(0.9) sepia(0.06); /* warm vintage tint */
}
.polaroid-card__caption {
font-family: 'Caveat', cursive;
font-size: 20px;
color: #6D4C41;
margin-top: 16px;
text-align: center;
}
Rainbow spectrum stripe
The 1970s brand divider — five bands in fixed order (red → orange → yellow → green → blue). Works as a section break, a top-of-page banner, or a corner ribbon.
.rainbow-stripe {
height: 8px;
background: linear-gradient(
to right,
#E53935 0%, #E53935 20%,
#FF8F00 20%, #FF8F00 40%,
#FDD835 40%, #FDD835 60%,
#43A047 60%, #43A047 80%,
#1E88E5 80%, #1E88E5 100%
);
border-radius: 2px;
}
.rainbow-stripe--banner {
height: 6px;
width: 100%;
border-radius: 0;
}
Aged-paper backdrop with warm grain
The page isn't pure white — it's `#F0E6D3`, an aged notebook tone, with a very subtle warm noise that reads as photo-paper texture.
.paper-backdrop {
background-color: #F0E6D3;
background-image:
radial-gradient(ellipse at top, rgba(255,143,0,0.05), transparent 60%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0 0.15 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
background-size: auto, 120px 120px;
}