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 intent of the system. Every element should earn its brightness. Nothing glows for decoration.

I spend contrast on the next action. Motion is for state changes. Colour marks controls a person can use.

The look is editorial, with a warm paper canvas and a serif display voice. I engineered the behaviour around a strict size scale and token-driven colour. Motion never costs a frame. I want the site to read like a well-set magazine and behave like a well-built application.

Principles

Light as a budget

The palette starts from a near-white, slightly warm canvas (40 33% 98%) and a single indigo-to-violet accent. Saturated colour appears on controls a person can use. Links and primary actions get it. So does the live availability signal. When the rest of the page stays quiet, each accent means something.

Two voices

A serif display face carries identity and headlines. That face is Fraunces. A geometric sans carries everything you read. That face is Plus Jakarta Sans. The contrast between them creates hierarchy. Extra weight is not required. Boxes and rules are not required either.

Token-driven values

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

Content and templates

Copy lives in typed content modules and MDX. Templates decide how it looks. Editing a headline never means editing JSX. This boundary is the reason the site can grow without the design eroding.

Motion

Keep motion cheap. A card lifts a hair on hover, and a chip rises 2px. Incoming content fades up. These rules keep that motion free:

transform and opacity animate. Both are GPU-composited. They never trigger layout or paint. Width stays still. So does top. So does box-shadow geometry. Nothing that reflows may animate.
No scroll listeners. Reveal-on-scroll uses one IntersectionObserver. It disconnects the instant an element appears. The page runs no per-frame JS.
prefers-reduced-motion applies 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). Easing is calm. Interactions feel responsive. They do not feel showy.

The result is a page that feels alive on a mid-range phone. It does not spend the performance budget that Core Web Vitals and real users care about.

Why this direction

I picked this direction because a senior engineer's portfolio has two readers: a human who decides whether to write, and a machine that summarises who this person is. Lumen serves both.

For humans, editorial restraint signals craft and seniority. Heavy gradients and dense dashboards do not. For machines, the same discipline produces a page that parsers can quote with accuracy. Semantic HTML. A strict heading order. Descriptive copy over decorative text.

The aesthetic is also defensible. Trend-driven looks age in a season. Heavy neumorphism is one example. Maximal gradients are another. A typographic, token-driven system ages like a typeface: over years, and on purpose.

Impact

Performance headroom. Motion that composites. Lazy-loaded third-party scripts. font-display: swap. Static export. A 90+ Lighthouse score on mobile and desktop stays within reach. The budget is not pre-spent on chrome.
Accessibility by construction. Semantic landmarks and visible focus rings. A skip link. Contrast-checked tokens. I do not bolt accessibility on at the end.
Machine legibility. Clear hierarchy plus rich structured data. Search engines and assistants can quote the page with accuracy.
Maintainability. Content stays out of templates. Design tokens mean new pages inherit the system instead of re-inventing it.

Open work

Lumen is young and unfinished in places.

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

After generative models

Capable models change what a design language is for. Lumen grew from that change.

The page now has a second audience. Assistants read sites on a person's behalf. They summarise. They recommend. Design that buries meaning in imagery is invisible to them. Clever copy without structure is invisible too. Lumen treats semantic structure and honest text as design surface. llms.txt and per-page machine context sit beside the visual layer. Rich schema does too.

Generation is cheap. Taste and coherence are not. When any layout can appear in seconds, the value moves to editing. I cut what the system does not need. I keep it coherent across dozens of pages. Lumen stays opinionated on purpose. A small palette and a strict scale are the guardrails. Together they stop generated layouts from sprawling into visual noise.

Trust is scarce now. Synthetic content floods every channel. A real, accountable human still reads as credibility. Specificity and provenance help. So does restraint, and a consistent voice. Lumen's editorial calm is partly an argument: a person with judgement made this, and stands behind it.

AI lowered the cost of making a page. It raised the value of deciding what the page should say, and how little it needs to say it. Lumen is a bet on that second job.