Around 2020, I noticed beige website design popping up. And when I started my digital garden in 2023, I chose that direction. My favorite examples of the genre pair up classic / vintage serif fonts with illustrations. I think the idea is simply to evoke old books and human writing.
In the past couple years, led by Anthropic, a handful of LLM-related websites have co-opted the design style. Their branding in general aims to give the machine an implied humanity. Sometimes I wonder if that’s how they’ve tricked me into using Claude more than other models…
Anyhow I’ve collected some examples of the beige website here and I’ll keep adding them as I find them. Admittedly, a couple might lean more gray when I see them in context here.
Examples
.gallery {
width: min(600px, 90vw);
margin: 0 auto;
max-width: 600px;
}
.gallery {
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 15px;
}
.gallery > .image-container {
display: flex;
justify-content: center;
gap: 0px;
overflow: hidden;
border-radius: 10px;
transition: all 0.5s ease;
border: 1px solid transparent;
height: 100px;
cursor: pointer;
width: min(600px, 100%);
margin: 0 auto;
border: 1px solid var(–color-3);
}
.gallery > .image-container a {
width: 100%;
padding: 0px;
}
.image-container:hover {
border: 1px solid var(–color-1);
}
.image-container figure {
height: 100px;
width: 100%;
overflow: hidden;
border-radius: 10px;
position: relative;
opacity: 1;
margin: 0;
transition: all 0.5s ease;
pointer-events: none;
}
.image-container img {
position: absolute;
top: 0%;
transform: translate(0, 0%);
width: 100%;
height: auto;
transition: all 0.5s ease;
pointer-events: none;
}
Leave a Reply