🎨 Office Coolors: A Colorful Intranet for Creative Productivity
This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
Office Coolors is a creative intranet designed for illustrators, visual artists, and anyone who prefers a more visual and interactive approach to organizing tasks.
The main idea is to turn task completion into a visually rewarding process: each completed task unlocks a color that can be used to paint parts of an interactive SVG drawing.
It’s like a digital artistic workspace where motivation grows as your progress brings color to your creations.
✨ Key Features:
- Choose a themed workspace: Nature, Office, Beach, or Trailer
- Visual tasks unlock exclusive colors
- Interactive SVG painting with visual feedback (color explosion effect)
- Dark mode with persistent storage
- Bounce animations and custom sound effects
- Local storage to save your progress
Demo
🖥️ Try the live demo:
https://office.jamesrmoro.me
📁 View the source code on GitHub:
https://github.com/jamesrmoro/office-coolors
📺 Watch in action:
Journey
The idea behind the project came from this simple question:
What if completing each task felt like coloring a piece of a drawing?
As both an artist and a front-end developer, I wanted to explore this fusion of productivity, aesthetics, and gamification.
🧠 Key Design Decisions:
- Using SVGs as a base for coloring gave users artistic freedom. Colors are only unlocked after task completion — turning progress into a reward.
- Tasks are grouped into “floors,” like sections of a creative building.
- With ambient sounds, colorful particles, and visual themes, the experience becomes fun and immersive.
🛠️ Technologies Used:
- HTML, CSS, and vanilla JavaScript
- SVG manipulation via DOM
- Persistent progress using
localStorage - tsparticles/confetti for celebration animations
- Sound effects via
Audio API - Dark mode with memory
-
bounceanimations for modals
Closing Thoughts
Office Coolors is more than just a task tool — it’s a digital space where art and progress go hand in hand.
Perfect for illustrators and creatives looking for a more visual and engaging way to stay productive. Each task completed brings your canvas to life.
✨ Feel free to explore, customize, or expand this project to suit your own creative workflow!
Thanks to Axero and DEV for encouraging imagination, customization, and creativity in the digital workspace. 🎨
