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: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Example

highlight-n5
HEX: #1f1702
RGB:31, 23, 2
HSL:44deg, 89%, 6%
highlight-n4
HEX: #433304
RGB:67, 51, 4
HSL:44deg, 89%, 14%
highlight-n3
HEX: #7b5d07
RGB:123, 93, 7
HSL:44deg, 89%, 25%
highlight-n2
HEX: #c1920b
RGB:193, 146, 11
HSL:44deg, 89%, 40%
highlight-n1
HEX: #f2bc21
RGB:242, 188, 33
HSL:44deg, 89%, 54%
highlight
HEX: #f5ca4f
RGB:245, 202, 79
HSL:44deg, 89%, 64%
highlight-1
HEX: #f7d269
RGB:247, 210, 105
HSL:44deg, 89%, 69%
highlight-2
HEX: #f9de90
RGB:249, 222, 144
HSL:44deg, 89%, 77%
highlight-3
HEX: #fbeab9
RGB:251, 234, 185
HSL:44deg, 89%, 85%
highlight-4
HEX: #fdf3d8
RGB:253, 243, 216
HSL:44deg, 89%, 92%
highlight-5
HEX: #fefaed
RGB:254, 250, 237
HSL:44deg, 89%, 96% 
<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
	style="background-color: #f5ca4f;"
>
	<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"
					>#1f1702</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, 23, 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"
					>44deg, 89%, 6%</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"
					>#433304</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, 51, 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"
					>44deg, 89%, 14%</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"
					>#7b5d07</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"
					>123, 93, 7</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"
					>44deg, 89%, 25%</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"
					>#c1920b</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, 146, 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"
					>44deg, 89%, 40%</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"
					>#f2bc21</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"
					>242, 188, 33</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"
					>44deg, 89%, 54%</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"
					>#f5ca4f</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"
					>245, 202, 79</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"
					>44deg, 89%, 64%</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"
					>#f7d269</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, 210, 105</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"
					>44deg, 89%, 69%</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"
					>#f9de90</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, 222, 144</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"
					>44deg, 89%, 77%</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"
					>#fbeab9</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, 234, 185</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"
					>44deg, 89%, 85%</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"
					>#fdf3d8</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, 216</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"
					>44deg, 89%, 92%</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"
					>#fefaed</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"
					>254, 250, 237</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"
					>44deg, 89%, 96%</span
				>
			</div>
		</div>
	</div>
</div>
Copy Code