Breakpulse surf forecast dashboard

Design Engineering

Breakpulse

An ongoing exploration of surf forecasting, combining intuitive data visualization, a scalable design system, and AI-powered experiences to help surfers make better decisions, from checking conditions to catching waves.

The Setup

We'd rather be surfing.

My friends and I surf. We know the drill: check the swell, wind, tides, compare a few spots, and hope the conditions are worth the drive.

Sometimes we just head to the beach and take our chances. But when your local break isn't around the corner, a little planning goes a long way.

The Conflict

Too much data. Not enough waves.

Surf forecasting isn't rocket science, but interpreting multiple charts, comparing spots, and finding the right window can feel like a part-time job.

We want the numbers. We want to make our own calls. We just don't always want to do all the digging.

What if checking the surf felt less like analyzing the stock market and more like planning a session with a friend?

The Approach

Making sense of the swell.

Breakpulse explores a simpler way to navigate surf conditions.

Color-coded forecasts, synchronized charts, and recommended surf windows help surfers spot opportunities without losing access to the underlying data.

Want to dig into the numbers? They're all there.

Want the highlights? Those are there, too.

The Foundation

The Foundation

Designed in Figma. Built for the browser.

Behind the experience is a growing design system built around consistency, flexibility, and scalability.

A three-tier token architecture—Brand → Alias → Mapped—connects design decisions across reusable components.

Each component is supported by visual and technical documentation in Figma, then translated into React components and documented in Storybook.

The goal isn't simply to make the interface look consistent. It's to establish a system that can evolve alongside the product.

Explore the Figma Design System
Explore Storybook

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://embed.figma.com/design/SSO6AjNPiCRwEwL3fkZpMi/Breakpulse---Design-System?node-id=332-35947&embed-host=share" allowfullscreen></iframe>

The Twist

Meet Bro. 🤙

Not everyone wants to become a surf-data analyst.

Bro is an AI-powered surf companion we're exploring to help surfers find promising conditions, compare spots, and make more informed decisions.

Ask a question, get a recommendation, and explore the data behind it.

No blind trust. No unnecessary digging.

You make the call. Bro helps you get there.

To Be Continued

Still chasing the perfect wave.

Breakpulse is a work in progress, with the design system, interactive prototypes, and component library laying the groundwork for the experience ahead.

There's more to design, build, and validate.

For now, the mission remains the same:

Less time checking forecasts. More time catching waves.
Next projectCasa Cielo Bakery