Isobase

A tokenized design/development framework kit starter with code as the source of truth. Opinionated, just enough to get started, not enough to get overwhelmed.

Typography is used to determine all spacing and rhythm. Typography should change in scale and size according to context.

Typefaces

Selection

Typography should be chosen strategically based on brand style, content tone, target audience, industry, and market. Typefaces are paired and sized by the designer. The designer should start with the body text first: defining base body size and lineheight. The body type will inform the spacing for the system.

Scale

Type sizes should be derived using a typographic scale. This is something that will also be defined by the designer.

Sizes

App

Typography used in the context of an application or complex interface.

Constant Sizes

Small paragraph

Body size, regular paragraph

Lead paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Prose

Typography used in the context of long-form content or stories.

Mobile

Small paragraph

Body size, regular paragraph

Lead paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Desktop

Small paragraph

Body size, regular paragraph

Lead paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Color tints and shades are generated from a chosen set of hues.

Selection

Main swatches are denoted with a “★” character. Tints and shades are derived from these values.

Core

Primary

Secondary

Layout

Base

Feedback

Atoms define decisions being made after choices (tokens) are established.

Buttons

App & Mobile

Styles and sizes for App & Mobile contexts.

Styles
Sizes

Desktop

Styles and sizes for Desktop contexts.

Styles
Sizes

Form Elements

App & Mobile

Styles and sizes for App & Mobile contexts.

Form Legend
Checkboxes
Radios

Desktop

Styles and sizes for Desktop contexts.

Form Legend
Checkboxes
Radios

The spacing system is generated from the sizes of the type depending on context and device.

Values

App & Mobile

Desktop