Subsea.tools
A One-Stop Shop for Subsea Operations

Building with WooCommerce and Breakdance

A real catalogue, in catalogue mode

WooCommerce gives Braaten a real product catalogue with categories, attributes and datasheets, and it can grow into a marketplace later without a re-platform. Version one has no prices or cart, just "Send request" on every product. That matches how the industry buys, and leaves room for prices on off-the-shelf items later, which the founders wanted.

Why Breakdance

I chose Breakdance for its tight WooCommerce integration and its focus on lean, fast output. It also keeps the site simple for Braaten's team to update on their own later.

Subsea was my first build in it. I had expected a library of ready-made blocks and found almost none, and I did not want to set padding by hand in every panel, so I brought my own utility classes into it.

Same CSS framework, new palette

I reused the utility-first framework I built for Autentisitet: design tokens as CSS custom properties, a flex row system and fluid type with clamp(). Moving it to Subsea meant swapping the palette and fonts, not writing new CSS.

:root {
  --color-deep-navy:     #0B1F2A; /* main background / hero */
  --color-sea-pine:      #0E3B2E; /* accent surfaces */
  --color-steel-grey:    #32424A; /* UI lines, icons */
  --color-foam-white:    #F3F7F9; /* light backgrounds, cards */
  --color-beacon-orange: #F46A2E; /* sparse "safety" accent */
  --color-subsea-yellow: #F9C80E; /* tags / alerts */
  --container-lg: 896px;
  --container-xl: 1120px;
}

.h1-display {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(2.8rem, 8vw, 4rem);
}