KSS Style Guide

Brand Colors

Colors that are used in the theme.

  • #1bb999

    Primary
    main theme color
  • #2c3e51

    Secondary
    secondary theme color
  • #3adb76

    Success
    secondary theme color
  • #de350b

    Warning
    Warning Theme Color
  • #f4f4f4

    Gray1
    secondary theme color
  • #dcdcdc

    Gray2
    secondary theme color
  • #b0bec5

    Gray3
    secondary theme color
  • #eeeeee

    Gray4
    secondary theme color
  • #546e7a

    Dark-gray1
    secondary theme color
  • #37474f

    Dark-gray2
    secondary Dark Grey theme color
  • #000000

    Text
    Theme text color
  • #37474d

    Text-Lighten
    Lighter tex color
  • #ffffff

    Invert
    Theme invert color
  • #fbfbfb

    Invert-darken
    Darken invert color
<insert-markup>1.global.typography-</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Proin pretium tellus nec est porta, in pulvinar magna egestas. Vestibulum ultrices tortor vitae leo volutpat, ac luctus nunc placerat. Suspendisse aliquet egestas lacinia. Nulla iaculis ultricies augue, nec volutpat lacus dapibus non. Aliquam eu nunc eu lectus vestibulum dapibus. Suspendisse vulputate urna ac tellus malesuada, non aliquam urna efficitur. Mauris magna urna, dapibus eu justo id, commodo egestas velit. In posuere sed dolor a ornare. Phasellus luctus rhoncus vulputate. Sed nec ultrices dolor. Cras et urna viverra felis ornare volutpat id nec erat. Fusce placerat luctus tempor. Donec ultrices sem tincidunt arcu imperdiet, nec porta ligula dapibus. Nam venenatis dapibus dictum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Aliquam eu augue at elit lacinia pretium id sit amet lacus.
  • Suspendisse non sapien vitae ipsum aliquet interdum.
  • Aliquam faucibus odio id nibh facilisis lacinia ut ac felis.
  • Etiam nec libero id nisl vestibulum ullamcorper.
  • Cras tempus nisl vitae aliquam venenatis.
Markup: ..\..\styleguide\templates\global\typography.html
<div class="rocksite-o-content">
<div class="rocksite-o-content__entry">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>

<p>Proin pretium tellus nec est porta, in pulvinar magna egestas. Vestibulum ultrices tortor vitae leo volutpat, ac luctus nunc placerat. Suspendisse aliquet egestas lacinia. Nulla iaculis ultricies augue, nec volutpat lacus dapibus non. Aliquam eu nunc eu lectus vestibulum dapibus. Suspendisse vulputate urna ac tellus malesuada, non aliquam urna efficitur. Mauris magna urna, dapibus eu justo id, commodo egestas velit. In posuere sed dolor a ornare. Phasellus luctus rhoncus vulputate. Sed nec ultrices dolor. Cras et urna viverra felis ornare volutpat id nec erat. Fusce placerat luctus tempor. Donec ultrices sem tincidunt arcu imperdiet, nec porta ligula dapibus. Nam venenatis dapibus dictum.</p>

<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li>Aliquam eu augue at elit lacinia pretium id sit amet lacus.</li>
	<li>Suspendisse non sapien vitae ipsum aliquet interdum.</li>
	<li>Aliquam faucibus odio id nibh facilisis lacinia ut ac felis.</li>
	<li>Etiam nec libero id nisl vestibulum ullamcorper.</li>
	<li>Cras tempus nisl vitae aliquam venenatis.</li>
</ul>
</div>
</div>
Source: ../source/scss/generic/framework/_content.scss, line 1