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

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>
Copy Code