Components / Design System

Work In Progressv1.0

Logo

Colors

Brand:

Background:

Foreground:

Typeface:

Palette

Typography

Display

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

Numeric (experimenting)

1 AU = 1,495978707x10¹¹ m

Mono

console.log(foobar)

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.

Strong

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

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

BigNum (WIP)

1 AU = 1,495978707x10¹¹ m

BigNum Outline (Experimenting)

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

Anchor

Card

Base Card

Title for the 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

Pill

Info Pill

Success Pill

Warning Pill

Danger Pill

Callout

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

Inline Code

const foo = () => 'bar'

Code Block

Basic

1
console.log("hello world")
2

3
/**
4
 * Some comments
5
 */
6
function sayHi(name) {
7
    var message = `hi ${name}`
8
    return message;
9
}

With title and highlighting

Code snippet title

1
console.log("hello world")
2

3
/**
4
 * Some comments
5
 */
6
function sayHi(name) {
7
    var message = `hi ${name}`
8
    return message;
9
}

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;

Details/Summary

Summary: Some short text

Command Center / Search

Thomas Pesquet@Thom_astro

24h dans le volume d'une Fiat 500 avec trois amis et pourtant on se sent comme chez soi... à 400 km d'altitude ! Superbe performance technique et opérationelle de toutes les équipes qui nous ont entrainés et encadrés pour ce voyage 👏 https://t.co/kreeGnnLUM

5:45 PM - Apr 24, 2021

823 92201

Components / Design System

Logo

Colors

Palette

Typography

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

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

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

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

Icons

Shadows

Lists

Buttons

Anchor

@MaximeHeckel

@maxime.bsky.social

Github

Back

Twitter

Design System

Form Components

Card

Tooltip

Pill

Callout

Inline Code

Code Block

Details/Summary

Command Center / Search

Tweet

Image

Before / After Image