Design System

design system about this system

Logo

Colors

Primary

Secondary

Decorative

Info

Error

Success

Warning

Gray

Text

Background

Headings

All HTML headings, <h1> through <h6>, are available.

Heading 2 example

Heading 3 example

Heading 4 example

Heading 5 example

Heading 6 example

List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

List item 1
List item 2
1. Nested list item A
2. Nested list item B
List item 3
- asdf
- asdf

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:

List Item a
List Item b
- Nested list item 1
- Nested list item 2
  - Double Nested item 1
  - Double Nested item 2
List Item 3

Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes

Alternative blockquote style:

html

<Blockquote>
  Success is not final, failure is not fatal: it is the courage to continue that counts.
</Blockquote>

Success is not final, failure is not fatal: it is the courage to continue that counts.

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

Here are a few examples of code highlighting:

HTML code

html

<!DOCTYPE html>
<html>
  <body>

    <h2>The title attribute</h2>

    <p title="I'm a tooltip">
      Check out the title attribute as a tooltip.
    </p>

  </body>
</html>

CSS code

css

body { 
   background-color: #FFFFF0; 
   font-family: Arial, Verdana, sans-serif; 
   font-size: 18px; 
   color: #00008B;
}

Javascript code

jsx

function App() {
  return (
    <>
      <h1>I'm a playground!</h1>
      <p>Edit me, and see the changes below. 😄</p>
    </>
  );
}

console.warn("I'm a console warning!");

export default App;

Inline code

inline and code

Diff code

jsx

export function RgbaString () {
  const [color, setColor] = useState("rgb(213, 50, 16, 0.2)");
  return (
    <div className='mx-auto'>
      <RgbaStringColorPicker color={color} onChange={setColor} style={pickerStyle} />
      <ColorLabel color={color} />
    </div>
  ); 
}

Playground

Code Playground

<link rel="stylesheet" href="./styles.css" >
<style>
  .fifty-percent {
    width: 50%;
  }
  .one-hundred-pixels {
    width: 100px;
  }
</style>
<body>
  <div class="box fifty-percent">50%</div>
  <div class="box one-hundred-pixels">100ppx 100px 100px 100px 100px 100px 100px 100px 100px 100ppx</div>
  <hr />
  <div class="parent">
    <div class="box fifty-percent">50%</div>
    <div class="box one-hundred-pixels">100px</div>
  </div>
</body>

Text-level semantics

Styling for common inline HTML5 elements.

The a element example
The b element example
The code element example
The em element example
The _{sub element} example
The ^{sub element} example
The u element example
The ins element example
The mark element example
The ~~s element~~ example

The details element:

Details Summary

Content. Some long text nested inside the component. Useful to avoid long, optional content. It can take some simple strings or some other custom React components. As you want!

Tables

Table_Header_1	Table_Header_2	Table_Header_3
单元格1	单元格2	单元格3
单元格4	单元格5	单元格6

Table_Header_1	Table_Header_2	Table_Header_3	Table_Header_4	Table_Header_5	Table_Header_6	Table_Header_7
A	B	C	D	E	F	G
H	I	J	K	L	M	N
O	P	Q	R	S	T	U

Tasks

to do
done

Cards

Base Card

Title for the card

Base Card

Toggle cards

Want some collapsible content?

jsx

var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;

Design System

Logo

Colors

Headings

Heading 2 example

Heading 3 example

Heading 4 example

Heading 5 example

Heading 6 example

List Types

Ordered List

Unordered List

Blockquotes

Code

HTML code

CSS code

Javascript code

Inline code

Diff code

Playground

Text-level semantics

Tables

Tasks

Cards

Toggle cards

Alert boxs

Questions? Let's chat

A TypeScript Full Stack Blog