I don't just use a design system. I build the one this site runs on.
Everything you are looking at, the sticky notes, the wobble, the wires, the type, the way it moves, comes from one language I authored. Here it is in full, the way I would walk a team through it.
Branding
The strongest brand decision was refusing to make a portfolio about the work. This site is the workspace where the work happens. You are standing inside my canvas.
No abstract mark. The wordmark is a sticky note that types out neha on load, in ink, because colour is reserved for actions and the name stays quiet. One shared component sits in the nav and every breadcrumb, so the header reads identically across the whole site. It honours reduced-motion by showing the finished note, no typing.
Design system
A system is only real if the team can reach for it without me. So it is a small set of physical objects: one card, one grid, one set of colours, one spacing scale. Everything else is composition.
- White fill. The default surface. Colour is earned, never decorative.
- 2px solid #111 border. Hard ink line, the same weight everywhere.
- Hard offset shadow. 3px 3px 0 #111, a cut-paper shadow, not a soft blur.
- Organic radius. Mixed corners like 15px 11px 17px 10px, hand-drawn, never uniform.
- Hand tilt. A per-object rotation of one to two degrees, placed, not snapped.
Ink carries the structure. Each surface owns exactly one accent, reserved for real signal: data, the primary action, the active state. No surface borrows another's colour, so a hue always means one place.
Tonality
Tone is carried twice: by the shape of the letters and by the shape of the sentences. Both are set to warm, plain, and sure of themselves.
One face carries headlines, body, UI, and in-graphic labels, so the whole site speaks in a single voice. Warmth is built into the letter shapes, which is why the rest of the system can stay disciplined.
Motion
Motion here has a job: confirm a state, or draw a connection. It is the texture of a workspace, so it stays calm. Nothing moves to show off.
The one gesture the whole brand rests on. A wire finds its target, then the arrowhead lands. It is the thesis, animating.
Every object feels like paper you can push. Lift on hover, press on click, flat when someone prefers reduced motion.
One easing curve site-wide, cubic-bezier(0.22, 1, 0.36, 1), an ease-out that settles like a real object coming to rest. Every motion has a static fallback under prefers-reduced-motion, because accessible motion simply reaches more people.
This whole portfolio is the design system in use. Go press the boards, or read the full spec I keep as the source of truth.