Flare Design

This document serves as a reference to help craft a design language system.

TABLE OF CONTENTS

- What is a Design Language System?
- Style Guide
- Pattern Library
- Examples
- Resources

Design

• Typography
• Colors
• Photography
• Icons
• Shadows

Writing Content

• Writing Goals and Principles
• Voice and Tone
• Grammar and Mechanics
• Content Types
• Web Elements
• Writing Blog Posts
• Writing Email Newsletters
• Writing Legal Content
• Writing for Social Media
• Creating Structured Content
• Word List

Layout

• Units and measurements
• Grid and Structure
• Responsive UI

UI Elements

• Navigation
• Buttons
• Cards
• Lists
• Forms
• Modals
• Dialog
• Tooltip
• Stats/Data
• Pre-loader
• Search
• Social Media

Motion

• Duration and Easing
• Movement

Feedback

• Submit
• Warning
• Error
• Success
• Info

Design

Typography

Typefaces

Headings

Paragraph Lead

Paragraph Body

Pull Quotes

Code Formatting

Hyperlinks

Colors

Primary

Secondary

Tertiary

Combinations/Patterns

Gradients

Photography

Icons

Shadows

Writing Content

Writing Goals and Principles

Voice and Tone

Grammar and Mechanics

Content Types

Web Elements

Writing Blog Posts

Writing Email Newsletters

Writing Legal Content

Writing for Social Media

Creating Structured Content

Word List

Layout

Units and measurements

Grid and Structure

Responsive UI

UI Elements

Navigation

Header

Tabs

Pagination

Buttons

Cards

Lists

Unordered

Ordered

Forms

Input

Text Area

Radio Input

Checkbox Input

Date Picker

Number Picker

Time Input

File Input

Select Field

Password Input

Switch

Disabled State

Warning State

Success State

Error State

Empty State

Modals

Generic

Dialog

Notifications

Tooltip

Stats/Data

Pre-loader

Search

Social Media

Motion

Duration and Easing

Movement

---

This document is based off of the following resources:

• https://material.google.com
• https://ux.mailchimp.com/patterns/lists
• http://styleguide.mailchimp.com/
• https://rizzo.lonelyplanet.com/styleguide