Design Styles Medium
Bauhaus
The 1919 German art school's aesthetic — primary colors, geometric forms, asymmetric composition, and modernist typography.
Open in Lab
MCP
html css javascript
Targets: JS HTML
Code
/* ============================================================
BAUHAUS — Geometric Modernism Design Showcase
Primary colors + geometric forms + asymmetric grid
============================================================ */
:root {
/* Strict Bauhaus palette */
--red: #e63329;
--yellow: #f9c12e;
--blue: #1b3fdc;
--black: #1a1a1a;
--white: #ffffff;
--cream: #f5f2e8;
--cream-dark: #eae6d9;
/* Typography */
--font-head: "Bebas Neue", "Impact", sans-serif;
--font-body: "IBM Plex Sans", sans-serif;
/* No border radius — Bauhaus is square */
--radius: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
font-family: var(--font-body);
background-color: var(--cream);
color: var(--black);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 60px;
position: relative;
overflow-x: hidden;
}
/* ── Decorative geometric background ── */
.geo-circle {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.geo-circle-1 {
width: 380px;
height: 380px;
top: -120px;
right: -80px;
border: 40px solid var(--yellow);
opacity: 0.2;
}
.geo-circle-2 {
width: 200px;
height: 200px;
bottom: 80px;
left: -60px;
background: var(--blue);
opacity: 0.08;
}
.geo-rect {
position: fixed;
pointer-events: none;
z-index: 0;
}
.geo-rect-1 {
width: 6px;
height: 60vh;
top: 20vh;
right: 32px;
background: var(--red);
opacity: 0.12;
}
/* ── Header ── */
.bh-header {
position: relative;
z-index: 1;
width: 100%;
max-width: 520px;
padding: 0;
overflow: hidden;
}
.header-band {
height: 10px;
background: linear-gradient(90deg, var(--red) 33.3%, var(--yellow) 33.3% 66.6%, var(--blue) 66.6%);
}
.header-content {
display: flex;
align-items: center;
gap: 24px;
padding: 28px 32px 24px;
}
.header-left {
flex-shrink: 0;
}
.header-mark {
position: relative;
width: 52px;
height: 52px;
}
.mark-circle {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--red);
}
.mark-line {
position: absolute;
bottom: -6px;
left: 0;
width: 80px;
height: 6px;
background: var(--black);
}
.header-title {
font-family: var(--font-head);
font-size: 3.4rem;
letter-spacing: 6px;
color: var(--black);
line-height: 1;
}
.header-tagline {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--black);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 4px;
opacity: 0.65;
}
/* ── Main layout ── */
.page-main {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
max-width: 520px;
padding: 24px 32px 0;
}
/* ── Cards ── */
.bh-card {
background: var(--white);
border: 2px solid var(--black);
box-shadow: 5px 5px 0 var(--black);
overflow: hidden;
}
.card-band {
height: 10px;
}
.card-band-red {
background: var(--red);
}
.card-band-yellow {
background: var(--yellow);
}
.card-band-blue {
background: var(--blue);
}
.card-body {
padding: 22px 24px 20px;
}
.card-label {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--black);
opacity: 0.45;
margin-bottom: 18px;
}
/* ── Profile Card ── */
.profile-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.avatar {
width: 72px;
height: 72px;
flex-shrink: 0;
background: var(--cream);
border: 2px solid var(--black);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.avatar-geo {
position: relative;
width: 40px;
height: 40px;
}
.avatar-circle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid var(--black);
}
.avatar-cross {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-cross span {
position: absolute;
background: var(--black);
}
.avatar-cross span:first-child {
width: 2px;
height: 28px;
}
.avatar-cross span:last-child {
width: 28px;
height: 2px;
}
.profile-name {
font-family: var(--font-head);
font-size: 1.5rem;
letter-spacing: 2px;
color: var(--black);
line-height: 1.1;
}
.profile-role {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
color: var(--black);
opacity: 0.6;
margin-top: 4px;
letter-spacing: 0.5px;
}
.profile-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 2px solid var(--black);
}
.stat-block {
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 8px;
border-right: 2px solid var(--black);
background: var(--white);
}
.stat-block:last-child {
border-right: none;
}
.stat-block-yellow {
background: var(--yellow);
}
.stat-block-blue {
background: var(--blue);
}
.stat-block-blue .stat-value,
.stat-block-blue .stat-label {
color: var(--white);
}
.stat-value {
font-family: var(--font-head);
font-size: 1.6rem;
letter-spacing: 1px;
color: var(--black);
line-height: 1;
}
.stat-label {
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--black);
opacity: 0.6;
margin-top: 4px;
}
/* ── Buttons ── */
.button-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
font-family: var(--font-head);
font-size: 1rem;
letter-spacing: 2px;
padding: 12px 22px;
border-radius: 0;
border: 2px solid var(--black);
cursor: pointer;
text-transform: uppercase;
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
box-shadow: 3px 3px 0 var(--black);
outline: none;
}
.btn:active {
transform: translate(3px, 3px);
box-shadow: none;
}
.btn-black {
background: var(--black);
color: var(--white);
}
.btn-black:hover {
background: var(--blue);
border-color: var(--blue);
}
.btn-red {
background: var(--red);
color: var(--white);
}
.btn-red:hover {
background: #c0271f;
}
.btn-outline {
background: var(--white);
color: var(--black);
}
.btn-outline:hover {
background: var(--cream);
}
.btn:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 2px;
}
/* ── Input ── */
.input-group {
display: flex;
flex-direction: column;
gap: 0;
}
.input-label {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
padding-bottom: 10px;
border-bottom: 3px solid var(--black);
margin-bottom: 0;
}
.bh-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 3px solid var(--black);
padding: 14px 0 10px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: var(--black);
outline: none;
letter-spacing: 0.5px;
transition: border-bottom-color 0.2s ease;
}
.bh-input::placeholder {
color: var(--black);
opacity: 0.3;
font-style: italic;
}
.bh-input:focus {
border-bottom-color: var(--blue);
}
/* ── Badges ── */
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 0;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
background: var(--cream);
color: var(--black);
border: 2px solid var(--black);
cursor: default;
user-select: none;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.badge:hover {
transform: translateY(-2px);
}
.badge-black {
background: var(--black);
color: var(--white);
}
.badge-red {
background: var(--red);
color: var(--white);
border-color: var(--red);
}
.badge-yellow {
background: var(--yellow);
color: var(--black);
border-color: var(--black);
}
.badge-blue {
background: var(--blue);
color: var(--white);
border-color: var(--blue);
}
/* ── Responsive ── */
@media (max-width: 480px) {
.page-main {
padding: 16px 20px 0;
}
.header-content {
padding: 20px 20px 18px;
gap: 16px;
}
.button-row {
flex-direction: column;
}
.header-title {
font-size: 2.6rem;
}
}/* ============================================================
Bauhaus — Interactive Effects
Button shadow press, badge color cycle, input underline
============================================================ */
(function () {
"use strict";
const COLORS = ["#E63329", "#F9C12E", "#1B3FDC", "#1A1A1A"];
// ── Button hard-shadow press ────────────────────────────────
// Already handled via CSS :active, but add a satisfying click pop
const buttons = document.querySelectorAll(".btn");
buttons.forEach((btn) => {
btn.addEventListener("click", function () {
// Brief flash of yellow on the clicked button
const orig = btn.style.background;
btn.style.transition = "none";
if (!btn.classList.contains("btn-yellow")) {
btn.style.outline = "3px solid #F9C12E";
btn.style.outlineOffset = "2px";
}
setTimeout(() => {
btn.style.outline = "";
btn.style.outlineOffset = "";
}, 300);
});
});
// ── Badge color rotation on click ──────────────────────────
const badges = document.querySelectorAll(".badge");
const badgeColorClasses = ["badge-black", "badge-red", "badge-yellow", "badge-blue"];
badges.forEach((badge, i) => {
let colorIdx = badgeColorClasses.findIndex((cls) => badge.classList.contains(cls));
if (colorIdx === -1) colorIdx = -1; // plain badge
badge.addEventListener("click", () => {
// Remove current color class
badgeColorClasses.forEach((cls) => badge.classList.remove(cls));
// Advance to next color
colorIdx = (colorIdx + 1) % (badgeColorClasses.length + 1);
if (colorIdx < badgeColorClasses.length) {
badge.classList.add(badgeColorClasses[colorIdx]);
}
// else: plain (cream) badge
});
});
// ── Input focus: accent underline color ────────────────────
const input = document.getElementById("bh-input");
const label = document.querySelector(".input-label");
if (input) {
const accentColors = [
{ border: "#1B3FDC", label: "#1B3FDC" },
{ border: "#E63329", label: "#E63329" },
];
let accentIdx = 0;
input.addEventListener("focus", () => {
const accent = accentColors[accentIdx];
input.style.borderBottomColor = accent.border;
if (label) label.style.color = accent.label;
});
input.addEventListener("blur", () => {
input.style.borderBottomColor = "";
if (label) label.style.color = "";
accentIdx = (accentIdx + 1) % accentColors.length;
});
}
// ── Geometric accent: animate background circle on load ────
const circle1 = document.querySelector(".geo-circle-1");
if (circle1) {
let rotation = 0;
function rotateSlow() {
rotation += 0.05;
circle1.style.transform = `rotate(${rotation}deg)`;
requestAnimationFrame(rotateSlow);
}
rotateSlow();
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bauhaus — Geometric Modernism</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Decorative geometric background elements -->
<div class="geo-circle geo-circle-1" aria-hidden="true"></div>
<div class="geo-circle geo-circle-2" aria-hidden="true"></div>
<div class="geo-rect geo-rect-1" aria-hidden="true"></div>
<!-- Header -->
<header class="bh-header">
<div class="header-band" aria-hidden="true"></div>
<div class="header-content">
<div class="header-left">
<div class="header-mark">
<div class="mark-circle"></div>
<div class="mark-line"></div>
</div>
</div>
<div class="header-right">
<h1 class="header-title">BAUHAUS</h1>
<p class="header-tagline">Form follows function — since 1919</p>
</div>
</div>
</header>
<!-- Main -->
<main class="page-main">
<!-- Profile Card -->
<div class="bh-card profile-card">
<div class="card-band card-band-red"></div>
<div class="card-body">
<div class="profile-row">
<div class="avatar">
<div class="avatar-geo">
<div class="avatar-circle"></div>
<div class="avatar-cross">
<span></span><span></span>
</div>
</div>
</div>
<div class="profile-info">
<h2 class="profile-name">ERNST HOFFMANN</h2>
<p class="profile-role">Master of Form / Werkmeister</p>
</div>
</div>
<div class="profile-stats">
<div class="stat-block stat-block-yellow">
<span class="stat-value">248</span>
<span class="stat-label">WORKS</span>
</div>
<div class="stat-block">
<span class="stat-value">14K</span>
<span class="stat-label">FOLLOWERS</span>
</div>
<div class="stat-block stat-block-blue">
<span class="stat-value">96%</span>
<span class="stat-label">RATING</span>
</div>
</div>
</div>
</div>
<!-- Buttons -->
<div class="bh-card buttons-card">
<div class="card-band card-band-yellow"></div>
<div class="card-body">
<p class="card-label">CONTROLS</p>
<div class="button-row">
<button class="btn btn-black" id="btn-primary">
ENTER WORKSHOP
</button>
<button class="btn btn-red" id="btn-secondary">
EXHIBITION
</button>
<button class="btn btn-outline" id="btn-ghost">
ARCHIVE
</button>
</div>
</div>
</div>
<!-- Input -->
<div class="bh-card input-card">
<div class="card-band card-band-blue"></div>
<div class="card-body">
<p class="card-label">SEARCH THE ARCHIVE</p>
<div class="input-group">
<label class="input-label" for="bh-input">ARTIST OR DISCIPLINE</label>
<input class="bh-input" id="bh-input" type="text" placeholder="e.g. Gropius, Typography…" />
</div>
</div>
</div>
<!-- Badges -->
<div class="bh-card badges-card">
<div class="card-band card-band-red"></div>
<div class="card-body">
<p class="card-label">DISCIPLINES</p>
<div class="badge-row">
<span class="badge badge-black">TYPOGRAPHY</span>
<span class="badge badge-red">WEAVING</span>
<span class="badge badge-yellow">CARPENTRY</span>
<span class="badge badge-blue">POTTERY</span>
<span class="badge badge-black">METALWORK</span>
<span class="badge">PAINTING</span>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>Bauhaus
The Bauhaus school, founded in Weimar Germany in 1919, produced one of the most enduring design philosophies of the 20th century: that form should follow function, that craft and fine art are one, and that beauty emerges from geometric truth. The school’s visual language — primary colors, pure geometric shapes, bold sans-serif type, and asymmetric grid compositions — has influenced every generation of graphic and product designers since.
In web design, Bauhaus aesthetics translate into bold, deliberate layouts built from strict geometric blocks. Color is used structurally, not decoratively: a red band signals a category, a yellow block creates visual tension against black, blue grounds the composition. Typography is architectural — heavy grotesque headings command space, while clean body text maintains the functional clarity that Bauhaus teachers like Herbert Bayer and László Moholy-Nagy championed.
The warm cream background (#F5F2E8) evokes the paper stock of original Bauhaus publications — a reminder that even revolutionary modernism has tactile roots. Everything else on the page is built from those four sacred Bauhaus materials: red, yellow, blue, and black.
Key characteristics
- Strict four-color palette: red, yellow, blue, black on cream paper
- Typography split between bold grotesque headers (
Bebas Neue) and clean body text (IBM Plex Sans) - Layouts built from geometric blocks — circles, rectangles, dividing bands
- Asymmetric composition: elements break the expected center alignment
- Buttons and inputs are perfectly square —
border-radius: 0always - Cards use a colored “band” header as a structural element, not decoration
- Badges are rectangular labels, not pills
When to use
- Cultural institutions, art galleries, museums, and design portfolios
- Brand identities that want to communicate authority and timelessness
- Typographic-forward editorial layouts
- Any project where geometric discipline and historical weight are assets