GRI Design System

The GRI Design System is a cross-platform foundation built to unify design and development across iOS, Android, and Web for a B2B application used by salespeople and managers.

Senior Product Designer • 2019 – 2026

Senior Product Designer • 2019 – 2026

Problem

Inconsistent UI patterns across platforms

  • Slower design and development cycles due to repeated work

  • Lack of a shared language between designers and developers

  • Difficulty scaling and maintaining product quality

Problem

Inconsistent UI patterns across platforms

  • Slower design and development cycles due to repeated work

  • Lack of a shared language between designers and developers

  • Difficulty scaling and maintaining product quality

Goal

Create a scalable, maintainable design system that:

  • Standardizes UI components across iOS, Android and Web

  • Speeds up design and development workflows

  • Ensures visual and functional consistency

  • Enables seamless collaboration between design and engineering

Goal

Create a scalable, maintainable design system that:

  • Standardizes UI components across iOS, Android and Web

  • Speeds up design and development workflows

  • Ensures visual and functional consistency

  • Enables seamless collaboration between design and engineering

Solution

We developed the GRI Design System as a structured, cross-platform framework that supports both design and implementation.

Core Capabilities

  • Centralized component storage and documentation

  • Reusable UI components for rapid interface creation

  • Consistent visual language across all platforms

  • Direct integration into frontend workflows

Core Capabilities

  • Centralized component storage and documentation

  • Reusable UI components for rapid interface creation

  • Consistent visual language across all platforms

  • Direct integration into frontend workflows

Design → Development Bridge

The DS is tightly integrated with engineering workflows:

  • Components are created and maintained in Figma

  • Developers transfer them into Storybook

  • Components are then implemented consistently across platforms

Design → Development Bridge

The DS is tightly integrated with engineering workflows:

  • Components are created and maintained in Figma

  • Developers transfer them into Storybook

  • Components are then implemented consistently across platforms

System Architecture

Platform-Based Structure

The design system is organized into three separate Figma files:

  • iOS

  • Android

  • Web

Each file follows an identical hierarchical structure to ensure consistency and ease of navigation.

File Structure

Each platform file is divided into:

  • Overview
    High-level introduction with links to component pages

  • Sections
    Logical grouping of components

  • Component Pages
    Detailed documentation and usage of each element

This structure allows designers and developers to quickly locate and understand components.

Overview

Overview

Sections

Page

Page

Methodology

The system is built using the principles of Atomic Design, ensuring scalability and modularity.

Atoms

Foundational elements such as:

  • Typography

  • Colors

  • Iconography

  • Spacing and grids

Molecules

Combinations of atoms:

  • Buttons

  • Input fields

  • Search bars

  • Tags and chips

Organisms

More complex components composed of multiple molecules:

  • Cards

  • List items

  • Notifications

  • Navigation bars

Templates

Page-level structures that organize components into layouts:

  • Search

  • Filters

  • File Upload

Component Page

Each component page is designed for clarity and usability, containing:

1. Component

  • Main component, its variants and parts

2. Specification

  • Dimensions

  • Spacing

  • Behavior notes

  • Additional guidelines

3. Showcase

  • Visual overview of all variations

  • Helps teams quickly compare and select appropriate versions

4. Interface Examples

  • Real product screens demonstrating usage

  • Provides context and best practices

Outcome

The GRI Design System significantly improved both design and development workflows:

Faster interface creation through reusable components

  • Improved visual consistency across all platforms

  • Reduced duplication of work

  • Stronger alignment between design and engineering

Living System

The design system is not static — it evolves with the product.

  • New components are added as needed

  • Existing ones are refined based on real use cases

  • Organisms and templates grow organically from foundational elements

This approach ensures the system remains relevant, scalable, and sustainable over time.