Building the foundation for
Enterprise Experience Ecosystem
Nitrogen (N₂) is Figma-based Enterprise's core design system & Component Library
A unified set of design principles, components, and guidelines that ensures every digital product we create is consistent, accessible, and scalable. It acts as the foundation for building seamless experiences across teams, products, and platforms.
Best-in-class
Design System for Enterprise Applications
Scope of the system
Foundations, accessibility tokens, components, interaction states, theming, and governance
Primary Objective
Create a single, inclusive source of truth that scales safely across teams
Built on Figma's Latest Design Standards
Variables, modes, component properties, and nested components — to create a future-ready design foundation.
Standardised Design Tokens
Creates a unified visual language that eliminates inconsistencies across internal applications.
Modern, Modular & Distinctly Enterprise
Designed with a clean, contemporary visual language that reflects a modern enterprise while remaining purpose-built for complex workflows.
Accessibility
Built-In
Accessibility is embedded into every token, component, and pattern from the start.
Discover
The Business Context
In 2023, organization underwent one of its most significant transformations in recent years — bringing together all the entities under a single, unified business structure. The goal was simple but ambitious: to create one connected organization, capable of delivering seamless experiences for customers, employees, and partners across the organization's ecosystem.
With this new structure came a challenge — hundreds of internal applications across HR, Finance, Legal, and Corporate Affairs, each designed and developed independently over the years. These systems varied in design language, usability standards, and technical implementation. As a result:
- Multiple tools with inconsistent interfaces.
- Duplicated work to solve similar problems.
- New initiatives faced long setup.
The Problem
- Multiple departments were building applications in silos.
- Inconsistent UI components and patterns across HR, Finance, and Legal systems.
- High cost of maintaining redundant UI solutions.
- Difficulty onboarding teams quickly due to lack of documentation or a shared visual language.
- Limited scalability for future products.
The Solution
The realization gave birth to the N₂ (Nitrogen) Design System — an elemental framework designed to standardize, accelerate, and elevate how BT Group builds its internal tools and experiences.
- A centralized design system providing reusable components, design tokens, and accessibility guidelines.
- Duplicated work to solve similar problems.
- Built with enterprise use cases in mind — scalable, secure, and adaptive to different internal tools.
Define
Design System Maturity Model
A three-stage strategic roadmap moving from atomic styles to a fully governed product ecosystem.
Foundations
Establishing the "DNA" of the system through technical specifications and inclusive standards.
- Design Tokens: Primitive & Semantic variables.
- Accessibility DNA: WCAG 2.2 contrast defaults.
- Atomic Logic: Grid and typographic scales.
Scale
Expanding into high-logic component libraries that automate consistency across products.
- Modular Components: Patterns with built-in logic.
- Prototyping Logic: Advanced Figma variables.
- Handoff Sync: ARIA and CSS role alignment.
Governance
Managing the system lifecycle through documentation and strict quality control.
- Compliance: Ongoing WCAG 2.2 AA audits.
- Contribution: Defined component request paths.
- Integrity: Strict versioning to prevent drift.
The Name
Nitrogen is one of nature's most essential elements - lightweight, abundant, and life-sustaining. Found everywhere, yet invisible, it quietly supports growth and function.
In the same way, the Nitrogen Design System (N₂) provides a lightweight, ever-present foundation that supports every product experience across organization. Like nitrogen's role in sustaining life, N₂ powers innovation by staying in the background—simple, stable, and vital.
The Logo
The File Structure
To ensure scalability, collaboration, and a consistent design workflow, I structured the N2 Figma workspace into four core folders. Each folder serves a specific purpose in supporting the design system, improving team efficiency, and maintaining long-term design governance.
-
1. Libraries
This folder contains all foundational design system libraries used across the ecosystem. It includes:
- Color tokens
- Web and mobile typography
- Web components
- Mobile components
By centralizing these assets, the team can work with a unified visual language and reuse components effortlessly.
-
2. Resources
The Resources folder holds all supporting assets that complement the design system, such as:
- Icon sets
- Image collections
- Illustrations
- Logo library
These assets ensure visual consistency and make it easy for designers to access brand-aligned materials.
-
3. Ways of Working
This folder defines our design governance and workflow standards. It includes:
- Design guidelines
- File-naming conventions
- Cover image libraries
- Documentation for how designers should organize and maintain files
This ensures that every design file is structured, readable, and aligned with the broader system.
-
4. Playground
The Playground serves as a safe space for exploration and experimentation. Designers can prototype ideas, test components, and validate patterns here.
Once a component or pattern matures and meets system standards, it is promoted to the Libraries folder as part of the official design system.
Constructing the Design file
File Cover/Thumbnail
Design
Foundation
Foundation was built to bring clarity, consistency, and scalability across digital products. It defines a unified visual and structural foundation, serving as a single source of truth for designers and developers.
-
accessibility_new Accessibility
-
palette Color System
-
text_fields Typography
-
category_search Iconography
-
align_items_stretch Spacing & Layout
-
edit_document Writing
Accessibility
Accessibility is a core principle of the N₂ Design System, built into its foundations rather than added later. From colour and typography to interaction, motion, and component behaviour, N₂ ensures WCAG-compliant, inclusive experiences by default. Tokens are created as Two-tier token model: Primitive → Semantic Tokens
Colour System
Semantic colour palettes define functional roles and ensure consistent, accessible UI states across all experiences.
Less is More
Instead of dozens of near-identical shades, N2 relies on a small, intentional set of primitive colours that power both Light and Dark themes. This keeps the palette easy to maintain, reduces cognitive load, and gives developers a predictable mapping.
One Set of Primitives, Two Themes
Light and Dark mode share the same primitives. Theme switching happens through semantic token mapping (token inversion), so both modes feel like two expressions of the same visual system—not separate styles.
- Primitives: Raw, brand-agnostic colours (neutrals, base hues, status colours, tints/shades, extended palette). Not used directly in UI.
- Tokens: Semantic colours used by components (surface, text, border, status), defined for both Light and Dark modes.
Why this structure works
- Flexibility for new themes or rebrands
- Resilience when primitives change
- Clarity through meaning-based selection (not hex codes)
- Scalability across teams and products
Typography
Typography is a fundamental part of the N₂ Design System. It defines how BT communicates across digital products with clarity, consistency, and accessibility. The N₂ typography scale is built using Figma variables, enabling easy theming, platform alignment, and future scalability while remaining lightweight — staying true to the “Nitrogen” philosophy.
Font Family System
The N₂ Design System uses a purposeful, multi-tiered font family structure that balances brand expression, functional clarity, and technical precision. Each font family plays a specific role, ensuring consistency across BT’s product ecosystem while remaining lightweight and accessible.
- Primary Font Family: This is the core typeface for N₂. It is used across most UI surfaces — including body text, forms, and navigation.
- Secondary Font Family: This typeface adds a strong Brand identity to key touchpoints such as headers, hero sections, marketing surfaces, or special communication patterns.
- Monospace Font Family: Dedicated to technical use cases like logs, system outputs, identifiers, and code-like information.
- Icon Font Family: N₂ uses Material Symbols as its unified icon font, delivering crisp, scalable icons with clean geometry, strong legibility at small sizes, and consistent use across platforms.
Iconography
N₂ uses the Material Symbols Sharp icon family, chosen for its clean geometry, modern aesthetic, and excellent readability at small sizes. The sharp style aligns well with the overall visual direction of the system, offering a crisp and confident look across both light and dark interfaces. This icon family also supports variable weights, and N₂ primarily uses the regular weight to maintain strong presence and clarity across various screen sizes and densities.
Spacing
Spacing and layout form the structural backbone of the N₂ Design System. Because BT’s applications are primarily enterprise tools with dense information and complex workflows, the system is built on predictable, scalable rules that help maintain clarity and usability across all products.
N₂ follows a 4-point grid system, chosen for its simplicity and efficiency in enterprise environments. This system creates a consistent rhythm that works well for data-heavy screens, forms, tables, and multi-step processes.
Why 4-point spacing works for N₂:
- It creates a clean and logical vertical and horizontal rhythm.
- It reduces cognitive load by keeping spacing visually predictable.
- It scales naturally for both compact and spacious layouts.
- It speeds up design and development alignment across teams.
Layout
The layout structure in N₂ is built on a 12-column grid system, offering the flexibility required for simple interfaces as well as complex, multi-panel enterprise screens.
N₂ supports two major layout modes:
- Boxed layout — used for focused content areas and standard application pages.
- Fluid layout — expands to larger screens, ideal for dashboards, monitoring views, and data visualization.
Left Navigation Variants
-
Full Left Navigation:
Includes both icons and labels, ideal for applications with deeper information architecture or heavy navigation requirements.
-
Icon-Only Navigation:
A compact version that maximizes screen space while maintaining quick access to key sections — commonly used in dashboards or analytics-heavy environments.
Grid Without Navigation
- Layouts adapt automatically whether a left navigation panel is present or not.
- The usable content area recalculates to maintain alignment and visual balance across all breakpoints.
Why this matters
Together, the spacing and layout principles ensure that N₂ interfaces feel structured, consistent, and scalable. Designers can build faster, developers can implement more reliably, and users can navigate BT’s enterprise tools with clarity and confidence.
Writing
Writing in the N₂ Design System is guided by clarity, empathy, and a touch of personality. Good writing helps users understand actions quickly, make confident decisions, and feel supported throughout their journey. To achieve this, we keep our content simple, human, and purposeful.
Components
Components are the core of the N2 Design System—reusable building blocks that apply our foundations (spacing, typography, color, iconography, and motion) to deliver consistent, predictable, and accessible experiences across products and platforms.
Built for enterprise scale, the library covers everyday UI (buttons, inputs) and complex patterns (tables, filters, dashboards, multi-step workflows). Because every component shares the same foundations, they combine seamlessly without losing visual or functional consistency.
Lightweight as a Core Principle
N2 uses nested, modular components so teams can reuse smaller parts inside larger patterns. Updates at the base level automatically cascade across dependent components—reducing maintenance, preventing fragmentation, and keeping the system easy to evolve.
Works across mediums and tech stacks
N2 components support Desktop, Mobile, and IT kiosks, and are designed to translate across product strategies—from framework-based apps (React, Angular, Flutter) to low-code platforms (ServiceNow, SuccessFactors, OutSystems).
Have a Design System Project?
If you're building or scaling a design system, I'd love to collaborate. Let's work together to create consistent, accessible, and impactful digital experiences.