New This website is new, your feedback will help us to improve it.

Typography

Typographic base

These styles are applied globally, and are usually inherited by other styles, to give a consistent typographic base.

  • a default medium font size:1rem
  • a default line height: 1.5
  • a default font family, which applies to most elements: Work Sans, apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif

Font families

These font families are used in the BAS Style Kit, for distinct purposes:

  • a default, sans-serif, font family is used as a catch-all including paragraph text, buttons, etc.
  • a default, serif, font family is used as a catch-all including paragraph text, buttons, etc.
  • a monotype, sans-serif, font family is used for distinguishing code from normal text

For each family, fall-back fonts are defined where the primary fonts cannot be loaded.

Font Family Primary Font Fall-back Fonts
Default Sans Work Sans system-ui, sans-serif;
Monotype Roboto Mono ui-monospace, SFMono-Regular, monospace;

Logos are protected works, they MUST be used according to the terms of their respective owners.

For each family, a series of variants are defined for styles such as italics and bold.

Font Family Variant Font Weight Sample
Default (Work Sans) Regular 300 Work Sans regular 300
Default (Work Sans) Italics 300 Work Sans italics 300
Default (Work Sans) Regular 400 Work Sans regular regular
Default (Work Sans) Italics 400 Work Sans italic regular
Default (Work Sans) Regular 500 Work Sans regular 500
Default (Work Sans) Italics 500 Work Sans italic 600
Default (Work Sans) Regular 600 Work Sans regular 600
Default (Work Sans) Italics 600 Work Sans italic 600
Default (Work Sans) Regular 600 Work Sans regular 700
Default (Work Sans) Italics 600 Work Sans italic 700
Serif (Georgia) Regular 400 Roboto Mono regular regular
Monotype (Roboto Mono) Regular 400 Roboto Mono regular regular

Headings

Heading 1

De carne animata corpora quaeritis.

Heading 2

De carne animata corpora quaeritis.

Heading 3

De carne animata corpora quaeritis.

Heading 4

De carne animata corpora quaeritis.
Heading 5
De carne animata corpora quaeritis.
Heading 6
De carne animata corpora quaeritis. 
<h1>Heading 1</h1>
De carne animata corpora quaeritis.
<h2>Heading 2</h2>
De carne animata corpora quaeritis.
<h3>Heading 3</h3>
De carne animata corpora quaeritis.
<h4>Heading 4</h4>
De carne animata corpora quaeritis.
<h5>Heading 5</h5>
De carne animata corpora quaeritis.
<h6>Heading 6</h6>
De carne animata corpora quaeritis.

Secondary headings text

Use the <small> element to add secondary text to any header.

Heading 1 secondary text

De carne animata corpora quaeritis.

Heading 2 secondary text

De carne animata corpora quaeritis.

Heading 3 secondary text

De carne animata corpora quaeritis.

Heading 4 secondary text

De carne animata corpora quaeritis.
Heading 5 secondary text
De carne animata corpora quaeritis.
Heading 6 secondary text
De carne animata corpora quaeritis. 
<h1>Heading 1 <small>secondary text</small></h1>
De carne animata corpora quaeritis.
<h2>Heading 2 <small>secondary text</small></h2>
De carne animata corpora quaeritis.
<h3>Heading 3 <small>secondary text</small></h3>
De carne animata corpora quaeritis.
<h4>Heading 4 <small>secondary text</small></h4>
De carne animata corpora quaeritis.
<h5>Heading 5 <small>secondary text</small></h5>
De carne animata corpora quaeritis.
<h6>Heading 6 <small>secondary text</small></h6>
De carne animata corpora quaeritis.

Paragraphs

Paragraphs receive a top padding set by margin-top: var(--spacing-small); which has the value 0.75rem;

The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to global problems. We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar regions.

<p>The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to global problems.
We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure
that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar
regions.</p>

Lead paragraph

The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to global problems.

We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar regions.

<p class="bsk-lead">The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to
global problems.</p>
<p>We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure
that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar
regions.</p>

Font size utilities

These utilities control the font size of an element. See the Tailwind documentation for more information: https://tailwindcss.com/docs/font-size

BAS style kit supports up to text-6xl. Tailwind goes up to text-9xl however, and also supports custom sizes.

Class Size
text-xl 1.25rem
text-2xl 1.5rem
text-3xl 1.87rem
text-4xl 2.25rem
text-5xl 3rem
text-6xl 3.75rem

These styles are applied globally, and are usually inherited by other styles, to give a consistent link style.

Inline text elements

Use the <mark> tag for highlighting text.

Use the <del> tag for deleted text.

Use the <s> tag for text which is no longer accurate.

Use the <ins> tag for additional, or inserted, text.

Use the <b> tag for highlighting text without denoting additional importance.

Use the <i> tag for italicised text.

Use the <small> tag for text with less importance.

Use the <u> tag for underlined text.

Use the <strong> tag for emboldened text.

Use the <em> tag for emphasis terms.

<p>Use the <code>&lt;mark&gt;</code> tag for <mark>highlighting text</mark>.</p>
<p>Use the <code>&lt;del&gt;</code> tag for <del>deleted text</del>.</p>
<p>Use the <code>&lt;s&gt;</code> tag for <s>text which is no longer accurate</s>.</p>
<p>Use the <code>&lt;ins&gt;</code> tag for <ins>additional, or inserted, text</ins>.</p>
<p>Use the <code>&lt;b&gt;</code> tag for <b>highlighting text without denoting additional importance</b>.</p>
<p>Use the <code>&lt;i&gt;</code> tag for <i>italicised text</i>.</p>
<p>Use the <code>&lt;small&gt;</code> tag for <small>text with less importance</small>.</p>
<p>Use the <code>&lt;u&gt;</code> tag for <u>underlined text</u>.</p>
<p>Use the <code>&lt;strong&gt;</code> tag for <strong>emboldened text</strong>.</p>
<p>Use the <code>&lt;em&gt;</code> tag for <em>emphasis terms</em>.</p>

The <i> tag is also recommended for icons.

Abbreviations

Use to explain/expand abbreviations and acronyms. Additional styles will be applied where a title attribute is used.

BAS is an international leader in Antarctic science that is relevant to global problems.

<abbr title="British Antarctic Survey">BAS</abbr> is an international leader in Antarctic science that is relevant to global problems.

Blockquotes

Use for quotes, or highlighting portions of an article (pull-quotes).

I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further and discover more than ever before.

<blockquote>
  <p>I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired
    to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest
    oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further
    and discover more than ever before.</p>
</blockquote>

Blockquotes with a source

Use a <cite> wrapped in a <footer> to add source to a blockquote.

I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further and discover more than ever before.

Sir David Attenborough on the naming of the new BAS research ship, from BAS press release. 
<blockquote>
  <p>I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired
  to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest
  oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further
  and discover more than ever before.</p>
  <footer>
      Sir David Attenborough on the naming of the new BAS research ship, from  <cite title="BAS press release">
      <a href="https://www.bas.ac.uk/media-post/uks-200m-polar-research-ship-named-in-honour-of-sir-david-attenborough/">
      BAS press release</a></cite>.
  </footer>
</blockquote>

Reversed blockquotes

Blockquotes can be aligned right using .bsk-blockquote-reverse.

I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further and discover more than ever before.

Sir David Attenborough on the naming of the new BAS research ship, from BAS press release. 
<blockquote class="bsk-blockquote-reverse">
  <p>I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired
  to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest
  oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further
  and discover more than ever before.</p>
  <footer>
    Sir David Attenborough on the naming of the new BAS research ship, from  <cite title="BAS press release">
    <a href="https://www.bas.ac.uk/media-post/uks-200m-polar-research-ship-named-in-honour-of-sir-david-attenborough/">
    BAS press release</a></cite>.
  </footer>
</blockquote>

Addresses

Provides formatting for addresses or contact information. Use <br> elements to preserve structure.

Some common and recommended examples are shown below. More examples can be found in Testbed sample #0036.

Mapping and Geographic Information Centre (MAGIC)
British Antarctic Survey
High Cross, Madingley Road
Cambridge
CB3 0ET
United Kingdom
Email: magic@bas.ac.uk
Tel: +44 (0)1223 221400
Web: www.bas.ac.uk/team/magic
Connie Watson
Atmospheric Chemist
British Antarctic Survey
Email: conwat@bas.com
ORCiD: https://sandbox.orcid.org/0000-0001-8373-6934 
<address>
  <strong>Mapping and Geographic Information Centre (MAGIC)</strong><br>
  <strong>British Antarctic Survey</strong><br>
  High Cross, Madingley Road<br>
  Cambridge<br>
  CB3 0ET<br>
  United Kingdom<br>
  <i class="fa-solid fa-at" aria-hidden="true"></i> <abbr title="Email address">Email:</abbr> magic@bas.ac.uk<br>
  <i class="fa-solid fa-phone-rotary" aria-hidden="true"></i> <abbr title="Telephone">Tel:</abbr> +44 (0)1223 221400<br>
  <i class="fa-regular fa-globe" aria-hidden="true"></i> <abbr title="Website">Web:</abbr> <a href="https://www.bas.ac.uk/team/magic">www.bas.ac.uk/team/magic</a>
</address>

<address>
  <strong>Connie Watson</strong><br>
  <strong><em>Atmospheric Chemist</em></strong><br>
  <strong>British Antarctic Survey</strong><br>
  <i class="fa-solid fa-at" aria-hidden="true"></i> <abbr title="Email address">Email:</abbr> <a href="mailto:#">conwat@bas.com</a><br>
  <i class="fa-brands fa-orcid orcid-text-green" aria-hidden="true"></i> <abbr title="ORCID iD">ORCiD:</abbr> <a href="https://sandbox.orcid.org/0000-0001-8373-6934">https://sandbox.orcid.org/0000-0001-8373-6934</a>
</address>

Horizontal rule

Use to separate content. Add the .hr-dashed class for an alternative style.

<hr/>
<hr class="hr-dashed" />

Muted text

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

<p class="bsk-text-muted">De carne animata corpora quaeritis.</p>
<p>De carne animata corpora quaeritis.</p>

Primary text

De carne animata corpora quaeritis.

<p class="bsk-text-primary">De carne animata corpora quaeritis.</p>

Experimental text

De carne animata corpora quaeritis.

<p class="bsk-text-experimental">De carne animata corpora quaeritis.</p>

Contextual text

The standard contextual colours can be used to apply context to text using these classes:

Standard Context Text Contextual Class
Success .bsk-text-success
Warning .bsk-text-warning
Danger .bsk-text-danger
Info .bsk-text-info

In some edge cases these styles will be overridden by other styles, wrapping text in a <span> should fix this.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

<p class="bsk-text-success">De carne animata corpora quaeritis.</p>
<p class="bsk-text-warning">De carne animata corpora quaeritis.</p>
<p class="bsk-text-danger">De carne animata corpora quaeritis.</p>
<p class="bsk-text-info">De carne animata corpora quaeritis.</p>

Alignment

Text alignment is done using Tailwind classes: https://tailwindcss.com/docs/text-align

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae...

<p class="text-left">De carne animata corpora quaeritis.</p>
<p class="text-center">De carne animata corpora quaeritis.</p>
<p class="text-right">De carne animata corpora quaeritis.</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-nowrap">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae...</p>

Transformations

Text transformation is done using Tailwind classes: https://tailwindcss.com/docs/text-transform

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

<p class="lowercase">De carne animata corpora quaeritis.</p>
<p class="uppercase">De carne animata corpora quaeritis.</p>
<p class="capitalize">De carne animata corpora quaeritis.</p>