Pinecone CSS

Design constraints are key in retaining design consistency.

Pinecone CSS is designed to limit design options as much as possible whilst still retaining flexibility.

This forces new design implementations to be more similar to current ones.

Variables are few and to the point.

Global Styling makes everything look good from the start.

Helper classes removes the need to write custom CSS code for many smaller designs.

Variables and Helpers are named with intention to signal when to use them. This documentation further clarifies when to use what.

Example: When setting a font color, what we usually want is to decide the font contrast. Therefore, those variables are named:
$font-contrast-low
$font-contrast-medium
$font-contrast-high