Skip to content

Type and style

This page shows every style the documentation uses, so the type scale and the colours can be reviewed in one place. Switch between light and dark in the header to see both. It is not linked from the navigation.

Body text is 16px Inter at a line height of 1.65. Text can be italic, which uses Inter's own italic face, or medium weight for emphasis. A link to the download page is in the accent colour. Inline code looks like IndexCalculator.run().

A second-level heading, 24px

Paragraphs follow headings with room above and less below, so each heading belongs to the text after it.

A third-level heading, 20px

  • A bulleted list item.
  • A second item, long enough to wrap onto a second line so the hanging indent can be checked against the first line of text.
  • A third item.

A numbered list:

  1. A numbered step.
  2. Another step.

A fourth-level heading, 16px

A label heading, 13px

Code

import pandas as pd
from beacon.index.schedule import sessions

# The index's own trading days: XNYS is shut on three weekdays in this
# window, so a business-day range would hold days with no index level.
DAYS = sessions(pd.Timestamp("2024-01-02"), pd.Timestamp("2024-03-29"),
                "XNYS")


def price(asset,
          day):
    frac = DAYS.get_loc(day) / (len(DAYS) - 1)
    return (100 * 1.10 ** frac) if asset == "AAA" else (50 * 1.20 ** frac)

The example is from the py-beacon quickstart.

Tables

Heading Size Weight
First level 32px 400
Second level 24px 500
Third level 20px 500
Fourth level 16px 500
Label 13px 500

Callouts

Note

A note, in the colours of the app's information pill.

Tip

A tip, in the colours of a completed job.

Warning

A warning, in the colours of a running job.

Danger

A danger notice, in the colours of a failed job.

A collapsible section

Hidden until opened.

Quotes and rules

A quotation, set in the secondary text colour.

Light and dark images

An image saved as both name.light.png and name.dark.png, with both included on the page, shows only the one for the current mode:

Beacon Beacon