Argon

A Modular Multi-branding Framework.

Argon is Navico’s multi-brand design system, powering Simrad, Lowrance, and B&G products. It began in 2018 to reduce production overhead, enable faster concept work, and deliver a consistent user experience across devices.

I often describe Argon as the “flatpack” stage in an IKEA kitchen project. Before Argon, creating a product meant starting from scratch each time. Now, once a design is finalised, Argon packages it with the right components, guides, and specifications, ready for assembly by development teams anywhere in the world.

team-argon

Workshops in Alicante, Building Quantum Leap in Southampton, June 2024.

My Role

I joined Navico during a pivotal stage to establish a scalable design direction. Working closely with product managers, engineers, and designers, I set the baseline styles for colours, typography, and iconography, developed a multi-brand theming model using theme chips, and tested components on real devices to refine visibility and interactions.

The team and I introduced Figma Variables to connect design tokens to real-world UI states, streamlined design–dev handoffs, and expanded documentation to support global teams. My objective was to build a system where, once a design concept was signed off, it could be reliably reproduced for any brand or platform.

UI_ThemeChips
UI_States
UI_Structure

Outcome

Argon has matured from a neutral white-label foundation into a fully token-driven, multi-brand design system supporting Simrad, Lowrance, and B&G.

  • Foundation (2018–2019) – Established a core palette, typography, and iconography, giving teams flexibility while keeping production light.
  • Theming & Testing (2019) – Introduced theme chips for Day, Dusk, and Night modes, tested on devices to refine visibility and interaction states, and solved layered component issues.
  • Deployment (2020–2022) – Delivered the first complete Argon-branded UI with B&G Nemesis, followed by Simrad NSX — the first product to combine Neon and Argon. Expanded documentation and onboarding for mobile.

Argon is now a three-tier system: Foundation (global styling and tokens), Blocks (tested modules ready to use), and Templates (finalised layouts adaptable for any brand). It has significantly reduced production design time, sped up feature rollouts, and improved consistency across platforms.

Foundation library: A small collection of rebrandable components used in mutliple touchpoints and brands.

Day and night themes provide the best on-water experience conditions.  

b&g-anycondition
ontheboat-dusk
ontheboat-night

Design–Dev Process

Figma Variables act as a single source of truth for design and development, making updates easy and reducing handoff friction.

designer-dev
gaugesbrand

Scalability

Argon accommodates new components and brand variations without disrupting existing products. New elements integrate seamlessly, inheriting correct styling and behaviour for each brand.

Typography

Each Figma component library has a typography page with breakpoint-based lists to ensure scaling and brand alignment.

s-m-l-fonts
figma-Variables

Variables

Variables store reusable values (fills, sizes, spacing) linked to tokens for instant theme switching and device adaptation.

Theming

Theme switching supports:

Day – Bright-light visibility
Dusk – Reduced glare
Night – Comfort in low light

Themes
Breakpoints-grids-displays

Breakpoints & Grids

Responsive layouts for MFDs, desktop, and mobile. Components come in Large, Medium, and Small variants.

Theme Tokens

Surfaces (Background, Base, UI1, UI2, UI3, Brand) have structured colour chips with:

  • On – Primary content
  • SubOn – Secondary content
  • StrokeOn – Outlines
  • States like hover, pressed, selected, focused, and disabled are built in. Updated pill shapes and naming improve clarity.
themetokens-chips

Argon took early inspiration from Brad Frost’s atomic design, which helped us define relationships between styles, components, and layouts. For designers and stakeholders, I’ve explained it through familiar systems, the classic LEGO approach for modularity, to the IKEA kitchen analogy for our workflow.

Foundation is like choosing materials; Blocks are the functional design space; the “flatpack” is the finalised, customised design packaged for development. This shared language has helped make the system’s value clear across teams.

While all designers can contribute, the SDK is maintained by a dedicated core team, ensuring Argon remains reliable, scalable, and ready to support Navico’s growing product range.