Centralised library for common styles throughout the Times

Usage no npm install needed!

<script type="module">
  import timesComponentsStyleguide from 'https://cdn.skypack.dev/@times-components/styleguide';



The styleguide package contains the shared styles and functionalities which are commonly used across Times Components packages and components. Many of the properties of the styleguide can be simply exported as named exports:

import { colours, spacing } from "@times-components/styleguide";

However, the default export is a factory method which takes a configuration object.


The styleguide default method can be called much like a factory funtion with a config object. This object includes a scale property which manages the user-controlled font size settings:

import styleguide from "@times-components/styleguide";

const { colours, fontFactory, spacing } = styleguide({ scale });


A cross-device component called FadeIn which animates a fade in


Exports functional or section based colours.


Times Components fonts and font sizes.

Font factory

The fontFactory method takes a font and fontSize, and returns an object containing the appropriate font style properties, including a lineHeight.

Line heights

Times Componets line heights. This is utilised as part of the font factory scaling.


Provides a way to standardise layout, particularly in regards to the concept of a consistent spacing layout across multiple breakpoints.


Please read CONTRIBUTING.md before contributing to this package

Running the code

Please see our main README.md to get the project running locally


The code can be formatted and linted in accordance with the agreed standards.

yarn fmt
yarn lint


This package uses yarn (latest) to run unit tests on each platform with jest.

yarn test:web

Visit the official storybook to see our available styleguide templates.