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

secondary-n5
HEX: #001012
RGB:0, 16, 18
HSL:187deg, 100%, 3%
secondary-n4
HEX: #002327
RGB:0, 35, 39
HSL:187deg, 100%, 8%
secondary-n3
HEX: #003f47
RGB:0, 63, 71
HSL:187deg, 100%, 14%
secondary-n2
HEX: #006370
RGB:0, 99, 112
HSL:187deg, 100%, 22%
secondary-n1
HEX: #008596
RGB:0, 133, 150
HSL:187deg, 100%, 30%
secondary
HEX: #009db1
RGB:0, 157, 177
HSL:187deg, 100%, 35%
secondary-1
HEX: #00c9e3
RGB:0, 201, 227
HSL:187deg, 100%, 45%
secondary-2
HEX: #2de7ff
RGB:45, 231, 255
HSL:187deg, 100%, 59%
secondary-3
HEX: #7af0ff
RGB:122, 240, 255
HSL:187deg, 100%, 74%
secondary-4
HEX: #b6f7ff
RGB:182, 247, 255
HSL:187deg, 100%, 86%
secondary-5
HEX: #defbff
RGB:222, 251, 255
HSL:187deg, 100%, 93%
<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
	style="background-color: #009db1;"
>
	<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"
					>#001012</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, 16, 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"
					>187deg, 100%, 3%</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"
					>#002327</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, 35, 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"
					>187deg, 100%, 8%</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"
					>#003f47</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, 63, 71</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"
					>187deg, 100%, 14%</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"
					>#006370</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, 99, 112</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"
					>187deg, 100%, 22%</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"
					>#008596</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, 133, 150</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"
					>187deg, 100%, 30%</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"
					>#009db1</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, 157, 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"
					>187deg, 100%, 35%</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"
					>#00c9e3</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, 201, 227</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"
					>187deg, 100%, 45%</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"
					>#2de7ff</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"
					>45, 231, 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"
					>187deg, 100%, 59%</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"
					>#7af0ff</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"
					>122, 240, 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"
					>187deg, 100%, 74%</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"
					>#b6f7ff</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"
					>182, 247, 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"
					>187deg, 100%, 86%</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"
					>#defbff</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"
					>222, 251, 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"
					>187deg, 100%, 93%</span
				>
			</div>
		</div>
	</div>
</div>
Copy Code