<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header(); ?>

<div class="site-main">
	<div class="entry-content">

		<div class="wp-group">
			<div class="wp-group__inner-container">
				<h3>Brand Primary color palette</h3>
				<p>Each column from the color palette below represent a state where a component could be. The first row is the main surface or background color, while the other two rows are for the content.</p>
				<p>The color system generated it’s based on a set of underlying principles and guidelines, making color usage accessible and purposeful.</p>
				<h4>Text color on surfaces</h4>
				<h4>Surface colors</h4>
				<p>Surfaces are the background of any component such us a page, card or popover.</p>
				<h4>Accent color</h4>
			</div>
		</div>

		<div class="wp-group">
			<div class="wp-group__inner-container">
				<h3>Secondary color palette</h3>
				<p>A palette generated from your secondary color than can be used alternatively to the primary color palette to draw more attention to certain sections.</p>
			</div>
		</div>

		<div class="wp-group">
			<div class="wp-group__inner-container">
				<h3>Functional colors</h3>
				<p>The color system generated it’s based on a set of underlying principles and guidelines, making color usage accessible and purposeful.</p>
			</div>
		</div>

	</div>
</div>

<?php
get_footer();
