At RoleModel, design is about collaboration.

At RoleModel, design is about collaboration.

At RoleModel, design is about collaboration.

Optics embodies the RoleModel ethos of deep collaboration, uniting our team’s diverse expertise with the shared goal of crafting excellent design solutions and echos our commitment to Character, Collaboration, and Craftsmanship.

Optics embodies the RoleModel ethos of deep collaboration, uniting our team’s diverse expertise with the shared goal of crafting excellent design solutions and echos our commitment to Character, Collaboration, and Craftsmanship.

0:00 / 0:00

01

The Vision

We needed a system that would propel our projects forward, with a foundation for continuous evolution through active collaboration with our developers and designers. Optics was born from the insight that a unified design and development framework propels our projects to greater heights, amplifying the positive outcomes for our clients.

Harmonize Design and Development

Optics bridges the gap between creativity and code by fostering a shared language. It’s where aesthetic precision meets technical finesse, ensuring that designers and developers are in sync, crafting seamless experiences in unison.

Harmonize Design and Development

Optics bridges the gap between creativity and code by fostering a shared language. It’s where aesthetic precision meets technical finesse, ensuring that designers and developers are in sync, crafting seamless experiences in unison.

Elevate Design Flexibility

Optics is our answer to the evolving needs of design at RoleModel. By integrating a versatile design system with a collection of adaptable components, Optics enhances our ability to tackle unique project challenges. It offers a customizable solutions that upholds our commitment to precision and flexibility in every project.

Elevate Design Flexibility

Optics is our answer to the evolving needs of design at RoleModel. By integrating a versatile design system with a collection of adaptable components, Optics enhances our ability to tackle unique project challenges. It offers a customizable solutions that upholds our commitment to precision and flexibility in every project.

Crafting Accessible User Experiences

Optics is our answer to the evolving needs of design at RoleModel. By integrating a versatile design system with a collection of adaptable components, Optics enhances our ability to tackle unique project challenges. It offers a customizable solutions that upholds our commitment to precision and flexibility in every project.

Crafting Accessible User Experiences

Optics is our answer to the evolving needs of design at RoleModel. By integrating a versatile design system with a collection of adaptable components, Optics enhances our ability to tackle unique project challenges. It offers a customizable solutions that upholds our commitment to precision and flexibility in every project.

01

The Core

Optics is built on three core pillars: our Figma Component Library, HTML and CSS components, and thorough Documentation. The Figma library ensures consistent design across projects, the HTML/CSS components provide reliable and scalable code structure, and our documentation offers clear guidance on design system best practices and implementation logic.

Figma Component Library

In Optics, component library is crafted to give our team precise specifications for each component, fostering consistency across projects. This comprehensive library streamlines our development process, enhancing efficiency while maintaining a high standard of consistency in our work.

Figma Component Library

In Optics, component library is crafted to give our team precise specifications for each component, fostering consistency across projects. This comprehensive library streamlines our development process, enhancing efficiency while maintaining a high standard of consistency in our work.

Figma Component Library

In Optics, component library is crafted to give our team precise specifications for each component, fostering consistency across projects. This comprehensive library streamlines our development process, enhancing efficiency while maintaining a high standard of consistency in our work.

HMTL and CSS Components

Access essential development tools for seamless implementation. Optics provides clear guidelines and SCSS packages that align with our design standards, ensuring consistency and quality in client projects

HMTL and CSS Components

Access essential development tools for seamless implementation. Optics provides clear guidelines and SCSS packages that align with our design standards, ensuring consistency and quality in client projects

HMTL and CSS Components

Access essential development tools for seamless implementation. Optics provides clear guidelines and SCSS packages that align with our design standards, ensuring consistency and quality in client projects

Documentation

Optics’ documentation offers an in-depth look at our best practices, providing insights into the reasoning behind our design and implementation strategies ensuring our team understands the rationale and methods driving our high-quality design approach.

Documentation

Optics’ documentation offers an in-depth look at our best practices, providing insights into the reasoning behind our design and implementation strategies ensuring our team understands the rationale and methods driving our high-quality design approach.

Documentation

Optics’ documentation offers an in-depth look at our best practices, providing insights into the reasoning behind our design and implementation strategies ensuring our team understands the rationale and methods driving our high-quality design approach.

03

Design Principals

Optics embodies a set of core design principles that guide our team. These principles are not just guidelines but the bedrock of our approach to creating digital products that are as functional as they are aesthetically compelling.

Customizable and Flexible

The ability to adapt and customize components to meet the unique requirements of various projects, while maintaining flexibility to fit into different development tools.

Customizable and Flexible

The ability to adapt and customize components to meet the unique requirements of various projects, while maintaining flexibility to fit into different development tools.

Consistency and Standardization

The ability to adapt and customize components to meet the unique requirements of various projects, while maintaining flexibility to fit into different development tools.

Consistency and Standardization

The ability to adapt and customize components to meet the unique requirements of various projects, while maintaining flexibility to fit into different development tools.

Highly Collaborative

Facilitating tight feedback loops between designers and developers to build upon the design foundation incrementally and collaboratively.

Highly Collaborative

Facilitating tight feedback loops between designers and developers to build upon the design foundation incrementally and collaboratively.

Accessibility and Inclusivity

Prioritizing excellent accessibility in designs, ensuring that solutions are user-friendly and inclusive for all potential users.

Accessibility and Inclusivity

Prioritizing excellent accessibility in designs, ensuring that solutions are user-friendly and inclusive for all potential users.

04

Foundation

The core suite of design elements that anchor our system. It’s a collection of guidelines ensuring our designs are accessible, visually coherent, and meticulously structured. Each principle, from Accessibility to Spacing, is a building block for creating designs that are both beautiful and functional.

Accessibility

Accessibility is the cornerstone of our design philosophy, ensuring that our products are inclusive and usable by everyone. We rigorously adhere to WCAG standards, creating designs that cater to a wide range of abilities and assistive technologies.

Accessibility

Accessibility is the cornerstone of our design philosophy, ensuring that our products are inclusive and usable by everyone. We rigorously adhere to WCAG standards, creating designs that cater to a wide range of abilities and assistive technologies.

Color

Optics offers a color system with five scales, each consisting of semantically named variables that adjust luminosity while maintaining hue and saturation. This system is akin to photographic f-stops, with ‘plus’ for brighter colors and ‘minus’ for darker shades, extending to pure white and black.

Color

Optics offers a color system with five scales, each consisting of semantically named variables that adjust luminosity while maintaining hue and saturation. This system is akin to photographic f-stops, with ‘plus’ for brighter colors and ‘minus’ for darker shades, extending to pure white and black.

Typography

We begin with the default: Noto Sans, a versatile and modern typeface that’s as functional as it is beautiful, accessed through the Google Fonts CDN for ease and efficiency. This choice provides a solid foundation for readability and accessibility, ensuring the text is clear, legible as it is aesthetically pleasing.

Typography

We begin with the default: Noto Sans, a versatile and modern typeface that’s as functional as it is beautiful, accessed through the Google Fonts CDN for ease and efficiency. This choice provides a solid foundation for readability and accessibility, ensuring the text is clear, legible as it is aesthetically pleasing.

Icons

Optics has crafted a suite of icon classes that are built upon the robust foundation of Google’s Material Symbols Icon Font. This choice ensures a familiar and intuitive user experience, leveraging a tried-and-tested icon set known for its clarity and consistency.

Icons

Optics has crafted a suite of icon classes that are built upon the robust foundation of Google’s Material Symbols Icon Font. This choice ensures a familiar and intuitive user experience, leveraging a tried-and-tested icon set known for its clarity and consistency.

Design tokens

Each token follows a clear pattern. This systematic approach guarantees that any new tokens introduced will integrate into our existing system.

Design tokens

Each token follows a clear pattern. This systematic approach guarantees that any new tokens introduced will integrate into our existing system.

Spacing

Utilizing tokens, enables us to maintain a consistent spatial structure throughout the project, leading to a more aesthetically pleasing and functionally sound product.

Spacing

Utilizing tokens, enables us to maintain a consistent spatial structure throughout the project, leading to a more aesthetically pleasing and functionally sound product.

We know that each time we

reach for something withing our

design system, its going to work.

We know that each time we

reach for something withing our design system,

its going to work.

We know that each time we

reach for something withing our

design system, its going to work.

Figma Components

We’ve crafted an extensive component library that empowers our team to grasp the precise specs of each component and apply them with uniformity across all our projects. It enhances both the pace at which we develop and the consistency we deliver.

Optics Components

Calendar

To-do List

Notes

Preview of the Optics Avatar component showing a circular profile photo
Preview of the Optics Confirm Dialog component with a title, message, and Cancel/confirm buttons
Preview of the Optics Form component with name, email, phone number, and birthdate fields, including a validation error state
Preview of the Optics Navbar component showing the RoleModel Software logo, navigation tabs, and a user avatar

Modal Title

Instance Slot

Cancel

Primary

HMTL & CSS Components

The GitHub repository for Optics serves as an essential resource for our developers. It’s a comprehensive storehouse where all the code related to our design system is maintained and updated. This includes the HTML and CSS components that mirror our Figma design elements.

https://github.com/RoleModel/optics

Documentation

Our Storybook documentation is a dynamic and interactive showcase of Optics’ UI components. This platform acts as a living library, providing developers and designers with a clear, visual representation of each component in various states and contexts. Developers should use these Storybook docs as a visual and functional reference for implementing UI components in their projects.

Visit Storybook

https://docs.optics.rolemodel.design

Start With a Design Conversation

Let’s talk through what you’re trying to achieve and the challenges standing in your way. We’ll map out where software can create lasting value and outline a plan that grows with your business—not just a quick solution, but a foundation you can build on.

Let's Talk
Let's Talk • Let's Talk • Let's Talk • Let's Talk • Let's Talk •

Start With a Design Conversation

Let’s talk through what you’re trying to achieve and the challenges standing in your way. We’ll map out where software can create lasting value and outline a plan that grows with your business—not just a quick solution, but a foundation you can build on.

Let's Talk
Let's Talk • Let's Talk • Let's Talk • Let's Talk • Let's Talk •

Start With a Design Conversation

Let’s talk through what you’re trying to achieve and the challenges standing in your way. We’ll map out where software can create lasting value and outline a plan that grows with your business—not just a quick solution, but a foundation you can build on.

Let's Talk
Let's Talk • Let's Talk • Let's Talk • Let's Talk • Let's Talk •

Start With a Design Conversation

Let’s talk through what you’re trying to achieve and the challenges standing in your way. We’ll map out where software can create lasting value and outline a plan that grows with your business—not just a quick solution, but a foundation you can build on.

Let's Talk
Let's Talk • Let's Talk • Let's Talk • Let's Talk • Let's Talk •