Arches: JACC & UC Only Patterns

Arches:JACC & UC Only Patterns

Multi Product Brand Style System by the American College of Cardiology

Design Base

Source: dist/css/journal_recipe.css, line 887

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/journal_recipe.css, line 1042

1.1 Theme Colors

Colors are based off of the ACC Scrub Colors.

  • #002e5a; primary

    map-get($theme-palette, primary)

  • #747474; secondary

    map-get($theme-palette, secondary)

  • #747474; shade

    map-get($theme-palette, shade)

  • #ff6600; accent

    map-get($theme-palette, accent)

  • #a3988c; info

    map-get($theme-palette, info)

  • #783ca9; highlight

    map-get($theme-palette, highlight)

Source: dist/css/journal_recipe.css, line 1059

1.1.2 Action Colors

Actionable colors used to respond to user inputs and messaging.

  • #ac2217; alert

    map-get($theme-palette, alert)

  • #df732d; warning

    map-get($theme-palette, warning)

  • #0fa528; success

    map-get($theme-palette, success)

  • #2b58c0; navigation

    map-get($theme-palette, navigation)

Source: dist/css/journal_recipe.css, line 1072

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/journal_recipe.css, line 1141

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/journal_recipe.css, line 1114

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/journal_recipe.css, line 1081

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/journal_recipe.css, line 1098

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/journal_recipe.css, line 1217

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/journal_recipe.css, line 1194

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/journal_recipe.css, line 1168

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/journal_recipe.css, line 26

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/journal_recipe.css, line 12

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/journal_recipe.css, line 438

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/journal_recipe.css, line 404

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/journal_recipe.css, line 302

1.2.2 accent: Color Variations

The Modified versions of the accent color from this theme

accent-n5

  • HEX: #260f00
  • RGB: 38, 15, 0
  • HSL: 24deg ,100%, 7.5%

accent-n4

  • HEX: #4d1f00
  • RGB: 77, 31, 0
  • HSL: 24deg ,100%, 15%

accent-n3

  • HEX: #803300
  • RGB: 128, 51, 0
  • HSL: 24deg ,100%, 25%

accent-n2

  • HEX: #b34700
  • RGB: 179, 71, 0
  • HSL: 24deg ,100%, 35%

accent-n1

  • HEX: #d95700
  • RGB: 217, 87, 0
  • HSL: 24deg ,100%, 42.5%

accent-0

  • HEX: #ff6600
  • RGB: 255, 102, 0
  • HSL: 24deg, 100%, 50%

accent-1

  • HEX: #ff751a
  • RGB: 255, 117, 26
  • HSL: 24deg ,95%, 55%

accent-2

  • HEX: #ff8c40
  • RGB: 255, 140, 64
  • HSL: 24deg ,87.5%, 62.5%

accent-3

  • HEX: #ffb380
  • RGB: 255, 179, 128
  • HSL: 24deg ,75%, 75%

accent-4

  • HEX: #ffd9bf
  • RGB: 255, 217, 191
  • HSL: 24deg ,62.5%, 87.5%

accent-5

  • HEX: #fff0e6
  • RGB: 255, 240, 230
  • HSL: 24deg ,55%, 95%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 234

1.2.3 alert: Color Variations

The Modified versions of the alert color from this theme

alert-n5

  • HEX: #1a0503
  • RGB: 26, 5, 3
  • HSL: 4.4295302013deg ,78.4153846154%, 5.7352941176%

alert-n4

  • HEX: #340a07
  • RGB: 52, 10, 7
  • HSL: 4.4295302013deg ,78.0615384615%, 11.4705882353%

alert-n3

  • HEX: #56110c
  • RGB: 86, 17, 12
  • HSL: 4.4295302013deg ,77.5897435897%, 19.1176470588%

alert-n2

  • HEX: #781810
  • RGB: 120, 24, 16
  • HSL: 4.4295302013deg ,77.1179487179%, 26.7647058824%

alert-n1

  • HEX: #921d14
  • RGB: 146, 29, 20
  • HSL: 4.4295302013deg ,76.7641025641%, 32.5%

alert-0

  • HEX: #ac2217
  • RGB: 172, 34, 23
  • HSL: 4.4295302013deg, 76.4102564103%, 38.2352941176%

alert-1

  • HEX: #c8271b
  • RGB: 200, 39, 27
  • HSL: 4.4295302013deg ,72.5897435897%, 44.4117647059%

alert-2

  • HEX: #e33c2f
  • RGB: 227, 60, 47
  • HSL: 4.4295302013deg ,66.858974359%, 53.6764705882%

alert-3

  • HEX: #ec7d74
  • RGB: 236, 125, 116
  • HSL: 4.4295302013deg ,57.3076923077%, 69.1176470588%

alert-4

  • HEX: #f6beba
  • RGB: 246, 190, 186
  • HSL: 4.4295302013deg ,47.7564102564%, 84.5588235294%

alert-5

  • HEX: #fbe5e3
  • RGB: 251, 229, 227
  • HSL: 4.4295302013deg ,42.0256410256%, 93.8235294118%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 370

1.2.4 highlight: Color Variations

The Modified versions of the highlight color from this theme

highlight-n5

  • HEX: #120919
  • RGB: 18, 9, 25
  • HSL: 273.0275229358deg ,52.0524017467%, 6.7352941176%

highlight-n4

  • HEX: #241233
  • RGB: 36, 18, 51
  • HSL: 273.0275229358deg ,51.2663755459%, 13.4705882353%

highlight-n3

  • HEX: #3c1e55
  • RGB: 60, 30, 85
  • HSL: 273.0275229358deg ,50.2183406114%, 22.4509803922%

highlight-n2

  • HEX: #542a76
  • RGB: 84, 42, 118
  • HSL: 273.0275229358deg ,49.1703056769%, 31.431372549%

highlight-n1

  • HEX: #663390
  • RGB: 102, 51, 144
  • HSL: 273.0275229358deg ,48.384279476%, 38.1666666667%

highlight-0

  • HEX: #783ca9
  • RGB: 120, 60, 169
  • HSL: 273.0275229358deg, 47.5982532751%, 44.9019607843%

highlight-1

  • HEX: #8744bd
  • RGB: 135, 68, 189
  • HSL: 273.0275229358deg ,45.2183406114%, 50.4117647059%

highlight-2

  • HEX: #9b63c8
  • RGB: 155, 99, 200
  • HSL: 273.0275229358deg ,41.6484716157%, 58.6764705882%

highlight-3

  • HEX: #bc97da
  • RGB: 188, 151, 218
  • HSL: 273.0275229358deg ,35.6986899563%, 72.4509803922%

highlight-4

  • HEX: #decbed
  • RGB: 222, 203, 237
  • HSL: 273.0275229358deg ,29.7489082969%, 86.2254901961%

highlight-5

  • HEX: #f2eaf8
  • RGB: 242, 234, 248
  • HSL: 273.0275229358deg ,26.1790393013%, 94.4901960784%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 336

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/journal_recipe.css, line 268

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/journal_recipe.css, line 64

1.2.7 primary: Color Variations

The Modified versions of the primary color from this theme

primary-n5

  • HEX: #00070e
  • RGB: 0, 7, 14
  • HSL: 209.3333333333deg ,100%, 2.6470588235%

primary-n4

  • HEX: #000e1b
  • RGB: 0, 14, 27
  • HSL: 209.3333333333deg ,100%, 5.2941176471%

primary-n3

  • HEX: #00172d
  • RGB: 0, 23, 45
  • HSL: 209.3333333333deg ,100%, 8.8235294118%

primary-n2

  • HEX: #00203f
  • RGB: 0, 32, 63
  • HSL: 209.3333333333deg ,100%, 12.3529411765%

primary-n1

  • HEX: #00274d
  • RGB: 0, 39, 77
  • HSL: 209.3333333333deg ,100%, 15%

primary-0

  • HEX: #002e5a
  • RGB: 0, 46, 90
  • HSL: 209.3333333333deg, 100%, 17.6470588235%

primary-1

  • HEX: #004384
  • RGB: 0, 67, 132
  • HSL: 209.3333333333deg ,95%, 25.8823529412%

primary-2

  • HEX: #0064c3
  • RGB: 0, 100, 195
  • HSL: 209.3333333333deg ,87.5%, 38.2352941176%

primary-3

  • HEX: #2d98ff
  • RGB: 45, 152, 255
  • HSL: 209.3333333333deg ,75%, 58.8235294118%

primary-4

  • HEX: #96ccff
  • RGB: 150, 204, 255
  • HSL: 209.3333333333deg ,62.5%, 79.4117647059%

primary-5

  • HEX: #d5eaff
  • RGB: 213, 234, 255
  • HSL: 209.3333333333deg ,55%, 91.7647058824%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 98

1.2.8 secondary: Color Variations

The Modified versions of the secondary color from this theme

secondary-n5

  • HEX: #111111
  • RGB: 17, 17, 17
  • HSL: 0deg ,8.5%, 6.8235294118%

secondary-n4

  • HEX: #232323
  • RGB: 35, 35, 35
  • HSL: 0deg ,7%, 13.6470588235%

secondary-n3

  • HEX: #3a3a3a
  • RGB: 58, 58, 58
  • HSL: 0deg ,5%, 22.7450980392%

secondary-n2

  • HEX: #515151
  • RGB: 81, 81, 81
  • HSL: 0deg ,3%, 31.8431372549%

secondary-n1

  • HEX: #636363
  • RGB: 99, 99, 99
  • HSL: 0deg ,1.5%, 38.6666666667%

secondary-0

  • HEX: #747474
  • RGB: 116, 116, 116
  • HSL: 0deg, 0%, 45.4901960784%

secondary-1

  • HEX: #828282
  • RGB: 130, 130, 130
  • HSL: 0deg ,0%, 50.9411764706%

secondary-2

  • HEX: #979797
  • RGB: 151, 151, 151
  • HSL: 0deg ,0%, 59.1176470588%

secondary-3

  • HEX: #bababa
  • RGB: 186, 186, 186
  • HSL: 0deg ,0%, 72.7450980392%

secondary-4

  • HEX: gainsboro
  • RGB: 220, 220, 220
  • HSL: 0deg ,0%, 86.3725490196%

secondary-5

  • HEX: #f1f1f1
  • RGB: 241, 241, 241
  • HSL: 0deg ,0%, 94.5490196078%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 166

1.2.9 shade: Color Variations

The Modified versions of the shade color from this theme

shade-n5

  • HEX: #111111
  • RGB: 17, 17, 17
  • HSL: 0deg ,8.5%, 6.8235294118%

shade-n4

  • HEX: #232323
  • RGB: 35, 35, 35
  • HSL: 0deg ,7%, 13.6470588235%

shade-n3

  • HEX: #3a3a3a
  • RGB: 58, 58, 58
  • HSL: 0deg ,5%, 22.7450980392%

shade-n2

  • HEX: #515151
  • RGB: 81, 81, 81
  • HSL: 0deg ,3%, 31.8431372549%

shade-n1

  • HEX: #636363
  • RGB: 99, 99, 99
  • HSL: 0deg ,1.5%, 38.6666666667%

shade-0

  • HEX: #747474
  • RGB: 116, 116, 116
  • HSL: 0deg, 0%, 45.4901960784%

shade-1

  • HEX: #828282
  • RGB: 130, 130, 130
  • HSL: 0deg ,0%, 50.9411764706%

shade-2

  • HEX: #979797
  • RGB: 151, 151, 151
  • HSL: 0deg ,0%, 59.1176470588%

shade-3

  • HEX: #bababa
  • RGB: 186, 186, 186
  • HSL: 0deg ,0%, 72.7450980392%

shade-4

  • HEX: gainsboro
  • RGB: 220, 220, 220
  • HSL: 0deg ,0%, 86.3725490196%

shade-5

  • HEX: #f1f1f1
  • RGB: 241, 241, 241
  • HSL: 0deg ,0%, 94.5490196078%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 132

1.2.10 success: Color Variations

The Modified versions of the success color from this theme

success-n5

  • HEX: #021906
  • RGB: 2, 25, 6
  • HSL: 130deg ,84.75%, 5.2941176471%

success-n4

  • HEX: #05320c
  • RGB: 5, 50, 12
  • HSL: 130deg ,84.5%, 10.5882352941%

success-n3

  • HEX: #085314
  • RGB: 8, 83, 20
  • HSL: 130deg ,84.1666666667%, 17.6470588235%

success-n2

  • HEX: #0b741c
  • RGB: 11, 116, 28
  • HSL: 130deg ,83.8333333333%, 24.7058823529%

success-n1

  • HEX: #0d8c22
  • RGB: 13, 140, 34
  • HSL: 130deg ,83.5833333333%, 30%

success-0

  • HEX: #0fa528
  • RGB: 15, 165, 40
  • HSL: 130deg, 83.3333333333%, 35.2941176471%

success-1

  • HEX: #12c32f
  • RGB: 18, 195, 47
  • HSL: 130deg ,79.1666666667%, 41.7647058824%

success-2

  • HEX: #1cea3f
  • RGB: 28, 234, 63
  • HSL: 130deg ,72.9166666667%, 51.4705882353%

success-3

  • HEX: #68f17f
  • RGB: 104, 241, 127
  • HSL: 130deg ,62.5%, 67.6470588235%

success-4

  • HEX: #b3f8bf
  • RGB: 179, 248, 191
  • HSL: 130deg ,52.0833333333%, 83.8235294118%

success-5

  • HEX: #e1fce5
  • RGB: 225, 252, 229
  • HSL: 130deg ,45.8333333333%, 93.5294117647%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 200

1.2.11 warning: Color Variations

The Modified versions of the warning color from this theme

warning-n5

  • HEX: #231105
  • RGB: 35, 17, 5
  • HSL: 23.595505618deg ,75.8016528926%, 7.8823529412%

warning-n4

  • HEX: #46220b
  • RGB: 70, 34, 11
  • HSL: 23.595505618deg ,75.4049586777%, 15.7647058824%

warning-n3

  • HEX: #743812
  • RGB: 116, 56, 18
  • HSL: 23.595505618deg ,74.8760330579%, 26.2745098039%

warning-n2

  • HEX: #a34f19
  • RGB: 163, 79, 25
  • HSL: 23.595505618deg ,74.347107438%, 36.7843137255%

warning-n1

  • HEX: #c6601e
  • RGB: 198, 96, 30
  • HSL: 23.595505618deg ,73.9504132231%, 44.6666666667%

warning-0

  • HEX: #df732d
  • RGB: 223, 115, 45
  • HSL: 23.595505618deg, 73.5537190083%, 52.5490196078%

warning-1

  • HEX: #e28142
  • RGB: 226, 129, 66
  • HSL: 23.595505618deg ,69.8760330579%, 57.2941176471%

warning-2

  • HEX: #e79662
  • RGB: 231, 150, 98
  • HSL: 23.595505618deg ,64.3595041322%, 64.4117647059%

warning-3

  • HEX: #efb996
  • RGB: 239, 185, 150
  • HSL: 23.595505618deg ,55.1652892562%, 76.2745098039%

warning-4

  • HEX: #f7dccb
  • RGB: 247, 220, 203
  • HSL: 23.595505618deg ,45.9710743802%, 88.137254902%

warning-5

  • HEX: #fcf1ea
  • RGB: 252, 241, 234
  • HSL: 23.595505618deg ,40.4545454545%, 95.2549019608%

Example

Default styling

Markup: 
Markup:
Copy Code

Source: dist/css/journal_recipe.css, line 896

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/journal_recipe.css, line 904

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,"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/journal_recipe.css, line 933

1.3.2 Display: Roboto Flex

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

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

RF

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/journal_recipe.css, line 962

1.3.3 Copy: Roboto Flex

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

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

RF

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/journal_recipe.css, line 991

1.3.4 UI: Roboto Flex

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

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

RF

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/journal_recipe.css, line 1020

1.4 Icons: Not Using Enteprise Solution

There are some subtle effects that happen when a platform doesn't use the enteprise solution for fonts. the most prominent is the loss of the icon link decoration standard with in content.

NOTE:
Not Using Enteprise Solution of Font Awesome

Source: dist/css/journal_recipe.css, line 1237

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