Components / Design System

Work in Progressv0.1

Colors

Brand:

Background:

Foreground:

Typeface:

Palette

Typography

Display

Almost before we knew it, we had left the ground.

Numeric

1 AU = 1,495978707x10¹¹ m

Mono

console.log(Tanjiro)

H1

Almost before we knew it, we had left the ground.

H2

Almost before we knew it, we had left the ground.

H3

Almost before we knew it, we had left the ground.

H4

Almost before we knew it, we had left the ground.

Text Size 7

Almost before we knew it, we had left the ground.

Text Size 6

Almost before we knew it, we had left the ground.

Text Size 5

Almost before we knew it, we had left the ground.

Text Size 4

Almost before we knew it, we had left the ground.

Text Size 3

Almost before we knew it, we had left the ground.

Text Size 2

Almost before we knew it, we had left the ground.

Text Size 1

Almost before we knew it, we had left the ground.

Text Gradient

Almost before we knew it, we had left the ground.

StrongAlmost before we knew it, we had left the ground.

EMAlmost before we knew it, we had left the ground.

BigNum

1 AU = 1,495978707x10¹¹ m

BigNum Outline

1 AU = 1,495978707x10¹¹ m

Icons

Shadows

Shadow 0

Shadow 1

Shadow 2

Shadow 3

Custom Shadow 0

Custom Shadow 1

Custom Shadow 2

Custom Shadow 3

Lists

First
Second
Third

First
Second
Third

1. First
2. Second
3. Third

- First
- Second
- Third

Buttons

Anchors

@_MusKRii

Github

Back

Twitter

Check out this repo

Design System

Form Components

Name

Checkbox

Cards

Base Card

Card with title prop

Some Custom Header

Card With Custom Header

Card With custom Body

Card depth=0

Card depth=1

Card depth=2

Card depth=3

Tooltip

Hover Me!

Pill

Info Pill

Success Pill

Warning Pill

Danger Pill

Callout

Inline Code

const foo = () => 'bar'

Code Block

Basic

1

2
function sum(a: number, b: number) {
3
  return a + b;
4
}
5
        
6
const result = sum(12, 21);
7
console.log(result);
8

With title and highlighting

Code snippet title

1

2
function sum(a: number, b: number) {
3
  return a + b;
4
}
5
        
6
const result = sum(12, 21);
7
console.log(result);
8

Sandpack Code Block

import { motion } from 'framer-motion';
import './scene.css';

const WavingHand = () => {
  console.log('hello world');

  return (
    <motion.div
      style={{
        marginBottom: '-20px',
        marginRight: '-45px',
        paddingBottom: '20px',
        paddingRight: '45px',
        display: 'inline-block',
      }}
      animate={{ rotate: 20 }}
      transition={{
        yoyo: Infinity,
        from: 0,
        duration: 0.2,
        ease: 'easeInOut',
        type: 'tween',
      }}
    >
      👋
    </motion.div>
  );
};

const Hi = () => (
  <h1>
    Hi <WavingHand /> !
  </h1>
);

export default Hi;