# Carlos March — Portfolio

Product designer. 10+ years across health tech, fintech, SaaS, and consumer apps.
Specialisms: AI-assisted workflows, design systems, 0-to-1 product, regulated domains.

## Visual design

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

**Layout and structure.** Fixed sidebar shell (sticky, 100vh) with a scrollable main column. Content is controlled at three disciplined widths — 42rem (narrow), 45rem (medium), 56rem (wide) — so hierarchy is spatial, not just typographic. Section spacing is derived from a strict spacing scale, not ad hoc values.

**Typography.** 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.** Near-black ink (#111112) on white in light mode; slate-950 background in dark. Brand accent is deep blue (#102483) in light, switching to yellow (#ffc700) in dark — a deliberate inversion that maintains warmth. Text selection highlight is yellow in light mode, electric blue (#0000ff) in dark — surprising and precise. Prose emphasis highlights use a yellow marker in light, deep electric blue in dark. Each work card has its own per-project soft background fill rather than a generic grey — pale lavender for Koa Foundations, pale teal for Koa Mindset, brand navy for Ryanair, deep navy for BBVA, dark slate for CEPSA.

**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 text link to footnotes via a custom animated cursor — a hand-drawn arrow SVG that spawns from a random screen edge, travels to the hover target with lerp physics, applies a sinusoidal wiggle for an organic feel, then exits downward after a 1-second delay with an eased fade over 720ms.

**Writing cards.** Six-colour pastel rotation (yellow, pink, orange, green, purple, blue) at 34% mixed with white — gentle, not saturated. No images. Pure typographic cards with footer: date and tag pill.

**Entrance animations.** Page content enters with a 3D perspective tilt (rotate3d(-16, 14, -1, 16deg)) fading in over 0.4s, easing cubic-bezier(0.6, 0.2, 0.1, 1). Content blocks slide in from ±120px vertically over 0.8s. The About portrait enters with a maintained −8° tilt. All animations fully respect prefers-reduced-motion.

**Footer.** Four-colour gradient strip (pink → yellow → blue → purple). CTA: 'Speed is no longer the constraint. Clarity still is.' — Open to conversations about product, systems, or just a problem you haven't cracked yet.

**Dark mode.** Full semantic token inversion. Avatar is grayscale in both modes. Code blocks invert (dark panel in light mode, light panel in dark).

**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-sidebar-width is calc(3 × 64px + 8px), not 200px. The six pastel writing card colours are defined as primitives and then mixed at a consistent 34% ratio using color-mix() — the palette can be recoloured in one place. Border radius uses the same t-shirt scale as spacing (xs through 3xl) so radius decisions are constrained to the same rhythm as layout decisions. The result is a token system where changing a single primitive cascades correctly everywhere, theming requires no component-level changes, and spacing and radius decisions share the same vocabulary.

**Writing card drawer.** Clicking a writing card opens a right-side drawer rather than navigating to a new page. The drawer slides in from the right (0.24s ease), carries a dimmed backdrop overlay (28% opacity), and inherits the pastel background of the card it was opened from — so a yellow-tagged entry opens a yellow-tinted drawer. Text, titles, and links all adapt their colour to remain legible on the pastel background. The drawer is 42rem wide max, has rounded corners (12px), a subtle left shadow, and closes on Escape key or backdrop click. Focus is moved to the close button on open.

**Responsive behaviour.** Below 900px, the sidebar disappears entirely and is replaced by a floating bottom navigation bar — a pill-shaped element fixed to the bottom-centre of the screen, with a white/elevated background, generous border radius (full pill shape), and a soft multi-layer shadow (4px 20px + 1px 4px). It sits 24px from the bottom edge and centres itself with max-width clamped to the viewport. Active nav items use semibold weight and a subtle background fill rather than a colour change — legible in both themes. Below 768px, grid layouts in case studies collapse to single column, multi-image media rows stack vertically, and project article padding reduces to maintain edge breathing room.

**Theme switcher.** A compact segmented control in the sidebar bottom — not a floating button or system-only toggle. Two icon buttons (sun/moon) in a pill container with a subtle border and muted fill. The active state has an elevated white background, a hairline shadow, and uses the link colour (blue in light, yellow in dark). Transitions at 0.15s. On mobile the theme switcher moves with the sidebar — it's not exposed in the mobile nav, so theme switching is accessible via the sidebar on desktop and via system preference on mobile.

**Attention to detail.**
- Text selection colour: yellow (#ffc700) in light mode, electric blue (#0000ff) in dark — punchy, brand-consistent, not the browser default blue
- Prose emphasis highlights (bold text in case studies) use a yellow marker background in light mode, electric blue in dark — the same pair as selection, building a coherent accent system
- Footnote highlight on the hero: when an annotation arrow 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 card per-project backgrounds are not generic greys: each project has its own custom fill that echoes the client's brand palette (Ryanair navy, BBVA deep navy, CEPSA dark slate, Koa soft lavender/teal)
- 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
- Writing card dates use a monospaced font with slight letter-spacing and uppercase transform — distinct from the prose type, marking them as metadata
- Playground card hover lifts by 2px (translateY) — minimal feedback, enough to confirm interactivity
- Footer gradient uses four colours (pink → yellow → blue → purple) as a decorative strip, not a full background — it accents the CTA without overwhelming the editorial tone

## 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. Designed to scale with the product — and the small delights that make it memorable.

## Pages
- [Home](https://carlosmarch.com/): Intro and selected work
- [Work](https://carlosmarch.com/work): Full case study list
- [About](https://carlosmarch.com/about): Background, skills, and contact
- [Playground](https://carlosmarch.com/playground): Writing, experiments, and side projects

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

## Case studies

### [BBVA](https://carlosmarch.com/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.com/content/bbva.md

### [CEPSA](https://carlosmarch.com/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.com/content/cepsa.md

### [Companion](https://carlosmarch.com/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.com/content/companion.md

### [Datamaran architecture redesign](https://carlosmarch.com/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.com/content/datamaran-architecture-redesign.md

### [Datamaran Executive Insights Onboarding](https://carlosmarch.com/content/datamaran-executive-insights-onboarding.md)
From 2–4 days to under 2 minutes — AI that does the research so users don't have to.
Datamaran · 2026
Executive Insights required a manual configuration before it could show anything meaningful. Open Settings. Work through five sections. Fill seven company profile fields — name, industry, headquarters, employee count, revenue, website, description — most of which required leaving the product to look them up. Then configure the operational footprint: countries, industries from a SASB taxonomy tree, peers, issue mapping. Each required either domain expertise or external research.
Full text: https://carlosmarch.com/content/datamaran-executive-insights-onboarding.md

### [Datamaran prototyping shell](https://carlosmarch.com/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.com/content/datamaran-vibe-coding-template.md

### [Dulcesol](https://carlosmarch.com/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.com/content/dulcesol.md

### [Guía Hedonista](https://carlosmarch.com/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.com/content/guia-hedonista.md

### [Hooptap](https://carlosmarch.com/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.com/content/hooptap.md

### [Koa Foundations](https://carlosmarch.com/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.com/content/koa-foundations.md

### [Koa Health](https://carlosmarch.com/content/koa-health.md)
Initiatives to make life easier for design team folks 🦄.
Koa Health · 2020
⟦lead⟧ When I joined Koa Health the design team was **growing at fast pace**. We had 10+ designers in the organisation and having a designer's house prepared to scale fast and efficiently started to become a thing.
Full text: https://carlosmarch.com/content/koa-health.md

### [Koa Mindset for Depression](https://carlosmarch.com/content/koa-mindset-for-depression.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.com/content/koa-mindset-for-depression.md

### [Koa Mindset for Depression](https://carlosmarch.com/content/koa-mindset.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.com/content/koa-mindset.md

### [Movibeta](https://carlosmarch.com/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.com/content/movibeta.md

### [Ryanair](https://carlosmarch.com/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.com/content/ryanair.md

## Writing

### [AI for better outcomes](https://carlosmarch.com/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.com/content/ai-at-the-wrong-end.md

### [AI in Design 2026 Report](https://carlosmarch.com/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.com/content/ai-in-design-2026.md

### [Before you hand your design system to an agent](https://carlosmarch.com/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.com/content/before-you-hand-your-design-system-to-an-agent.md

### [Discovery Over Delivery](https://carlosmarch.com/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.com/content/discovery-over-delivery.md

### [The Human Creativity Benchmark](https://carlosmarch.com/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.com/content/human-creativity-benchmark.md

### [The Learning Loop](https://carlosmarch.com/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.com/content/learning-loop.md

### [It's Not the AI](https://carlosmarch.com/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.com/content/not-the-ai-its-design-misunderstood.md

### [Runnable Intent](https://carlosmarch.com/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.com/content/runnable-intent.md

### [Three critics for every flow](https://carlosmarch.com/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.com/content/three-critics-flow-review.md

### [Write to think first, then prompt](https://carlosmarch.com/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.com/content/write-to-think-first-then-prompt.md

### [Your skills.md](https://carlosmarch.com/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.com/content/your-skills-md.md

## Playground

### [All Pass](https://carlosmarch.com/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.com/content/all-pass.md

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

### [Keepkee](https://carlosmarch.com/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.com/content/keepkee.md

### [Nones](https://carlosmarch.com/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.com/content/nones.md