International style poster: heavy sans type, numbered sections, a red dot and a visible grid.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Swiss Grid */
html, body { overflow-x: clip; }
body.zbr-page { counter-reset: n; }
/* the 12-column grid, drawn behind everything */
body.zbr-page::before {
content: ''; position: fixed; top: 0; bottom: 0; left: 50%; z-index: -1; pointer-events: none;
width: min(980px, calc(100% - 32px)); transform: translateX(-50%);
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px calc(100% / 12));
border-right: 1px solid rgba(0, 0, 0, .06);
}
.zbr-space { gap: 16px 48px; }
.zbr-col { gap: 40px; }
.zbr-card { padding: 0 0 8px; backdrop-filter: none; }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: ''; display: block; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%; background: var(--accent);
}
.cols-1 .zbr-card::before { align-self: flex-start; }
.zbr-box-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.zbr-box-title::before { counter-increment: n; content: counter(n, decimal-leading-zero); display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 700; color: var(--accent); }
.zbr-box-profile .zbr-box-body { align-items: flex-start; text-align: left; }
.cols-1 .zbr-card { align-items: flex-start; text-align: left; }
.zbr-avatar { border: 0; border-radius: 0; filter: grayscale(1) contrast(1.15); }
.zbr-name { font-size: 3rem; font-weight: 800; letter-spacing: -.05em; line-height: .92; overflow-wrap: anywhere; }
.zbr-bio { opacity: 1; font-weight: 500; }
.zbr-text { font-size: 1.08rem; font-weight: 500; }
.zbr-link { display: flex; justify-content: space-between; background: none; border: 0; border-radius: 0; padding: 10px 0; font-weight: 700; color: #111; }
.zbr-link::after { content: '→'; }
.zbr-link:hover { background: none; color: var(--accent); transform: none; }
.zbr-post-link::after { content: none; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: #111; }
.zbr-table th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: 1; }
.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: #111; color: #f4f4f0; }
.zbr-online { color: var(--accent); }
.zbr-wall-form { border-bottom: 2px solid #111; }
.zbr-btn { background: var(--accent); color: #fff; border-radius: 0; font-weight: 700; }
.zbr-views { opacity: 1; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
