Brutalist

Thick black borders, hard shadows, loud colors. Buttons you can press.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Brutalist */
body.zbr-page {
  background-color: #f4f0e6;
  background-image: linear-gradient(transparent 23px, rgba(0, 0, 0, .08) 24px), linear-gradient(90deg, transparent 23px, rgba(0, 0, 0, .08) 24px);
  background-size: 24px 24px;
}
.zbr-col { gap: 24px; }
.zbr-card {
  backdrop-filter: none;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0 #000;
  align-items: flex-start;
  text-align: left;
}
.zbr-box-profile { background: #ffde00; }
.zbr-box-profile .zbr-box-body { align-items: flex-start; text-align: left; }
.zbr-box-title { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -.02em; }
.zbr-avatar { border-radius: 0; border: 4px solid #000; }
.zbr-name { font-size: 2.4rem; text-transform: uppercase; line-height: 1; letter-spacing: -.03em; }
.zbr-bio { opacity: 1; font-weight: 500; }
.zbr-link {
  color: #000; border-color: #000; text-transform: uppercase; text-align: left; font-weight: 700;
  padding-left: 0; padding-right: 0;
}
.zbr-link::after { content: '↗'; float: right; }
.zbr-link:hover { background: none; color: #ff4911; transform: none; }
.zbr-links .zbr-link, .zbr-table th, .zbr-table td, .zbr-comment { border-top: 2px solid #000; }
.zbr-links .zbr-link:first-child, .zbr-table tr:first-child th, .zbr-table tr:first-child td { border-top: 0; }
.zbr-table th { opacity: 1; text-transform: uppercase; font-size: .8rem; }
.zbr-text { font-size: 1.1rem; font-weight: 500; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; border: 3px solid #000; }
.zbr-friend:nth-child(3n+1) .zbr-noavatar { background: #ff4911; }
.zbr-friend:nth-child(3n+2) .zbr-noavatar { background: #2fff9b; color: #000; }
.zbr-friend:nth-child(3n) .zbr-noavatar { background: #7b61ff; }
.zbr-online { color: #000; background: #2fff9b; display: inline-block; padding: 0 6px; }
.zbr-online::before { display: none; }
.zbr-wall-form { border: 3px solid #000; background: #fff; padding-left: 10px; }
.zbr-btn {
  background: #000; color: #fff; border-radius: 0; text-transform: uppercase; font-weight: 700;
  box-shadow: 4px 4px 0 #ff4911; transition: transform .1s, box-shadow .1s;
}
.zbr-btn:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 #ff4911; filter: none; }
.zbr-views { opacity: 1; font-weight: 700; text-transform: uppercase; }