Source: dist/css/virtual_boot.css, line 15133
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/virtual_boot.css, line 15297
1.1 Theme Colors
Colors are based off of the ACC Scrub Colors.
-
#198dae; primary
map-get($theme-palette, primary) -
#676a72; secondary
map-get($theme-palette, secondary) -
#898989; shade
map-get($theme-palette, shade) -
#16a385; accent
map-get($theme-palette, accent) -
#a3988c; info
map-get($theme-palette, info) -
#7742bd; highlight
map-get($theme-palette, highlight)
Source: dist/css/virtual_boot.css, line 15289
1.1.1 ACC's Blue
-
#004176; acc
$acc-blue
Source: dist/css/virtual_boot.css, line 15314
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/virtual_boot.css, line 15327
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/virtual_boot.css, line 15396
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/virtual_boot.css, line 15369
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/virtual_boot.css, line 15336
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/virtual_boot.css, line 15353
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/virtual_boot.css, line 15449
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/virtual_boot.css, line 15423
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/virtual_boot.css, line 19006
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/virtual_boot.css, line 18686
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/virtual_boot.css, line 17726
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/virtual_boot.css, line 17086
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/virtual_boot.css, line 18366
1.2.4 highlight: Color Variations
The Modified versions of the highlight color from this theme
Example
highlight-n5
HEX:
#0c0713
RGB:12, 7, 19
HSL:266deg, 48%, 5%
highlight-n4
HEX:
#1a0f2a
RGB:26, 15, 42
HSL:266deg, 48%, 11%
highlight-n3
HEX:
#301a4c
RGB:48, 26, 76
HSL:266deg, 48%, 20%
highlight-n2
HEX:
#4b2a77
RGB:75, 42, 119
HSL:266deg, 48%, 32%
highlight-n1
HEX:
#6538a1
RGB:101, 56, 161
HSL:266deg, 48%, 43%
highlight
HEX:
#7742bd
RGB:119, 66, 189
HSL:266deg, 48%, 50%
highlight-1
HEX:
#8b5ec7
RGB:139, 94, 199
HSL:266deg, 48%, 58%
highlight-2
HEX:
#a988d5
RGB:169, 136, 213
HSL:266deg, 48%, 69%
highlight-3
HEX:
#c9b3e5
RGB:201, 179, 229
HSL:266deg, 48%, 80%
highlight-4
HEX:
#e1d5f0
RGB:225, 213, 240
HSL:266deg, 48%, 89%
highlight-5
HEX:
#f1ecf8
RGB:241, 236, 248
HSL:266deg, 48%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #7742bd;"
>
<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"
>#0c0713</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"
>12, 7, 19</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"
>266deg, 48%, 5%</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"
>#1a0f2a</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, 15, 42</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"
>266deg, 48%, 11%</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"
>#301a4c</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, 26, 76</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"
>266deg, 48%, 20%</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"
>#4b2a77</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, 42, 119</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"
>266deg, 48%, 32%</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"
>#6538a1</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"
>101, 56, 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"
>266deg, 48%, 43%</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"
>#7742bd</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"
>119, 66, 189</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"
>266deg, 48%, 50%</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"
>#8b5ec7</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, 94, 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"
>266deg, 48%, 58%</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"
>#a988d5</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, 136, 213</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"
>266deg, 48%, 69%</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"
>#c9b3e5</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"
>201, 179, 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"
>266deg, 48%, 80%</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"
>#e1d5f0</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"
>225, 213, 240</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"
>266deg, 48%, 89%</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"
>#f1ecf8</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"
>241, 236, 248</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"
>266deg, 48%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 18046
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/virtual_boot.css, line 15486
1.2.7 primary: Color Variations
The Modified versions of the primary color from this theme
Example
primary-n5
HEX:
#030e11
RGB:3, 14, 17
HSL:193deg, 75%, 4%
primary-n4
HEX:
#061f26
RGB:6, 31, 38
HSL:193deg, 75%, 9%
primary-n3
HEX:
#0a3846
RGB:10, 56, 70
HSL:193deg, 75%, 16%
primary-n2
HEX:
#10596e
RGB:16, 89, 110
HSL:193deg, 75%, 25%
primary-n1
HEX:
#157894
RGB:21, 120, 148
HSL:193deg, 75%, 33%
primary
HEX:
#198dae
RGB:25, 141, 174
HSL:193deg, 75%, 39%
primary-1
HEX:
#1faed7
RGB:31, 174, 215
HSL:193deg, 75%, 48%
primary-2
HEX:
#54c6e6
RGB:84, 198, 230
HSL:193deg, 75%, 62%
primary-3
HEX:
#92dbef
RGB:146, 219, 239
HSL:193deg, 75%, 76%
primary-4
HEX:
#c3ebf6
RGB:195, 235, 246
HSL:193deg, 75%, 87%
primary-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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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_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"
>#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/virtual_boot.css, line 15806
1.2.8 secondary: Color Variations
The Modified versions of the secondary color from this theme
Example
secondary-n5
HEX:
#0a0b0b
RGB:10, 11, 11
HSL:224deg, 5%, 4%
secondary-n4
HEX:
#171719
RGB:23, 23, 25
HSL:224deg, 5%, 9%
secondary-n3
HEX:
#292a2e
RGB:41, 42, 46
HSL:224deg, 5%, 17%
secondary-n2
HEX:
#414348
RGB:65, 67, 72
HSL:224deg, 5%, 27%
secondary-n1
HEX:
#585a61
RGB:88, 90, 97
HSL:224deg, 5%, 36%
secondary
HEX:
#676a72
RGB:103, 106, 114
HSL:224deg, 5%, 43%
secondary-1
HEX:
#7c8089
RGB:124, 128, 137
HSL:224deg, 5%, 51%
secondary-2
HEX:
#9ea1a7
RGB:158, 161, 167
HSL:224deg, 5%, 64%
secondary-3
HEX:
#c1c3c7
RGB:193, 195, 199
HSL:224deg, 5%, 77%
secondary-4
HEX:
#dddee0
RGB:221, 222, 224
HSL:224deg, 5%, 87%
secondary-5
HEX:
#f0f0f1
RGB:240, 240, 241
HSL:224deg, 5%, 94%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #676a72;"
>
<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"
>#0a0b0b</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, 11, 11</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"
>224deg, 5%, 4%</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"
>#171719</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"
>23, 23, 25</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"
>224deg, 5%, 9%</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"
>#292a2e</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"
>41, 42, 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"
>224deg, 5%, 17%</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"
>#414348</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"
>65, 67, 72</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"
>224deg, 5%, 27%</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"
>#585a61</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, 90, 97</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"
>224deg, 5%, 36%</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"
>#676a72</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"
>103, 106, 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"
>224deg, 5%, 43%</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"
>#7c8089</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"
>124, 128, 137</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"
>224deg, 5%, 51%</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"
>#9ea1a7</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"
>158, 161, 167</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"
>224deg, 5%, 64%</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"
>#c1c3c7</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"
>193, 195, 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"
>224deg, 5%, 77%</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"
>#dddee0</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, 222, 224</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"
>224deg, 5%, 87%</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"
>#f0f0f1</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"
>240, 240, 241</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"
>224deg, 5%, 94%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 16446
1.2.9 shade: Color Variations
The Modified versions of the shade color from this theme
Example
shade-n5
HEX:
#0e0e0e
RGB:14, 14, 14
HSL:0deg, 0%, 5%
shade-n4
HEX:
#1e1e1e
RGB:30, 30, 30
HSL:0deg, 0%, 12%
shade-n3
HEX:
#373737
RGB:55, 55, 55
HSL:0deg, 0%, 21%
shade-n2
HEX:
#565656
RGB:86, 86, 86
HSL:0deg, 0%, 34%
shade-n1
HEX:
#747474
RGB:116, 116, 116
HSL:0deg, 0%, 46%
shade
HEX:
#898989
RGB:137, 137, 137
HSL:0deg, 0%, 54%
shade-1
HEX:
#9b9b9b
RGB:155, 155, 155
HSL:0deg, 0%, 61%
shade-2
HEX:
#b5b5b5
RGB:181, 181, 181
HSL:0deg, 0%, 71%
shade-3
HEX:
#d0d0d0
RGB:208, 208, 208
HSL:0deg, 0%, 81%
shade-4
HEX:
#e5e5e5
RGB:229, 229, 229
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: #898989;"
>
<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"
>#0e0e0e</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, 14, 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"
>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"
>#1e1e1e</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"
>30, 30, 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"
>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"
>#373737</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"
>55, 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, 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"
>#565656</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"
>86, 86, 86</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%, 34%</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"
>#747474</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, 116, 116</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%, 46%</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"
>#898989</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, 137, 137</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%, 54%</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"
>#9b9b9b</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"
>155, 155, 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"
>0deg, 0%, 61%</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"
>#b5b5b5</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"
>181, 181, 181</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%, 71%</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"
>#d0d0d0</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"
>208, 208, 208</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"
>#e5e5e5</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"
>229, 229, 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"
>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/virtual_boot.css, line 16126
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/virtual_boot.css, line 16766
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/virtual_boot.css, line 15142
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/virtual_boot.css, line 15150
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,serif, "slab"
RS
Accent Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source: dist/css/virtual_boot.css, line 15179
1.3.2 Display: Maven Pro
A Slick font that has a slight interest used for headers and UI.
Maven Pro font-family: "Maven Pro","Muli","Open Sans","system",sans-serif
MP
Display Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source: dist/css/virtual_boot.css, line 15208
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/virtual_boot.css, line 15237
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/virtual_boot.css, line 15266
1.4 Icons: Font Awesome
Below are just a few of the icons available from Font Awesome Pro.
Example s
Default styling
[modifier]
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]"></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]</span></div></div></div>Code Sample
Source: dist/css/virtual_boot.css, line 14382
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]
.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]" data-style="[modifier]" >
<span class="alt">[modifier]</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 14471
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]
.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] m_auto" data-style="[modifier]">
<span class="alt-text">[modifier]</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 15468
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] 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] p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4">[modifier] with a light primary color background</div>