Monochrome

Pure black and white, thin type, no boxes. Everything is spacing.

2 uses · 0 likes

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

See the CSS

/* Monochrome */
::selection { background: #fff; color: #000; }
.zbr-space { max-width: 880px; gap: 24px 80px; }
.zbr-col { gap: 36px; }
.zbr-card { padding: 8px 0; backdrop-filter: none; }
.zbr-box-title { font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; opacity: .5; margin-bottom: 14px; }
.zbr-avatar { border: 0; border-radius: 0; filter: grayscale(1) contrast(1.1); }
.zbr-name { font-size: 2.5rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; overflow-wrap: anywhere; }
.zbr-bio { opacity: .6; font-weight: 300; }
.zbr-text { font-weight: 300; line-height: 1.8; }
.zbr-link { display: flex; justify-content: space-between; background: none; border: 0; border-radius: 0; padding: 11px 0; font-weight: 400; color: #bdbdbd; }
.zbr-link::after { content: '↗'; opacity: .4; }
.zbr-link:hover { background: none; color: #fff; transform: none; }
.zbr-link:hover::after { opacity: 1; }
.zbr-post-link::after { content: none; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(255, 255, 255, .12); }
.zbr-table th { font-weight: 400; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; filter: grayscale(1); }
.zbr-noavatar { background: #222; color: #fff; }
.zbr-online { color: #fff; font-weight: 400; }
.zbr-btn { background: #fff; color: #000; border-radius: 0; font-weight: 500; }
.zbr-views { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }