Source: _frost-styleguide.scss, line 5
Example

The Frost font is Sailec.

Fonts

Black

Sailec Black .font--family-black

Bold

Sailec Bold .font--family-bold

Medium

Sailec Medium .font--family-medium

Regular

Sailec Regular .font--family-regular

Light

Sailec Light .font--family-light




Type Sizes

All type sizes and line heights come from a typographic scale, which has a base copy size of 18px.




Headings

There are a range of heading sizes from H1 to H5, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.

Header 1

.font--large (Used for headers and landing pages)
Current breakpoint: LG
font-size: 83px / line-height: 83px
Current breakpoint: MD
font-size: 74px / line-height: 75px
Current breakpoint: SM
font-size: 66px / line-height: 68px

Header 1

.font--large (Used for secondary and pages headers)
Current breakpoint: LG
font-size: 58px / line-height: 62px
Current breakpoint: MD
font-size: 52px / line-height: 57px
Current breakpoint: SM
font-size: 41px / line-height: 48px

Header 2

Current breakpoint: LG
font-size: 41px / line-height: 48px
Current breakpoint: MD
font-size: 36px / line-height: 44px
Current breakpoint: SM
font-size: 32px / line-height: 41px

Header 3

Current breakpoint: LG
font-size: 26px / line-height: 35px
Current breakpoint: MD
font-size: 26px / line-height: 35px
Current breakpoint: SM
font-size: 29px / line-height: 38px

Header 4

Current breakpoint: LG
font-size: 20px / line-height: 31px
Current breakpoint: MD
font-size: 20px / line-height: 31px
Current breakpoint: SM
font-size: 23px / line-height: 33px

Header 5

Current breakpoint: LG
font-size: 18px / line-height: 29px
Current breakpoint: MD
font-size: 18px / line-height: 29px
Current breakpoint: SM
font-size: 20px / line-height: 31px




Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--xlarge
Current breakpoint: LG
font-size: 23px / line-height: 33px
Current breakpoint: MD
font-size: 23px / line-height: 28px
Current breakpoint: SM
font-size: 23px / line-height: 28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--large
Current breakpoint: LG
font-size: 20px / line-height: 31px
Current breakpoint: MD
font-size: 20px / line-height: 31px
Current breakpoint: SM
font-size: 20px / line-height: 31px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 18px / line-height: 29px
Current breakpoint: MD
font-size: 18px / line-height: 29px
Current breakpoint: SM
font-size: 18px / line-height: 29px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--small
Current breakpoint: LG
font-size: 16px / line-height: 27px
Current breakpoint: MD
font-size: 16px / line-height: 27px
Current breakpoint: SM
font-size: 16px / line-height: 27px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--xsmall
Current breakpoint: LG
font-size: 14px / line-height: 26px
Current breakpoint: MD
font-size: 14px / line-height: 26px
Current breakpoint: SM
font-size: 14px / line-height: 26px


Red font .font--red There are a range of paragraph sizes, using the typographic scale.

Purple font .font--purple There are a range of paragraph sizes, using the typographic scale.

Royal Blue font .font--royal-blue There are a range of paragraph sizes, using the typographic scale.

White font .font--white There are a range of paragraph sizes, using the typographic scale.

Mint Green font .font--mint-green There are a range of paragraph sizes, using the typographic scale.

Markup: core/variables/typography.twig
<style>
.breakpoint-lg, .breakpoint-md{display:none}
.breakpoint-sm{display:inline-block}
@media (min-width: 740px){
  .breakpoint-md{display:inline-block}
  .breakpoint-sm, .breakpoint-lg {display:none}
}
@media (min-width: 1024px){
  .breakpoint-lg {display:inline-block}
  .breakpoint-sm, .breakpoint-md{display:none}
}
</style>
<p>The Frost font is Sailec. </p>
<h3>Fonts</h3>
<h1 class="font--family-black">Black</h1>
<p>Sailec Black <b>.font--family-black</b></p>
<h1 class="font--family-bold">Bold</h1>
<p>Sailec Bold <b>.font--family-bold</b></p>
<h1 class="font--family-medium">Medium</h1>
<p>Sailec Medium <b>.font--family-medium</b></p>
<h1 class="font--family-regular">Regular</h1>
<p>Sailec Regular <b>.font--family-regular</b></p>
<h1 class="font--family-light">Light</h1>
<p>Sailec Light <b>.font--family-light</b></p>
<br/>
<br/>
<br/>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, which has a base copy size of 18px.</p>
<br/>
<br/>
<br/>
<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H5, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>

<h1 class="font--xlarge">Header 1</h1>
<p>
  <span><b>.font--large</b> (Used for headers and landing pages)<br/></span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 83px / line-height: 83px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 74px / line-height: 75px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 66px / line-height: 68px</span>
</p>

<h1 class="font--large">Header 1</h1>
<p>
  <span><b>.font--large</b> (Used for secondary and pages headers)<br/></span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 58px / line-height: 62px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 52px / line-height: 57px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 41px / line-height: 48px</span>
<p>
<h2>Header 2</h2>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 41px / line-height: 48px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 36px / line-height: 44px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 32px / line-height: 41px</span>
</p>

<h3>Header 3</h3>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 26px / line-height: 35px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 26px / line-height: 35px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 29px / line-height: 38px</span>
</p>
<h4>Header 4</h4>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 33px</span>
</p>
<h5>Header 5</h5>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 31px</span>
</p>
<br/>
<br/>
<br/>
<h3>Paragraphs</h3>
<p class="font--xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--xlarge</b><br/>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 33px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 23px / line-height: 28px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 28px</span>
</p>
<p class="font--large">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--large</b><br/>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 31px</span>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 29px</span> 
</p>
<p class="font--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--small"><b>.font--small</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 16px / line-height: 27px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 27px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 27px</span> 
</p>

<p class="font--xsmall">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--xsmall"><b>.font--xsmall</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 14px / line-height: 26px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 14px / line-height: 26px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 14px / line-height: 26px</span>
</p>
<br/>
<p class="font--red">Red font <i>.font--red</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--purple">Purple font <i>.font--purple</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--royal-blue">Royal Blue font <i>.font--royal-blue</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white bg--black" style="padding: 5px;">White font <i>.font--white</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--mint-green bg--black" style="padding: 5px;">Mint Green font <i>.font--mint-green</i> There are a range of paragraph sizes, using the typographic scale.</p>
Source: core/variables/_typography.scss, line 2
Example

Link

This is an example of an inline link, this will be the same for all coloured links above.

Markup: links.twig
<p>
  <a class="link {{modifier_class}}" href="#">
    Link
  </a>
</p>

<p>
  This is an example of an <a class="link {{modifier_class}} inline">inline link</a>, this will be the same for all coloured links above.
</p>
Source: _frost-styleguide.scss, line 15

Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Founders Grotesk Semibold font.

Example
Primary buttons
Markup: buttons.twig
<a class="btn {{modifier_class}}" href="#">
  Primary buttons
</a>
<button class="btn {{modifier_class}}">Native button</button>
Source: _frost-styleguide.scss, line 21
Example

Primary palette

Across the site we use


$colour-red

#f04257


$colour-white

#fff


$colour-purple

#7d2ca9

Secondary palette

Across the site we use


$colour-blue

#22d2dc


$colour-yellow

#fbef51


$colour-green

#b2e55e


$colour-teal

#00beca



$colour-royal-blue

#0565d1


$colour-pink

#fc9eb9


$colour-dark-blue

#061d38

Greyscale palette

Across the site we use


$colour-black

#030e1a


$colour-jasper-grey

#666


$colour-gainsboro-grey

#c7c7c7


$colour-light-grey

#e6e3dc


$colour-smoke-grey

#f0f0f0

Markup: colour.twig
<h3>Primary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-red</p>
	<p>#f04257</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; width: 99px;"></div>
	<p><br/>$colour-white</p>
	<p>#fff</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-purple</p>
	<p>#7d2ca9</p>
</div>
<h3>Secondary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--blue" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-blue</p>
	<p>#22d2dc</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--yellow" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-yellow</p>
	<p>#fbef51</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--green" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-green</p>
	<p>#b2e55e</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--teal"  style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-teal</p>
	<p>#00beca</p>
</div>
<br/>
<div style="display: inline-block; margin: 10px">
	<div class="bg--royal-blue" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-royal-blue</p>
	<p>#0565d1</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--pink" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-pink</p>
	<p>#fc9eb9</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-blue" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-dark-blue</p>
	<p>#061d38</p>
</div>
<h3>Greyscale palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--black" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-black</p>
	<p>#030e1a</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--jasper-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-jasper-grey</p>
	<p>#666</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--gainsboro-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-gainsboro-grey</p>
	<p>#c7c7c7</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--light-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-light-grey</p>
	<p>#e6e3dc</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--smoke-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-smoke-grey</p>
	<p>#f0f0f0</p>
</div>
Source: _frost-styleguide.scss, line 29
Example


$colour-red: #f04257;


$colour-blue: #22d2dc;


$colour-yellow: #fbef51;


$colour-green: #b2e55e;


$colour-teal: #00beca;


$colour-royal-blue: #0565d1;


$colour-purple: #7d2ca9;


$colour-pink: #fc9eb9;


$colour-black: #030e1a;


$colour-dark-blue #061d38;


$colour-jasper-grey: #666;


$colour-gainsboro-grey: #c7c7c7;


$colour-light-grey: #e6e3dc;


$colour-smoke-grey: #f0f0f0;

Markup: background-colours.twig
<div class="bg--red" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-red: #f04257;</p>
<div class="bg--blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-blue: #22d2dc;</p>
<div class="bg--yellow" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-yellow: #fbef51;</p>
<div class="bg--green" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-green: #b2e55e;</p>
<div class="bg--teal"  style="height: 100px; width: 100%;"></div>
<p><br/>$colour-teal: #00beca;</p>
<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-royal-blue: #0565d1;</p>
<div class="bg--purple" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-purple: #7d2ca9;</p>
<div class="bg--pink" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-pink: #fc9eb9;</p>
<div class="bg--black" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-black: #030e1a;</p>
<div class="bg--dark-blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-dark-blue #061d38;</p>
<div class="bg--jasper-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-jasper-grey: #666;</p>
<div class="bg--gainsboro-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-gainsboro-grey: #c7c7c7;</p>
<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-light-grey: #e6e3dc;</p>
<div class="bg--smoke-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-smoke-grey: #f0f0f0;</p>
Source: _frost-styleguide.scss, line 35
Example
Markup
<a href="#" class="external-link">External Link</a>
Source: _frost-styleguide.scss, line 43
Example
  • Item 1
  • Item 2
  • Item 3
  • Item 4
Markup
<div class="cr-body">
 <ul>
   <li>Item 1</li>
	  <li>Item 2</li>
	  <li>Item 3</li>
	  <li>Item 4</li>
 </ul>
</div>
Source: _frost-styleguide.scss, line 50
Example
table.twig NOT FOUND!
Source: _frost-styleguide.scss, line 66
Example

Markup: core/components/form--frost.twig
<form>
  <div>
    <select>
      <option value selected="selected">- Please select -</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <br>
  </div>
  <div class="form__field form__field--checkbox password-checkbox">
    <label for="cb" class="checkbox">
    <input type="checkbox" id="cb">
    <span class="checkbox"></span>
    <span class="form__field--copy" style="display: block; margin-top: 10px;">This is a checkbox</span>
    </label>
  </div>
  <fieldset class="form__fieldset">
    <div class="form__field ">
      <div class="form__field form__field--radio">
        <input type="radio" id="radiobuttons1" name="radiobuttons">
        <label for="radiobuttons1" id="labelForRadiobuttons1" class="radio">
        <span class="radio"></span>
        <span class="form__field--copy">
        <span>I like radio buttons</span>
        </span>
        </label>
      </div>
      <div class="form__field form__field--radio">
        <input type="radio" id="radiobuttons2" name="radiobuttons">
        <label for="radiobuttons2" id="labelForRadiobuttons2" class="radio">
        <span class="radio"></span>
        <span class="form__field--copy">
        <span>I <strong>love</strong> radio buttons</span>
        </span>
        </label>
      </div>
    </div>
  </fieldset>
  <div></div>
  <div>
    <textarea>This is text area</textarea>
  </div>
  <div>
    <input type="submit">
  </div>
</form>
Source: _frost-styleguide.scss, line 74