Design Systems can enable development and maintenance processes that consistently achieve high quality standards based on standardized data acquisition and measurement methods. Using appropriate quality models a web development team can understand, control and improve its products and processes.

#design system /
ui tool kit

Responsive Layouts

• sections

• containers

• grids (fixed / fluid)

• columns

• sticky navigation

• hero

• hero overlay

• cards section

• main content

• feature section

• gallery

• call to action

• subscribe

• contact form

• footer

Components

• background video

• dropdown

• [</>] embed

• lightbox

• navbar

• search

• slider

• tabs

• map

• social media links

Elements

• div block

• list

• list items

• list block

• button

• hot spots

Typography

• header

• sub-header

• title

• sub-title

• paragraph

• text

• link

• block quote

• rich text

Media

• image

• video

• youtube / vimeo

• lottie animation

• audio / podcast

Iconography

• symbols

• visual images

• description

• identification

Forms

• form block

• label

• input

• file upload

• text area

• checkbox

• radio button

• select

• form button

• reCapcha

Accessibility

• color contrast

• color constraint

• speech recognition

• screen magnifying

• control keyboard

• AA & AAA W3C

• modals

Color Palette Definition

• components

• elements

• forms

• typography

• accessibility