Zeta Design System
Dark mode

Type System

Overview
Prototype
Implementation
Accessibility
Resources

Typeface, colour, weight, size, height, style and leading are the main values we assign to Zeta's type system for text blocks, headings and paragraphs. There are also universal modifiers like the reset height, last or first properties.

Universal values

  • .text-zeta

    Sets the type's font, size, height, leading, colour, spacing and style as well characters per line. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--subtle

    Sets the type's color. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--300

    Sets the type's weight to light. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--500

    Sets the type's weight to medium. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--italics

    Sets the type's italicise. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--caps

    Sets the type's capitalise. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--underline

    Sets the type's underline. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--direction

    Reverse's the type's direction. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--first

    Sets the type's top padding to 0rem. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--last

    Sets the type's bottom padding to 0rem. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--reset-height

    Sets the type's line height value to the same as the type's size. Sets the padding top and bottom to 0rem. It defers depending the type size. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

Universal sizes

  • .text-zeta
    .text-zeta--x3-x4

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x3_5-x4

    Sets the type's size and height. It applies to a text block. It never changes line height and is forced to be used only on a single line.

    Text block
  • .text-zeta
    .text-zeta--x4-x5

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x5-x6

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x6-x7

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x7-x8

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x8-x9

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x9-x10

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x10-x11

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x11-x12

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x12-x13

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

  • .text-zeta
    .text-zeta--x13-x14

    Sets the type's size and height. It applies either to a text block, a heading or a paragraph.

    Text block

    Heading

    Paragraph

Dedicated sizes

  • .text-zeta
    .text-zeta--body-small

    Sets the type's size and height. It applies either to a text block, or a paragraph. It is used as a paragraph.

    Text block

    Paragraph

  • .text-zeta
    .text-zeta--title-small

    Sets the type's size, height and weight. It applies either to a text block, or a heading 6.  It is used as a title, heading or label.

    Text block
    Heading 6
  • .text-zeta
    .text-zeta--title-medium

    Sets the type's size, height and weight. It applies either to a text block, or a heading 5. It is used as a title, heading or label.

    Text block
    Heading 5
  • .text-zeta
    .text-zeta--body-medium

    Sets the type's size, height and weight. It applies either to a text block, or a paragraph. It is used as a paragraph.

    Text block

    Paragraph

  • .text-zeta
    .text-zeta--title-large

    Sets the type's size, height and weight. It applies either to a text block, or a heading 4. It is used as a title, heading or label.

    Text block

    Heading 4

  • .text-zeta
    .text-zeta--body-large

    Sets the type's size, height and weight. It applies either to a text block, or a paragraph. It is used as a paragraph.

    Text block

    Paragraph

  • .text-zeta
    .text-zeta--heading-small

    Sets the type's size, height and weight. It applies either to a text block, or a heading 3. It is used as a heading.

    Text block

    Heading 3

  • .text-zeta
    .text-zeta--heading-medium

    Sets the type's size, height and weight. It applies either to a text block, or a heading 2. It is used as a heading.

    Text block

    Heading 2

  • .text-zeta
    .text-zeta--heading-large

    Sets the type's size, height and weight. It applies either to a text block, or a heading 1. It is used as a heading.

    Text block

    Heading 1

  • .text-zeta
    .text-zeta--display-small

    Sets the type's size, height and weight. It applies either to a text block, or a heading 3. It is used as a section title.

    Text block

    Display small

  • .text-zeta
    .text-zeta--display-medium

    Sets the type's size, height and weight. It applies either to a text block, or a heading 2. It is used as a section title.

    Text block

    Display medium

  • .text-zeta
    .text-zeta--display-large

    Sets the type's size, height and weight. It applies either to a text block, or a heading 1. It is used as an introsection title.

    Text block

    Display large