DocuWare Design

Guidelines to empower the DocuWare products' inclusivity and accessibility



Estimated reading: 2 minutes 122 views
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.


Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...


Keep users on their toes using Alerts Alert is a messaging tool used to notify u...


How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases


Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon