The amitpateldesigns.com homepage: a black-and-white portrait beside the line Designer, Prototyper & Engineer
Project
A® Design System
Scope
Structure
Type
Color
Motion
Language
Year
2026
Core Thesis

This portfolio is twenty years of work held together by one system. Every decision in it starts as taste, and the system's job is to write that taste down as something someone else can check, so a person, a script or an AI can carry it and it still arrives intact.

Principles

To make that possible, five things never change: structure, type, color, motion and language. Everything else is free to move, which is how work made two decades apart still reads as one hand.

Structure
One left axis. Ragged right, and full bleed is the only declared exception.
Type
A display face for names, a text face for prose, a mono face that only labels.
Color
Medusa's gradients, each carrying its given name. Unnamed color is stated as a value.
Motion
One soft body. Every line stays still, so the cursor is the one thing that moves.
Language
One name for each thing, the same in the code, on the page and in conversation.
Medusa

It began in 2019 with Medusa, a visual system built around a set of named gradients and a soft, drifting cursor. Medusa was the first time the taste was written down, and every decision since has been checked against it.

Color

As the portfolio grew, its color was never picked again. It was sampled from Medusa's own plates, then paired by role across a dark and a light ground and measured on each, so one palette holds in both.

Gradients
Amberine#EA0751 → #ED7621Cursor on dark
Aquamarine#1DAA8C → #1A809FCursor on light
Ultramarine#274497 → #4B3392Medusa
Fuscharian#D6177F → #6B2FA0Medusa
Flat inks
AaPrimary#F2F2F2 · 17.24 on dark#1F1D1B · 15.01 on light
AaBody#C9C9C9 · 11.66 on dark#3E3B37 · 9.95 on light
AaCaption#A4A4A4 · 7.74 on dark#544F4C · 7.22 on light
AaDim#888888 · 5.45 on dark#6E6B68 · 4.73 on light
Dark grounds
#0E0E0Ehsl(0, 0%, 5%)Ground
#161616hsl(0, 0%, 9%)Hairline
#1C1C1Chsl(0, 0%, 11%)Ramp
#1E1E1Ehsl(0, 0%, 12%)Plate
Light grounds
#F2F2F2hsl(0, 0%, 95%)Ground
#EAEAEAhsl(0, 0%, 92%)Hairline
#E4E4E4hsl(0, 0%, 89%)Ramp
#E2E2E2hsl(0, 0%, 89%)Plate

One palette, two grounds. Every ink clears WCAG 2.2's 4.5:1 on both, so a page can switch ground without a single color being picked again.

Motion

That color comes alive in the cursor. On a page where every line holds still, the cursor is the one thing that moves, and it takes the gradient of the ground it crosses: Amberine on dark, Aquamarine on light.

Type

Type follows the same restraint. One face names things, one carries the reading, and one only labels. Each has a single job, so a reader always knows what they are looking at.

SpecimenFaceCharacters
AaNeue Haas Grotesk 65 MediumNames · titles, index, navA B C G R a e g r s 1 2 3 &
AaNeue Haas Grotesk 55 RomanReading · every paragraphA B C G R a e g r s 1 2 3 &
AaSpace Mono RegularLabels · kickers, tables, dataA B C G R a e g r s 1 2 3 &
&Garamond ItalicOne glyph · the homepage ampersandA B C G R a e g r s 1 2 3 &
EeEmeritus DisplayWritings only · drop caps and titlesA B C G R a e g r s 1 2 3 &
𝔅Mathematical FrakturOne letter per nav word · Unicode, not a font𝔄 𝔅 ℭ 𝔊 ℜ 𝔞 𝔢 𝔤 𝔯 𝔰 𝔒 𝔖

The first three faces do all the work. The rest each hold one small job and never leave it, which is the same restraint the navigation keeps.

Restraint

Taste is also what gets left out. Each word in the navigation carries one blackletter letter as a quiet signature, but it never reaches anything a search engine or screen reader depends on. Type Cast, in Writings, tells that story in full.

Components

Those decisions then became parts. A handful of components, from the navigation and footer to the brief and related work, carry every page, so a choice made once shows up everywhere without being made again.

ComponentCarriesThe decision it holds
Styles + cursorThe cursor and the shared stylesMotion · one soft body, colored by the ground
Navigation𝔅IO · W𝔒RK · JOURNAL · TOOL𝔖Restraint · one fraktur letter, never read by search
FooterStatement, contacts and social linksColor · follows the dark or light ground
Brief RowOne label and one value of the briefType · mono labels, the text face reads
Related WorkTwo rows, each with a link and a coverStructure · everything hangs from one left axis
Principles GridTitles and bodies set side by sideLanguage · one name for each thing

Each of the five constants lives in a part, so no page has to decide it again.

Production

The last step is where most systems stall. Here, direction moved straight into production: Figma, Webflow and code were joined through Claude and MCP servers, so a decision written in the morning was live by the afternoon. Six templates now carry every page, on either ground.

TemplateHoldsExample
IndexEvery project, sorted by company, discipline or yearHome
Case studyA brief, a narrative and the plates that prove it, like this pageLumasis Design System
DeckFull-width plates, one after anotherMedusa Visual System
WritingsLong-form essays, with drop caps and pull quotesMind the Gap
Archive stackEarlier work, on centered sheetsJournal App
FieldOne interactive tool that fills the screenCursor

Every page is one of these six, so a new page inherits its layout instead of deciding it.

Outcome

The result is speed that costs nothing in coherence. Because the taste is written down once, direction travels from an idea to a live page in hours rather than weeks, and every page still reads as the same hand, however long ago the work was made.