This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches

Arches

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/arches_home.css, line 31 |

1 Cross Domain Designs

Description: Arches aim to simplify and streamline frontend implementation inside of the ACC portfolio. Arches extrapolate design names into a generic naming convention so frontend elements can be built once and be adaptive to the domain's brand when rendered.

Source: dist/css/arches_home.css, line 40 |

1.1 Colors

A common practice in CSS color variable names does not describe the color they represent but instead represents its color function. For example, the global color in the brand "ACC Blue" does not refer to the blue but refers to "acc." This future-proofs the UI from changes incase the college's branding alters to a different hue. The practice of function naming allows components and designs to flow from one domain to the next, coloring the text, backgrounds, and borders appropriately. The design colors are Primary, Secondary, Highlight, Info, with a black and white mix. There is a subset of colors reserved for action colors used in user interaction moments when an application runs validations in each design. Actions Colors are Alert, Warning, Success. The section "Design Base" within each brand area defines the previously mentioned colors.

ACC.org

Primary
Secondary
Accent
Highlight
Info
Alert
Warning
Sucess

CVQUALITY.ORG

Primary
Secondary
Accent
Highlight
Info
Alert
Warning
Sucess

Source: dist/css/arches_home.css, line 95 |

1.2 Fonts

Fonts like colors aims to simplify the efforts when moving from one brand to the next so it has generalized the font names into the simple usage of: display, copy, accent, and ui .

Brand Name Display Copy Accent UI
ACC Maven Pro Open Sans Roboto Slab Open Sans
CardioSmart Maven Pro Open Sans Roboto Slab Open Sans
CVQuality Maven Pro Lato Roboto Slab Lato
Virtual Libre Franklin Open Sans Roboto Slab Open Sans