The Color “Violet” on Framer

Project

Role

UX UI Designer

Company

Personal Project

Tools

Figma, Adobe Creative Suite (Photoshop, Illustrator, InDesign, Aftereffects), and Framer

The website is a personal visual archive that combines structured grid layouts with spontaneous, process-driven design experiments. Using tools, geometric forms, and typography, The Color “Violet” explores how designing with 45 shades of one color can shape mood, rhythm, and visual storytelling. Showing the conceptual range of violet through multimedia design.

I challenged myself to create in Illustrator and Photoshop without a set plan, exploring ideas through uncertainty. This led to 72 small-format designs experimenting with texture, rhythm, and form, which became the foundation for a modular system focused on accessibility and interaction.

According to the National Institutes of Health (NIH), purple is often seen as a neutral hue with limited emotional association. I saw this flexibility as an opportunity to create.

While violet is a spectral color with a defined place in the visible light spectrum, purple is a perceptual blend—our brain's interpretation of red and blue light combined. Yet in everyday language, “purple” has become the umbrella term for this entire color family.

This gap between scientific distinction and cultural usage, combined with purple’s emotional neutrality, inspired me to explore how design could give the color more resonance, rhythm, and personal significance.

Josef Alber’s “Interaction of Color” was my primary source for when my project was still focused on learning color theory.

The Temperature Blanket was a big influence on my final project. The website generates a color palette based on the weather of a certain area. It’s what inspired me to link my project to the circadian rhythm and assigning shades of violet.

In the final outcome, the hero animation was created using a break down video created by MotionXP.

Card sorting helped shape a clear information architecture by revealing how users intuitively group the 45 violet shades. This guided the site’s structure, enabling smooth navigation through the circadian rhythm–based palette and supporting emotionally driven palette creation.

I created wireframes to map out the layout and flow based on the information architecture. They defined key interactions and content hierarchy, prioritizing clarity and ease of use, and ensured users could explore violet shades and build personalized palettes without distraction.

Usability testing took place informally during a class session where everyone walked around to view and share their in-progress work.

Based on this feedback, I made targeted adjustments: simplifying navigation, improving instructions, and fine-tuning layout decisions to better support a smooth, emotionally engaging experience. This iterative feedback loop was essential in shaping a more thoughtful and user-friendly final product.

The visual identity uses black as a grounding element, paired with three bright shades of violet to create contrast, rhythm, and emotional depth throughout the interface.

I chose Soulcraft Wide as the display font for its bold, extended letterforms that echo the assertiveness and uniqueness of violet as a singular system. Its industrial, structured feel contrasts with the softness of the color palette, creating a tension that draws attention and reinforces the idea of violet as both veery emotional and functional.

For body text, I used Montserrat for its clean, modern geometry and excellent readability.

The final outcome is an interactive website featuring 45 curated violet shades aligned with the circadian rhythm. It allows users to explore and build personalized palettes that evoke both emotional and visual resonance. The design blends minimalism with expressive color, inviting reflection and showcasing violet as a flexible, impactful design system.

Gallery

I created a gallery with 72 design experiments currently, using different mediums like type, motion, and texture. These were a way for me to test how violet could work in different styles and moods, and they helped me explore the color’s flexibility through hands-on making.

Generator

The final site includes a color generator that helps users create their own palettes using 45 violet shades tied to the circadian rhythm. It’s designed to feel intuitive and personal—guiding users through a process of selecting colors based on time, mood, or visual preference.

Palettes

A section for popular palettes, so users can browse and get inspired by the combinations others are drawn to. It turns the palette-building process into something both creative and shared.

Colorway

Colorway section, where I organized the 45 violet shades into smaller, themed sets. Each colorway highlights a specific mood, energy, or time of day, helping users understand how violet can shift depending on context.

MORE WORK