silver iMac displaying color gradient_edited.jpg

design
system

"A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications."

"An environment where the integrated team work together seamlessly."

— Coebus

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