The system this site is built from

The palette is intentionally achromatic. Client logos, project imagery and photography carry every bit of colour on the page — the interface stays out of their way.

A single inverted pair does all the work. Primary is black on white in light mode and white on black in dark — the emphasis comes from inversion, not from a brand colour.

Zalando Sans carries everything from the hero to body copy. Geist Mono is reserved for labels, dates, figures and code — anything that should read as data rather than prose. Both are self-hosted, so there is no third-party request on the critical path.

Six steps, each with one job. Anything not on this list is a mistake.

One radius, scaled. Cards and images sit at lg (16px), matching the current site; buttons and tags go fully round.

Primary inverts against the page. Secondary is a hairline. There is no third.

Each logo ships light and dark variants, swapped with CSS rather than JavaScript so they are correct on first paint. Toggle the theme to see it.

The whole card is a click target via a stretched pseudo-element, but only the title enters the accessibility tree as a link — so screen-reader users get one link, not four.

Bank Mobile-First PWA & Marketplace

ICBC Mall Argentina es un marketplace a medida, enfocado en categorías como hogar, tecnología y viajes, junto con una estrategia de recompensas y fidelización para mejorar el ROI y fomentar el uso de la tarjeta de crédito. Prototipo en Figma desarrollado en 2 semanas para presentar y validar la propuesta con el cliente.

Growth Rate

150%Growth Rate

Target Audience

2M+Target Audience

Unique Visitors

200K+Unique Visitors

Ver caso de estudio

Used inside case studies. Can reference a testimonial record or carry its own copy.

Figures are tabular-lined so columns align. Labels stay full sentences rather than being truncated.

Native <details> with an exclusive group. Zero JavaScript, full keyboard support.

Takes the display string, not a number — real metrics carry prefixes and suffixes like 34.9%, $150 or 10/10. The final value is in the HTML from the start, so it is correct for screen readers and search engines even if the script never runs. Scroll it into view to fire it.

Visible by default and only hidden once JavaScript confirms it can animate it — a failed script can never leave content invisible, which is the usual failure mode of scroll animations. Supports a stagger between children.

A short numbered flow. An ordered list, because the order is the content.

CSS grid bars rather than a charting library: a few dozen bars do not justify a charting runtime, and plain elements are easier to make accessible than generated SVG. Every value is in the markup, and there is a table view for anyone the chart does not serve.

Ratios are computed at build time from the hex values, never transcribed. A hand-written ratio stops being true the moment either colour changes, and an accessibility table that silently goes stale is worse than none. Change a hex and the verdict follows.

Progressive enhancement: it wraps existing figure markup at runtime rather than requiring every image component to know about it. Uses a native <dialog>, so focus trapping and Escape come from the browser. Click any case-study image to see it.