RetroFlex UI - Button System

View Project:

• Figma Interactive Prototype
• Design Decisions: Button Systems

Introduction & Purpose

I designed this button system to meet the needs of a tech platform (specifically to be used within a tech portfolio), combining flexibility, functionality, and accessibility with a modern, sophisticated look and a touch of vintage charm. Every design decision—from button hierarchy to colour selection, typography, and interactive states—was chosen to enhance usability, visual clarity, and create a consistent user experience.

Button Roles and Styles

The system includes Primary, Secondary, and Tertiary buttons to establish a clear action hierarchy:

• Primary Button: This main action button is designed to draw focus with a Muted Lime background, featuring contrasting dark text and a rounded border for clarity and prominence.
• Secondary Button: Using a Cream base overlaid with a 40% opacity of Muted Lime, the Secondary button offers a strong yet subdued support role, ideal for secondary actions.
• Tertiary Button: Displaying only an Ivy Ivy border and text with no fill, the Tertiary button maintains functionality for less prominent actions without overpowering the interface.

Typography & Sizing for Tech Precision

I chose Futura for its clean, geometric lines, which adds a sense of modern precision suited to a tech platform. Futura complements the slight vintage charm of the colour scheme, providing a balanced look that remains highly readable:

• Primary Button: 20pt text, 48px high
• Small Button: 14pt text, 32px high
• Large Button: 32pt text, 72px high

Colour System: Calming, Professional, and Slightly Vintage

I selected this colour palette— Ivy Ivy, Cream, Leafy Lime, Pop, and Burnt Coral — to create a calming yet professional tone with a touch of vintage warmth. This subtle retro aesthetic not only adds character and familiarity to the buttons but also connects the user to traditional ideas of stability and safety:

• Green Tones (Ivy Ivy, Leafy Lime & Muted Lime): These shades convey a sense of stability and trust, with an earthy, natural feel that supports calmness and reliability.
• Warm Accents (Burnt Coral & Pop): The inviting warmth of Burnt Coral and Pop contrasts with the cool greens, enhancing the visual balance while making users feel at ease.
• Cream: This soft, neutral shade adds a classic, grounded touch that reinforces both the stability and the sophistication of the palette.

Accessibility: I ensured that the palette features muted variations of bright colours in order to meet WCAG AAA standards, reinforcing accessibility goals and keeping the palette grounded and cohesive.

To further enhance accessibility I used variables to ensure that all buttons can be effectively used within a Light or Dark Mode (accessible via Toggle switches on the Master List and Playground).

Interaction Feedback: Shadow, Hover, and Pressed States

Hover and pressed states feature solid and unblurred shadows, aligning with contemporary design trends by providing clear, focused feedback without added visual noise. This sharp shadow effect enhances the tech-forward identity of the system, creating a more precise, dynamic user experience.

9 States across 6 Types to feature accessibility & customisation

I built this button system with accessibility and adaptability in mind:

• Clear Feedback States and Types: Hover, pressed, success, confirmation, visited, error, disabled and warning states are visually distinct, providing clear interaction feedback.
• Keyboard Navigation Support: Tab and Enter states ensure focus and pressed responses for keyboard accessibility.
• Icon Instance Swaps & Size Options: Users can add leading or trailing icons or select an icon-only button style, making the system versatile enough to adapt to various contexts and screen sizes.

Design Principles: Modern with a Vintage Twist

The slightly vintage colour palette, rounded corners, and sharp, unblurred interaction shadows create a distinctive, balanced look that feels both fresh and familiar but remains calm and professional.

The touch of vintage charm appeals to traditional ideas of stability and safety, allowing the system to feel inviting and reliable while performing effectively in a tech environment. This thoughtful blend of contemporary style and classic sensibility ensures a highly accessible, visually engaging experience complying to WCAG and accessibility standards. Finally, consistent styling across button types ensures users can quickly recognise and understand the button system throughout the application.