Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Design Base

Source: dist/css/library_boot.css, line 12673

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/library_boot.css, line 12826

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/library_boot.css, line 12843

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/library_boot.css, line 12856

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/library_boot.css, line 12925

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/library_boot.css, line 12898

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/library_boot.css, line 12865

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/library_boot.css, line 12882

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/library_boot.css, line 13001

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/library_boot.css, line 12978

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/library_boot.css, line 12952

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/library_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/library_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/library_boot.css, line 13413

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/library_boot.css, line 13379

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/library_boot.css, line 13277

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/library_boot.css, line 13209

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/library_boot.css, line 13345

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/library_boot.css, line 13311

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/library_boot.css, line 13243

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/library_boot.css, line 13039

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/library_boot.css, line 13073

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/library_boot.css, line 13141

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/library_boot.css, line 13107

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/library_boot.css, line 13175

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/library_boot.css, line 12682

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.

Source: dist/css/library_boot.css, line 12690

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/library_boot.css, line 12719

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/library_boot.css, line 12748

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/library_boot.css, line 12777

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/library_boot.css, line 12806

1.4 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/library_boot.css, line 13021

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] p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4">[modifier] with a light primary color background</div>
Copy Code