Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Design Base

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

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 10072

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 10089

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 10102

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 10171

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 10144

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 10111

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 10128

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 10247

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 10224

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 10198

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 10659

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 10625

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 10523

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 10455

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 10591

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 10557

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 10489

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 10285

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 10319

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 10387

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 10353

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 10421

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 9928

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.

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

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 9965

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 9994

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 10023

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 10052

1.6 Icons: Font Awesome

The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.

The organization uses version 6 of Font Awesome's icon sets.

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.

Font AwesomeIcon Dictionary

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

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