OCI Design System Toolkit: Building a Unified Foundation for Design at Scale
A centralised toolkit and reusable component library empowering teams to design and build faster, with greater consistency, and stronger alignment between design and engineering across Oracle Cloud Infrastructure.
Design System Lead
A multidisciplinary team of 6 collaborating with the Redwood core team and OCI product squads.
Ongoing from 2023 to 2025, covering audit, design, rollout, and governance of the OCI Design System Toolkit.
Enterprise · Cloud Infrastructure
CONTEXT
Challenge
Oracle Cloud Infrastructure (OCI) was growing rapidly, with dozens of design and engineering teams building in parallel. While Oracle’s legacy HgDS design library existed, it no longer met OCI’s needs. Designers were recreating similar components, engineers were struggling to align visuals with code, and the product experience was becoming increasingly inconsistent. Without a unified foundation, scalability and design quality were at risk.
The Task
Create a centralised design system toolkit that unified design and engineering under the Redwood language, helping teams work faster, stay consistent, and build with confidence.
Proposed Solution
Build a self-sustaining design system for OCI, serving as a shared source of truth that included reusable components, flexible templates, documentation, and governance processes. The goal was to bridge design and development, improve quality, and reduce duplication while giving teams enough flexibility to innovate within consistent boundaries.
Here’s how we brought the OCI Design System Toolkit to life, creating a shared foundation for speed, consistency, and collaboration.
Co-created the OCI Design System toolkit and component library with the Redwood team.
DISCOVER & DEFINE
Audit, Interviews & System Audit
Discovery focused on pinpointing friction points across teams and products.
To find the heart of the problem, I audited component usage across OCI products and interviewed designers, engineers, and product leads.
Key pain emerged:
Too many variants led to duplicated components with only minor differences.
Unclear ownership created multiple libraries and no single source of truth.
Design and code drifted apart, causing specs to diverge from actual implementation.
Scaling was difficult due to inconsistent patterns for accessibility, internationalisation, and responsive layouts.
The following themes and insights revealed where the system needed to evolve:
Through cross-team audits and design reviews, we uncovered clear opportunities to strengthen alignment and efficiency through a shared design system connecting designers and developers.
"I just want to design without worrying if it matches the code."
"If everything lived in one place, it’d be easier to stay consistent."
"We need one toolkit that keeps design and development aligned."
How Might We Statements
To turn our research insights into actionable opportunities, we developed a set of How Might We (HMW) statements. These framed the design system challenge in a way that encouraged ideation while keeping the focus on collaboration, scalability, and sustainability.
"How might we unify design and development under one shared system?"
"How might we ensure the system can evolve with minimal friction?"
DESIGN & VALIDATE
Designing the Framework for Scale
Grounded in our insights, we set out to create a scalable design system that simplified how teams design and build together, delivering a toolkit that felt intuitive, flexible, and dependable across Oracle Cloud.
To bring this vision to life, I collaborated with designers and engineers to translate early concepts into a cohesive system framework. We held co-design sessions, mapped component relationships, and ran prioritisation workshops to define what mattered most. Through this process, we identified how components, tokens, and documentation could work together to improve efficiency, reduce duplication, and create lasting alignment between design and development.
Visual Philosophy: Simplicity & Focus
We focused on simplicity over variant complexity, ensuring that the system remained scalable and easy to maintain. Core UI elements such as buttons, inputs, and labels were kept neutral and functional, while brand expression was reserved for data visualisations, illustrations, and key interaction states.
Nested Components & Variant Strategy
We used nested components, intelligently named variant properties, and atomic design principles to simplify reuse. Rather than creating dozens of variants, we focused on composability, building small components that combine predictably. This approach reduces complexity and improves maintainability.
Embedded Spec & Guideline Context
We placed specs and guidelines directly inside Figma components, so designers and engineers never had to jump out to separate docs. This fosters real-time clarity and lowers friction in adoption.
We also adopted a reuse-first principle: you should reuse existing components unless you can justify a new one. Weekly reviews helped maintain consistency and flexibility in balance.
Typography & Token Alignment
From an audit of existing typography usage, we decided on component-level scaling, anchored by a single base text style. We paired Oracle Sans (modern, neutral) with Georgia (expressive when used sparingly).
Design tokens for colour, spacing, typography, and elevation were tightly aligned with the codebase. We worked closely with the JET developer cookbook to validate behaviours and ensure fidelity across design and implementation.
Prototype Testing & Iteration
We built interactive prototypes across multiple products to test usability, responsiveness, and alignment with existing flows. Feedback informed adjustments to spacing, state behaviour, and accessibility. This iterative approach validated the system in real contexts, not just in isolation.
DELIVER
Turning Strategy into a Scalable System
Bringing the Design System to Life
Once the vision was aligned and the principles were defined, our focus shifted to building a living, scalable toolkit that could support hundreds of designers and engineers across Oracle Cloud.
We moved from concept to implementation by translating design principles into system foundations, each crafted to make the toolkit intuitive, adaptable, and reliable.
The goal was not only to document components but to create a framework that teams could trust, one that simplified decision-making, reduced duplication, and made accessibility and scalability effortless by design.
System Foundations
The following System Foundations capture how the OCI Design System was built to grow with the organization, empowering teams to design and deliver with clarity, consistency, and confidence.
Configurable Components
Designers can now intuitively configure components within Figma using clearly defined variant properties. For example, with an accordion, designers can instantly toggle between open and closed states or text variations from a single control panel.
The “Why” Behind the Foundation
Before, teams duplicated components for minor changes, causing version drift. Now, boolean and text properties make components flexible without breaking structure, reducing redundancy and keeping designs consistent across teams.
"I can finally adjust what I need without duplicating components."
Preview of configurable component states in the OCI Design System library, demonstrating flexibility and consistency across variations.
Scalable Framework
Built on a robust auto-layout system, all components scale seamlessly across viewports, supporting tablet (600–1023px) and desktop (1024px and above) layouts. Mobile resolutions are not included, as there are no active use cases for mobile interfaces within Oracle Cloud.
The “Why” Behind the Foundation
Previously, designers rebuilt layouts for every screen size, wasting time and introducing inconsistency. Auto-layout rules now ensure proportions adapt automatically, helping teams design once and scale everywhere.
"I don’t need to rebuild for every breakpoint anymore. Everything just adjusts."
Tablet and desktop responsive layouts showcasing scalable components within the OCI Design System.
Interactive Prototypes
Each component includes interactive states and micro-interactions pre-wired within Figma prototypes. Designers can now present realistic, dynamic experiences without manually linking frames.
The “Why” Behind the Foundation
Static mockups limited stakeholder understanding of flow and feel. With interactions built in, teams can demonstrate behaviour, not just visuals, improving feedback and decision-making.
"It feels real, like showing the actual product, not just a design."
Interactive input field configurations within Figma, illustrating how component states simulate real user behaviour in OCI prototypes.
Universal Design Language
The design system supports multiple product types and audiences across Oracle Cloud, from customer-facing consoles to internal engineering tools. Each component adapts to different themes, densities, and contexts.
The “Why” Behind the Foundation
OCI products vary in tone and complexity. Creating a universal base with adaptable layers ensures visual cohesion while letting teams tailor for domain-specific needs.
"We can now design for any service while still speaking the same design language."
Audit of list and details pages across OCI services to evaluate consistency and assess system-wide impact.
Built-In Accessibility
Every component is tested against WCAG 2.1 standards, covering color contrast, screen reader compatibility, keyboard navigation, and focus states.
The “Why” Behind the Foundation
Accessibility is built in from the start. By validating accessibility before release, the system promotes inclusivity, compliance, and better usability for everyone.
"Accessibility is built in, not added later. That’s a huge shift for us."
OCI Design Toolkit color palette tested and approved to meet WCAG 2.1 accessibility standards.
Structured Library Architecture
The Figma master library is organized using atomic design principles, beginning with atoms and building up to molecules, organisms, and templates. Supporting resources such as planning guides, timeline docs, and a UX wireframe kit are also included.
The “Why” Behind the Foundation
A clear hierarchy makes it easy to navigate, maintain, and scale the system. Designers and engineers can quickly locate what they need, understand relationships, and stay aligned on intent.
"It’s so much easier to find what I need. Everything follows a clear logic now."
Organised view of the OCI Design Toolkit library, maintained by design system leads to ensure structure, clarity, and consistency.
IMPACT
Driving Alignment, Speed, and Scale
The OCI Design System Toolkit transformed how teams designed, built, and shipped products across Oracle Cloud. What began as a small design library evolved into a strategic enabler of consistency and collaboration.
Through this shift, we:
Reduced duplicated components by 70%, freeing designers to focus on experience quality
Accelerated design to development by 40%, improving design handoff and reducing rework.
Adopted by 40+ teams, establishing standards that improved consistency and accessibility
Long-Term Impact for Oracle Cloud
The project left value far beyond its initial release:
Established a centralised design language that continues to evolve with new Redwood updates
Enabled faster onboarding and higher confidence for both designers and engineers
Created shared ownership and accountability, turning one-off contributions into a continuous collaboration model
What This Meant for the Design Team
For designers, the toolkit reduced ambiguity and empowered creative focus.
For developers, it streamlined implementation and lowered rework.
Together, it built trust across disciplines and showed that a scalable system is not just about code or components, but about a culture of clarity, collaboration, and care.
REFLECTION
Scaling Clarity, Not Complexity
This project challenged me to design for growth within a large, multi-product ecosystem, proving that simplicity and shared language scale better than endless flexibility.
🌱 Designing for Focus
When every team works differently, too much freedom leads to inconsistency. The breakthrough came when we shifted from customization to clarity, using semantic tokens and composable components to reduce decision fatigue and create visual unity across Oracle Cloud.
What I Did
Consolidated token architecture around clear semantic naming
Simplified component variants for easier maintenance
Created design guardrails that balanced autonomy with consistency
⚙️ Shipping with Purpose
Instead of waiting for perfection, we launched a minimal, stable core and refined it through real-world use. This iterative approach built credibility with engineers and encouraged early adoption.
What I Did
Defined a clear MVP with foundational components and tokens
Collaborated with product teams to validate designs in production
Established continuous feedback loops for refinement and scalability
🤝 Building for People, Not Just Products
A design system only thrives when it’s owned collectively. The biggest impact came from embedding context, documentation, and open collaboration at every level, turning guidelines into shared understanding.
What I Did
Facilitated workshops to align designers and developers on shared principles
Embedded contextual specs and live examples directly in the toolkit
Fostered a sense of shared ownership and collaboration across teams
💡 My Key Learnings
Simplicity Scales Best
Reducing complexity is not about limiting choice. It’s about guiding better decisions and creating patterns that feel intuitive to use.
Ship Early, Learn Continuously
Real progress happens through iteration, testing, and collaboration. Early releases helped build trust and momentum across teams.
Design Systems Are Human Systems
Technology changes, but people sustain the work. Aligning on purpose and principles ensures the system grows with clarity and consistency.
This experience reaffirmed that the OCI Design System Toolkit became more than a component library. It evolved into a living language that connects design and engineering. By grounding every decision in clarity, collaboration, and care, we built not just a toolkit but a culture that continues to grow and adapt within Oracle Cloud.