Chungking Design System

Colors

Neutrals

Grey

Red

Orange

Green

Turquoise

Blue

Ultramarine

Purple

Magenta

Typography

Heading

Heading - xs

Heading - sm

Heading - base

Heading - lg

Heading - xl

Heading - 2xl

Heading - 3xl

Heading - 4xl

Heading - 5xl

Heading - 6xl

Heading - 7xl

Heading - 8xl

Heading - 9xl

Text

Text - xsText - smText - baseText - lgText - xlText - 2xlText - 3xlText - 4xlText - 5xlText - 6xlText - 7xlText - 8xlText - 9xl

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

blue green grey magenta orange purple red turquoise ultramarine
blue green grey magenta orange purple red turquoise ultramarine
blue green grey magenta orange purple red turquoise ultramarine

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.