Cards are a vital structural element in visual design.

Cards are useful and important structural pieces to your app or website, especially when you are using separate pieces of information or grouping elements visually on a page. Cards can be used to represent individual posts on a social site, or to show which controls manage what on a control panel.

Figure 1. An example card.

Endomorphium cards are represented by a 2px primary color border on either side, with a background-compatible 6px shadow to depict cards as a separate element on a page. The card should have a 4px rounded corner.

Background-compatible means that the element is visible on the background with ease. Background-contrasting indicates that the color of the element contrasts with the background. Background-complementary colors are dark on a dark background or light on a light background, generally #FFF and #000.