A left-pointing arrowBack Home
Visual Language

Typography Definitions

Typography is the style and appearance of text in your product, app, or website. Define the following attributes in your design system: size, weight, tracking, leading, line-height, and color.

Visual Example

Download for FigmaVisual Language

Types

Types are variations or derivatives of an individual element. They can help you choose what to include in your design.
Display
Headline
Title
Subheader
Body
Caption
Small

Interaction States

Interaction states communicate the status of an element on the user interface. Consider all of the following states when designing this element:
This element has no interaction states.

Chart Features

For this particular visualization, you may consider these additional features.
No items found.

Get it for Figma!

Everything on this website has been designed in Figma, and is ready to use.
A preview of the Figma Design Encyclopedia design systemThe logo for the Figma design app
Buy for Figma
Preview the file before you buy!

View more:

Grids & Spacing

Grids and spacing are critical for organizing data and content in an understandable way.
Visual Language

Illustrations

Illustrations are digitally-drawn images used to represent something. They typically reflect the overarching brand.
Visual Language

Branding Guidelines

Branding guidelines specify the limitations of how a brand can and should be expressed in various contexts.
Visual Language

Color Definitions

These are the colors used in your product, app, or website.
Visual Language
The Design Encyclopedia is a passion project by Jon Moore to learn how to use Figma, and was designed and built in Webflow (this is an affiliate link). If you would like to reference the encyclopedia in a separate project, partner on a collaboration, or have a general inquiry, send me an email.

© 2021 Design Encyclopedia. All rights reserved.
A square collage of design components from the design encyclopedia.