Light mode

Light mode

Light mode

Mode Switcher

Mode Switcher

Mode
Switcher

Designing for Light & Dark.

Designing for Light & Dark.

Goal:
Create a seamless & accessible Light/dark mode experience using Figma variables.

Responsibilities

• Accessibility & contrast checking
• Theming strategy
• UI Adaptation
• Design system development

Primitive Colors

Primitive Colors

Primitive Colors

To kick start, I set up primitive variables as a source of truth,
I focused on key primary, secondary and grey colours.

Semantic aliasing

Semantic aliasing

Semantic aliasing

Using the primitives, I gave each colour an identity,
and a unique meaning, doing this ensure:

• Consistency in the interface
• Makes variables easier to use for devs & Designers
• Leads to better collaboration & handoff

Using the primitives, I gave each colour an identity, and a unique meaning, doing this ensure:

• Consistency in the interface
• Makes variables easier to use for devs & Designers
• Leads to better collaboration & handoff

Defining Dark mode

Defining Dark mode

Defining Dark mode

With the primitive colours, I then defined mode
specific semantic aliasing, instead of creating
a new set of variables i referenced the primitive variables,
this ensure that:

• There's one source of truth
• I save time when making changes
• No duplications of any colours

With the primitive colours, I then defined mode
specific semantic aliasing, instead of creating
a new set of variables i referenced the primitive variables, this ensure that:

• There's one source of truth
• I save time when making changes
• No duplications of any colours

Accessibility &
Contrast checking

Accessibility &
Contrast checking

Accessibility &
Contrast checking

Before adapting the UI to the new colours, I ensured
the used ,styles passed at least AA accessibility
guidelines set by WCAG.

Before adapting the UI to the new colours, I made sure that the colours used passed AAA accessibility guidelines set by WCAG.

Application

Application

Application

All was left was to apply the mode specific semantic aliasing to the rest of the screens :)

Light mode

Light mode

Light mode

Handover

Handover

After testing and making sure all components
and UI are accessible, I then collaborated with devs,
PM and the Product team for handover.

After testing and making sure all components
and UI are accessible, I then collaborated with devs, PM and the Product team for handover