Typography

Fonts

Primary font: LL Replica Regular Web

Secondary font: IBM Plex Mono

              
// Variables

$primary-font: 'LL Replica Regular Web', sans-serif;
$secondary-font: 'IBM Plex Mono', monospace;

// Example usage

.my-class {
  font-family: $primary-font;
}

.another-class {
  font-family: $secondary-font;
}
              
            

Type sizes

  • XXL: 6rem
  • XL: 4.2rem
  • L: 2.7rem
  • M: 2.4rem
  • SM: 2.1rem
  • XS: 1.8rem
  • XXS: 1.5rem
  • XXXS: 1.2rem

REMs

The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

              
  // Variables

  $ft-xxl: 6rem;
  $ft-xl: 4.2rem;
  $ft-lg: 2.7rem;
  $ft-md: 2.4rem;
  $ft-sm: 2.1rem;
  $ft-xs: 1.8rem;
  $ft-xxs: 1.5rem;
  $ft-xxxs: 1.2rem;

  // Example usage

  html {
    font-size: 62.5%; // Change this global value to change overall font-size
  }

  .my-class {
    font-size: $xxl;
  }
              
            

Leading and kerning

Large type leading with kerning: used for headings and short passages of type with large font sizes.

Small type leading no kerning: used for larger bodies of type with medium to small font sizes.

              
// Variables

$kern: -0.1rem;
$blh: 1.66;
$hlh: 1.33;

// Example usage

h2 {
  line-height: $hlh;
  letter-spacing: $kern;
}

p {
  line-height: $blh;
}
              
            

Colours

Brand palette

  • Orange
  • HEX: #F39207
  • RGB: rgb(243,146,7)
  • SCSS: $color-orange
  • Green
  • HEX: #89BE2B
  • RGB: rgb(137,190,43)
  • SCSS: $color-green
  • Blue
  • HEX: #009AD8
  • RGB: rgb(0,154,216)
  • SCSS: $color-blue

Supporting palette

  • Grey
  • HEX: #49494A
  • RGB: rgb(73,73,74)
  • SCSS: $color-grey-dark
  • Cool grey
  • HEX: #777A7B
  • RGB: rgb(119,122,123)
  • SCSS: $color-grey
  • Grey light
  • HEX: #F8F8FB
  • RGB: rgb(248,248,251)
  • SCSS: $color-grey-light

Buttons

Lozenges

              
  <button class="sml-btn white">Button</button>
  <button class="sml-btn grey-light">Button</button>
  <button class="sml-btn orange">Button</button>
  <button class="sml-btn blue">Button</button>
  <button class="sml-btn green">Button</button>
  <button class="sml-btn fade">Button</button>

  // Shortcodes for supported Wordpress content areas

  [button link="/contact-us/" color="white"]White button[/button]
  [button link="/contact-us/" color="grey-light"]Grey button[/button]
  [button link="/contact-us/" color="orange"]Orange button[/button]
  [button link="/contact-us/" color="blue"]Blue button[/button]
  [button link="/contact-us/" color="green"]Green button[/button]
  [button link="/contact-us/" color="fade"]Fade button[/button]
              
            

Icons

Capability icons

  • icon-placeholder

    Ontology management

  • icon-placeholder

    Data cleansing + pre-processing

  • icon-placeholder

    Text analytics + semantic enrichment

  • icon-placeholder

    Search + data intelligence

Download icons

Product icons

  • icon-placeholder

    Product

Download icons
              
.my-icon {
  fill: $color-orange;
}
              
              
<svg class="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">...</svg>
              
            

Layout

Viewport measurements

There are base measurements to determine breakpoints and structural container widths.

              
// Variables

$screen-xxl: 1800px;
$screen-xl: 1600px;
$screen-lg: 1280px;
$screen-md: 1024px;
$screen-sm: 768px;
$screen-xs: 650px;
$screen-xxs: 400px;

// Media query helper mixin

@mixin mq($point) {

  @if $point == screen-xl {
    @media (min-width: $screen-xl) { @content; }
  }

  // Repeat for all viewport measurements and screen orientations

}

// Example usage

@include mq(screen-xs) {
  
  .my-class {
    width: $screen-xs;
  }

}
              
            

Global padding

A single, fixed global padding value allows for a consistent and predictable layout system. Ideal for horizontal and vertical rhythm.

              
// Global padding variables

$pad-global: 5rem;

$pad-xl: $pad-global*2;
$pad-lg: $pad-global;
$pad-md: $pad-global/2;
$pad-sm: $pad-global/4;

// Example usage

.my-class {
  margin: 0 0 $pad-lg;
  padding: 0 $pad-md;
}
              
            

Structural containers

These should only be used for major sections of a web page that have no content either side of the left and right edge.

            
// Helper mixin

@mixin inner-helper {
  width: 100%;
  margin: 0 auto;
  padding: 0 $pad-md;

    @include mq(screen-lg) {
      padding: 0 $pad-lg;
    }

}

// Example usage

.inner-md {
	@include inner-helper;

		@include mq(screen-md) {
			width: $screen-md;
		}

}
              
              
<div class="inner-xxl">...</div>
<div class="inner-xl">...</div>
<div class="inner-lg">...</div>
<div class="inner-md">...</div>
              
            

Form fields

Text inputs

              

// Single fields

<div class="contact-form__row">
  <label>Text label</label>
  <input type="text" placeholder="Text field" />
</div>

// Multiple fields

<div class="contact-form__row">
  <label>Radio group label</label>
  <div class="contact-form__row__sub-fields">
    <label><input id="radio-1" type="radio" name="radio-option" />Radio button label</label>
    <label><input id="radio-2" type="radio" name="radio-option" />Radio button label</label>
  </div>
</div>