top of page

Meet 
Topaz

  DESIGN LANGUAGE SYSTEM  

Topaz  -  Design Language System (DLS)

Design Language System for School Cafe

Primeroedge lacked any formalized design system. What it had in place was a set of screens put together by developers. The design system at that time was fragmentary, lacked consistency, and was partially outdated. Additionally, the old documentation left much open to interpretation. As a result, our product, UX, and engineering teams lacked a shared foundation around process, design language, guidelines, and UI pattern libraries.

To streamline the design process by providing consistency for their product suite, update their color palette, typography and intuitive iconography for their web/mobile platforms. This significantly improves the product development process by scaling design across an organization and ensuring improved UX, UI, and product delivery.

What's changing?

  • It’s a single source to view components, patterns, and styles.

  • New changes for the same projects can be redesigned and managed at scale through the design system.

  • Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally.

  • Ability to replicate designs quickly by utilising pre-made components and elements.

  • Reducing the need to reinvent the wheel and eliminating inconsistency.

  • Reduces wasted designs or development time around miscommunications.

Screen Shot 2024-02-09 at 12.56.42 AM.png
Screen Shot 2024-02-09 at 12.56.50 AM.png

Current Legacy application lacked a standard color palette and colors and styles were picked randomly. 

The goal with the new color palette was to bring a unified and recognizable consistency to School Cafe. This consistency would be grounded in a set of well-defined rules about how to work with the Topaz component library

Topaz's default themes are derived from the School Cafe's color palette. The neutral gray family is dominant in the default themes, making use of subtle shifts in value to organize content into distinct zones.

The core primary color family serves as the primary action color across the product. Additional colors are used sparingly and purposefully.

Typography

Inter

Versatile - Quick - Readable - Clear

Screen Shot 2024-02-09 at 1.54.30 AM.png
Screen Shot 2024-02-09 at 1.54.15 AM.png
Frame 4.png
Line.png
Bars.png
Pie.png
Screen Shot 2024-02-09 at 3.05.23 AM.png

Component Library consisted of: 

Component name:

A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.

State changes:

Recommended defaults and the subsequent changes in appearance.

Note making:

Page annotations and descriptions to understand what component you were looking at.

Breakpoints:

Any size indication and breakpoints for the developers.

Layout and spacing.png
Layout and spacing (2).png
Out Systems - Classes.png
Frame 1705.png

Documentation

Documentation is always included on the same page as the component this was to explain any use cases that were created. This consisted of:

  • A clear explanation for what this element is and how it is typically used, occasionally accompanied by dos and don’ts for context and clarification.

  • Picture examples so that it was clear what we were talking about

  • Rules of when to use the component and how to use the component

Screen-Shot-2024-02-09-at-6.44.39-AM.png

© 2035 by Noelle Amadea

For Privacy reasons, I have only displayed an overview of the design system. Please reach out for the rest of the design system which includes Iconography, page templates, form controls, fonts, components, buttons & indicators, navigational elements, layouts etc.

bottom of page