Chungking Design System

Colors

Neutrals

Grey

Red

Orange

Green

Turquoise

Blue

Ultramarine

Purple

Magenta

Typography

Heading

Heading - 900

Heading - 800

Heading - 700

Heading - 600

Heading - 500

Heading - 400

Heading - 300

Heading - 200

Heading - 100

Text

Text - 900Text - 800Text - 700Text - 600Text - 500Text - 400Text - 300Text - 200Text - 100

Monospace

Text - 400 - Monospace - RegularText - 400 - Monospace - Bold

Anchor

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores distinctio natus in incidunt quas totam enim laborum, facilis ipsam, sunt odio accusamus doloribus eaque dolorem nisi iusto reprehenderit possimus optio. Sequi iste quas optio natus odit nostrum nobis atque, quidem repudiandae sunt repellat. Corrupti magni ipsum quasi et ex. Rem, eum. Officia fugiat alias magnam voluptatum temporibus minus voluptatem eos?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores distinctio natus in incidunt quas totam enim laborum, facilis ipsam, sunt odio accusamus doloribus eaque dolorem nisi iusto reprehenderit possimus optio. Sequi iste quas optio natus odit nostrum nobis atque, quidem repudiandae sunt repellat. Corrupti magni ipsum quasi et ex. Rem, eum. Officia fugiat alias magnam voluptatum temporibus minus voluptatem eos?

Markdown

Unordered List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, id!
  • Quasi quis ad deleniti sint. Similique ipsa quas debitis adipisci?
  • Nemo saepe quia odio impedit esse. Minus dignissimos ipsa delectus.

Ordered List

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, id!
  2. Quasi quis ad deleniti sint. Similique ipsa quas debitis adipisci?
  3. Nemo saepe quia odio impedit esse. Minus dignissimos ipsa delectus.

Inline Code

Run npm install to begin the installation process.

Blockquote

The quick brown fox jumps over the lazy dog.

Components

Badge

default
grey

Button

Primary

Box

I'm inside a box!
I'm inside a box with padding!

Message Box

Info: This post is also published on Medium.

Update: Phoenix 1.4 ships with Webpack by default, therefore this guide is now outdated.