Code Monkey home page Code Monkey logo

flare's Introduction

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:

flare's People

Contributors

onehunnid avatar

Stargazers

ToddG avatar Thomas Ølund Høgild avatar Brad Siefert avatar José Carneiro avatar Osman YAZICI avatar Ravi Shanker avatar Victor Rosell avatar Guillaume Baudusseau avatar

Watchers

James Cloos avatar avatar

Forkers

andupotorac

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.