Opsen
A clean, accessible dashboard powered by a flexible design system and multi-theme UI.
Overview
Facility managers often work with hundreds of maintenance requests daily — from electrical issues to safety hazards. Yet most tools are overloaded with information, inconsistent in UI patterns, and difficult to scan quickly during high-pressure situations.
I created Opsen a Maintenance Job Tracking Dashboard as a self-initiated project to demonstrate how a structured design system, strong information hierarchy, and accessible light/dark modes can significantly improve operational efficiency.
This project focuses on:
-
Designing a scalable dashboard interface
-
Creating a unified light & dark theme system
-
Establishing a component library suitable for large-scale enterprise products
-
Improving visual hierarchy, readability, and task prioritization
Designing with purpose, clarity, and intention
-
Lack of clear prioritization : Urgent items often look visually similar to non-critical ones, leading to delays and safety risks.
-
Overwhelming information density: Legacy dashboards present everything at once — making it hard to track what really needs attention.
-
Inconsistent UI components: Different modules follow different structures, creating cognitive load and reducing efficiency.
-
Limited support for dark environments: Many facility teams work night shifts or in dimly lit areas, making dark mode essential for eye comfort.
Problem Space
Research & Insights
-
Facility managers scan, not read.
The UI must surface critical information first, in predictable locations. -
Status and assignment clarity is more important than visuals.
Users need to instantly know: Is it urgent? Who handles it? When is it due? -
Too many colors = confusion.
A minimal color palette supports better cognitive processing. -
Mobile parity is important, but the dashboard remains the central command center.
Design System
The foundation of this project was a scalable design system built to ensure consistency across the entire dashboard. The system includes clearly defined color tokens, typography styles, spacing rules, and reusable components—all designed to support both light and dark themes. By standardizing these core elements, the interface becomes easier to maintain, more accessible, and significantly faster to extend as the product grows.
This system-first approach allowed every screen to feel cohesive, predictable, and efficient, while giving developers a streamlined visual language to work with.
Crafting a system that grows with the product
Colors
A balanced color palette with neutral foundations and functional accents.
The neutrals maintain clarity across dense data screens, while accent colors reinforce status states such as Urgent, Pending, and In Progress. Both light and dark themes were designed with WCAG-compliant contrast for accessibility and readability.
Typography
Nunito Sans is used as the primary typeface for its high readability, modern look, and excellent performance in dashboard environments.
A clear typographic hierarchy ensures quick scanning, with consistent styles for titles, labels, metadata, and descriptions.
Icons
A simple, line-based icon set built for clarity at small sizes.
Icons support quick recognition of actions, statuses, and categories without adding visual noise. Each icon maintains consistent stroke weight to match the overall visual language.
Corner Radius
Rounded corners at 5px (cards) and 20px (buttons, inputs) create a softer, approachable appearance while maintaining structure.
The unified radius system ensures consistency across light and dark UI components and strengthens the overall brand cohesion.
Spacing
Consistent spacing between sections, cards, and text elements improves scan-ability and reduces cognitive load, especially in high-density dashboards.
Tokens
To ensure consistency across light and dark themes, the design system uses a structured token-based color architecture. This approach makes the interface scalable, maintainable, and easier to implement for development teams.
Color primitives are the raw base colors of the system — the foundational palette from which all other colors are derived.
Semantic tokens are meaning-based colors, mapped from the primitive palette to ensure clarity and consistency across UI states.
Components
Scalability at the core of every design decision
Learnings & Reflections
The Impact
Opsen demonstrates how thoughtful UX, a structured design system, and smart visual hierarchy can transform complex operations into a manageable, efficient workflow.
-
Building a design system from scratch
-
Applying accessibility across multi-theme systems
-
Managing complex information architecture
-
Designing for real-world use cases (urgency, safety, operational pressure)
-
Adapting components to both light and dark environments