Cambium Design System (CDS)

THE foundational design language, multi-tier token engine, and component architecture powering Cambium Networks' ecosystem — spanning cloud consoles, mobile apps, field tools, custom Figma plugins, and AI agent workflows across 100K+ enterprise deployments.

Client

Cambium Networks

Role

UI/UX Architect

Scope

100+ Components · 3-Tier Tokens · 6 Flagship Platforms

Impact

60% Handoff Velocity · 100% WCAG AA Compliance

Nº 01 / 01 / System Foundation

Architecting Cambium Design System from Ground Up

Cambium Networks powers wireless infrastructure across enterprise campuses, ISPs, government networks, and residential Wi-Fi deployments globally. Over time, rapid multi-product growth led to design fragmentation across flagship tools: cnMaestro Cloud Console, LINKPlanner GIS, Cambium Swift Mobile App, MDU Property Portal, Installer App, and MarketApps.

To solve this, I designed and architected the Cambium Design System (CDS) as THE single source of truth. Built from foundation to advanced, CDS establishes a 7-pillar foundation: System Intro Architecture, 3-Tier Tokens, 4px/8px Grid Spacing, Effects & Elevation, Dual-Density Iconography, Responsive Templates, and Developer Handoff Contracts.

CDS is designed not just for human designers and engineers, but as a machine-readable system with AI metadata bindings, custom Figma plugins, and automated code syntax exporters across React, Tailwind, iOS Swift, and Android Kotlin.

Nº 02 / System Documentation

Core Design System Specifications & PDF Guidelines

Official Cambium Design System foundation specifications covering color scales, developer handoff, effects, iconography, spatial grids, and typography.

CDS Introduction & Architecture

CDS Introduction & Architecture - Page 3

CDS Introduction & Architecture - Page 4

CDS Introduction & Architecture - Page 5

CDS Introduction & Architecture

Nº 03 / 02 / Token Engine

3-Tier Token Architecture & Intent-Driven Design

Design tokens in CDS are organized into a strict 3-tier hierarchy: Primitive Tokens (raw hex values, spacing px, font rems), Semantic Intent Tokens (Primary, Success, Warning, Error, Info, Neutral), and Component-Scoped Tokens (Button background, Table row hover, Modal overlay).

The token engine supports dynamic multi-theme switching (Light, Dark, High-Contrast), multi-density modes (Compact for high-density NOC engineering tables, Comfortable for consumer mobile touch apps), LTR/RTL spatial directionality, and white-label tenant branding.

Tokens are scoped precisely within Figma variables, automatically generating CSS custom properties, Tailwind tokens, React theme props, iOS Swift constants, and Android Kotlin object styles.

Nº 04 / Token Highlights

Engineered for Multi-Platform Scale

Primitive & Semantic Layers

Clean separation between raw design values (Primitives) and functional meaning (Semantic Intent), preventing cascading design debt.

Adaptive Density & Directions

Seamless switching between high-density NOC data tables and touch-friendly mobile layouts, with full LTR/RTL support.

Multi-Brand White Labeling

Variable aliases enable partner ISPs and enterprise customers to theme the interface with brand colors in real time.

Automated Code Exporters

Figma variable changes automatically export to production CSS, Tailwind CSS, iOS Swift, and Android Jetpack Compose styles.

Figma Variable Scopes

Granular variable binding rules preventing invalid property assignments and scoping semantic guidelines directly to tokens.

AI Copilot Context

Machine-readable token schemas and metadata allowing LLM coding assistants to generate 100% compliant frontend UI code.

Nº 05 / Token Workspace

Token Variables, Scopes & Metadata

Code Syntax — Multi-Platform Token Exporter

N° 06 / DEVELOPER HANDOFF

Code Syntax

Every variable ships with code syntax for all three platforms, ready to use in your codebase.

Figma

{Collection} / {Group} / {token-name}

--color-primary-500
--spacing-medium
--radius-small
--font-size-body-md

Web

kebab-case prefix --

--color-primary-500
--spacing-medium
--radius-small
--font-size-body-md

Android

snake_case resources

color_primary_500
spacing_medium
corner_radius_small
text_size_body_md

Android Compose

PascalCase Kotlin

ColorPrimary500
SpacingMedium
CornerRadiusSmall
FontSizeBodyMd

iOS Swift

camelCase enum namespace

Color.primary500
Spacing.medium
Radius.small
Font.bodyMd

Name	Platform	Variable	Example
Figma	Figma	{Collection}/{Group}/{token-name}	Theme/primary/default
Web	CSS	--{collection}-{group}-{token-name}	--color-primary-default
Android	XML	{collection}_{group}_{token_name}	color_primary_default
Android Compose	Kotlin	{Collection}{Group}{TokenName}	ColorPrimaryDefault
iOS	Swift	{Collection}.{group}{TokenName}	Color.primaryDefault

Nº 07 / 03 / Component Library

100+ Production Components Across All Interaction Patterns

The CDS component library covers the entire spectrum of enterprise UI needs: Inputs & Forms (Text fields, Selects, Comboboxes, Search, Range Sliders, Date/Time pickers, Drag & Drop uploaders, Rich Text, Security/OTP fields, Map location pickers), Actions & Navigation (Primary/Secondary/Ghost/Destructive buttons, Header, Sidebar, Breadcrumbs, Tab bars, Toolbars, System Menus), and Data Display & Tables.

For complex telecommunications data, CDS features specialized enterprise Data Tables with multi-column sorting, row filtering, pagination, and Hierarchical Tree Tables for network topology visualization. Mobile and tablet responsive table adapters ensure high performance on smaller viewports.

Feedback mechanisms include Alert banners, Toasts, Rich Tooltips, Status Badges, Spinners, Skeleton loaders, and Empty/Error state templates.

Nº 08 / Component Coverage

Comprehensive Component Categories

Nº 09 / Component Showcase

Deep-Dive Component Specs

Nº 10 / 04 / Templates & Applications

Enterprise Page Layouts & Responsive Application Templates

To accelerate product development across teams, CDS delivers pre-built application page templates: Graphical Report Analytics, Single Sign-On (SSO) Authentication, Hierarchical Tree Topology Context Views, Split-Pane Tablet Layouts, and Mobile App Shells.

Templates are fully responsive and white-label ready, allowing partner ISPs and enterprise customers to instantly customize brand accents, logos, and portal themes.

Nº 11 / Page Templates

Application Framework & Page Blueprints

Nº 12 / 05 / AI Integration

AI-First Design Metadata & Agent Integration

CDS is built for the AI era. Component variants, interaction properties, accessibility contracts, and token rules are annotated with machine-readable AI Metadata.

Through structured Copilot Guides and Variable Metadata JSON schemas, AI code generation agents (such as GitHub Copilot or internal LLMs) receive precise context when writing frontend code, guaranteeing 100% compliance with CDS guidelines.

CDS also includes dedicated conversational AI UI components — Chat Windows, AI Agent Message Bubbles, Prompt Suggestion Chips, and Metadata Development Inspector views.

Nº 13 / AI Ecosystem

AI Metadata, Agent Guides & Conversational UI

Nº 14 / 06 / Custom Tooling

Bespoke Figma Plugins & Automation Utilities

To maximize designer efficiency and eliminate manual churn, I engineered a suite of custom Figma plugins tailored for Cambium's workflow:

1. Analytics Plugin: Instantly generates real network performance line charts, bar graphs, and geo-spatial choropleth heatmaps directly in Figma designs.

2. Color & Accessibility Suite: Automated WCAG 2.1 contrast audits, color-blindness simulation (Deuteranopia, Protanopia, Tritanopia), and palette mood boards.

3. Form Generator Plugin: One-click creation of complex enterprise form layouts from schema definitions.

4. Variable Utilities & Code Exporters: Bulk variable renamer, duplicate detector, and automatic iOS Swift and Android Kotlin code syntax generator.

Nº 15 / Plugin Suite

Custom Productivity Plugins Built for Figma

Nº 16 / 07 / Graphic Assets

Hardware Asset Libraries, Native Features & Illustrations

Cambium Design System includes a rich library of hardware device illustrations covering wireless Access Points, Switches, Microwave Dishes, Subscriber Routers, and Towers.

Combined with native feature badges, site stickers, and enterprise vector illustrations, product managers and designers can create realistic product marketing and operational flows with zero asset search overhead.

Nº 17 / Graphic Assets

Hardware Devices & Illustration Suite

Nº 18 / 08 / Measured Impact

Transforming Product Velocity Across Cambium

60%

Faster Handoff

Reduction in design-to-code implementation timeline

100+

UI Components

Production-ready components across web, mobile & tablet

100%

WCAG 2.1 AA

Accessibility compliance across all flagship platforms

Flagship Apps

Nº 19 / Architectural Vision

A Living System Designed for Humans and AI

Cambium Design System represents the pinnacle of modern design engineering — bridging core design principles, multi-tier variable tokens, custom Figma automation, and AI metadata into a unified system that scales effortlessly across enterprise teams.

Nº 21 / View more

More projects to explore

All work

LINKPlanner — RF Network Design & GIS Optimization

An interactive satellite map workspace that helps telecom engineers design outdoor wireless links, verify line-of-sight over hills and trees, and automatically generate equipment parts orders.

cnMaestro Wireless Network Manager

Cambium Networks' central cloud console for managing millions of wireless access points, switches, and backhaul radios worldwide from a single screen.

cnMaestro Subscriber — Smart Home Wi-Fi & Mesh Management

A simple home Wi-Fi mobile app for residential subscribers. Lets homeowners check internet speed, pause Wi-Fi at bedtime, share guest access, and fix connection issues without calling customer support.