Brand Guidelines

IntervueClub Branding

Guidelines for using IntervueClub's visual identity. If you're writing about IntervueClub, building an integration, or contributing to the project — this is the reference.

The Mark

How the wordmark is constructed and when to use it

SysMapbeta

ON DARK

SysMapbeta

ON LIGHT

Sys is set in IBM Plex Mono, weight 400, secondary text color — representing the systematic, structural half. Map is weight 600, primary text color — the destination, the knowledge. The weight contrast is intentional and load-bearing.

✓Use on any solid background — dark or light

✓Maintain the weight contrast between Sys and Map

✓Keep the beta pill when the product is in beta

✓Use IBM Plex Mono exclusively for the wordmark

Don't

✕Make both parts the same font weight

✕Add color, gradients, or shadows to the wordmark

✕Use a different typeface or monospace substitute

✕Place on a busy or low-contrast background

Color System

Click any swatch to copy its hex value

Dark Mode Surfaces

Dark Mode Text

Light Mode Surfaces

Light Mode Text

Semantic — Difficulty

Typography

IBM Plex Sans for prose and UI · IBM Plex Mono for code, labels, and metadata

IBM Plex Sans — Prose & UI

System Design Problems600 · 40px · Headings

Design a URL Shortener600 · 18px · Section title

A URL shortener takes a long URL and produces a short alias that redirects to the original.400 · 15px · Body text

Category · Difficulty · Last Updated400 · 14px · UI secondary

Tags and metadata labels500 · 12px · Labels

IBM Plex Mono — Code & Metadata

IntervueClub600 · 22px · Wordmark

design-a-url-shortener400 · 14px · Slugs & paths

SELECT * FROM urls WHERE short_code = 'abc123'400 · 13px · Code

2026-06-07 · @intervueclub · 2 contributors400 · 11px · Metadata

Voice & Tone

How IntervueClub communicates with engineers

Technical

We write for engineers who already know what a database is. No hand-holding, no oversimplification.

Dense

Every sentence earns its place. We say more per word than any other system design resource.

Rigorous

No account, no tracking pixel, no filler. Every problem is worked to the depth the problem deserves.

Examples

✓A URL shortener takes a long URL and produces a short alias. At Bitly's scale — 10 billion clicks/month — it becomes a distributed systems problem.

✕In this tutorial, we will learn how to design a simple URL shortener step by step for beginners!

✓Use 302 over 301. Permanent redirects are cached by browsers — you lose analytics and the ability to update the destination.

✕Both 301 and 302 redirects work fine. You can choose either one based on your personal preference.

Usage

When referencing IntervueClub in writing or product

✓Write "IntervueClub" — capital Q, one word

✕Write "intervueclub", "INTERVUECLUB", "IntervueClubn", or "quroum"

✓Link to intervueclub.dev when citing problems or content

✕Reproduce full problem content without attribution

✓Link to intervueclub.dev when referencing content

✕Republish or resell the content as your own

IntervueClub © 2026Problems