This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: JACC & Bootstrap

Arches:JACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

navigation-n5
HEX: #040913
RGB:4, 9, 19
HSL:222deg, 63%, 5%
navigation-n4
HEX: #09132a
RGB:9, 19, 42
HSL:222deg, 63%, 10%
navigation-n3
HEX: #11234d
RGB:17, 35, 77
HSL:222deg, 63%, 18%
navigation-n2
HEX: #1b3779
RGB:27, 55, 121
HSL:222deg, 63%, 29%
navigation-n1
HEX: #254ba3
RGB:37, 75, 163
HSL:222deg, 63%, 39%
navigation
HEX: #2b58c0
RGB:43, 88, 192
HSL:222deg, 63%, 46%
navigation-1
HEX: #406dd4
RGB:64, 109, 212
HSL:222deg, 63%, 54%
navigation-2
HEX: #7193df
RGB:113, 147, 223
HSL:222deg, 63%, 66%
navigation-3
HEX: #a5baeb
RGB:165, 186, 235
HSL:222deg, 63%, 78%
navigation-4
HEX: #ced9f4
RGB:206, 217, 244
HSL:222deg, 63%, 88%
navigation-5
HEX: #e9eefa
RGB:233, 238, 250
HSL:222deg, 63%, 95% 
<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
	style="background-color: #2b58c0;"
>
	<div class="p_3 bg_navigation-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#040913</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, 9, 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"
					>222deg, 63%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#09132a</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, 19, 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"
					>222deg, 63%, 10%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#11234d</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, 35, 77</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"
					>222deg, 63%, 18%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#1b3779</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"
					>27, 55, 121</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"
					>222deg, 63%, 29%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#254ba3</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, 75, 163</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"
					>222deg, 63%, 39%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation</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"
					>#2b58c0</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"
					>43, 88, 192</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"
					>222deg, 63%, 46%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#406dd4</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"
					>64, 109, 212</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"
					>222deg, 63%, 54%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#7193df</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"
					>113, 147, 223</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"
					>222deg, 63%, 66%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#a5baeb</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"
					>165, 186, 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"
					>222deg, 63%, 78%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#ced9f4</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"
					>206, 217, 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"
					>222deg, 63%, 88%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-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"
					>#e9eefa</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"
					>233, 238, 250</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"
					>222deg, 63%, 95%</span
				>
			</div>
		</div>
	</div>
</div>
Copy Code