Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Design Base

Source: dist/css/cvquality_boot.css, line 8902

1 Design Base

Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high.

Source: dist/css/cvquality_boot.css, line 120

1.1 Background Colors Alt

These Alternate colors are single use to embelish a design. These colors DO NOT have extra modifiers.

Example s

.bg_primary-alt

Primary Alt

Background Color of bg_primary-alt

.bg_mix-teal-orange

Mix of 60% Teal And 40% Orange

Background Color of bg_mix-teal-orange

.bg_mix-orange-teal

Mix of 60% Orange and 40% Teal

Background Color of bg_mix-orange-teal
<div class="[modifier class] p_3 c_white">Background Color of [modifier class]</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 135

1.2 Border Colors Alt

These Alternate colors are single use to embelish a design. These colors DO NOT have extra modifiers.

Example s

.br_primary-alt

light orange

Border Color of br_primary-alt

.br_mix-teal-orange

Mix of 60% Teal And 40% Orange

Border Color of br_mix-teal-orange

.br_mix-orange-teal

Mix of 60% Orange and 40% Teal

Border Color of br_mix-orange-teal
<div class="[modifier class] br_solid br_4">Border Color of [modifier class]</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 9066

1.3 Theme Colors

Colors are based off of the ACC Scrub Colors.

  • #0088aa; primary

    map-get($theme-palette, primary)

  • #e87d1e; secondary

    map-get($theme-palette, secondary)

  • #8a817f; shade

    map-get($theme-palette, shade)

  • #ffc425; accent

    map-get($theme-palette, accent)

  • #a3988c; info

    map-get($theme-palette, info)

  • #05aee5; highlight

    map-get($theme-palette, highlight)

Source: dist/css/cvquality_boot.css, line 9083

1.3.2 Action Colors

Actionable colors used to respond to user inputs and messaging.

  • #990000; alert

    map-get($theme-palette, alert)

  • #f4a122; warning

    map-get($theme-palette, warning)

  • #078a2e; success

    map-get($theme-palette, success)

  • #2b58c0; navigation

    map-get($theme-palette, navigation)

Source: dist/css/cvquality_boot.css, line 9096

1.3.3 Color Coding

Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors.

Source: dist/css/cvquality_boot.css, line 9165

1.3.3.1 Clinical Pathway Colors

Each of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.

  • #009974; Acute Coronary Syndromes

    $pathway-acute-coronary-syndromes

  • #005b37; arrhythmias and Clinical EP

    $pathway-arrhythmias-EP

  • #fdb918; Congenital Heart Disease

    $pathway-congenital-heart-disease

  • #d9691f; Standard ECG, Stress Test

    $pathway-ecg-stress-test

  • #410d49; Heart Failure and Cardiomyopathies

    $pathway-heart-failure

  • #c8b02f; Invasive Cardiology Angiography and Intervention

    $pathway-invasive-cardiology

  • #947b33; Noninvasive Cardiology

    $pathway-noninvasive-cardiology

  • #8e2582; Pandemic "Covid"

    $pathway-pandemic

  • #0079ad; pericardial Disease

    $pathway-pericardial

  • #a01d51; Prevention

    $pathway-prevention

  • #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease

    $pathway-pulmonary-hypertension

  • #00b6f1; Special

    $pathway-special

  • #0f3e65; Stable ischemic Heart Disease

    $pathway-stable-ischemic-heart-disease

  • #4f4190; Valvular Heart Disease

    $pathway-valvular-heart-disease

  • #ae171c; Vascular Medicine

    $pathway-vascular-medicine

Source: dist/css/cvquality_boot.css, line 9138

1.3.3.2 Credit Type Color Coding

Credit Types in the ACC have a specific color coding.

  • #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit

    $credit-AAPA

  • #007a5b; ABP-MOC: American Board of Pediatrics

    $credit-ABP

  • #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2

    $credit-ABPMOCII

  • #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4

    $credit-ABPMOCIV

  • #775744; ATCEU: Athletic Trainer Continuing Education Unit

    $credit-ATCEU

  • #a8a8a8; CE: Continuing CCA\Tech Education

    $credit-CE

  • #00a15b; CME: AMA PRA Category 1TM Credit(s)

    $credit-CME

  • #198dae; CNE: Continuing Nurse Education

    $credit-CNE

  • #52549e; CNErx: Continuing Nursing Education Pharmaceutical

    $credit-CNErx

  • #775891; COP: Certificate of Participation

    $credit-COP

  • #992e2e; CPE: Continuing Pharmacy Education

    $credit-CPE

  • #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit

    $credit-ECME

  • #6c36b3; IPCE: Interprofessional Continuing Education Credit

    $credit-IPCE

  • #9a1267; MOC II: ABIM MOC Part II

    $credit-MOCII

  • #d3248d; MOC IV: ABIM MOC Part IV

    $credit-MOCIV

Source: dist/css/cvquality_boot.css, line 9105

1.3.3.3 COR Colors

(COR) Class of Recommendation is a color collect used in Guideline recommendations.

  • #6fc284; I

    $cor-green

  • #ffd44f; IIA

    $cor-yellow

  • #faa74b; IIA

    $cor-yellow-orange

  • #f15d4c;III and III-NoHarm

    $cor-orange

  • #ed1c00; III-harm

    $cor-red

Source: dist/css/cvquality_boot.css, line 9122

1.3.3.4 LOE Colors

(LOE) level of Evidence is a color collect used in Guideline recommendations.

  • rgb(62, 111, 183);LOE A

    $loe-dark-blue

  • rgb(101, 156, 211);LOE B-R

    $loe-mid-blue

  • rgb(161, 193, 230);LOE B-NR

    $loe-light-blue

  • rgb(181, 213, 229); LOE C

    $loe-pale-blue

Source: dist/css/cvquality_boot.css, line 9241

1.3.3.5 Social Network Colors

Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.

$twitter - #000; twitter $facebook - #3b5998; facebook $linkedin - #007bb6; linkedin $apple-store - #ea4cc0; apple-store $google-play - #689f38; google-play $youtube - #bb0000; youtube

Source: dist/css/cvquality_boot.css, line 9218

1.3.3.6 Journal

Journals of JACC have specific branding colors.

  • #002e5a; Journal of the American College of Cardiology: (JC)

    $journal-jc

  • #0000FF; JACC: Advances: (JC-ADV)

    $journal-adv

  • #ec2939; JACC: Asia: (JC-ASIA)

    $journal-asia

  • #1788c2; JACC: Basic to Translational Science: (JC-TRAN)

    $journal-tran

  • #00ae81; JACC: CardioOncology: (JC-CVONC)

    $journal-cvonc

  • #f37321; JACC: Case Reports: (JC-CASE)

    $journal-case

  • #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)

    $journal-ep

  • #991326; JACC: Heart Failure: (JC-HF)

    $journal-hf

  • #038e92; JACC: Cardiovascular Interventions: (JC-INVT)

    $journal-invt

  • #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)

    $journal-imag

Source: dist/css/cvquality_boot.css, line 9192

1.3.3.7 Registry CC

Credit Type Color codes in the ACC have a specific color coding.

  • #f22418; Chest Pain MI Registry

    $registry-cpmi

  • #ffb300; AFib Ablation Registry

    $registry-afib

  • #0086d5; CathPCI Registry

    $registry-cathpci

  • #80b800; ICD Registry

    $registry-icd

  • #4e1f73; IMPACT Registry

    $registry-impact

  • #0e4f1b; PINNACLE Registry (Primary)

    $registry-pinnacle-primary

  • #b3c4c4; PINNACLE Registry (Accent)

    $registry-pinnacle-accent

  • #d6560d; Patient Navigator Focus MI

    $registry-focus

  • #c0268e; Reducing Risk PCI Bleeding

    $registry-pcibleeding

  • #00667a; LAAO Registry

    $registry-laao

  • #00947f; PVI Registry

    $registry-pvi

  • #04adad; Auxiliar Data Collection

    $registry-auxdata

  • #a20062; STS ACC TVT Registry

    $registry-ststvt

  • #7893b8; Diabetes Collaborative

    $registry-diabetes

Source: dist/css/cvquality_boot.css, line 48

1.3.4 Link Colors

Link colors in all of its states, default, hover, visited.

$link-color-light - #8cebda; Link Color light $link-color-light--hover - #e8fbf8; Link Color light--hover $link-color-light--visited - #84afa7; Link Color light--visited $link-color-dark - #126657; Link Color dark $link-color-dark--hover - #051f1a; Link Color dark--hover $link-color-dark--visited - #42665f; Link Color dark--visited

Source: dist/css/cvquality_boot.css, line 34

1.3.5 Link Colors: Light

Link colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.

  • #126657; Link Color dark

    $link-color-dark

  • #051f1a; Link Color dark--hover

    $link-color-dark--hover

  • #42665f; Link Color dark--visited

    $link-color-dark--visited

Source: dist/css/cvquality_boot.css, line 151

1.3.6 CVQuality Full Pallete

Credit Types in the ACC have a specific color coding.

  • #e87d1e; Orange Dark

    $orange-dark

  • #ffc425; Orange Light

    $orange-light

  • #a1a0a4; Warm Grey

    $warm-grey

  • #d6d4d4; Warm Grey Light

    $warm-grey-light

  • #6f6b6f; Warm Grey Dark

    $warm-grey-dark

  • #fafafa; Off White

    $off-white

  • rgb(19, 18, 18); Off Black

    $off-black

  • #a4cded; Soft Blue

    $soft-blue

  • #eceaea; Soft Grey

    $soft-grey

  • #990000; Error Color

    $error-color

  • #0088aa; Scrub Teal

    $scrub-teal

  • #05aee5; Scrub Teal Light

    $scrub-teal-light

  • #047294; Scrub Teal Dark

    $scrub-teal-dark

  • #58B5A5; Mix of 60% Teal And 40% Orange

    $mix-teal_orange

  • #ACBD65; Mix of 60% Orange and 40% Teal

    $mix-orange_teal

Source: dist/css/cvquality_boot.css, line 9653

1.4 Crayon Box

This is all of the colors of the theme broken out with its modifications written in hex code.

Source: dist/css/cvquality_boot.css, line 9619

1.4.1 acc: Color Variations

The Modified versions of the acc color from this theme

acc-n5

  • HEX: #000a12
  • RGB: 0, 10, 18
  • HSL: 206.9491525424deg ,100%, 3.4705882353%

acc-n4

  • HEX: #001423
  • RGB: 0, 20, 35
  • HSL: 206.9491525424deg ,100%, 6.9411764706%

acc-n3

  • HEX: #00213b
  • RGB: 0, 33, 59
  • HSL: 206.9491525424deg ,100%, 11.568627451%

acc-n2

  • HEX: #002e53
  • RGB: 0, 46, 83
  • HSL: 206.9491525424deg ,100%, 16.1960784314%

acc-n1

  • HEX: #003764
  • RGB: 0, 55, 100
  • HSL: 206.9491525424deg ,100%, 19.6666666667%

acc-0

  • HEX: #004176
  • RGB: 0, 65, 118
  • HSL: 206.9491525424deg, 100%, 23.137254902%

acc-1

  • HEX: #00579d
  • RGB: 0, 87, 157
  • HSL: 206.9491525424deg ,95%, 30.8235294118%

acc-2

  • HEX: #0077d8
  • RGB: 0, 119, 216
  • HSL: 206.9491525424deg ,87.5%, 42.3529411765%

acc-3

  • HEX: #3ba7ff
  • RGB: 59, 167, 255
  • HSL: 206.9491525424deg ,75%, 61.568627451%

acc-4

  • HEX: #9dd3ff
  • RGB: 157, 211, 255
  • HSL: 206.9491525424deg ,62.5%, 80.7843137255%

acc-5

  • HEX: #d8edff
  • RGB: 216, 237, 255
  • HSL: 206.9491525424deg ,55%, 92.3137254902%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9517

1.4.2 accent: Color Variations

The Modified versions of the accent color from this theme

accent-n5

  • HEX: #2c2000
  • RGB: 44, 32, 0
  • HSL: 43.7614678899deg ,100%, 8.5882352941%

accent-n4

  • HEX: #584000
  • RGB: 88, 64, 0
  • HSL: 43.7614678899deg ,100%, 17.1764705882%

accent-n3

  • HEX: #926a00
  • RGB: 146, 106, 0
  • HSL: 43.7614678899deg ,100%, 28.6274509804%

accent-n2

  • HEX: #cc9500
  • RGB: 204, 149, 0
  • HSL: 43.7614678899deg ,100%, 40.0784313725%

accent-n1

  • HEX: #f8b500
  • RGB: 248, 181, 0
  • HSL: 43.7614678899deg ,100%, 48.6666666667%

accent-0

  • HEX: #ffc425
  • RGB: 255, 196, 37
  • HSL: 43.7614678899deg, 100%, 57.2549019608%

accent-1

  • HEX: #ffca3b
  • RGB: 255, 202, 59
  • HSL: 43.7614678899deg ,95%, 61.5294117647%

accent-2

  • HEX: #ffd35c
  • RGB: 255, 211, 92
  • HSL: 43.7614678899deg ,87.5%, 67.9411764706%

accent-3

  • HEX: #ffe292
  • RGB: 255, 226, 146
  • HSL: 43.7614678899deg ,75%, 78.6274509804%

accent-4

  • HEX: #fff0c9
  • RGB: 255, 240, 201
  • HSL: 43.7614678899deg ,62.5%, 89.3137254902%

accent-5

  • HEX: #fff9e9
  • RGB: 255, 249, 233
  • HSL: 43.7614678899deg ,55%, 95.7254901961%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9449

1.4.3 alert: Color Variations

The Modified versions of the alert color from this theme

alert-n5

  • HEX: #170000
  • RGB: 23, 0, 0
  • HSL: 0deg ,100%, 4.5%

alert-n4

  • HEX: #2e0000
  • RGB: 46, 0, 0
  • HSL: 0deg ,100%, 9%

alert-n3

  • HEX: #4d0000
  • RGB: 77, 0, 0
  • HSL: 0deg ,100%, 15%

alert-n2

  • HEX: #6b0000
  • RGB: 107, 0, 0
  • HSL: 0deg ,100%, 21%

alert-n1

  • HEX: #820000
  • RGB: 130, 0, 0
  • HSL: 0deg ,100%, 25.5%

alert-0

  • HEX: #990000
  • RGB: 153, 0, 0
  • HSL: 0deg, 100%, 30%

alert-1

  • HEX: #bd0000
  • RGB: 189, 0, 0
  • HSL: 0deg ,95%, 37%

alert-2

  • HEX: #f20000
  • RGB: 242, 0, 0
  • HSL: 0deg ,87.5%, 47.5%

alert-3

  • HEX: #ff4d4d
  • RGB: 255, 77, 77
  • HSL: 0deg ,75%, 65%

alert-4

  • HEX: #ffa6a6
  • RGB: 255, 166, 166
  • HSL: 0deg ,62.5%, 82.5%

alert-5

  • HEX: #ffdbdb
  • RGB: 255, 219, 219
  • HSL: 0deg ,55%, 93%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9585

1.4.4 highlight: Color Variations

The Modified versions of the highlight color from this theme

highlight-n5

  • HEX: #011a22
  • RGB: 1, 26, 34
  • HSL: 194.7321428571deg ,96.0897435897%, 6.8823529412%

highlight-n4

  • HEX: #023445
  • RGB: 2, 52, 69
  • HSL: 194.7321428571deg ,96.0256410256%, 13.7647058824%

highlight-n3

  • HEX: #035773
  • RGB: 3, 87, 115
  • HSL: 194.7321428571deg ,95.9401709402%, 22.9411764706%

highlight-n2

  • HEX: #047aa0
  • RGB: 4, 122, 160
  • HSL: 194.7321428571deg ,95.8547008547%, 32.1176470588%

highlight-n1

  • HEX: #0494c3
  • RGB: 4, 148, 195
  • HSL: 194.7321428571deg ,95.7905982906%, 39%

highlight-0

  • HEX: #05aee5
  • RGB: 5, 174, 229
  • HSL: 194.7321428571deg, 95.7264957265%, 45.8823529412%

highlight-1

  • HEX: #0cbffa
  • RGB: 12, 191, 250
  • HSL: 194.7321428571deg ,90.9401709402%, 51.2941176471%

highlight-2

  • HEX: #34cafb
  • RGB: 52, 202, 251
  • HSL: 194.7321428571deg ,83.7606837607%, 59.4117647059%

highlight-3

  • HEX: #78dcfc
  • RGB: 120, 220, 252
  • HSL: 194.7321428571deg ,71.7948717949%, 72.9411764706%

highlight-4

  • HEX: #bbedfe
  • RGB: 187, 237, 254
  • HSL: 194.7321428571deg ,59.8290598291%, 86.4705882353%

highlight-5

  • HEX: #e4f8fe
  • RGB: 228, 248, 254
  • HSL: 194.7321428571deg ,52.6495726496%, 94.5882352941%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9551

1.4.5 info: Color Variations

The Modified versions of the info color from this theme

info-n5

  • HEX: #191714
  • RGB: 25, 23, 20
  • HSL: 31.3043478261deg ,18.6666666667%, 8.9117647059%

info-n4

  • HEX: #332e28
  • RGB: 51, 46, 40
  • HSL: 31.3043478261deg ,17.3333333333%, 17.8235294118%

info-n3

  • HEX: #544c43
  • RGB: 84, 76, 67
  • HSL: 31.3043478261deg ,15.5555555556%, 29.7058823529%

info-n2

  • HEX: #766b5e
  • RGB: 118, 107, 94
  • HSL: 31.3043478261deg ,13.7777777778%, 41.5882352941%

info-n1

  • HEX: #8f8173
  • RGB: 143, 129, 115
  • HSL: 31.3043478261deg ,12.4444444444%, 50.5%

info-0

  • HEX: #a3988c
  • RGB: 163, 152, 140
  • HSL: 31.3043478261deg, 11.1111111111%, 59.4117647059%

info-1

  • HEX: #aca298
  • RGB: 172, 162, 152
  • HSL: 31.3043478261deg ,10.5555555556%, 63.4705882353%

info-2

  • HEX: #bab2a9
  • RGB: 186, 178, 169
  • HSL: 31.3043478261deg ,9.7222222222%, 69.5588235294%

info-3

  • HEX: #d1ccc6
  • RGB: 209, 204, 198
  • HSL: 31.3043478261deg ,8.3333333333%, 79.7058823529%

info-4

  • HEX: #e8e5e2
  • RGB: 232, 229, 226
  • HSL: 31.3043478261deg ,6.9444444444%, 89.8529411765%

info-5

  • HEX: #f6f5f4
  • RGB: 246, 245, 244
  • HSL: 31.3043478261deg ,6.1111111111%, 95.9411764706%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9483

1.4.6 navigation: Color Variations

The Modified versions of the navigation color from this theme

navigation-n5

  • HEX: #060d1d
  • RGB: 6, 13, 29
  • HSL: 221.8791946309deg ,66.514893617%, 6.9117647059%

navigation-n4

  • HEX: #0d1a3a
  • RGB: 13, 26, 58
  • HSL: 221.8791946309deg ,65.9659574468%, 13.8235294118%

navigation-n3

  • HEX: #162c60
  • RGB: 22, 44, 96
  • HSL: 221.8791946309deg ,65.2340425532%, 23.0392156863%

navigation-n2

  • HEX: #1e3e86
  • RGB: 30, 62, 134
  • HSL: 221.8791946309deg ,64.5021276596%, 32.2549019608%

navigation-n1

  • HEX: #254ba3
  • RGB: 37, 75, 163
  • HSL: 221.8791946309deg ,63.9531914894%, 39.1666666667%

navigation-0

  • HEX: #2b58c0
  • RGB: 43, 88, 192
  • HSL: 221.8791946309deg, 63.4042553191%, 46.0784313725%

navigation-1

  • HEX: #3564d2
  • RGB: 53, 100, 210
  • HSL: 221.8791946309deg ,60.2340425532%, 51.4705882353%

navigation-2

  • HEX: #567ed9
  • RGB: 86, 126, 217
  • HSL: 221.8791946309deg ,55.4787234043%, 59.5588235294%

navigation-3

  • HEX: #8fa9e6
  • RGB: 143, 169, 230
  • HSL: 221.8791946309deg ,47.5531914894%, 73.0392156863%

navigation-4

  • HEX: #c7d4f2
  • RGB: 199, 212, 242
  • HSL: 221.8791946309deg ,39.6276595745%, 86.5196078431%

navigation-5

  • HEX: #e9eefa
  • RGB: 233, 238, 250
  • HSL: 221.8791946309deg ,34.8723404255%, 94.6078431373%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9279

1.4.7 primary: Color Variations

The Modified versions of the primary color from this theme

primary-n5

  • HEX: #00141a
  • RGB: 0, 20, 26
  • HSL: 192deg ,100%, 5%

primary-n4

  • HEX: #002933
  • RGB: 0, 41, 51
  • HSL: 192deg ,100%, 10%

primary-n3

  • HEX: #004455
  • RGB: 0, 68, 85
  • HSL: 192deg ,100%, 16.6666666667%

primary-n2

  • HEX: #005f77
  • RGB: 0, 95, 119
  • HSL: 192deg ,100%, 23.3333333333%

primary-n1

  • HEX: #007491
  • RGB: 0, 116, 145
  • HSL: 192deg ,100%, 28.3333333333%

primary-0

  • HEX: #0088aa
  • RGB: 0, 136, 170
  • HSL: 192deg, 100%, 33.3333333333%

primary-1

  • HEX: #00a3cc
  • RGB: 0, 163, 204
  • HSL: 192deg ,95%, 40%

primary-2

  • HEX: #00ccff
  • RGB: 0, 204, 255
  • HSL: 192deg ,87.5%, 50%

primary-3

  • HEX: #55ddff
  • RGB: 85, 221, 255
  • HSL: 192deg ,75%, 66.6666666667%

primary-4

  • HEX: #aaeeff
  • RGB: 170, 238, 255
  • HSL: 192deg ,62.5%, 83.3333333333%

primary-5

  • HEX: #ddf8ff
  • RGB: 221, 248, 255
  • HSL: 192deg ,55%, 93.3333333333%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9313

1.4.8 secondary: Color Variations

The Modified versions of the secondary color from this theme

secondary-n5

  • HEX: #241304
  • RGB: 36, 19, 4
  • HSL: 28.2178217822deg ,83.0282258065%, 7.7058823529%

secondary-n4

  • HEX: #472507
  • RGB: 71, 37, 7
  • HSL: 28.2178217822deg ,82.75%, 15.4117647059%

secondary-n3

  • HEX: #773e0c
  • RGB: 119, 62, 12
  • HSL: 28.2178217822deg ,82.3790322581%, 25.6862745098%

secondary-n2

  • HEX: #a65711
  • RGB: 166, 87, 17
  • HSL: 28.2178217822deg ,82.0080645161%, 35.9607843137%

secondary-n1

  • HEX: #ca6a15
  • RGB: 202, 106, 21
  • HSL: 28.2178217822deg ,81.7298387097%, 43.6666666667%

secondary-0

  • HEX: #e87d1e
  • RGB: 232, 125, 30
  • HSL: 28.2178217822deg, 81.4516129032%, 51.3725490196%

secondary-1

  • HEX: #ea8a35
  • RGB: 234, 138, 53
  • HSL: 28.2178217822deg ,77.3790322581%, 56.2352941176%

secondary-2

  • HEX: #ee9e56
  • RGB: 238, 158, 86
  • HSL: 28.2178217822deg ,71.2701612903%, 63.5294117647%

secondary-3

  • HEX: #f4be8f
  • RGB: 244, 190, 143
  • HSL: 28.2178217822deg ,61.0887096774%, 75.6862745098%

secondary-4

  • HEX: #f9dfc7
  • RGB: 249, 223, 199
  • HSL: 28.2178217822deg ,50.9072580645%, 87.8431372549%

secondary-5

  • HEX: #fdf2e9
  • RGB: 253, 242, 233
  • HSL: 28.2178217822deg ,44.7983870968%, 95.137254902%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9381

1.4.9 shade: Color Variations

The Modified versions of the shade color from this theme

shade-n5

  • HEX: #151313
  • RGB: 21, 19, 19
  • HSL: 10.9090909091deg ,12.6081632653%, 7.7941176471%

shade-n4

  • HEX: #2a2726
  • RGB: 42, 39, 38
  • HSL: 10.9090909091deg ,11.1755102041%, 15.5882352941%

shade-n3

  • HEX: #45403f
  • RGB: 69, 64, 63
  • HSL: 10.9090909091deg ,9.2653061224%, 25.9803921569%

shade-n2

  • HEX: #615a59
  • RGB: 97, 90, 89
  • HSL: 10.9090909091deg ,7.3551020408%, 36.3725490196%

shade-n1

  • HEX: #766d6c
  • RGB: 118, 109, 108
  • HSL: 10.9090909091deg ,5.9224489796%, 44.1666666667%

shade-0

  • HEX: #8a817f
  • RGB: 138, 129, 127
  • HSL: 10.9090909091deg, 4.4897959184%, 51.9607843137%

shade-1

  • HEX: #968e8c
  • RGB: 150, 142, 140
  • HSL: 10.9090909091deg ,4.2653061224%, 56.7647058824%

shade-2

  • HEX: #a7a19f
  • RGB: 167, 161, 159
  • HSL: 10.9090909091deg ,3.9285714286%, 63.9705882353%

shade-3

  • HEX: #c5c0bf
  • RGB: 197, 192, 191
  • HSL: 10.9090909091deg ,3.3673469388%, 75.9803921569%

shade-4

  • HEX: #e2e0df
  • RGB: 226, 224, 223
  • HSL: 10.9090909091deg ,2.806122449%, 87.9901960784%

shade-5

  • HEX: #f3f2f2
  • RGB: 243, 242, 242
  • HSL: 10.9090909091deg ,2.4693877551%, 95.1960784314%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9347

1.4.10 success: Color Variations

The Modified versions of the success color from this theme

success-n5

  • HEX: #011507
  • RGB: 1, 21, 7
  • HSL: 137.8625954198deg ,91.1655172414%, 4.2647058824%

success-n4

  • HEX: #02290e
  • RGB: 2, 41, 14
  • HSL: 137.8625954198deg ,91.0206896552%, 8.5294117647%

success-n3

  • HEX: #044517
  • RGB: 4, 69, 23
  • HSL: 137.8625954198deg ,90.8275862069%, 14.2156862745%

success-n2

  • HEX: #056120
  • RGB: 5, 97, 32
  • HSL: 137.8625954198deg ,90.6344827586%, 19.9019607843%

success-n1

  • HEX: #067527
  • RGB: 6, 117, 39
  • HSL: 137.8625954198deg ,90.4896551724%, 24.1666666667%

success-0

  • HEX: #078a2e
  • RGB: 7, 138, 46
  • HSL: 137.8625954198deg, 90.3448275862%, 28.431372549%

success-1

  • HEX: #09ad3a
  • RGB: 9, 173, 58
  • HSL: 137.8625954198deg ,85.8275862069%, 35.5882352941%

success-2

  • HEX: #0be14b
  • RGB: 11, 225, 75
  • HSL: 137.8625954198deg ,79.0517241379%, 46.3235294118%

success-3

  • HEX: #51f682
  • RGB: 81, 246, 130
  • HSL: 137.8625954198deg ,67.7586206897%, 64.2156862745%

success-4

  • HEX: #a8fbc1
  • RGB: 168, 251, 193
  • HSL: 137.8625954198deg ,56.4655172414%, 82.1078431373%

success-5

  • HEX: #dcfde6
  • RGB: 220, 253, 230
  • HSL: 137.8625954198deg ,49.6896551724%, 92.8431372549%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 9415

1.4.11 warning: Color Variations

The Modified versions of the warning color from this theme

warning-n5

  • HEX: #281902
  • RGB: 40, 25, 2
  • HSL: 36.2857142857deg ,91.3232758621%, 8.1764705882%

warning-n4

  • HEX: #4f3204
  • RGB: 79, 50, 4
  • HSL: 36.2857142857deg ,91.1810344828%, 16.3529411765%

warning-n3

  • HEX: #845307
  • RGB: 132, 83, 7
  • HSL: 36.2857142857deg ,90.9913793103%, 27.2549019608%

warning-n2

  • HEX: #b97409
  • RGB: 185, 116, 9
  • HSL: 36.2857142857deg ,90.8017241379%, 38.1568627451%

warning-n1

  • HEX: #e18d0b
  • RGB: 225, 141, 11
  • HSL: 36.2857142857deg ,90.6594827586%, 46.3333333333%

warning-0

  • HEX: #f4a122
  • RGB: 244, 161, 34
  • HSL: 36.2857142857deg, 90.5172413793%, 54.5098039216%

warning-1

  • HEX: #f5aa38
  • RGB: 245, 170, 56
  • HSL: 36.2857142857deg ,85.9913793103%, 59.0588235294%

warning-2

  • HEX: #f7b959
  • RGB: 247, 185, 89
  • HSL: 36.2857142857deg ,79.2025862069%, 65.8823529412%

warning-3

  • HEX: #fad091
  • RGB: 250, 208, 145
  • HSL: 36.2857142857deg ,67.8879310345%, 77.2549019608%

warning-4

  • HEX: #fce8c8
  • RGB: 252, 232, 200
  • HSL: 36.2857142857deg ,56.5732758621%, 88.6274509804%

warning-5

  • HEX: #fef6e9
  • RGB: 254, 246, 233
  • HSL: 36.2857142857deg ,49.7844827586%, 95.4509803922%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/cvquality_boot.css, line 8911

1.5 Fonts

The ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC. Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.

Source: dist/css/cvquality_boot.css, line 8919

1.5.1 Accent Roboto Slab

A beautiful Accent font that shows a complexity and texture to the fonts used in the design.

Roboto Slab font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,"slab",serif

RS

Accent Font

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Source: dist/css/cvquality_boot.css, line 8948

1.5.2 Display: Maven Pro

A Slick font that has a slight interest used for headers and UI.

Maven Pro font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif

MP

Display Font

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Source: dist/css/cvquality_boot.css, line 8977

1.5.3 Copy: Lato

A clean font for content and text of none UI elements.

"Lato" font-family: ""Lato","Open Sans","system-ui",sans-serif"

Lt

Content Font

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Source: dist/css/cvquality_boot.css, line 9006

1.5.4 UI: Lato

A clean font for content and text of none UI elements.

"Lato" font-family: ""Lato","Open Sans","system-ui",sans-serif"

Lt

Content Font

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Source: dist/css/cvquality_boot.css, line 9035

1.6 Icons: Font Awesome

The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications. The organization uses either version 4 or version 5 of Font Awesome's icon sets, providing an extensive range of options for the website's visual design and functionality. Despite the release of version 6, there is no current initiative to upgrade due to the breaking changes that come with it. The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.

Example s

plus

fa-plus

plus

arrow-right

fa-arrow-right

arrow-right

search

fa-search

search

envelope

fa-envelope

envelope

heart

fa-heart

heart

star

fa-star

star

user

fa-user

user
<div class="relative br_black-2 br_solid br_1"><div class="flex flex_row"><div class="font_5 cell w-grid_3 text_center p_3 no-underline c_inherit flex_shrink justify_center h:bg_navigation-n3 h:c_white bg_black-1 expanded-click-area"><i class="fas fa-[modifier class]"></i></div><div class="flex_auto p_4 p-y_2 self_center"><span class="c_black-8 h:c_black-9 text font_bold font_display">[modifier class]</span></div></div></div>
Copy Code

Source: dist/css/cvquality_boot.css, line 9261

1.7 Textures

All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes.

Example s

.texture_light

Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.

texture_light with a light primary color background

.texture_medium

medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.

texture_medium with a light primary color background

.texture_dust

Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.

texture_dust with a light primary color background

.texture_dark

This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.

texture_dark with a light primary color background

.texture_cross

A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.

texture_cross with a light primary color background

.texture_disabled

This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.

texture_disabled with a light primary color background
<div class="[modifier class] p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4">[modifier class] with a light primary color background</div>
Copy Code