Why my portfolio looks like a newspaper (and what that taught me about design systems)

Most developer portfolios are a dark gradient with a glowing card. I wanted something people would remember, so mine is a newspaper: The Nandan Review.

Underneath it is a small design system I call The Press. This post is about how it works, why the newspaper idea held together, and what it taught me about design systems in general. If you've ever stared at a blank stylesheet wondering what shade of grey to use, this is for you.

The idea: ink on paper

A newspaper press is mechanical, precise and industrial. It stamps ink onto paper with force and intention. I wanted every interaction on the site to feel the same way: deliberate and a little permanent.

That gave me a first principle that I could test every decision against:

Everything should feel printed.

What does that rule out?

• Glowing or fluorescent colours. Print is muted and natural.
• Rounded, soft borders. Rules in print are hard and sharp.
• Floaty blurred shadows. Print shadows, if they exist, are sharp and dark, cast by a light that never moves.

Once I had that single sentence, dozens of tiny decisions stopped being decisions.

Three fonts, three jobs

The second principle is typographic hierarchy: every font serves one purpose and never overlaps.

• Archivo (variable) for display headlines. Heavy weight, tight letter-spacing, commands attention.
• Newsreader (variable) for body text. Elegant serifs and a comfortable reading rhythm.
• Space Mono for metadata, labels and code. Its monospaced precision tells you "this is a technical detail, not narrative."

The enforcement matters more than the choice. Because each font has exactly one role, the typography becomes invisible. Readers absorb content without ever thinking about the typeface, which is the goal.

Colour: paper, ink, oxblood

The palette is deliberately tiny: a warm paper tone, a near-black ink, and an oxblood accent. That's it.

Here's the practical effect. When I add a new component, I never ask "what shade should this be?" The answer is already decided: it's paper, ink or oxblood. In a design system, that's what "tokens" are for. Instead of hard-coding colours, I name them:

:root {
  --paper:    /* warm off-white */;
  --ink:      /* near-black */;
  --oxblood:  /* the one accent colour */;
}

.press-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);   /* hard shadow, no blur */
}

.press-tag {
  font-family: 'Space Mono', monospace;
  color: var(--oxblood);
}

Notice there's no blur radius on that shadow. A hard, offset shadow is the whole "printed" look in one line.

The grid is law, but not a prison

Layouts follow a strict column grid that gives the page a visual rhythm. But it flexes at breakpoints, like a newspaper reformatting for different editions:

• Desktop: a multi-column layout that mirrors a broadsheet.
• Mobile: a single column that reads like a pocket edition.

Because everything snaps to the same underlying grid, elements align vertically across the page, which creates the quiet order that print designers perfected over centuries.

A tiny component library

A design system isn't only tokens. It's a set of reusable pieces that carry those tokens everywhere. The Press has a handful of primitives:

• PressSection: the paper background with a subtle noise texture overlay.
• SectionMasthead: section headers with an animated rule that draws across the page, like a press stamping down the title.
• PressTag and PressButton: consistent interactive elements with hard borders and monospaced labels.

Each one is small, but because every section uses them, the whole site feels like one publication instead of a collage.

Motion that has a reason

My motion rule: animation must explain something. It isn't decoration.

• Content reveals with a gentle stagger and slight upward motion, like sheets of paper being fed through a press. It guides attention from one thing to the next.
• Section rules draw horizontally, simulating the mechanical action of a press.

If an animation doesn't help someone understand order or structure, it doesn't ship.

Why a newspaper for a portfolio?

A developer portfolio is fundamentally a record of work. A newspaper is a format people already know how to scan:

• Projects become front-page stories.
• Certifications become archive entries.
• Skills become classified listings.

The metaphor gives structure to content that would otherwise be a pile of cards. It also makes the page feel intentional, because a theme that's applied consistently reads as craft.

What I'd warn you about

I'm not going to pretend a strong theme is free.

• A strong theme can become a cage. Some content just doesn't fit a newspaper layout, and you end up bending it or leaving it out.
• Accessibility needs deliberate checking. Beige paper plus grey text is an easy way to fail contrast requirements. Muted palettes need extra attention, not less.
• Themes age. If you make the metaphor the whole identity, changing it later is a rebuild.
• It's not for everyone. Many visitors just want the facts fast, and a distinctive layout adds a tiny cost to that.

What it taught me about design systems

Three lessons I'm confident about:

1. A design system isn't a component library. It's a list of decisions you refuse to remake. The components are just where the decisions live.
2. Fewer options means faster shipping. Three colours and three fonts removed more work than any plugin could.
3. Write the rules in a sentence. "Everything should feel printed" settled arguments I hadn't even had yet.

If you're building your own system, start with the sentence, not the Figma file.

Build a mini "Press" system in 15 minutes

Here's a tiny version you can paste into a page to feel the approach. The colour values are examples for this demo, so choose your own.

:root {
  --paper:    #f4efe6;
  --ink:      #1c1c1c;
  --oxblood:  #7a1f1f;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  line-height: 1.6;
}

h1, h2 { font-family: 'Archivo', system-ui, sans-serif; letter-spacing: -0.02em; }

.label { font-family: 'Space Mono', monospace; font-size: .8rem; color: var(--oxblood); text-transform: uppercase; }

.card  { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 1rem; background: var(--paper); }

.rule  { border: 0; border-top: 3px double var(--ink); }

<p class="label">Front page</p>
<h1>Local developer ships honest portfolio</h1>
<hr class="rule" />
<div class="card"><h2>Project</h2><p>A one-paragraph story.</p></div>

That's about all the "style" it takes: three colours, three fonts, a hard shadow and a double rule.

Check your contrast

A muted palette needs a deliberate accessibility check. WCAG asks for a contrast ratio of at least 4.5:1 for normal body text. For the example colours above:

The last row is the classic trap: a soft grey that looks elegant but fails. You can calculate the ratio yourself from relative luminance, or use any browser dev-tools contrast checker.

A design-system starter checklist

• [ ] A one-sentence principle ("everything should feel printed")
• [ ] 3–5 colour tokens, named by role, not by hue
• [ ] Fonts with one job each
• [ ] A spacing scale (4, 8, 16, 24, 32…)
• [ ] 4–6 primitive components
• [ ] A motion rule ("animation must explain something")
• [ ] A contrast check on every colour pair
• [ ] A mobile layout

Common questions

"Won't a strict theme limit me?" Yes, deliberately. The limit is the feature.

"How do I pick the principle?" Look at something physical whose feel you admire (paper, signage, a machine) and describe it in one sentence.

"How many tokens is too many?" If you can't remember them, there are too many.

"Dark mode?" A themed system needs a second palette designed, not just inverted. For a print theme, a dark variant can be "newsprint at night", muted rather than neon.

If you want to see it in action, the site is at surajnandan.in. What's the single sentence that defines your design taste?