SEEK Style Guide

Typography

Since typography forms the backbone of our design language, we have a suite of responsive typographical components to support semantic usage of our type hierarchy.

The core typographical building block is the “Text” component, which renders a block-level span element with a single grid row below it, to leave room for descenders.

It accepts a wide range of options, which can be seen below.

Living Style Guide
import {
  Text
} from 'seek-style-guide/react';


<Text hero>
  Living Style Guide
</Text>
Click to copy

To better understand these options, let’s step through them one by one.

Standard Text

By default, when no options are provided, standard text is rendered.

Standard text is 16px over 4 grid rows across both desktop and mobile.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut convallis elit convallis, bibendum mauris et, lacinia mi. Pellentesque quis arcu dignissim nibh tempor placerat et et lorem.
import {
  Text
} from 'seek-style-guide/react';


<Text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut convallis elit convallis, bibendum mauris et, lacinia mi.
  Pellentesque quis arcu dignissim nibh tempor placerat et et lorem.
</Text>
Click to copy
Large Text

In rare cases where larger text is required, you can use the “large” text variant, which is 18px over 5 grid rows on both desktop and mobile.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut convallis elit convallis, bibendum mauris et, lacinia mi. Pellentesque quis arcu dignissim nibh tempor placerat et et lorem.
import {
  Text
} from 'seek-style-guide/react';


<Text large>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut convallis elit convallis, bibendum mauris et, lacinia mi.
  Pellentesque quis arcu dignissim nibh tempor placerat et et lorem.
</Text>
Click to copy
Small Text

In rare cases where smaller text is required, you can use the “small” text variant, which is 14px over 3 grid rows on both desktop and mobile.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut convallis elit convallis, bibendum mauris et, lacinia mi. Pellentesque quis arcu dignissim nibh tempor placerat et et lorem.
import {
  Text
} from 'seek-style-guide/react';


<Text small>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut convallis elit convallis, bibendum mauris et, lacinia mi.
  Pellentesque quis arcu dignissim nibh tempor placerat et et lorem.
</Text>
Click to copy
Responsive Headings

When reading this documentation on mobile, you may be surprised to see that the headings described below all happen to look the same.

While a range of heading sizes are provided, they all render as 21px over 5 grid rows on mobile. Due to the size restrictions of mobile devices, having multiple heading sizes is more likely to lead to confusion and apparent inconsistency due to the lack of significant contrast between them. When designing a page with responsive typography, it’s important to take this into consideration by ensuring that headings on mobile are differentated in other ways, using colour or white space.

Hero Text

For page-level headings, hero text is 42px over 8 grid rows on desktop. Typically, you’ll only have a single string of hero text on any given page.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text hero>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
Headline Text

For large content-level headings, headline text is 28px over 6 grid rows on desktop.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text headline>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
Heading Text

For section-level headings, heading text is 22px over 5 grid rows on desktop. In this particular case, the text remains the same size across desktop and mobile.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text heading>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
Subheading Text

In rarer cases, for secondary section-level headings, subheading text is 18px over 4 grid rows on desktop.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text subheading>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
Weight Variants

While all elements in our type hierarchy include a default weight, you can also override these with the provided weight variants.

Strong Text

Any text element can be explicity marked as strong with the “strong” property, which also causes the element to render a “strong” tag.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text strong>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy

In cases where only a portion of a text block should be marked as strong, a “Strong” component is provided.

The last word of this sentence is strong.
import {
  Text,
  Strong
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is 
  <Strong>
    strong.
  </Strong>
</Text>
Click to copy
Regular Text

Any text element can be explicity set to regular weight with the “regular” property.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text
  hero
  regular
>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
Light Text

Finally, any text element can be explicity set to light weight with the “light” property.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text
  hero
  light
>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
Tone Variants

All text is rendered in our standard neutral shade of black by default, but sometimes text needs to be displayed with different tones.

Positive Text

Any text element can be explicity marked as positive with the “positive” property or the inline “Positive” component.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text positive>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
The last word of this sentence is positive.
import {
  Text,
  Positive
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is 
  <Positive>
    positive.
  </Positive>
</Text>
Click to copy
Critical Text

Any text element can be explicity marked as critical with the “critical” property or the inline “Critical” component.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text critical>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
The last word of this sentence is critical.
import {
  Text,
  Critical
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is 
  <Critical>
    critical.
  </Critical>
</Text>
Click to copy
Secondary Text

Any text element can be explicity marked as secondary with the “secondary” property or the inline “Secondary” component.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text secondary>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
The last word of this sentence is secondary.
import {
  Text,
  Secondary
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is 
  <Secondary>
    secondary.
  </Secondary>
</Text>
Click to copy
Highlighted Text

Any text element can be explicity marked as highlighted with the “highlight” property or the inline “Highlight” component.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text highlight>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
The last word of this sentence is highlighted.
import {
  Text,
  Highlight
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is 
  <Highlight>
    highlighted.
  </Highlight>
</Text>
Click to copy
Info Text

Any text element can be explicity marked as info with the “info” property or the inline “Info” component.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text info>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy
The last word of this sentence is info.
import {
  Text,
  Info
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is 
  <Info>
    info.
  </Info>
</Text>
Click to copy
Text Links

To create a standard text-based link, a “TextLink” component is provided.

The last word of this sentence is a link.
import {
  Text,
  TextLink
} from 'seek-style-guide/react';


<Text>
  The last word of this sentence is a 
  <TextLink href="#">
    link.
  </TextLink>
</Text>
Click to copy
Disabling Baseline

By default, all text is adjusted to sit correctly on baseline using basekick.

In some cases, when text needs to be vertically centred within a container, this isn’t the desired behaviour. To deal with this, you can optionally disable the baseline adjustment.

Lorem ipsum dolor sit amet.
import {
  Text
} from 'seek-style-guide/react';


<Text
  baseline={false}
  hero
>
  Lorem ipsum dolor sit amet.
</Text>
Click to copy