Emerald Design System
Type
Foundational Design System
My role
UI/UX Designer
Duration
2 Weeks
01. The Task
Build your own Visual Design System for Digital Interfaces, by taking inspiration from non-intuitive things/ideas. Adapt the 'look and feel' and materiality into a legible visual design system. Create the design foundation, styles, tokens, components and a demo protoype based on your inspiration.
02. Element and Property Chosen
I’m designing a design system based on glassmorphism, inspired by the Emerald gemstone's shiny, transparent and translucent properties along with its sharp cuts which trap and reflect light in a a beautiful way provides a pleasant feeling. It can be suitable for luxury products as well as VR products providing royal and luxury experience.
03. Discovery & Research
What is a gemstone?
A gemstone is a valuable piece of mineral crystal, usually mined from the ground. Gemstones are often used as decorative elements in jewellery and other adornments.
Colors of gemstones
The difference in gemstone colours is based on the trace elements they contain, physical differences in the crystals, and the way they refract light. For instance, a physical process called “charge transfer”, as well as the presence of titanium and iron, are what produce the blue colour in sapphires.
Gemstone lore
The idea that gemstones possess special powers of healing or luck is ancient. In Europe throughout the Middle Ages, medicine men sold powdered gems for medicinal purposes. This practice is still known in some parts of Asia today.
04. Emerald
4.1 Formation
Emeralds are formed when chromium, vanadium, and iron are present in the mineral beryl. The varying presence of these three elements gives emerald its range of color. Chromium and vanadium make an intense green color. Iron gives the stone a bluish tint.
Since emeralds typically form in six-sided prisms, they are naturally suited for, and often shaped into, the emerald cut.
4.2 History and Importance
Emeralds are among the “big four” precious gemstones which make them rare and sign of luxury, royalty and are also considered to carry cosmic energy.
1. Cleopatra’s Emeralds – Symbolized ancient Egypt’s wealth and Cleopatra’s divine rule, marking one of the earliest royal uses of emeralds.
4.3 Recognition for its color
Pantone named it the Color of the Year for 2013 because of the “luxury and elegance (it brings) to the palette.”
05. Core Proprties Extraction
From the research extracting the core properties of emerald gemstone its structure its textural depth and its colour, which was also recognised as 2013 Pantone colour of the year extracting and noting all this information.
Extracting Shape
Since emeralds typically form in six-sided prisms, they are naturally suited for, and often shaped into, the emerald cut.
Extracting Color
Pantone named it the Color of the Year for 2013 because of the “luxury and elegance (it brings) to the palette.”
Extracting effect
The unique crystalline structure of emeralds gives them that distinct glass-like effect.
Extracting typeface
The typeface was inspired by the stone's sharp, clean cuts and royal appeal.
06. Translation Into Design System
From the properties listed down in the previous step, Crafted them into various colour tokens and components with their texture, and effect of Emerald gemstone. Which includes its reflection properties and transparency.
07. Implementation
I chose to design a luxury car dealership app using this system because the rarity and inherent luxury of an emerald perfectly capture the exclusive, premium atmosphere of a high-end car showroom.
Prototype
08. Conclusion & Takeaways
Aesthetics vs. Accessibility: Balancing deep emerald dark-mode tones with metallic accents required strict contrast tuning to ensure WCAG compliance without sacrificing the premium feel.
Technical Constraints: Troubleshooting live Figma embeds and background transparencies reinforced the importance of designing with final browser rendering in mind.
Discipline vs. Freedom: Balancing strict system components with unique page layouts highlighted the necessity of building flexible design tokens from the start.