Typography

Our primary typeface is Story Sans, a screen-first typeface made for Trade Me. We also use Barlow Condensed for some of the headers as part of the Trade Me Rebrand.

Font stack

General

$tg-story-sans: 'Story Sans', 'Helvetica Neue', Helvetica, Arial, Sans-serif;

Headers

$tg-barlow-condensed: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, Sans-serif;

Typography structure

Correct heading structure is important for a well structured page, and significantly aids accessibility. Each page should have only one <h1>, and other headings should use the appropriate structure level. Learn more about semantic structure and accessibility.

<h1>

Straight up & inclusive

<h2>

Straight up & inclusive

<h3>

Straight up & inclusive

.p-lead-copy

Straight up & inclusive

Used to introduce content following a heading, or as an alternate styling of <h3> when a lighter visual treatment is needed.

<label>

Straight up & inclusive

<p>

Straight up & inclusive

.p-secondary-copy

Straight up & inclusive

Secondary text is used for small amounts of additional information.

<small>

Straight up & inclusive

Should be used for legal notes or fine print.

Typography helper classes

Tangram provides classes for styling text independent of its HTML element. This allows flexibility for visual presentation without modifying the semantic structure and page hierarchy.

Paragraph styles

.p-h1-barlow

Evolving & insightful

This is the new h1 used as part of the Brand Aroha uplift for certain headers

.p-h2-barlow

Evolving & insightful

This is the new h2 used as part of the Brand Aroha uplift for certain headers

.p-h1

Evolving & insightful

.p-h2

Evolving & insightful

.p-h3

Evolving & insightful

.p-label

Evolving & insightful

.p-small

Evolving & insightful

This is our smallest font size, suitable for subtext, disclaimers or caveats. It does not meet AA accessibility standards and therefore should not be applied to critical content.

Brand titles

.p-brand-title-1

Humble

.p-brand-title-2

Humble

.p-brand-title-3

Humble

.p-brand-title-barlow-3

Humble

This is the new brand-title-3 used as part of the Brand Aroha uplift for certain headers

Typography helper mixins

Tangram provides scss mixins for styling text independent of its HTML element. This allows flexibility for visual presentation without modifying the semantic structure and page hierarchy.

Mixins

p-h1()

Evolving & insightful

p-h2()

Evolving & insightful

p-h3()

Evolving & insightful

caption()

Evolving & insightful

p-h1-barlow()

Evolving & insightful

p-h2-barlow()

Evolving & insightful

Typography variables

Tangram provides classes for styling text independent of its HTML element. This allows flexibility for visual presentation without modifying the semantic structure and page hierarchy.

Font sizes

$tg-font-size-base

Passionate advocates

A font size equivalent to 16px and used for <p>.

$tg-font-size-input-min

Passionate advocates

Inputs must use a minimum font-size of 16px or above to avoid the iOS zoom bug. Use in all inputs.

$tg-font-size-secondary

Passionate advocates

A font size equivalent to 14px and used for .p-secondary.

$tg-font-size-small

Passionate advocates

A font size equivalent to 12px and used for .p-small.

Font weights

$tg-font-weight-bold

Unexpected & driven

$tg-font-weight-medium

Unexpected & driven

$tg-font-weight-table-heading

Unexpected & driven

$tg-font-weight-label

Unexpected & driven

$tg-font-weight-regular

Unexpected & driven

$tg-font-weight-light

Unexpected & driven

Typography colors

$tg-font-color-extra-dark

Humble & human

$tg-font-color-dark

Humble & human

$tg-font-color-medium

Humble & human

$tg-font-color-body

Humble & human

$tg-font-color-light

Humble & human

$tg-font-color-extra-light

Humble & human

Line-heights

$tg-line-height-base

As passionate advocates of our users, we strive to be straight up & inclusive.

$tg-line-height-secondary

As passionate advocates of our users, we strive to be straight up & inclusive.

$tg-line-height-small

As passionate advocates of our users, we strive to be straight up & inclusive.

Address block

import { TgAddressComponent, TgAddressNameComponent, TgAddressStreetComponent, AddressComponentCityContentTag, AddressComponentCountryContentTag, AddressComponentPostcodeContentTag, AddressComponentSuburbContentTag } from '@trademe/tangram';

Name

Street address

Suburb

City

Postcode

Country

Code

<tg-address>
    <tg-address-name>
        Name
    </tg-address-name>
    <tg-address-street>
        Street address
    </tg-address-street>
    <tg-address-suburb>
        Suburb
    </tg-address-suburb>
    <tg-address-city>
        City
    </tg-address-city>
    <tg-address-postcode>
        Postcode
    </tg-address-postcode>
    <tg-address-country>
        Country
    </tg-address-country>
</tg-address>

Blockquote

import { TgBlockquoteComponent } from '@trademe/tangram';

Blockquote can be used to distinguish quoted text.

This is a blockquote

Typography

Font stack

Typography structure

Typography helper classes

Paragraph styles

Brand titles

Typography helper mixins

Mixins

Typography variables

Font sizes

Font weights

Typography colors

Line-heights

Address block

Content slots

Code

Blockquote

API option

Content slot

Code

Typography

Font stack

Typography structure

Example

Example

Example

Example

Example

Example

Example

Example

Example

Typography helper classes

Example

Paragraph styles

Example

Example

Example

Example

Example

Example

Example

Brand titles

Example

Example

Example

Example

Typography helper mixins

Example

Mixins

Example

Example

Example

Example

Example

Example

Typography variables

Example

Font sizes

Example

Example

Example

Example

Font weights

Example

Example

Example

Example

Example

Example

Typography colors

Example

Example

Example

Example

Example

Example

Line-heights

Example

Example

Example

Address block

Example

Blockquote

Example