Colors

Shock has its own color system whose main job is simple: any element can receive a predefined color through a class. Set your palette once in theme.css and reuse it everywhere with readable class names.

The palette

Shock is built around four brand colors:

• Primary#07beb8
• Secondary#6917d0
• Tertiary#ff1791
• Accent#fedc00

They are defined as CSS variables in assets/css/theme.css, alongside the neutral colors:

assets/css/theme.css

:root {
--primary-color: #07beb8;
--secondary-color: #6917d0;
--tertiary-color: #ff1791;
--accent-color: #fedc00;
--white-color: #fff;
--gray-color: #8f93a5;
--black-color: #1a1a20;
}

Color schemes

Many components support schemes — numbered class variants that map a component’s internal color slots to your palette. For example, an arrow button switches its base color by scheme:

:root .arrow-button.scheme-1 {
--color-1: var(--black-color);
}

:root .arrow-button.scheme-2 {
--color-1: var(--white-color);
}

In your markup you then combine a scheme with a color class:

Arrow button — scheme + color

<a href="#your-link" class="button arrow-button next scheme-1 primary">
<span class="arrow">
  <span class="item"></span>
  <span class="item"></span>
</span>
<span class="line"></span>
<span class="text">GET STARTED</span>
</a>

Color classes also drive hover states. Here a shadow button turns primary on hover and animates upward:

Button with hover states

<a href="#your-link" class="button shadow black primary-hover hover-up-down">
<span class="button-text white-75 white-hover">Move Up Down</span>
<i class="fa-solid fa-arrow-right button-icon white-75 white-hover"></i>
</a>

One file to rule the palette

Recoloring the whole template is as simple as editing the four brand values in theme.css. Because every component references these variables, your new colors flow everywhere automatically.

Continue to IconsUse 3,000+ icons from Font Awesome and the Ionic set.