DocuSign Olive: From style guide to front-end system
In the beginning: style guide
Almost six years ago, DocuSign started designing and developing a new DocuSign experience. The Olive Style Guide was created to support this experience by making it easier to share reusable CSS across different web properties being built in-house. In essence, DocuSign decided to build its own version of the Bootstrap library.
Fun fact: The team decided to name project Olive to support the first internal product name Martini.
Over the years, Olive has grown to serve the needs of developers and designers building modern tools, product, and applications experiences by providing standardized CSS and design patterns.
Following on its initial success, the goals of Olive's style guide evolved to incorporate improving UI component framework, design consistency, product design and development collaboration, company wide consistent linting solution to enable guest development cross project and establishing easy to follow instructions around design and development best practices.
From style guide to design system
Eventually Olive evolved from a CSS style guide to a design system.
What is a design system?
Design systems enable product development and design at scale. A design system develops a design language which allows product and engineering to learn, innovate, build, and grow with a consistent user experience. They include everything from components, coding best practice, layouts, colors, icons, typography, styles and development documentation.
In the last two years, the Olive Design System has helped DocuSign innovate and build new products under the umbrella of the DocuSign Agreement Cloud. It also helped rebrand the newly acquired SpringCM as DocuSign CLM.
Olive developers gradually learned to develop a reusable UI component supporting 99% of DocuSign products in comparison to developing a single-use product feature. At that point the UI component library had 74 components serving 9 products across DocuSign. Within the span of a year the Olive design system became a product, serving DocuSign products.
From design system to Front-end Systems and Design Systems
In 2020, the Olive team grew and split into Front-end Systems and Design Systems teams to better reflect the expanded responsibilities of both engineering and design.
During this time, Front-end Systems also spun off a shared component library by following inner-source methods to allow product teams to develop shared UI and utilities components for DocuSign front-end applications. That includes components such as Footer, Date Picker, Comments, Color Picker, Header, Tutorials, and Translations.
Inner-source is the use of open-source software development best practices and the establishment of an open-source–like culture within organizations.
DocuSign also puts accessibility at the forefront of the design of products, services, and environments for people with disabilities. To support this, Front-end Systems also started providing accessibility support across DocuSign by providing training to designers, engineers, and content creators. Front-end Systems helps product and marketing teams with accessibility audits on design, experience, and development to accomplish better accessibility at DocuSign. The Front-end Systems team also makes sure that every single component in our UI components or shared components library is WCAG 2.1 Level AA compliant.
Moving forward, the Front-end Systems roadmap includes building a theming engine that allows product teams to access design tokens; adding visual testing to UI and shared components; strengthening development and design documentation using Storybook 6; and continuing improvement to support DocuSign’s new brand.
- Developer Deep Dive video: DocuSign Engineering’s Olive Design System
- Website Style Guide Resources
- Designing Systems: Create design systems, not pages
- Design System examples, articles, tools and talks
- Awesome Design Systems
- The repository of publicly available design systems and pattern libraries
- DocuSign Developer Center
- @DocuSignAPI on Twitter
- DocuSign for Developers on LinkedIn
- DocuSign for Developers on YouTube
- DocuSign Developer Newsletter