SISA Energy Design System

Design System | UI Design

This design system was created to address a critical need for both consistency and scalability. Starting from scratch, we built it to align with web accessibility standards, prioritizing uniformity and usability.

Project Details

Client: SISA Energy Inc.

My Role: Product Designer.

Team: Kyung Min Song, Yoyo Chen & Sejin Oh.

Timeline: 2 months.

Tools: Figma, Miro Board, Font Awesome 6 Pro, Microsoft Teams, Stark.

Problem

Different developers contributed to the product’s development without adhering to any standard guidelines, resulting in diverse structures and styles. The existing code presented challenges for reusability or scalability. And last but not least, web accessibility hadn’t been addressed or considered at all.

Achievement

Produced a cohesive design system prioritizing web accessibility and uniformity. It establishes standards for data visualization and front-end development, working as a foundation for scalable and consistent components.

Design System

Components

Color

Brand Colors

These are the SISA Energy official brand colors.

Neutral Colors

These are used for backgrounds, texts and shapes. They support the semantic colors, and sometimes used for disabled states.

Semantic Colors

These colors are used to convey standard value states. They have the same meaning in all contexts.

Labels, Input Fields, Selects & Text Areas

Labels

Labels need to describe the purpose of the form control.

Explicit Association

The  label element is used to associate text with form elements explicitly by matching the for and id attributes of the form control.

<label for=”firstname”>First name:</label>
<input type=”text” name=”firstname” id=”firstname” placeholder=”Enter your first name”>

<input type=”checkbox” name=”subscribe” id=”subscribe”>
<label for=”subscribe”>Subscribe to newsletter</label>

<label for=”province”>Province</label>
<select id=”province”>
<option value=”None” selected disabled>Select province</option>
<option value=”AB”>Alberta</option>
<option value=”BC”>British Columbia</option>
</select>

Hidden Label

Sometimes, the purpose of an input is clear without the use of a label by the context provided visually. However, we need to provide code support to the assistive technologies so that the context is clear.

There are three possible approaches to make this element accessible.

1. Hiding the label element

The  element is provided to identify a form control within the code, but it is visually hidden to avoid redundancy for users who can derive the purpose from the visual cues.

Note that this is NOT “display: none;”. That declaration hides the attribute completely and cannot be read by screen readers.

<label for=”search” class=”visuallyhidden”>Search: </label> <input type=”text” name=”search” id=”search”> <button type=”submit”>Search</button> .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

2. Using aria-label

The aria-label attribute can also be used to identify form controls. This approach is well supported by screen readers but the information is not conveyed to visual users. This should only be used when the label of the control is clear from the surrounding content.

<input type=”text” name=”search” aria-label=”Search for cities”> <button type=”submit”>Search</button>

3. Using aria-labelledby

The aria-labelledby attribute can also be used to identify form controls. This approach is well supported by screen readers but the information is not conveyed to visual users. This should only be used when the label of the control is clear from the surrounding content.

<input type=”text” name=”search” aria-labelledby=”searchbutton”> <button id=”searchbutton” type=”submit”>Search</button>

Controls

Checkboxes

It is not only important to associate the label to the input in a checkbox, but to make sure that when the user clicks on the label the checkbox will be activated as well.

<input type=”checkbox” id=”newsletter”/> <label for=”newsletter”>Subscribe to newsletter</label>

Radio Buttons

A radio button is a checkable input that when associated with other radio buttons, only one of which can be checked at a time. The radio buttons must be grouped together in a radiogroup to indicate which ones affect the same value.

<p id=”legend”>True or False?</p>

<label id=”label-two”>False</label> </div> </div>