<div class="padding-md">
	<div class="grid gap-sm">
		<div class="flex items-center">	
			<div class="bg-success-lighter height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-success-lighter</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-success-light height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-success-light</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-success height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-success</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-success-dark height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-success-dark</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-success-darker height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-success-darker</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-warning-lighter height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-warning-lighter</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-warning-light height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-warning-light</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-warning height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-warning</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-warning-dark height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-warning-dark</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-warning-darker height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-warning-darker</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-error-lighter height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-error-lighter</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-error-light height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-error-light</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-error height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-error</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-error-dark height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-error-dark</p>
		</div>

		<div class="flex items-center">	
			<div class="bg-error-darker height-md width-md radius-50% margin-right-xxs"></div>
			<p class="text-sm">--color-error-darker</p>
		</div>
	</div>
</div>

// 👉https://codyhouse.co/ds/docs/framework/colors