Chungking Design System

Colors

Primary

Secondary

Accent Colors

Magenta

Red

Orange

Green

Purple

Blue

Ultramarine

Typography

Heading

Heading - Canon

Heading - Trafalgar

Heading - Paragon

Heading - Double Pica

Heading - Great Primer

Heading - Body Copy

Heading - Pica

Heading - Long Primer

Heading - Brevier

Heading - Minion

Text

Text - CanonText - TrafalgarText - ParagonText - Double PicaText - Great PrimerText - Body CopyText - PicaText - Long PrimerText - BrevierText - Minion

Monospace

Text - Pica - Monospace - 400Text - Pica - Monospace - 700

Components

Badge

default grey

Button

NavLinkButton

AnchorButton

Posts

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

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?

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.

Bookmark Link

Accessibility is not a “React Problem” »

www.netlify.com

Post Metadata

Category

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.

Projects

Featured Project

Featured project

Broville v11

A fully-detailed custom map for Minecraft.

minecraftgaming

Project Card

Broville v11

A fully-detailed custom map for Minecraft.

minecraftgaming

Broville v11

A fully-detailed custom map for Minecraft.

minecraftgaming

Project Item List

Broville v11

A fully-detailed custom map for Minecraft.

minecraftgaming