PPritam.

Design Language

Lumen

The design system behind mepritam.dev — editorial calm meets engineered precision. Why it was chosen, its impact, what's next, and how design changes in a post-AI world.

What is Lumen?

Lumen is the design language that powers mepritam.dev. The name is the SI unit of luminous flux — a measure of usable light. That is the whole intent of the system: every element should earn its brightness. Nothing glows for decoration; contrast, motion, and colour are spent only where they help a reader move, read, or decide.

Lumen pairs editorial calm — a warm paper canvas, a serif display voice, and generous whitespace — with engineered precision — a strict type scale, a token-driven colour system, and motion that never costs a frame. It is meant to read like a well-set magazine and behave like a well-built application.

The principles

1. Light is a budget. The palette starts from a near-white, slightly warm canvas (40 33% 98%) and a single indigo→violet accent. Saturated colour appears only on things you can act on — links, primary actions, the live availability signal. When everything is quiet, the few bright things mean something.

2. Two voices, clearly cast. A serif display face (Fraunces) carries identity and headlines; a geometric sans (Plus Jakarta Sans) carries everything you actually read. The contrast between them creates hierarchy without extra weight, boxes, or rules.

3. Tokens, not values. Colour, radius, shadow, and spacing live as CSS custom properties and Tailwind tokens. A light/dark theme is a swap of variables, not a re-skin. This is what makes the system scale across pages without drift.

4. Content is separate from template. Copy lives in typed content modules and MDX; components only decide how it looks. Editing a headline never means editing JSX. This boundary is the reason the site can grow without the design eroding.

5. Motion is a courtesy, never a tax. See Motion below — it is the rule that most defines how Lumen feels.

Motion: micro-animations with zero performance cost

Lumen uses small, frequent micro-interactions — a card that lifts a hair on hover, a chip that rises 2px, content that fades up as it enters the viewport. The rule that keeps them free:

  • Only transform and opacity are animated. Both are GPU-composited, so they never trigger layout or paint. No animating width, top, box-shadow geometry, or anything that reflows.
  • No scroll listeners. Reveal-on-scroll uses a single IntersectionObserver that disconnects the instant an element appears — there is no per-frame JS.
  • prefers-reduced-motion is honoured everywhere. Motion-sensitive users get the final, static state with no transitions.
  • No layout shift. Animations start from their in-flow position; nothing appears late or jumps, so Cumulative Layout Shift stays at zero.
  • Durations stay short (150–500ms) and easing is calm, so interactions feel responsive rather than showy.

The result is a page that feels alive on a mid-range phone without spending the performance budget that Core Web Vitals — and real users — care about.

Why this direction

A senior engineer's portfolio has two readers: a human deciding whether to reach out, and increasingly a machine summarising who this person is. Lumen is built for both.

For humans, the editorial restraint signals craft and seniority more honestly than heavy gradients or dense dashboards would. For machines, the same discipline — semantic HTML, a strict heading order, descriptive copy over decorative text — produces a page that is trivial to parse and quote accurately.

It is also a defensible aesthetic. Trend-driven looks (heavy neumorphism, maximal gradients, the "gradient on the last word" hero) age in a season. A typographic, token-driven system ages like a typeface: slowly, and on purpose.

The impact

  • Performance headroom. Motion that only composites, lazy-loaded third-party scripts, font-display: swap, and static export give a real shot at 90+ Lighthouse on mobile and desktop — the budget isn't pre-spent on chrome.
  • Accessility by construction. Semantic landmarks, visible focus rings, a skip link, and contrast-checked tokens mean a11y isn't bolted on at the end.
  • Machine legibility. Clear hierarchy plus rich structured data make the site easy for search engines and assistants to represent correctly.
  • Maintainability. Content/template separation and design tokens mean new pages inherit the system instead of re-inventing it.

What can still improve

Lumen is young and deliberately unfinished in places:

  • A real motion spec. The principles exist; a documented set of named durations and easings (as tokens) would make new components consistent by default.
  • Per-type Open Graph art. A templated 1200×630 image per page would lift social and search presentation beyond the single profile photo in use today.
  • A component gallery. A living style guide of buttons, cards, and badges would make the system self-documenting for future contributors.
  • Density modes. A comfortable/compact toggle for data-heavy pages (resume, tools) without forking the type scale.
  • Measured, not assumed. Real Lighthouse and axe runs on every route should replace "best-practices-by-construction" with evidence.

Designing in a post-AI world

The arrival of capable AI changes what a design language is for. Three shifts shaped Lumen:

The page now has a second audience. Assistants read, summarise, and recommend sites on a person's behalf. Design that buries meaning in imagery or clever copy is invisible to them. Lumen treats semantic structure and honest text as design surface — llms.txt, per-page machine context, and rich schema sit alongside the visual layer as first-class deliverables.

Generation is cheap; taste and coherence are not. When any layout can be produced in seconds, the value moves to editing — the judgement to remove, to constrain, to keep a system coherent across dozens of pages. Lumen is opinionated on purpose: a small palette and a strict scale are guardrails that keep AI-assisted iteration from sprawling into visual entropy.

Trust is the new scarce resource. As synthetic content floods every channel, signals of a real, accountable human — specificity, provenance, restraint, a consistent voice — read as credibility. Lumen's editorial calm is partly an argument: a person with judgement made this, and stands behind it.

The throughline: AI lowered the cost of making an interface and raised the value of deciding what it should say and how little it needs to say it. Lumen is a bet on the second thing.