Design
Design
Design
Library
Library
Library
The craft that makes everything designed feel made for you.
The craft that makes everything designed feel made for you.
The craft that makes everything designed feel made for you.
A Design Library is the Original source, crafted to grow with your product - anywhere, anytime.
A Design Library is the Original source, crafted to grow with your product - anywhere, anytime.
A Design Library is the Original source, crafted to grow with your product - anywhere, anytime.
It doesn’t scream like visual screens do - but every screen is made of it.
It doesn’t scream like visual screens do - but every screen is made of it.
It doesn’t scream like visual screens do - but every screen is made of it.
What this case study is about?
What this case study is about?
What this case study is about?
- a business analytics platform
- a business analytics platform
- a business analytics platform
This case study captures how we crafted a Design Library for Orion - to bring clarity, consistency and accessibility to its visual design.
This case study captures how we crafted a Design Library for Orion - to bring clarity, consistency and accessibility to its visual design.
This case study captures how we crafted a Design Library for Orion - to bring clarity, consistency and accessibility to its visual design.
From building color palettes for charts and dashboards to choosing the right typography, icons, and tools, we approached every decision with purpose.
From building color palettes for charts and dashboards to choosing the right typography, icons, and tools, we approached every decision with purpose.
From building color palettes for charts and dashboards to choosing the right typography, icons, and tools, we approached every decision with purpose.
We reimagined Orion’s
We reimagined Orion’s
We reimagined Orion’s
Visual Design.
Visual Design.
Visual Design.
Enhanced interaction flow and brought accessibility front and center.
Enhanced interaction flow and brought accessibility front and center.
Enhanced interaction flow and brought accessibility front and center.
crafted for
crafted for
crafted for
Tabs
Tabs
Tabs
adapted for
adapted for
adapted for
Desktop
Desktop
Desktop
polished for
polished for
polished for
Mobile
Mobile
Mobile
Tablet experience came first. Why?
Tablet experience came first. Why?
Because interaction friction is felt there first — especially with scrolls and dense data tables.
Because interaction friction is felt there first — especially with scrolls and dense data tables.
Looking around...
Looking around...
Looking around...
Explored competitor ecosystems to understand common visual tones and gaps.
Explored competitor ecosystems to understand common visual tones and gaps.
Explored competitor ecosystems to understand common visual tones and gaps.
Color Palette
Color Palette
Color Palette
Typography
Typography
Typography
Layout
Layout
Layout
Icongraphy
Icongraphy
Icongraphy
Facebook Analytics
MixPanel
Google Analytics
Google Analytics
Color Palette
Color Palette
Color Palette
Blue as primary with light neutrals; Google and MixPanel going with standard solid colors, while Facebook added gradients over background.
Blue as primary with light neutrals; Google and MixPanel going with standard solid colors, while Facebook added gradients over background.
Blue as primary with light neutrals; Google and MixPanel going with standard solid colors, while Facebook added gradients over background.
Typography
Typography
Typography
Roboto & similar open-source sans-serifs for clarity, scalability, and clean reading.
Roboto & similar open-source sans-serifs for clarity, scalability, and clean reading.
Roboto & similar open-source sans-serifs for clarity, scalability, and clean reading.
Layout
Layout
Layout
Consistent grids; MixPanel used full-width modularity, Facebook added stroke-based cards.
Consistent grids; MixPanel used full-width modularity, Facebook added stroke-based cards.
Consistent grids; MixPanel used full-width modularity, Facebook added stroke-based cards.
Icongraphy
Icongraphy
Icongraphy
Clean, modern icons that clearly communicate purpose and enhance usability.
Clean, modern icons that clearly communicate purpose and enhance usability.
Clean, modern icons that clearly communicate purpose and enhance usability.
Insights
Insights
Shaping the Spectrum
Shaping the Spectrum
Shaping the Spectrum
We explored and proposed two distinct color palettes for charts - Multicolor and Monochrome. Both were thoughtfully curated with accessibility and clarity at the core.
We explored and proposed two distinct color palettes for charts - Multicolor and Monochrome. Both were thoughtfully curated with accessibility and clarity at the core.
Multicolor
Multicolor
Multicolor
A carefully balanced pastel-based color system for charts and graphs. Designed to maximize clarity, differentiation, and accessibility.
A carefully balanced pastel-based color system for charts and graphs. Designed to maximize clarity, differentiation, and accessibility.
A carefully balanced pastel-based color system for charts and graphs. Designed to maximize clarity, differentiation, and accessibility.
Monochrome
Monochrome
A single-shade palette to ensure harmony and reduce distraction in dense data environments. Kept as a backup for future use.
A single-shade palette to ensure harmony and reduce distraction in dense data environments. Kept as a backup for future use.
Built with the Right Tools
Built with the Right Tools
Built with the Right Tools
From palette generation to accessibility validation and implementation - we used purpose-driven tools to craft a system that works just as beautifully as it looks.
From palette generation to accessibility validation and implementation - we used purpose-driven tools to craft a system that works just as beautifully as it looks.
From palette generation to accessibility validation and implementation - we used purpose-driven tools to craft a system that works just as beautifully as it looks.
Color Shades
Color Shades
Palette
ideation
Palette
ideation
Palette
ideation
Stark
Stark
Contrast testing & WCAG compliance
Contrast testing & WCAG compliance
Contrast testing & WCAG compliance
Figma
Figma
Tokenized design execution
Tokenized design execution
Tokenized design execution
Where color meets clarity
Where color meets clarity
Where color meets clarity
Every color used in the product had a job to do - from guiding attention to creating consistency.
Here's the final palette we selected - tuned for accessibility, interaction clarity, and brand presence.
Every color used in the product had a job to do - from guiding attention to creating consistency.
Here's the final palette we selected - tuned for accessibility, interaction clarity, and brand presence.
Every color used in the product had a job to do - from guiding attention to creating consistency.
Here's the final palette we selected - tuned for accessibility, interaction clarity, and brand presence.
Brand
Brand
Brand
Multicolor (Selected)
Multicolor (Selected)
Multicolor (Selected)
Finalized the multi-color palette for production, with monochrome saved as a scalable fallback.
Finalized the multi-color palette for production, with monochrome saved as a scalable fallback.
Finalized the multi-color palette for production, with monochrome saved as a scalable fallback.
50
50
50
Total colors created
Total colors created
Total colors created
Implemented with Figma Tokens for scalable updates and future dark mode integration.
Implemented with Figma Tokens for scalable updates and future dark mode integration.
Implemented with Figma Tokens for scalable updates and future dark mode integration.
Structured to Speak Clearly
Structured to Speak Clearly
Structured to Speak Clearly
We chose
We chose
We chose
Roboto
Roboto
Roboto
- a typeface built for digital environments.
- a typeface built for digital environments.
- a typeface built for digital environments.
Why Roboto?
Why Roboto?
Why Roboto?
It offers a wide range of weights, excellent legibility at smaller sizes, and a neutral tone that never distracts.
In a data-heavy platform like Orion, where space is tight and clarity is critical — it just works.
It offers a wide range of weights, excellent legibility at smaller sizes, and a neutral tone that never distracts.
In a data-heavy platform like Orion, where space is tight and clarity is critical — it just works.
It offers a wide range of weights, excellent legibility at smaller sizes, and a neutral tone that never distracts.
In a data-heavy platform like Orion, where space is tight and clarity is critical — it just works.
Open Source
Open Source
Open Source
Clean & Modern
Clean & Modern
Clean & Modern
High Readability
High Readability
High Readability
Space Efficient
Space Efficient
Space Efficient
Available in 10+ styles
Available in 10+ styles
Available in 10+ styles
Heading
Heading
Heading
24
Bold
Medium
Regular
Sub heading
Sub heading
Sub heading
20
Bold
Medium
Regular
Body
Body
Body
16
Bold
Semi-Bold
Medium
Regular
14
Bold
Medium
Regular
Captions
Captions
Captions
12
Bold
Medium
Regular
Small
Small
10
Regular
Visual cues, done right
Visual cues, done right
Visual cues, done right
We used the
We used the
We used the
Tabler
Tabler
Tabler
Icon Library.
Icon Library.
Icon Library.
Why Tabler?
Why Tabler?
Why Tabler?
A clean, open-source, consistent strokes and modern proportions.
A clean, open-source, consistent strokes and modern proportions.
A clean, open-source, consistent strokes and modern proportions.
With a wide range of well-crafted symbols, with effortless customization.
With a wide range of well-crafted symbols, with effortless customization.
With a wide range of well-crafted symbols, with effortless customization.
The stroke-based style felt just right: lightweight, professional to adapt.
The stroke-based style felt just right: lightweight, professional to adapt.
The stroke-based style felt just right: lightweight, professional to adapt.
Precision in place
Precision in place
Precision in place
Tablet
Tablet
Tablet
Touch-first. Data-dense. Spacing calibrated for gestures.
Touch-first. Data-dense. Spacing calibrated for gestures.
Touch-first. Data-dense. Spacing calibrated for gestures.
Desktop
Desktop
Desktop
Wider data grid. Enhanced hover states. Anchored navigation.
Wider data grid. Enhanced hover states. Anchored navigation.
Wider data grid. Enhanced hover states. Anchored navigation.
Mobile
Mobile
Mobile
Critical data prioritized above scroll.
Critical data prioritized above scroll.
Critical data prioritized above scroll.
Built to belong
Built to belong
Built to belong
A unified set of design components - structured, styled and seamless across all screens.
A unified set of design components - structured, styled and seamless across all screens.
A unified set of design components - structured, styled and seamless across all screens.
Comments
Comments
Buttons
Buttons
Interactions guide
Interactions guide
Global icons
Global icons
Navigation
Navigation
The experience,
The experience,
The experience,
Unfolded
Unfolded
Unfolded
Not just good-looking. Built to guide decisions at every scroll, swipe and click.
Not just good-looking. Built to guide decisions at every scroll, swipe and click.
Not just good-looking. Built to guide decisions at every scroll, swipe and click.
Dashboard - Desktop
Dashboard - Desktop
Old view
Old view
Redesigned experience
Redesigned
experience
Tablet. Mobile. Precision all around.
Tablet. Mobile. Precision all around.
Tablet. Mobile. Precision all around.
All of it. Right here.
All of it. Right here.
All of it. Right here.
Built for portrait. Built for clarity.
Built for portrait. Built for clarity.
Choose what you want to see.
Choose what you want to see.
Meet your data assistant.
Meet your data assistant.
Get Answers. Instantly.
Get Answers. Instantly.
Analytics that speak with charts.
Analytics that speak with charts.
Even on Mobile with landscape mode
Even on Mobile with landscape mode
Even on Mobile with landscape mode
Challenges solved & predicted impact
Challenges solved & predicted impact
Challenges solved & predicted impact
80%
80%
Improved Navigation Flow
Improved Navigation Flow
Improved Navigation Flow
Breadcrumbs and streamlined layout reduced confusion and made screen transitions more intuitive.
Breadcrumbs and streamlined layout reduced confusion and made screen transitions more intuitive.
Breadcrumbs and streamlined layout reduced confusion and made screen transitions more intuitive.
~50%
~50%
Better Interaction on Tablets
Better Interaction on Tablets
Better Interaction on Tablets
Larger touch zones, joystick-based chart movement and gesture cues improved usability in touch mode.
Larger touch zones, joystick-based chart movement and gesture cues improved usability in touch mode.
Larger touch zones, joystick-based chart movement and gesture cues improved usability in touch mode.
Significantly Improved Accessibility
Significantly Improved Accessibility
Significantly Improved Accessibility
Optimized layouts with proper spacing and type hierarchy made the UI readable and accessible across devices.
Optimized layouts with proper spacing and type hierarchy made the UI readable and accessible across devices.
Optimized layouts with proper spacing and type hierarchy made the UI readable and accessible across devices.
Modern, Scalable
Visual Language
Modern, Scalable
Visual Language
Modern, Scalable
Visual Language
A fresh design library with reusable components brought visual consistency and adaptability across the platform.
A fresh design library with reusable components brought visual consistency and adaptability across the platform.
A fresh design library with reusable components brought visual consistency and adaptability across the platform.
Note: These improvements are design-predicted based on accessibility heuristics, responsive behavior, and internal feedback
Note: These improvements are design-predicted based on accessibility heuristics, responsive behavior, and internal feedback
Note: These improvements are design-predicted based on accessibility heuristics, responsive behavior, and internal feedback
