Source: dist/css/journal_boot.css, line 8182
1 Design Base
Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readablity very high.
Source: dist/css/journal_boot.css, line 8346
1.1 Theme Colors
Colors are based off of the ACC Scrub Colors.
-
#004176; primary
map-get($theme-palette, primary) -
#f60; secondary
map-get($theme-palette, secondary) -
#868686; shade
map-get($theme-palette, shade) -
#16a385; accent
map-get($theme-palette, accent) -
#a3988c; info
map-get($theme-palette, info) -
#198dae; highlight
map-get($theme-palette, highlight)
Source: dist/css/journal_boot.css, line 8338
1.1.1 ACC's Blue
-
#004176; acc
$acc-blue
Source: dist/css/journal_boot.css, line 8363
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/journal_boot.css, line 8376
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 assoicated 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_boot.css, line 8445
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_boot.css, line 8418
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_boot.css, line 8385
1.1.3.3 COR Colors
(COR) Class of Recomendation is a color collect used in Guideline recomendations.
-
#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_boot.css, line 8402
1.1.3.4 LOE Colors
(LOE) level of Evedence is a color collect used in Guideline recomendations.
-
#3e6fb7;LOE A
$loe-dark-blue -
#659cd3;LOE B-R
$loe-mid-blue -
#a1c1e6;LOE B-NR
$loe-light-blue -
#b5d5e5; LOE C
$loe-pale-blue
Source: dist/css/journal_boot.css, line 8498
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.
-
#00aced; twitter
$twitter -
#3b5998; facebook
$facebook -
#007bb6; linkedin
$linkedin -
#ea4cc0; apple-store
$apple-store -
#689f38; google-play
$google-play -
#bb0000; youtube
$youtube
Source: dist/css/journal_boot.css, line 8472
1.1.3.6 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_boot.css, line 12055
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_boot.css, line 11735
1.2.1 acc: Color Variations
The Modified versions of the acc color from this theme
Example
acc-n5
HEX:
#00070c
RGB:0, 7, 12
HSL:207deg, 100%, 2%
acc-n4
HEX:
#000e1a
RGB:0, 14, 26
HSL:207deg, 100%, 5%
acc-n3
HEX:
#001a2f
RGB:0, 26, 47
HSL:207deg, 100%, 9%
acc-n2
HEX:
#00294a
RGB:0, 41, 74
HSL:207deg, 100%, 15%
acc-n1
HEX:
#003764
RGB:0, 55, 100
HSL:207deg, 100%, 20%
acc
HEX:
#004176
RGB:0, 65, 118
HSL:207deg, 100%, 23%
acc-1
HEX:
#0061b1
RGB:0, 97, 177
HSL:207deg, 100%, 35%
acc-2
HEX:
#0890ff
RGB:8, 144, 255
HSL:207deg, 100%, 52%
acc-3
HEX:
#62b9ff
RGB:98, 185, 255
HSL:207deg, 100%, 69%
acc-4
HEX:
#a9d8ff
RGB:169, 216, 255
HSL:207deg, 100%, 83%
acc-5
HEX:
#d8edff
RGB:216, 237, 255
HSL:207deg, 100%, 92%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #004176;"
>
<div class="p_3 bg_acc-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#00070c</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 7, 12</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 2%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#000e1a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 14, 26</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#001a2f</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 26, 47</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#00294a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 41, 74</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 15%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#003764</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 55, 100</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 20%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#004176</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 65, 118</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 23%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0061b1</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 97, 177</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 35%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0890ff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>8, 144, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 52%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#62b9ff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>98, 185, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 69%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#a9d8ff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>169, 216, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 83%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#d8edff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>216, 237, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 92%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 10775
1.2.2 accent: Color Variations
The Modified versions of the accent color from this theme
Example
accent-n5
HEX:
#02100d
RGB:2, 16, 13
HSL:167deg, 76%, 4%
accent-n4
HEX:
#05241d
RGB:5, 36, 29
HSL:167deg, 76%, 8%
accent-n3
HEX:
#094135
RGB:9, 65, 53
HSL:167deg, 76%, 15%
accent-n2
HEX:
#0e6754
RGB:14, 103, 84
HSL:167deg, 76%, 23%
accent-n1
HEX:
#138b71
RGB:19, 139, 113
HSL:167deg, 76%, 31%
accent
HEX:
#16a385
RGB:22, 163, 133
HSL:167deg, 76%, 36%
accent-1
HEX:
#1ccea8
RGB:28, 206, 168
HSL:167deg, 76%, 46%
accent-2
HEX:
#4be7c5
RGB:75, 231, 197
HSL:167deg, 76%, 60%
accent-3
HEX:
#8cf0da
RGB:140, 240, 218
HSL:167deg, 76%, 75%
accent-4
HEX:
#c0f6eb
RGB:192, 246, 235
HSL:167deg, 76%, 86%
accent-5
HEX:
#e2fbf6
RGB:226, 251, 246
HSL:167deg, 76%, 94%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #16a385;"
>
<div class="p_3 bg_accent-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#02100d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>2, 16, 13</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 4%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#05241d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>5, 36, 29</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 8%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#094135</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>9, 65, 53</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 15%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0e6754</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>14, 103, 84</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 23%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#138b71</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>19, 139, 113</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 31%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#16a385</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>22, 163, 133</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 36%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#1ccea8</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>28, 206, 168</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 46%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#4be7c5</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>75, 231, 197</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 60%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#8cf0da</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>140, 240, 218</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 75%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#c0f6eb</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>192, 246, 235</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 86%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#e2fbf6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>226, 251, 246</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>167deg, 76%, 94%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 10135
1.2.3 alert: Color Variations
The Modified versions of the alert color from this theme
Example
alert-n5
HEX:
#160303
RGB:22, 3, 3
HSL:0deg, 79%, 5%
alert-n4
HEX:
#310606
RGB:49, 6, 6
HSL:0deg, 79%, 11%
alert-n3
HEX:
#580a0a
RGB:88, 10, 10
HSL:0deg, 79%, 19%
alert-n2
HEX:
#8b1010
RGB:139, 16, 16
HSL:0deg, 79%, 31%
alert-n1
HEX:
#bc1616
RGB:188, 22, 22
HSL:0deg, 79%, 41%
alert
HEX:
#dd1a1a
RGB:221, 26, 26
HSL:0deg, 79%, 48%
alert-1
HEX:
#e73737
RGB:231, 55, 55
HSL:0deg, 79%, 56%
alert-2
HEX:
#ee6b6b
RGB:238, 107, 107
HSL:0deg, 79%, 68%
alert-3
HEX:
#f4a1a1
RGB:244, 161, 161
HSL:0deg, 79%, 79%
alert-4
HEX:
#f9cbcb
RGB:249, 203, 203
HSL:0deg, 79%, 89%
alert-5
HEX:
#fce7e7
RGB:252, 231, 231
HSL:0deg, 79%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #dd1a1a;"
>
<div class="p_3 bg_alert-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#160303</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>22, 3, 3</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#310606</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>49, 6, 6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 11%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#580a0a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>88, 10, 10</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 19%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#8b1010</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>139, 16, 16</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 31%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#bc1616</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>188, 22, 22</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 41%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#dd1a1a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>221, 26, 26</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 48%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#e73737</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>231, 55, 55</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 56%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ee6b6b</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>238, 107, 107</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 68%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f4a1a1</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>244, 161, 161</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 79%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f9cbcb</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>249, 203, 203</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 89%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#fce7e7</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>252, 231, 231</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 79%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 11415
1.2.4 highlight: Color Variations
The Modified versions of the highlight color from this theme
Example
highlight-n5
HEX:
#030e11
RGB:3, 14, 17
HSL:193deg, 75%, 4%
highlight-n4
HEX:
#061f26
RGB:6, 31, 38
HSL:193deg, 75%, 9%
highlight-n3
HEX:
#0a3846
RGB:10, 56, 70
HSL:193deg, 75%, 16%
highlight-n2
HEX:
#10596e
RGB:16, 89, 110
HSL:193deg, 75%, 25%
highlight-n1
HEX:
#157894
RGB:21, 120, 148
HSL:193deg, 75%, 33%
highlight
HEX:
#198dae
RGB:25, 141, 174
HSL:193deg, 75%, 39%
highlight-1
HEX:
#1faed7
RGB:31, 174, 215
HSL:193deg, 75%, 48%
highlight-2
HEX:
#54c6e6
RGB:84, 198, 230
HSL:193deg, 75%, 62%
highlight-3
HEX:
#92dbef
RGB:146, 219, 239
HSL:193deg, 75%, 76%
highlight-4
HEX:
#c3ebf6
RGB:195, 235, 246
HSL:193deg, 75%, 87%
highlight-5
HEX:
#e4f6fb
RGB:228, 246, 251
HSL:193deg, 75%, 94%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #198dae;"
>
<div class="p_3 bg_highlight-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#030e11</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>3, 14, 17</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 4%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#061f26</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>6, 31, 38</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0a3846</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>10, 56, 70</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 16%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#10596e</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>16, 89, 110</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 25%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#157894</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>21, 120, 148</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 33%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#198dae</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>25, 141, 174</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 39%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#1faed7</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>31, 174, 215</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 48%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#54c6e6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>84, 198, 230</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 62%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#92dbef</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>146, 219, 239</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 76%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#c3ebf6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>195, 235, 246</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 87%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#e4f6fb</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>228, 246, 251</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>193deg, 75%, 94%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 11095
1.2.5 info: Color Variations
The Modified versions of the info color from this theme
Example
info-n5
HEX:
#110f0d
RGB:17, 15, 13
HSL:31deg, 11%, 6%
info-n4
HEX:
#25211e
RGB:37, 33, 30
HSL:31deg, 11%, 13%
info-n3
HEX:
#433d36
RGB:67, 61, 54
HSL:31deg, 11%, 24%
info-n2
HEX:
#6a6055
RGB:106, 96, 85
HSL:31deg, 11%, 37%
info-n1
HEX:
#8f8173
RGB:143, 129, 115
HSL:31deg, 11%, 51%
info
HEX:
#a3988c
RGB:163, 152, 140
HSL:31deg, 11%, 59%
info-1
HEX:
#b1a79d
RGB:177, 167, 157
HSL:31deg, 11%, 66%
info-2
HEX:
#c5beb7
RGB:197, 190, 183
HSL:31deg, 11%, 74%
info-3
HEX:
#dad6d1
RGB:218, 214, 209
HSL:31deg, 11%, 84%
info-4
HEX:
#ebe8e6
RGB:235, 232, 230
HSL:31deg, 11%, 91%
info-5
HEX:
#f6f5f4
RGB:246, 245, 244
HSL:31deg, 11%, 96%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #a3988c;"
>
<div class="p_3 bg_info-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#110f0d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>17, 15, 13</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 6%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#25211e</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>37, 33, 30</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 13%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#433d36</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>67, 61, 54</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 24%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#6a6055</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>106, 96, 85</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 37%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#8f8173</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>143, 129, 115</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 51%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#a3988c</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>163, 152, 140</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 59%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#b1a79d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>177, 167, 157</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 66%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#c5beb7</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>197, 190, 183</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 74%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#dad6d1</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>218, 214, 209</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 84%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ebe8e6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>235, 232, 230</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 91%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f6f5f4</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>246, 245, 244</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>31deg, 11%, 96%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 8535
1.2.7 primary: Color Variations
The Modified versions of the primary color from this theme
Example
primary-n5
HEX:
#00070c
RGB:0, 7, 12
HSL:207deg, 100%, 2%
primary-n4
HEX:
#000e1a
RGB:0, 14, 26
HSL:207deg, 100%, 5%
primary-n3
HEX:
#001a2f
RGB:0, 26, 47
HSL:207deg, 100%, 9%
primary-n2
HEX:
#00294a
RGB:0, 41, 74
HSL:207deg, 100%, 15%
primary-n1
HEX:
#003764
RGB:0, 55, 100
HSL:207deg, 100%, 20%
primary
HEX:
#004176
RGB:0, 65, 118
HSL:207deg, 100%, 23%
primary-1
HEX:
#0061b1
RGB:0, 97, 177
HSL:207deg, 100%, 35%
primary-2
HEX:
#0890ff
RGB:8, 144, 255
HSL:207deg, 100%, 52%
primary-3
HEX:
#62b9ff
RGB:98, 185, 255
HSL:207deg, 100%, 69%
primary-4
HEX:
#a9d8ff
RGB:169, 216, 255
HSL:207deg, 100%, 83%
primary-5
HEX:
#d8edff
RGB:216, 237, 255
HSL:207deg, 100%, 92%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #004176;"
>
<div class="p_3 bg_primary-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#00070c</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 7, 12</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 2%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#000e1a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 14, 26</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#001a2f</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 26, 47</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#00294a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 41, 74</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 15%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#003764</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 55, 100</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 20%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#004176</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 65, 118</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 23%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0061b1</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>0, 97, 177</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 35%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0890ff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>8, 144, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 52%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#62b9ff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>98, 185, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 69%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#a9d8ff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>169, 216, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 83%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#d8edff</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>216, 237, 255</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>207deg, 100%, 92%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 8855
1.2.8 secondary: Color Variations
The Modified versions of the secondary color from this theme
Example
secondary-n5
HEX:
#1a0a00
RGB:26, 10, 0
HSL:24deg, 100%, 5%
secondary-n4
HEX:
#381600
RGB:56, 22, 0
HSL:24deg, 100%, 11%
secondary-n3
HEX:
#662900
RGB:102, 41, 0
HSL:24deg, 100%, 20%
secondary-n2
HEX:
#a14000
RGB:161, 64, 0
HSL:24deg, 100%, 32%
secondary-n1
HEX:
#d95700
RGB:217, 87, 0
HSL:24deg, 100%, 43%
secondary
HEX:
#f60
RGB:255, 102, 0
HSL:24deg, 100%, 50%
secondary-1
HEX:
#ff7d26
RGB:255, 125, 38
HSL:24deg, 100%, 58%
secondary-2
HEX:
#ff9f5e
RGB:255, 159, 94
HSL:24deg, 100%, 69%
secondary-3
HEX:
#ffc299
RGB:255, 194, 153
HSL:24deg, 100%, 80%
secondary-4
HEX:
#ffddc7
RGB:255, 221, 199
HSL:24deg, 100%, 89%
secondary-5
HEX:
#fff0e6
RGB:255, 240, 230
HSL:24deg, 100%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #f60;"
>
<div class="p_3 bg_secondary-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#1a0a00</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>26, 10, 0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#381600</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>56, 22, 0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 11%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#662900</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>102, 41, 0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 20%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#a14000</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>161, 64, 0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 32%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#d95700</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>217, 87, 0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 43%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f60</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>255, 102, 0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 50%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ff7d26</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>255, 125, 38</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 58%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ff9f5e</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>255, 159, 94</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 69%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ffc299</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>255, 194, 153</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 80%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ffddc7</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>255, 221, 199</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 89%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#fff0e6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>255, 240, 230</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>24deg, 100%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 9495
1.2.9 shade: Color Variations
The Modified versions of the shade color from this theme
Example
shade-n5
HEX:
#0d0d0d
RGB:13, 13, 13
HSL:0deg, 0%, 5%
shade-n4
HEX:
#1d1d1d
RGB:29, 29, 29
HSL:0deg, 0%, 12%
shade-n3
HEX:
#363636
RGB:54, 54, 54
HSL:0deg, 0%, 21%
shade-n2
HEX:
#545454
RGB:84, 84, 84
HSL:0deg, 0%, 33%
shade-n1
HEX:
#727272
RGB:114, 114, 114
HSL:0deg, 0%, 45%
shade
HEX:
#868686
RGB:134, 134, 134
HSL:0deg, 0%, 53%
shade-1
HEX:
#989898
RGB:152, 152, 152
HSL:0deg, 0%, 60%
shade-2
HEX:
#b3b3b3
RGB:179, 179, 179
HSL:0deg, 0%, 70%
shade-3
HEX:
#cfcfcf
RGB:207, 207, 207
HSL:0deg, 0%, 81%
shade-4
HEX:
#e4e4e4
RGB:228, 228, 228
HSL:0deg, 0%, 90%
shade-5
HEX:
#f3f3f3
RGB:243, 243, 243
HSL:0deg, 0%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #868686;"
>
<div class="p_3 bg_shade-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0d0d0d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>13, 13, 13</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#1d1d1d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>29, 29, 29</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 12%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#363636</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>54, 54, 54</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 21%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#545454</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>84, 84, 84</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 33%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#727272</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>114, 114, 114</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 45%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#868686</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>134, 134, 134</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 53%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#989898</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>152, 152, 152</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 60%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#b3b3b3</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>179, 179, 179</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 70%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#cfcfcf</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>207, 207, 207</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 81%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#e4e4e4</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>228, 228, 228</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 90%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f3f3f3</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>243, 243, 243</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>0deg, 0%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 9175
1.2.10 success: Color Variations
The Modified versions of the success color from this theme
Example
success-n5
HEX:
#010e05
RGB:1, 14, 5
HSL:138deg, 90%, 3%
success-n4
HEX:
#021e0a
RGB:2, 30, 10
HSL:138deg, 90%, 6%
success-n3
HEX:
#033712
RGB:3, 55, 18
HSL:138deg, 90%, 11%
success-n2
HEX:
#04571d
RGB:4, 87, 29
HSL:138deg, 90%, 18%
success-n1
HEX:
#067527
RGB:6, 117, 39
HSL:138deg, 90%, 24%
success
HEX:
#078a2e
RGB:7, 138, 46
HSL:138deg, 90%, 28%
success-1
HEX:
#0abe3f
RGB:10, 190, 63
HSL:138deg, 90%, 39%
success-2
HEX:
#24f462
RGB:36, 244, 98
HSL:138deg, 90%, 55%
success-3
HEX:
#74f89b
RGB:116, 248, 155
HSL:138deg, 90%, 71%
success-4
HEX:
#b3fbc8
RGB:179, 251, 200
HSL:138deg, 90%, 84%
success-5
HEX:
#dcfde6
RGB:220, 253, 230
HSL:138deg, 90%, 93%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #078a2e;"
>
<div class="p_3 bg_success-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#010e05</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>1, 14, 5</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 3%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#021e0a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>2, 30, 10</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 6%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#033712</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>3, 55, 18</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 11%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#04571d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>4, 87, 29</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 18%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#067527</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>6, 117, 39</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 24%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#078a2e</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>7, 138, 46</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 28%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#0abe3f</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>10, 190, 63</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 39%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#24f462</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>36, 244, 98</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 55%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#74f89b</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>116, 248, 155</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 71%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#b3fbc8</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>179, 251, 200</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 84%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#dcfde6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>220, 253, 230</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>138deg, 90%, 93%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 9815
1.2.11 warning: Color Variations
The Modified versions of the warning color from this theme
Example
warning-n5
HEX:
#160d02
RGB:22, 13, 2
HSL:34deg, 86%, 5%
warning-n4
HEX:
#301d04
RGB:48, 29, 4
HSL:34deg, 86%, 10%
warning-n3
HEX:
#573406
RGB:87, 52, 6
HSL:34deg, 86%, 18%
warning-n2
HEX:
#89520a
RGB:137, 82, 10
HSL:34deg, 86%, 29%
warning-n1
HEX:
#b96f0e
RGB:185, 111, 14
HSL:34deg, 86%, 39%
warning
HEX:
#da8210
RGB:218, 130, 16
HSL:34deg, 86%, 46%
warning-1
HEX:
#ef9724
RGB:239, 151, 36
HSL:34deg, 86%, 54%
warning-2
HEX:
#f3b25d
RGB:243, 178, 93
HSL:34deg, 86%, 66%
warning-3
HEX:
#f7ce98
RGB:247, 206, 152
HSL:34deg, 86%, 78%
warning-4
HEX:
#fbe4c6
RGB:251, 228, 198
HSL:34deg, 86%, 88%
warning-5
HEX:
#fdf3e5
RGB:253, 243, 229
HSL:34deg, 86%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #da8210;"
>
<div class="p_3 bg_warning-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#160d02</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>22, 13, 2</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#301d04</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>48, 29, 4</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 10%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#573406</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>87, 52, 6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 18%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#89520a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>137, 82, 10</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 29%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#b96f0e</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>185, 111, 14</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 39%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#da8210</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>218, 130, 16</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 46%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ef9724</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>239, 151, 36</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 54%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f3b25d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>243, 178, 93</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 66%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#f7ce98</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>247, 206, 152</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 78%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#fbe4c6</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>251, 228, 198</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 88%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#fdf3e5</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>253, 243, 229</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>34deg, 86%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/journal_boot.css, line 8191
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_boot.css, line 8199
1.3.1 Accent Roboto Slab
A beuatiful 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_boot.css, line 8228
1.3.2 Display: Roboto
A Slick font that has a slight interest used for headers and UI.
Roboto font-family: "Roboto","Maven Pro","Muli","Open Sans","system",sans-serif
Ro
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_boot.css, line 8257
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/journal_boot.css, line 8286
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/journal_boot.css, line 8315
1.4 Icons: Font Awesome
Below are just a few of the icons available from Font Awesome Pro.
Example s
Default styling
[modifier class]
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_shade-4 br_solid br_1"><div class="flex"><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_shade-5 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_shade h:c_shade-n2 text font_bold font_display">[modifier class]</span></div></div></div>Code Sample
Source: dist/css/journal_boot.css, line 7431
1.5 Logos
Logos in the design come in 4 variations the primary logo, the condensed logo, and alte version which are the reverse of primary and reversed. All logos are controled by the width and will maintain there aspect ratios to respond to the container they are in. For 508 compliance please place the brand name in the logo.
Example s
Default styling
[modifier class]
.logo_primary
Primary Logo great for desktop displays best used for when the logo can be taller then 80px.
logo_primary
.logo_primary-alt
Primary Logo reversed for dark background situations.
logo_primary-alt
.logo_condensed.max-w_15
Smaller Mobile Friendly Logo these logos and be readable between 40px to 80px in height.
logo_condensed max-w_15
.logo_primary-alt.max-w_15
Smaller Logo Reversed.
logo_primary-alt max-w_15
<div class="[modifier class]" data-style="[modifier class]" >
<span class="alt">[modifier class]</span>
</div>Code Sample
Source: dist/css/journal_boot.css, line 7520
1.6 Seals
Seals in the design come in 3 variations the default, small, and tiny. All Seals will maintain their aspect ratios and will respond to the container, but seals have a max width. For 508 compliance, please place the brand name in the seal.
Example s
Default styling
[modifier class]
.seal_normal
Full size seal great for desktop displays best used for when the seal can be taller then 100px.
seal_normal
.seal_small
Condensed size seal great for Tablet displays best used for when the seal is between 100px to 40px.
seal_small
.seal_tiny
Smallest of the seals best used for icons when seal is 40px and bellow
seal_tiny
<div class="[modifier class] m_auto" data-style="[modifier class]">
<span class="alt-text">[modifier class]</span>
</div>Code Sample
Source: dist/css/journal_boot.css, line 8517
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
Default styling
[modifier class] with a light primary color background
.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>