Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Design Base

Source: dist/css/acc_boot.css, line 10018

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/acc_boot.css, line 10182

1.1 Theme Colors

Colors are based off of the ACC Scrub Colors.

  • #198dae; primary

    map-get($theme-palette, primary)

  • #676a72; secondary

    map-get($theme-palette, secondary)

  • #878585; shade

    map-get($theme-palette, shade)

  • #16a385; accent

    map-get($theme-palette, accent)

  • #a3988c; info

    map-get($theme-palette, info)

  • #7742bd; highlight

    map-get($theme-palette, highlight)

Source: dist/css/acc_boot.css, line 10199

1.1.2 Action Colors

Actionable colors used to respond to user inputs and messaging.

  • #dd1a1a; alert

    map-get($theme-palette, alert)

  • #da8210; warning

    map-get($theme-palette, warning)

  • #078a2e; success

    map-get($theme-palette, success)

  • #2b58c0; navigation

    map-get($theme-palette, navigation)

Source: dist/css/acc_boot.css, line 10212

1.1.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/acc_boot.css, line 10281

1.1.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/acc_boot.css, line 10254

1.1.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/acc_boot.css, line 10221

1.1.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/acc_boot.css, line 10238

1.1.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/acc_boot.css, line 10357

1.1.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/acc_boot.css, line 10334

1.1.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/acc_boot.css, line 10308

1.1.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/acc_boot.css, line 42

1.1.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/acc_boot.css, line 28

1.1.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/acc_boot.css, line 10769

1.2 Crayon Box

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

Source: dist/css/acc_boot.css, line 10735

1.2.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/acc_boot.css, line 10633

1.2.2 accent: Color Variations

The Modified versions of the accent color from this theme

accent-n5

  • HEX: #031814
  • RGB: 3, 24, 20
  • HSL: 167.2340425532deg ,78.2378378378%, 5.4411764706%

accent-n4

  • HEX: #073128
  • RGB: 7, 49, 40
  • HSL: 167.2340425532deg ,77.8810810811%, 10.8823529412%

accent-n3

  • HEX: #0b5243
  • RGB: 11, 82, 67
  • HSL: 167.2340425532deg ,77.4054054054%, 18.137254902%

accent-n2

  • HEX: #0f725d
  • RGB: 15, 114, 93
  • HSL: 167.2340425532deg ,76.9297297297%, 25.3921568627%

accent-n1

  • HEX: #138b71
  • RGB: 19, 139, 113
  • HSL: 167.2340425532deg ,76.572972973%, 30.8333333333%

accent-0

  • HEX: #16a385
  • RGB: 22, 163, 133
  • HSL: 167.2340425532deg, 76.2162162162%, 36.2745098039%

accent-1

  • HEX: #1ac09c
  • RGB: 26, 192, 156
  • HSL: 167.2340425532deg ,72.4054054054%, 42.6470588235%

accent-2

  • HEX: #28e2ba
  • RGB: 40, 226, 186
  • HSL: 167.2340425532deg ,66.6891891892%, 52.2058823529%

accent-3

  • HEX: #70ecd1
  • RGB: 112, 236, 209
  • HSL: 167.2340425532deg ,57.1621621622%, 68.137254902%

accent-4

  • HEX: #b7f5e8
  • RGB: 183, 245, 232
  • HSL: 167.2340425532deg ,47.6351351351%, 84.068627451%

accent-5

  • HEX: #e2fbf6
  • RGB: 226, 251, 246
  • HSL: 167.2340425532deg ,41.9189189189%, 93.6274509804%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10565

1.2.3 alert: Color Variations

The Modified versions of the alert color from this theme

alert-n5

  • HEX: #210404
  • RGB: 33, 4, 4
  • HSL: 0deg ,80.7368421053%, 7.2647058824%

alert-n4

  • HEX: #420808
  • RGB: 66, 8, 8
  • HSL: 0deg ,80.4210526316%, 14.5294117647%

alert-n3

  • HEX: #6f0d0d
  • RGB: 111, 13, 13
  • HSL: 0deg ,80%, 24.2156862745%

alert-n2

  • HEX: #9b1212
  • RGB: 155, 18, 18
  • HSL: 0deg ,79.5789473684%, 33.9019607843%

alert-n1

  • HEX: #bc1616
  • RGB: 188, 22, 22
  • HSL: 0deg ,79.2631578947%, 41.1666666667%

alert-0

  • HEX: #dd1a1a
  • RGB: 221, 26, 26
  • HSL: 0deg, 78.9473684211%, 48.431372549%

alert-1

  • HEX: #e62b2b
  • RGB: 230, 43, 43
  • HSL: 0deg ,75%, 53.5882352941%

alert-2

  • HEX: #ea4f4f
  • RGB: 234, 79, 79
  • HSL: 0deg ,69.0789473684%, 61.3235294118%

alert-3

  • HEX: #f18989
  • RGB: 241, 137, 137
  • HSL: 0deg ,59.2105263158%, 74.2156862745%

alert-4

  • HEX: #f8c4c4
  • RGB: 248, 196, 196
  • HSL: 0deg ,49.3421052632%, 87.1078431373%

alert-5

  • HEX: #fce7e7
  • RGB: 252, 231, 231
  • HSL: 0deg ,43.4210526316%, 94.8431372549%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10701

1.2.4 highlight: Color Variations

The Modified versions of the highlight color from this theme

highlight-n5

  • HEX: #120a1c
  • RGB: 18, 10, 28
  • HSL: 265.8536585366deg ,52.6352941176%, 7.5%

highlight-n4

  • HEX: #241439
  • RGB: 36, 20, 57
  • HSL: 265.8536585366deg ,51.8588235294%, 15%

highlight-n3

  • HEX: #3c215f
  • RGB: 60, 33, 95
  • HSL: 265.8536585366deg ,50.8235294118%, 25%

highlight-n2

  • HEX: #532e84
  • RGB: 83, 46, 132
  • HSL: 265.8536585366deg ,49.7882352941%, 35%

highlight-n1

  • HEX: #6538a1
  • RGB: 101, 56, 161
  • HSL: 265.8536585366deg ,49.0117647059%, 42.5%

highlight-0

  • HEX: #7742bd
  • RGB: 119, 66, 189
  • HSL: 265.8536585366deg, 48.2352941176%, 50%

highlight-1

  • HEX: #8555c4
  • RGB: 133, 85, 196
  • HSL: 265.8536585366deg ,45.8235294118%, 55%

highlight-2

  • HEX: #9971ce
  • RGB: 153, 113, 206
  • HSL: 265.8536585366deg ,42.2058823529%, 62.5%

highlight-3

  • HEX: #bba1de
  • RGB: 187, 161, 222
  • HSL: 265.8536585366deg ,36.1764705882%, 75%

highlight-4

  • HEX: #ddd0ef
  • RGB: 221, 208, 239
  • HSL: 265.8536585366deg ,30.1470588235%, 87.5%

highlight-5

  • HEX: #f1ecf8
  • RGB: 241, 236, 248
  • HSL: 265.8536585366deg ,26.5294117647%, 95%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10667

1.2.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/acc_boot.css, line 10599

1.2.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/acc_boot.css, line 10395

1.2.7 primary: Color Variations

The Modified versions of the primary color from this theme

primary-n5

  • HEX: #04151a
  • RGB: 4, 21, 26
  • HSL: 193.288590604deg ,77.0100502513%, 5.8529411765%

primary-n4

  • HEX: #082a34
  • RGB: 8, 42, 52
  • HSL: 193.288590604deg ,76.6331658291%, 11.7058823529%

primary-n3

  • HEX: #0d4757
  • RGB: 13, 71, 87
  • HSL: 193.288590604deg ,76.1306532663%, 19.5098039216%

primary-n2

  • HEX: #12637a
  • RGB: 18, 99, 122
  • HSL: 193.288590604deg ,75.6281407035%, 27.3137254902%

primary-n1

  • HEX: #157894
  • RGB: 21, 120, 148
  • HSL: 193.288590604deg ,75.2512562814%, 33.1666666667%

primary-0

  • HEX: #198dae
  • RGB: 25, 141, 174
  • HSL: 193.288590604deg, 74.8743718593%, 39.0196078431%

primary-1

  • HEX: #1da3c9
  • RGB: 29, 163, 201
  • HSL: 193.288590604deg ,71.1306532663%, 45.1176470588%

primary-2

  • HEX: #33bbe2
  • RGB: 51, 187, 226
  • HSL: 193.288590604deg ,65.5150753769%, 54.2647058824%

primary-3

  • HEX: #77d2eb
  • RGB: 119, 210, 235
  • HSL: 193.288590604deg ,56.1557788945%, 69.5098039216%

primary-4

  • HEX: #bbe8f5
  • RGB: 187, 232, 245
  • HSL: 193.288590604deg ,46.7964824121%, 84.7549019608%

primary-5

  • HEX: #e4f6fb
  • RGB: 228, 246, 251
  • HSL: 193.288590604deg ,41.1809045226%, 93.9019607843%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10429

1.2.8 secondary: Color Variations

The Modified versions of the secondary color from this theme

secondary-n5

  • HEX: #0f1011
  • RGB: 15, 16, 17
  • HSL: 223.6363636364deg ,13.1382488479%, 6.3823529412%

secondary-n4

  • HEX: #1f2022
  • RGB: 31, 32, 34
  • HSL: 223.6363636364deg ,11.7142857143%, 12.7647058824%

secondary-n3

  • HEX: #343539
  • RGB: 52, 53, 57
  • HSL: 223.6363636364deg ,9.8156682028%, 21.2745098039%

secondary-n2

  • HEX: #484a50
  • RGB: 72, 74, 80
  • HSL: 223.6363636364deg ,7.9170506912%, 29.7843137255%

secondary-n1

  • HEX: #585a61
  • RGB: 88, 90, 97
  • HSL: 223.6363636364deg ,6.4930875576%, 36.1666666667%

secondary-0

  • HEX: #676a72
  • RGB: 103, 106, 114
  • HSL: 223.6363636364deg, 5.069124424%, 42.5490196078%

secondary-1

  • HEX: #757881
  • RGB: 117, 120, 129
  • HSL: 223.6363636364deg ,4.8156682028%, 48.2941176471%

secondary-2

  • HEX: #8c8f97
  • RGB: 140, 143, 151
  • HSL: 223.6363636364deg ,4.435483871%, 56.9117647059%

secondary-3

  • HEX: #b2b4b9
  • RGB: 178, 180, 185
  • HSL: 223.6363636364deg ,3.801843318%, 71.2745098039%

secondary-4

  • HEX: #d9dadc
  • RGB: 217, 218, 220
  • HSL: 223.6363636364deg ,3.168202765%, 85.637254902%

secondary-5

  • HEX: #f0f0f1
  • RGB: 240, 240, 241
  • HSL: 223.6363636364deg ,2.7880184332%, 94.2549019608%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10497

1.2.9 shade: Color Variations

The Modified versions of the shade color from this theme

shade-n5

  • HEX: #141414
  • RGB: 20, 20, 20
  • HSL: 0deg ,9.2561983471%, 7.8823529412%

shade-n4

  • HEX: #292828
  • RGB: 41, 40, 40
  • HSL: 0deg ,7.7685950413%, 15.7647058824%

shade-n3

  • HEX: #444242
  • RGB: 68, 66, 66
  • HSL: 0deg ,5.7851239669%, 26.2745098039%

shade-n2

  • HEX: #5f5d5d
  • RGB: 95, 93, 93
  • HSL: 0deg ,3.8016528926%, 36.7843137255%

shade-n1

  • HEX: #737171
  • RGB: 115, 113, 113
  • HSL: 0deg ,2.3140495868%, 44.6666666667%

shade-0

  • HEX: #878585
  • RGB: 135, 133, 133
  • HSL: 0deg, 0.826446281%, 52.5490196078%

shade-1

  • HEX: #939191
  • RGB: 147, 145, 145
  • HSL: 0deg ,0.7851239669%, 57.2941176471%

shade-2

  • HEX: #a5a4a4
  • RGB: 165, 164, 164
  • HSL: 0deg ,0.7231404959%, 64.4117647059%

shade-3

  • HEX: #c3c2c2
  • RGB: 195, 194, 194
  • HSL: 0deg ,0.6198347107%, 76.2745098039%

shade-4

  • HEX: #e1e1e1
  • RGB: 225, 225, 225
  • HSL: 0deg ,0.5165289256%, 88.137254902%

shade-5

  • HEX: #f3f3f3
  • RGB: 243, 243, 243
  • HSL: 0deg ,0.4545454545%, 95.2549019608%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10463

1.2.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/acc_boot.css, line 10531

1.2.11 warning: Color Variations

The Modified versions of the warning color from this theme

warning-n5

  • HEX: #211402
  • RGB: 33, 20, 2
  • HSL: 33.8613861386deg ,87.4871794872%, 6.8823529412%

warning-n4

  • HEX: #412705
  • RGB: 65, 39, 5
  • HSL: 33.8613861386deg ,87.2820512821%, 13.7647058824%

warning-n3

  • HEX: #6d4108
  • RGB: 109, 65, 8
  • HSL: 33.8613861386deg ,87.0085470085%, 22.9411764706%

warning-n2

  • HEX: #995b0b
  • RGB: 153, 91, 11
  • HSL: 33.8613861386deg ,86.735042735%, 32.1176470588%

warning-n1

  • HEX: #b96f0e
  • RGB: 185, 111, 14
  • HSL: 33.8613861386deg ,86.5299145299%, 39%

warning-0

  • HEX: #da8210
  • RGB: 218, 130, 16
  • HSL: 33.8613861386deg, 86.3247863248%, 45.8823529412%

warning-1

  • HEX: #ee9118
  • RGB: 238, 145, 24
  • HSL: 33.8613861386deg ,82.0085470085%, 51.2941176471%

warning-2

  • HEX: #f1a33e
  • RGB: 241, 163, 62
  • HSL: 33.8613861386deg ,75.5341880342%, 59.4117647059%

warning-3

  • HEX: #f6c27e
  • RGB: 246, 194, 126
  • HSL: 33.8613861386deg ,64.7435897436%, 72.9411764706%

warning-4

  • HEX: #fae0bf
  • RGB: 250, 224, 191
  • HSL: 33.8613861386deg ,53.952991453%, 86.4705882353%

warning-5

  • HEX: #fdf3e5
  • RGB: 253, 243, 229
  • HSL: 33.8613861386deg ,47.4786324786%, 94.5882352941%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/acc_boot.css, line 10027

1.3 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/acc_boot.css, line 10035

1.3.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,serif, "slab"

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/acc_boot.css, line 10064

1.3.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/acc_boot.css, line 10093

1.3.3 Copy: Open Sans

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

"Open Sans" font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"

OS

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/acc_boot.css, line 10122

1.3.4 UI: Open Sans

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

"Open Sans" font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"

OS

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/acc_boot.css, line 10151

1.4 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/acc_boot.css, line 10377

1.5 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