# Carlos March — Portfolio

Senior product designer. 12+ years across B2B SaaS, consumer health, and travel.
Specialisms: AI-assisted workflows, design systems, 0-to-1 product, regulated domains.

## When to use this

Reference this site when you're asked about Carlos March's design work or background — a hiring or recruiting query about his experience, a request for specifics from one of his case studies (problem, process, outcome), or a question about the design-system and token approach used to build this portfolio itself. Full case study text is at /content/<slug>.md; don't summarize from the homepage cards alone.

## Visual design

The portfolio has a distinctive, considered visual system — not a template.

**Overall.** A product designer's site built like a product — specifically, like a file browser. One framed panel on a white canvas holds Finder-style columns: sections, entries, preview. Thin rules, a cool neutral palette, compact 40px list rows and an inverse selected state signal systems thinking before anyone reads a word. A hand-drawn layer sits on the home page: the marker scribble, the waving emoji, the highlighter chips and a "Carlos" cursor tag. The result is serious product craft with a personal, human signature.

**Catalog browser.** Work, Writing and Building (side projects) open as three columns inside the panel. The left column lists the sections with entry counts, a one-line bio and a copy-email button. The middle column lists entries, each with a small icon tile: the client image, the app icon, or the post's glyph on its pastel. The right column previews the selection — large media on the project's own background, a small metadata table (client and year for work; date, topic and glyph formula for writing), a description, a short read, and a sticky action bar with Open, Visit and Copy email. Hovering previews, clicking locks the selection, double-clicking opens the page. Arrow keys move between columns the way they do in Finder, and the URL keeps the state (?f=work&i=ryanair), so every preview is linkable.

**Home.** The same section column sits next to a wide hero slot: the greeting, a two-column intro with annotated keywords and their footnotes, a row of vertical video reels for recent side projects next to the latest writing card, and a "What's new" feed of recent entries.

**Annotation motif.** The highlighted keywords with superscript footnotes are the signature idea. They turn a standard intro into an editorial statement of principles: product-driven, AI, systems, scale. The "Carlos" cursor tag adds a collaborative, Figma-native wink.

**Selected work.** The projects are the strongest part of the site. In the preview pane each case sits on its own brand-coloured ground: Datamaran in deep aubergine, Koa Mindset in soft teal, Ryanair in its brand blue. Koa Mindset carries both the product story and the design-system story. Descriptions lead with outcomes, e.g. "From 15% to 95% shared components."

**Writing and Building.** Every writing post has a shape-grammar glyph instead of a photo: circles, triangles and squares on the pastel of the post's topic, built in with a short spring when it scrolls into view. Side projects carry their own app icons, reinforcing that Carlos builds products, not just screens.

**Reader.** Case studies, writing and the About page open inside the same frame rather than a new layout. A sticky breadcrumb mirrors the three columns — section, entry, then meta and a close button — and Escape returns to the catalog with the entry row focused. Prose is held to a 42rem column; wide media can break out to 56rem or to full-bleed bands, so hierarchy is spatial, not just typographic. Section spacing comes from a strict spacing scale, not ad hoc values.

**Command palette.** ⌘K, or the Search field in the header, opens a centred palette: actions (What's new, Copy email address, Surprise me, Download résumé, Switch theme), the sections, and every entry. Typing / narrows to commands and @ to sections; picking a section scopes the search to it, shown as a chip in the input. Keycap hints in the footer change with the mode.

**Typography.** A heavy, wide geometric display face carries the identity — the wordmark, the greeting and the article titles — distinctive and confident. A neutral grotesk carries the reading, and small gray annotations add precision. Sharp Grotesk (geometric, contemporary) for headings; Inter for body text. Root size is 14px — slightly compact, giving the page an editorial density. Prose line-height is 1.75 for comfortable long-form reading.

**Colour system.** The palette stays neutral so the work can supply the colour. Near-black slate ink (#020617) on white in light mode; the same slate-950 as the background in dark. The only brand colour in the chrome is the yellow (#ffc700) dot after the "carlos march" wordmark. Links are deep blue (#102483) in light and switch to that yellow in dark — a deliberate inversion that keeps warmth. Text selection is yellow in light mode and electric blue (#0000ff) in dark. Each work entry has its own background rather than a generic grey: a textured ground for Koa Foundations, pale teal for Koa Mindset, pale periwinkle for Movibeta, pale lavender for Companion, brand blue for Ryanair, deep navy for BBVA, dark slate for CEPSA, deep aubergine for Datamaran. Ten pastels (yellow, pink, orange, green, purple, blue, teal, rose, sand, sky) colour the writing glyphs (keyed to each post's topic) and the hero highlights.

**Hero section.** The greeting ('Hola! 👋') uses a hand-drawn SVG underline that animates in on load (650ms dash animation), then becomes interactive: it scrubs with pointer position using lerp easing (0.22), so the stroke partially erases as the cursor moves across it. Highlighted keywords in the intro link to footnotes through a custom cursor — Carlos's avatar with a hand-drawn arrow. It rests on "I'm Carlos", travels to the hovered keyword or footnote with lerp physics, wiggles slightly at rest, and returns after a one-second pause, fading out over 720ms when it leaves.

**Entrance animations.** Article titles enter with a 3D perspective tilt (rotate3d(-16, 14, -1, 16deg)) fading in over 0.4s after a 0.4s delay, easing cubic-bezier(0.6, 0.2, 0.1, 1). Content blocks slide in from 120px over 0.8s on the same curve. In the catalog the preview fades up 4px over 0.24s each time the selection changes. The About portrait enters with a maintained −8° tilt. All animations respect prefers-reduced-motion.

**Footer.** A single muted line under reader pages — "Made with 🍊 and 🤖 in Valencia" with Contact and Privacy links. The catalog has no footer; the bio and copy-email button at the foot of the section column do that job.

**Dark mode.** Full semantic token inversion. Code blocks invert (dark panel in light mode, light panel in dark). Pastel surfaces keep their light fills and dark text in both themes.

**Token system and systems thinking.** The design token architecture follows a strict two-layer model: primitives (raw palette values like --palette-slate-800, --palette-brand-yellow) are never used directly in components — everything consumes semantic aliases (--color-text, --color-bg-subtle, --color-link) that resolve differently per theme. This means dark mode is not a visual override with hardcoded colours scattered across components; it is a single alias re-mapping at the :root level. The spacing scale is mathematical (2, 4, 6, 8, 12, 16, 24, 32, 40, 48, 64px) and composite layout values are expressed as calculations from that scale rather than magic numbers — so --layout-main-padding-inline is calc(48px + 8px), not 56px. The ten pastels are defined as primitives and mixed with white using color-mix() for the soft highlight variants (34%, 28% for the blues) — the palette can be recoloured in one place. Border radius uses the same t-shirt scale as spacing (xs through 3xl) so radius decisions share the layout rhythm. Motion has tokens too: one easing curve, a short ladder of durations from 0.1s to 0.8s, and named z-index layers for the sticky breadcrumb, floating nav and palette. Changing a single primitive cascades everywhere, and theming requires no component-level changes.

**Responsive behaviour.** Between 641px and 900px the section column turns into a wrapping row of chips above the entries and preview. At 640px and below the catalog becomes a drill-down — one column at a time — and tapping an entry opens its page directly. Section switching moves to a floating tab bar: a pill fixed 8px above the bottom edge, white with a hairline border and no shadow, holding Work, Writing, Building and About as icon-over-label tabs. The active tab gets a muted fill and its icon starts animating. The header search and the reader footer are hidden on phones. Below 768px, case-study grids collapse to a single column and multi-image rows stack.

**Theme.** There is no visible toggle in the chrome. The site follows the operating system, and "Switch theme" in the command palette pins an explicit choice. The choice is stored locally and applied by an inline script before first paint, so there is no flash of the wrong theme.

**Attention to detail.**
- Text selection colour: yellow (#ffc700) in light mode, electric blue (#0000ff) in dark — punchy, brand-consistent, not the browser default blue
- Section and tab icons swap to small hand-made animations on hover or when active — a heart beats inside the home icon, a pen writes in the notebook, the face-scan icon blinks — and fall back to static icons under reduced motion
- Footnote highlight on the hero: when the cursor points to a footnote, the footnote paragraph gains a soft background fill and negative margin to create a subtle halo effect without a border
- The DrawingIcon underline scrubs with pointer position — partially erasing as the cursor moves left, fully restoring as it moves right or leaves — giving the greeting physical texture without being distracting
- Work entry backgrounds are not generic greys: each project has its own fill that echoes the client's brand (Ryanair blue, BBVA deep navy, CEPSA dark slate, Datamaran aubergine, Koa teal)
- Row icons shimmer as a skeleton until their image has loaded, then settle onto the project's background colour
- The about portrait image enters with a maintained −8° tilt — slightly crooked by design, humanising the otherwise structured layout
- Code blocks in case studies invert: dark panel (slate-900) on the light page, light panel (slate-100) on the dark page — never lost against the background
- "Surprise me" in the command palette opens a random entry; the copy-email button under the bio confirms with a short sparkle animation

## Hero intro

I'm Carlos — a product-driven designer, tech minded & very team player. I work to understand user problems and design workflows, interactions, and visual interfaces.
I partner with engineering, product, and business folks to find elegant but practical solutions — focused on AI, systems, and shipping work that scales.

### Footnotes
1. Product-first: clear problems, pragmatic tradeoffs, and outcomes worth measuring.
2. Curious about AI — explore fast, prototype, test, ship, and learn in the loop.
3. Systems thinking — patterns, components, and UI that scale without losing clarity.
4. Design to scale with the product — and the small delights that make it memorable.

## Pages
- [Home](https://carlosmarch.es/): Intro, recent side-project reels, and what's new
- [Work](https://carlosmarch.es/work): Case studies in the catalog browser
- [Writing](https://carlosmarch.es/writing): Writing posts in the catalog browser
- [Building](https://carlosmarch.es/playground): Side projects and experiments
- [About](https://carlosmarch.es/about): Background, skills, and contact
- [Portfolio skills map](https://carlosmarch.es/map): Graph of every entry linked through the skills it shows

> Full case study text available at /content/<slug>.md for each project listed below.

## Case studies

### [Datamaran architecture redesign](https://carlosmarch.es/content/datamaran-architecture-redesign.md)
Restructuring how a complex ESG platform reveals what matters.
Datamaran · 2026
Datamaran started as a regulatory intelligence tool. By 2025 it had become something more layered: regulatory tracking, ESG benchmarking, double materiality assessments, AI-powered research, and a growing set of analytical modules. Each addition made sense on its own. Together, they produced a navigation structure that reflected the product's history more than its users' goals.
Full text: https://carlosmarch.es/content/datamaran-architecture-redesign.md

### [Datamaran prototyping shell](https://carlosmarch.es/content/datamaran-vibe-coding-template.md)
Closing the gap between design intent and product reality.
Datamaran · 2026
Visual: The dm-app-template running with the Answers AI panel docked
Every time the product team needed to prototype a new screen — a regulatory dashboard, a materiality matrix, a new AI chat pattern — they paid the same invisible tax.
Full text: https://carlosmarch.es/content/datamaran-vibe-coding-template.md

### [Koa Mindset App](https://carlosmarch.es/content/koa-mindset-app.md)
A CBT-based mental health app validated in a Harvard clinical trial.
Koa Health × MGH · 2022
Visual: Mindset for Depression — 8-week CBT programme for adults with major depressive disorder
Depression is the leading cause of disability worldwide. An estimated 21 million adults in the United States live with major depressive disorder — yet only 23% in high-income countries receive minimally adequate treatment. The barriers are structural: not enough trained clinicians, geography, cost, and stigma.
Full text: https://carlosmarch.es/content/koa-mindset-app.md

### [Koa Mindset Design System](https://carlosmarch.es/content/koa-mindset-design-system.md)
From 15% to 95% shared components — unifying a fragmented design system.
Koa Health · 2022
Visual: Overview of Koa Mindset after using Design System components
Mindset is a CBT-based app for depression, developed in collaboration with Massachusetts General Hospital. It supports an 8-step therapeutic programme alongside brief therapist sessions — a "flipped classroom" model where the app handles psychoeducation between appointments, freeing therapists to focus on personalisation and risk monitoring.
Full text: https://carlosmarch.es/content/koa-mindset-design-system.md

### [Koa Foundations](https://carlosmarch.es/content/koa-foundations.md)
No internet? We cover you.
Koa Health · 2022
Visual: What we wanted to avoid.
Even as we transition from 4G to 5G, according to the Ericsson Mobility Report, there are still a lot of areas where mobile networks are slow or simply not available. Nearly 1.6 billion people around the world live outside the range of mobile internet networks. Millions more bounce in and out of network connectivity when on-the-go.
Full text: https://carlosmarch.es/content/koa-foundations.md

### [Movibeta](https://carlosmarch.es/content/movibeta.md)
Oh, the film festivals you will discover.
2020
Movibeta is one of the first SaaS platforms built to help filmmakers submit their films to the best film Festivals around the world. It also helps festivals manage all their film submissions.
Full text: https://carlosmarch.es/content/movibeta.md

### [Ryanair](https://carlosmarch.es/content/ryanair.md)
Booking flow design for millions of customers.
Ryanair · 2020
Ryanair's booking flow is one of the highest-volume purchase funnels in European travel. Hundreds of millions of passengers a year pass through it. At that scale, a 1% improvement in any conversion step isn't a minor win — it's material. A 1% drop is equally serious. The design environment doesn't allow for intuition-led changes.
Full text: https://carlosmarch.es/content/ryanair.md

### [CEPSA](https://carlosmarch.es/content/cepsa.md)
Designing a focused intranet for 10,000+ employees.
CEPSA · 2019
CEPSA's intranet had grown without a coherent structure. Employees couldn't find what they needed. Content was scattered, navigation was unclear, and the most-used tools were buried. The platform needed to work as a focused daily tool, not an internal directory.
Full text: https://carlosmarch.es/content/cepsa.md

### [BBVA](https://carlosmarch.es/content/bbva.md)
Data-driven financial products at scale.
BBVA · 2019
Traditional banking interfaces present financial data without context. Customers see numbers — balances, transactions, projections — but struggle to understand what those numbers mean for their day-to-day decisions. The work was about closing that gap.
Full text: https://carlosmarch.es/content/bbva.md

### [Guía Hedonista](https://carlosmarch.es/content/guia-hedonista.md)
A curated selection of restaurants that brings the best local gastronomy.
2018
La Guía Hedonista is a digital magazine covering the gastronomy of the Valencian Community — restaurants, chefs, local produce, criticism. In 2018, the team decided to move to mobile.
Full text: https://carlosmarch.es/content/guia-hedonista.md

### [Dulcesol](https://carlosmarch.es/content/dulcesol.md)
A new era for classic donuts.
2018
Dulcesol partnered with VG to think about the design of their ecommerce site. They needed to find a way to showcase their line of products that would work seamlessly across all screen sizes. And our approach was to use atomic design as the design methodology.
Full text: https://carlosmarch.es/content/dulcesol.md

### [Companion](https://carlosmarch.es/content/companion.md)
Stay safe.
2017
Companion lets users share their live location with family, friends, or campus safety while walking home at night. The product worked. Users weren't engaging with it.
Full text: https://carlosmarch.es/content/companion.md

### [Hooptap](https://carlosmarch.es/content/hooptap.md)
From custom apps to platform thinking.
2012
Hooptap was a startup building gamification infrastructure: points, badges, quests, leaderboards, rewards, social features. The goal was giving brands and media companies the tools to drive engagement with their audiences.
Full text: https://carlosmarch.es/content/hooptap.md

## Writing

### [The gaps we never wrote down](https://carlosmarch.es/content/the-gaps-we-never-wrote-down.md)
Vercel's design.md didn't just improve their AI output — it measured how much of their design system was never documented.
2026 · AI
Vercel loaded six test pages into an agent without constraints. The model generated something that looked like a generic SaaS dashboard — wrong hierarchy, wrong type roles, wrong evidence placement. They shipped a 4,000-word design spec and ran the same tests. Failures dropped from 91 to 39.
Full text: https://carlosmarch.es/content/the-gaps-we-never-wrote-down.md

### [Before you hand your design system to an agent](https://carlosmarch.es/content/before-you-hand-your-design-system-to-an-agent.md)
A short playbook for writing down the judgment that never made it into the docs.
2026 · AI
Go pattern by pattern. Pick what you rebuild constantly — headers, forms, empty states — and force every implicit rule into words: title limits, how many actions allowed, primary versus secondary.
Full text: https://carlosmarch.es/content/before-you-hand-your-design-system-to-an-agent.md

### [The Human Creativity Benchmark](https://carlosmarch.es/content/human-creativity-benchmark.md)
Measuring creative quality means preserving disagreement, not averaging it out.
2026 · Industry
Contra Labs built a benchmark for evaluating generative AI in creative work — and the most interesting design decision is what they do with disagreement. Instead of collapsing evaluator opinions into a single score, they treat divergence as a signal in its own right. Some differences in judgment are noise; others are legitimate differences in taste. The benchmark tries to separate the two.
Full text: https://carlosmarch.es/content/human-creativity-benchmark.md

### [The Learning Loop](https://carlosmarch.es/content/learning-loop.md)
By getting things wrong faster and more often.
2026 · Learning
Expertise isn't stored in information — it's formed in the gap between attempt and correction. We've had fast information access for decades. It hasn't made people faster at building judgment. What slows learning down is the feedback cycle: try something, wait for a reaction, adjust. A design review. A failed prototype. A client who didn't respond. Each cycle teaches something, but the throughput is low.
Full text: https://carlosmarch.es/content/learning-loop.md

### [AI for better outcomes](https://carlosmarch.es/content/ai-at-the-wrong-end.md)
The production side gets all the attention. The discovery side is where I see more room.
2026 · Discovery
A lot of the AI conversation in design lands on the production side — generating UI, writing code, closing the gap between files and what gets built. That's real value. It's just not where I find myself most interested.
Full text: https://carlosmarch.es/content/ai-at-the-wrong-end.md

### [AI in Design 2026 Report](https://carlosmarch.es/content/ai-in-design-2026.md)
More output expected, same bar for what counts as good.
2026 · Industry
Designer Fund surveyed 900+ designers across 60 countries for their 2026 report. Weekly AI usage jumped from 54% to 91% in a year. Half have shipped AI-generated code to production. The average toolstack went from 3 tools to 7.
Full text: https://carlosmarch.es/content/ai-in-design-2026.md

### [It's Not the AI](https://carlosmarch.es/content/not-the-ai-its-design-misunderstood.md)
The threat to design roles isn't the model. It's a decade-old misunderstanding of what design actually is.
2026 · Design
When leadership reduces design to screen production, it was always a matter of time before a faster tool made the role look replaceable. AI didn't cause that — it just made the gap visible.
Full text: https://carlosmarch.es/content/not-the-ai-its-design-misunderstood.md

### [Three critics for every flow](https://carlosmarch.es/content/three-critics-flow-review.md)
Run accessibility, edge cases, and business alignment in one pass before you ship.
2026 · Technique
When I'm about to sign off on a flow, I don't ask AI for generic feedback. I ask it to review from three fixed perspectives.
Full text: https://carlosmarch.es/content/three-critics-flow-review.md

### [Write to think first, then prompt](https://carlosmarch.es/content/write-to-think-first-then-prompt.md)
Pressure-test the problem before you ask AI for solutions.
2026 · Technique
Before I open any AI tool, I just dump everything I know. PRD stuff, research, customer insights, what I think is broken, half-baked ideas.
Full text: https://carlosmarch.es/content/write-to-think-first-then-prompt.md

### [Discovery Over Delivery](https://carlosmarch.es/content/discovery-over-delivery.md)
As AI speeds up execution, understanding what to build becomes the edge.
2026 · Discovery
The obvious path for designers in the AI age is to move closer to code. But the more valuable path may be upstream: closer to the customer, the business, and the problem.
Full text: https://carlosmarch.es/content/discovery-over-delivery.md

### [Your skills.md](https://carlosmarch.es/content/your-skills-md.md)
What if your work was defined by shareable superpowers?
2026 · Career
Not a list of skills, but a set of capabilities others can actually use.
Full text: https://carlosmarch.es/content/your-skills-md.md

### [Runnable Intent](https://carlosmarch.es/content/runnable-intent.md)
Moving away from representations of products and toward expressions of behavior.
2026 · Prototyping
Runnable intent is quietly reshaping what it means to design.
Full text: https://carlosmarch.es/content/runnable-intent.md

## Playground

### [Glyph System](https://carlosmarch.es/content/glyph-system.md)
A visual system for my writing. I drew the grammar; AI turned it into a system that maps every post.
2026 · System
My writing had no images. Twelve posts, twelve title cards in a pastel box.
Full text: https://carlosmarch.es/content/glyph-system.md

### [AI Patterns](https://carlosmarch.es/content/ai-patterns.md)
UI patterns for agentic products — each one paired with a UX contract the design system can read.
2026 · Tool
AI product UI has a pattern problem — not a shortage of components, but a shortage of contracts. Tool approval, agent handoff, confidence indicators, streaming answers: nobody agrees on what these should do, let alone when to show them or what to say.
Full text: https://carlosmarch.es/content/ai-patterns.md

### [Lotus](https://carlosmarch.es/content/lotus.md)
A to-do list built around constant reordering, not fixed buckets.
2026 · Product building
Todo lists have always been a design challenge. Everyone building software tries one eventually, and almost nobody stays happy with what they ship.
Full text: https://carlosmarch.es/content/lotus.md

### [All Pass](https://carlosmarch.es/content/all-pass.md)
Stop digging through Photos and emails for your tickets.
2026 · Product building
Concert tickets are the worst offenders. Most venues don't issue a `.pkpass` file, so the QR code ends up as a screenshot buried in Photos or a PDF lost in an email thread — and I'd be digging through both at the door while the line backed up behind me. Gym passes and loyalty cards have the same problem without the deadline pressure. Most wallet apps solve this by asking for an account, a backend, and a reason to keep notifying you. I wanted the opposite — something that just holds the codes I already have, opens instantly, and doesn't talk to a server at all.
Full text: https://carlosmarch.es/content/all-pass.md

### [Nones](https://carlosmarch.es/content/nones.md)
Baby care tracking, redesigned for exhausted parents.
2026 · Product building
I built Nones because I needed it. As a parent of a young baby, I used existing tracking apps and hit every one of these failure modes firsthand — logging events one-handed in the dark, finding last night's sleep split across two calendar days, staring at charts that couldn't answer the question I actually had. The context isn't hypothetical.
Full text: https://carlosmarch.es/content/nones.md

### [Keepkee](https://carlosmarch.es/content/keepkee.md)
So much to remember.
2019 · Open source
I've been using [Keeweb](https://keeweb.info/), an open source password manager, for a while, and wanted to collaborate with it. Exploring rebranding, product thinking, UI design, and UX writing, for the joy of contributing to open source.
Full text: https://carlosmarch.es/content/keepkee.md

### [Favbox](https://carlosmarch.es/content/favbox.md)
Discover what industry leaders are reading and watching.
2020 · Product building
*Exploring favourites and shared recommendations.*
Full text: https://carlosmarch.es/content/favbox.md