DocuWare Design

A range of resources for designers, developers

Design System

DocuWare Design System

DocuWare Design System is a set of guidelines for document management solutions and digital experiences. Based on the company’s Design Language and Values, the system provides human interface guidelines for user-centric design.

  • Design System includes the guidelines and resources to create user interfaces consistent with the company vision, design language, and market best practices. In addition, provided materials focused on user experience, interactions, and flows.
  • Writing guidelines, and pattern libraries, together with style guides, toolkits, and design principles, form an entire Design System.
  • Design System provides various resources for designers, developers, and everyone involved in creating and improving DocuWare products.

Purpose and Goals


The DocuWare Design system’s primary purpose is to increase product development efficiency. 

  • With a consistent design language in place, it becomes easier to design products at scale that are consistent in aesthetics, user interface, and user experience.
  • DocuWare also promotes collaboration through the Design System since handoffs across distributed teams become easier.



We strive to save time and energy by letting designers and developers focus on more important topics of usability, flows, and user needs. In addition, standardized, reusable components support collaboration, reinforce branding and provide a consistent look and user experience.


Our goal is to create and provide perceivable, operable, understandable, and robust products for all kinds of users around the globe. Kinetic Design System establishes guidelines and requirements to empower the DocuWare products’ inclusivity and accessibility.


Design System is a living creature that evolves with technologies and user needs. Our UX team constantly expands and improves the design possibilities keeping DocuWare products in line with market and user demands.


Design System is based on the following principles:


Design should eliminate ambiguity and enable people to access, understand, and act confidently while interacting with the DocuWare product.


The Design System should intelligently anticipate needs to help users work better, smarter, and faster.


Design System enhances familiarity and strengthens intuition by applying the same rules and requirements throughout the user interfaces.

How to begin

A Design System is a collection of rules, principles, constraints, and best practices for design and code, along with components that unify both practices.

The design does not scale smoothly, and efficiency doesn’t emerge from thin air. So DocuWare Design Teams created a catalog of the reusable items in the product.

This includes patterns, colors, text styles, icons, grid systems, and even interactions, which Designers, Developers, Product Owners, Product Managers, and other stakeholders and participating roles should consider in the Product Development processes.


Begin with the following:

  1. Explore the Guidelines to learn the DocuWare product design patterns and principles.
  2. Familiarise yourself with DocuWare Tone of Voice and Writing Guidelines for the user interface copy and microcopy.
  3. Review the Components section to enlighten yourself with the existing components which can incorporate into your designs.
  4. Check the Patterns, architecture, and usage principles.
  5. Learn about Accessibility and Inclusivity guidelines.
  6. Access the UI Library and design Tokens.


Use the design system for the following purposes:

  1. Get an overview of styling and interaction guidelines of the user interface Components and Patterns.
  2. Review the Components' and Patterns' visual representation and documentation.
  3. Get access to the Angular-based components library and code snippets.
  4. Get access to the UI library with Styles and Design Tokens.


A layout design guideline is a design concept used for organizing and maintaining the consistency and structure of design elements and the layout of the product.

Layout Properties


  • Margin: The margin is the space in relation to other surrounding components
  • Padding: The padding is the space between the UI components and their children


  • Width: The width of a component
  • Height: The height of a component
  • Border: The components stroke
  • Radius: The length of a circle or sphere


  • X: The horizontal position of the component
  • Y: The vertical position of the component
  • Z: The z-axis of the component

Layout Types

Clear communication

The flexible layout structure enables content to be conveyed clearly and precisely. Whether filling the entire space or subdivided into several areas, the layout’s division is geared toward the content of the message to be conveyed.


The grid is the foundation for positioning components and patterns on user screens. Designing on a grid helps create a seamless and easy-to-use experience.


  • The grid comprises columns, gutters, and margins, providing a convenient structure for layout elements within the body region.
  • Components, imagery, and text should be aligned with the column grid to ensure a logical and consistent layout across screen sizes and orientations.
  • As the size of the body region grows or shrinks, the number of grid columns changes in response.


Using a base grid of 8 pixels should allow flexibility in scaling and spacing. To ensure that each UI element is aligned to the pixel grid, values ​​multiplied by 8 (eight) should be used to determine component sizes, padding, and margins.

Common Grid Layouts

A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more efficiently, using a responsive, scrollable column structure.

Full width
12 columns
One-half width
6 columns
Two-thirds width
8 columns
One-third width
4 columns
Three-quarters width
9 columns
One-quarter width
3 columns


Layouts can feature one or more subdivisions, both horizontally and vertically. The division is straight, rectangular, and bled to the edge; it can be either symmetrical or clearly asymmetrical.


The layout contains different levels:

Level one - Wrapper

Page itself

This level sets the maximum width of the content but does not add any vertical margin or padding.

If your design requires them, you should place components such as breadcrumbs, backlinks, etc., inside the Wrapper to sit directly underneath the header.

Level two - Container


The main block inside which exist all the other UI Elements

Level three - Content


  • Tables

  • Cards

  • Action components

Text Layout









Principles and techniques for effective Elevation

The elevation is the relative distance between two surfaces along the z-axis.

This method allows User Interface elements to be lifted from the background or other components. It can be defined by applying drop shadows or other visual cues, such as color and borders.

Shadows add depth by giving the appearance of distance, or elevation, between surfaces. The distance, measured along the z-axis, determines the cast of the shadow.



Focus visually identifies the elements that will respond to interactions like a mouse click, a keyboard command, or a tap and enable a simplified, element-based navigation experience.
  • When a user moves through the digital products by jumping between the page’s links, buttons, or form fields, it needs to be apparent to the user which elements are interactable and which part of the screen they’re on.
  • Components and patterns in the Design System should provide styles to clarify these things.
  • Guiding user attention and supporting the user while navigating the product is one of the primary tasks of designers.


  • Designers should ensure that the user can always tell where their focus is on the page.
  • The Focus state of the user interface elements should include external and internal changes in the elements - this should be a combination of the Hover state with the Focus indication.
  • The focus should never rely solely on color change and always include other visual indicators.
  • The UI focus should never move without users' actions triggering a change.
  • Every focusable element should have a focus style that is visually distinct from its other states.
  • Users should be able to control Focus movement as much as possible.
  • Designers should keep in mind that focusing on a UI item is not always the same as selecting them and evidently communicate this in their concepts.

Focus Types

Browser/System Focus

To meet the accessibility requirement, designers and developers should avoid removing the focus indicator provided by the browser or operating system unless they are replacing it with their own focus indicator, which is recommended.

Designers need to remember that a default-focused state may not be enough because a focus indicator needs to be distinctly visible to be accessible. 

Keyboard Focus

Keyboard users typically navigate through the product by pressing the Tab key. It allows them to jump from one interactive element on the page to another. But, just like mouse users, they need to be able to see where they are on a page.

The user interface must provide a focus indicator that highlights the currently focused element and allows keyboard users to notice precisely where they are at any given moment of use.

Mouse Focus

Mouse focus is shown through the Hover state of interactive components. While the user moves the pointer above the UI elements Hover state alongside interactivity signifies the current focus.


  • A single color technic should be used to signify Focus (same color for shape, outline, and other visual elements and same color for background).
  • If users dismiss the focused element, the Focus should be moved to the next logical place in the UI.
  • When a user interacts with popover/overlaying components, the Focus should return to the element that triggered the display of that component after the user dismissed it.
  • To ensure users understand where is interface attention point is and what element is interacting at the given moment system should provide a combination of focused and hovered states.

Focus technics

When a user’s action causes a UI change, such as an element appearing or disappearing from the screen, different focus management techniques can be used to prevent the user from getting lost. 

When focus management is done right, it helps all kinds of users navigate the product without causing a cognitive load. Additionally, it supports keyboard and screen reader users in discovering UI changes and helps them easily reach the next logical step in the flow.

How to express the focus:

Component focus state

Every component and UI interactive element should be able to communicate a focused state. The more significant the structure change and contrast between the unfocused and focused states, the easier it is for users to see it. Focus states can include the usage of additional shapes, changes in the color shades, the invention of the color, underlines, and other UI tricks to signify state change.


Links are given a darker shade of color and a visible rectangular outlined shape around them when they have focus. This combination ensures good contrast and visibility. Likewise, buttons are given darker background color and rectangular shape around the component similarly. This focused style should be applied to all types of buttons.

Focus Indication Area

Focus Indication Area is a shape around the component, pattern, or block with a filled background of neutral color. Usage of this additional area helps show the focus element and bring attention to the part of the product page under focus. This technique should be used alongside the component focus state and should not be considered a standalone tool.

Focus Symbols

To communicate Focus elements in the user interface designers may use special symbols appearing close to the element under focus:

Focus Animation

Animation in the product should not bear a fun purpose but have functional goals. Animation influences a user’s eyes, and it can control where they focus. This is great as long as the user’s eyes are on the right thing. Designers should animate components based on where the user should focus.

How to test Focus

To verify proper focus management, it is important to try using the product only with a keyboard by utilizing the Tab key to navigate forward and Shift + Tab to move backward.

Some elements (such as Combo box and dropdowns) may be reached by the usage of the arrow keys.

The User Interface should allow:

  • Navigation to every interactive element

  • Visual focus indicators for every element should be clearly visible and distinctive

  • The tabbing order is logically based on the page structure and content

  • There are no traps anywhere, and focus is never lost

  • When a new element is triggered (for example, a modal), the focus is moved to that element when opened and returned to the page when closed


States are visual representations used to communicate the status of a component or interactive element. States communicate the status of UI elements to the user.



States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels.


When multiple states occur at once, such as selection and hover, both state indicators should be displayed.


States should be applied consistently across components in order to increase usability.

State Types


The default state communicates an interactive component or element.


A hover state communicates when a user has placed a cursor above an interactive element.


A focused state communicates when a user has highlighted an element using an input method such as a keyboard or voice.

The focus state requirements:

The Focus Indication Area should be at least as large as the area of a 4px bigger perimeter of the unfocused component. The area can include a shape, background color, stroke, or any symbol used to signify focus.

The outlines wrapped around the entire elements should be at least 2 pixels thick to be noticeable.


A selected state communicates a user choice.


A dragged state communicates when a user presses and moves an element.

Toggle state

A Toggled state communicates a toggle between two options.


A disabled state communicates a noninteractive component or element.


An error state communicates a user or system mistake.



Loading in DocuWare products should be:​

  • Fast
  • Meaningful
  • Focused




  • Avoid using spinners as placeholders

Content should always be meaningful. If spinners are needed, they should be placed where it’s easy for users to understand what is loading, or they should be used alongside labels. It helps draw attention to the content about to appear rather than the spinner itself.


  • Avoid empty views with spinners

Empty views with spinners can confuse users, provide low value and cause them to become passive and withdraw.


  • Avoid false expectations about loading time

People will likely be frustrated and give up on their tasks if loading times exceed 10 seconds. Expectations should always be clear and allow users to make an informed decision to wait. Designers need to add value to the loading process or communicate upcoming value to increase the likelihood that users will continue to engage with the task.


Drag and Drop


Touch Mode

Undo and Redo

Keyboard Interaction

Keyboard Shortcuts



Animations in the user interface allow Designers to direct the user's attention to content, controls, and predefined flows. Micro-interactions can convey intuitive messages that users can easily understand without the need for explanation. Fluid motions help obtain status, provide feedback and instruction, and enrich the visual experience.


  • The primary principle of the User Interface animation - it should be fluid.
  • User Interface motions should be focused on the possibility of giving the user a more immersive and engaging experience.
  • The animation should be used only as a supportive tool. Users might not see animations onscreen for different reasons, including the system or browser configurations. It's essential to avoid using animations and motions as the only way to communicate important information.
  • Motions should be informative and highlight relationships between elements.
  • Accurate and realistic animation can help users understand how the User Interface works. Motions without logical sense and well-known physical laws can disorient users.



  • The animation should be used only with interactive components. Designers should avoid or minimize motions of not interactive UI elements.
  • Designers should strive for a short and precise animation.
  • Animation with frequently occurring interactions should be avoided or minimized.
  • The animation should reflect the hierarchy between parental and child elements.


  • The animation should not overshadow the User Experience. Nothing should distract users from their primary goals. Gratuitous or excessive animation can distract users or make them feel disconnected.
  • Animation in the product should not be used for a fun purpose and have functional goals. Designers should use animation and motion to communicate messages to enhance feedback and understanding by showing how things change, what will happen when people perform an action, and what they can do next.

While creating animations, Designers and Developers should follow the next principles of animation design in the User Experience:



Transition animation should mimic the natural world and be logical. This type of animation should depend on user flow and content. As it is easy to confuse users with transition animation, Designers should pay attention to the mental models and expectations about the content and new pages' appearance.

This type of animation should be used to emphasize key points in a user journey and reinforce or add to the icon's meaning.

The animation should indicate the status of user or system actions.

The animation should be used to provide feedback to show if the action was successful.

The animation should help users understand how to perform actions and invite or encourage the necessary actions.



Search and Results

Chat Icon Close Icon