Explore a Modern, Customizable Color System for ROS Cycle UI

[alwin-m]

🎨 Explore a Modern, Customizable Color System for ROS Cycle UI

Summary

The current ROS Cycle UI uses a soft pastel / gentle aesthetic (pinks, mint, lavender) that works well for calmness and approachability. However, there is an opportunity to experiment with a more modern, artwork-inspired color system—something that feels fresh, bold, and unique for the new generation of users, while still keeping emotional comfort and clarity.

This issue proposes:

• Introducing a configurable color palette system using hex values
• Exploring an alternative, modern visual identity (opposite or contrast to the current pastel theme)
• Planning a future branch / patch / version that fully redesigns the color language

---

Motivation

• Modern apps increasingly feel like digital art pieces, not just utilities

• A stronger visual identity can:

  • Increase engagement and curiosity
  • Make ROS Cycle feel unique and memorable
  • Appeal to Gen Z / modern design sensibilities

• A color-system-based approach allows experimentation without breaking core UX logic

---

Proposal: Color System via Hex Values

Instead of hard-coded pastel values, we could:

• Define a theme object or CSS variables where all colors are expressed in hex
• Allow easy swapping between themes (e.g., soft, modern, experimental)
• Keep accessibility (contrast, readability) as a design constraint

Example structure:

:root {
  --bg-primary: #0E0E11;
  --bg-secondary: #16161D;
  --card-bg: #1E1E2E;
  --accent-primary: #6AE3FF;
  --accent-secondary: #A78BFA;
  --text-primary: #F5F7FA;
  --text-muted: #9AA4B2;
}

---

Suggested Modern / Artwork-Inspired Palette (Hex Values)

This palette aims for a sleek, futuristic, gallery-like feel while remaining warm and human.

Dark Base (modern, premium):

• Background Primary: #0E0E11
• Background Secondary: #16161D
• Card Surface: #1E1E2E

Text:

• Primary Text: #F5F7FA
• Muted Text: #9AA4B2

Accents (emotion + identity):

• Accent Cyan (energy, clarity): #6AE3FF
• Accent Violet (emotion, identity): #A78BFA
• Soft Highlight Pink (continuity with current theme): #FF8FB1

Status / States:

• Success / High Confidence: #4ADE80
• Warning / Medium Confidence: #FBBF24
• Attention / Low Confidence: #FB7185

---

Design Direction

• This would be intentionally opposite of the current soft pastel theme
• Less “cute & gentle”, more “calm, confident, modern artwork”
• Feels like a digital wellness tool designed by designers, not just developers

---

Future Work (Not in This Issue)

• Create a new branch or patch (e.g., modern-color-experiment)

• Fully redesign the UI using this palette

• Compare user perception between:

  • Soft pastel theme (current)
  • Modern dark/artwork theme (new)

• Possibly allow users to switch themes in the future

---

Notes

This is an exploration issue, not a final design decision. The goal is to open discussion, experimentation, and creative direction before committing to a full redesign.

Feedback, alternative palettes, and visual references are welcome ✨