Components / Design System


Work In Progressv1.0

Colors

Brand:
Background:
Foreground:
Typeface:

Palette

Typography

Display

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

Numeric (experimenting)

1 AU = 1,495978707x1011 m

Mono

console.log(foobar)

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.

Strong

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

EM

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

BigNum (WIP)

1 AU = 1,495978707x1011 m

BigNum Outline (Experimenting)

1 AU = 1,495978707x1011 m
1 AU = 1,495978707x1011 m

Icons

TwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.com
TwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comTwitterThe outline of a blue bird, the logo of twitter.comGithubThe outline of an Octocat, the logo of github.comGithubThe outline of an Octocat, the logo of github.comGithubThe outline of an Octocat, the logo of github.comGithubThe outline of an Octocat, the logo of github.comGithubThe outline of an Octocat, the logo of github.comContactAn icon representing a letter in the shape of a paper planeContactAn icon representing a letter in the shape of a paper planeContactAn icon representing a letter in the shape of a paper planeContactAn icon representing a letter in the shape of a paper planeContactAn icon representing a letter in the shape of a paper planeMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapExternal ArrowAn icon representing an arrow pointing diagonally towards the top right corner of the screenExternal ArrowAn icon representing an arrow pointing diagonally towards the top right corner of the screenExternal ArrowAn icon representing an arrow pointing diagonally towards the top right corner of the screenExternal ArrowAn icon representing an arrow pointing diagonally towards the top right corner of the screenExternal ArrowAn icon representing an arrow pointing diagonally towards the top right corner of the screenMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapMapAn icon representing an unfolded paper mapEnter ArrowAn icon representing an a twisted arrow like the one used on the enter key for most keyboardEnter ArrowAn icon representing an a twisted arrow like the one used on the enter key for most keyboardEnter ArrowAn icon representing an a twisted arrow like the one used on the enter key for most keyboardEnter ArrowAn icon representing an a twisted arrow like the one used on the enter key for most keyboardEnter ArrowAn icon representing an a twisted arrow like the one used on the enter key for most keyboardArrowAn icon representing an arrowArrowAn icon representing an arrowArrowAn icon representing an arrowArrowAn icon representing an arrowArrowAn icon representing an arrowPortfolioAn icon representing a folderPortfolioAn icon representing a folderPortfolioAn icon representing a folderPortfolioAn icon representing a folderPortfolioAn icon representing a folderPlayAn icon representing the play symbol, a triangle pointing to the rightPlayAn icon representing the play symbol, a triangle pointing to the rightPlayAn icon representing the play symbol, a triangle pointing to the rightPlayAn icon representing the play symbol, a triangle pointing to the rightPlayAn icon representing the play symbol, a triangle pointing to the rightPauseAn icon representing the pause symbol, 2 vertical barsPauseAn icon representing the pause symbol, 2 vertical barsPauseAn icon representing the pause symbol, 2 vertical barsPauseAn icon representing the pause symbol, 2 vertical barsPauseAn icon representing the pause symbol, 2 vertical barsRepeatAn icon representing an arrow twisted so it makes a loopRepeatAn icon representing an arrow twisted so it makes a loopRepeatAn icon representing an arrow twisted so it makes a loopRepeatAn icon representing an arrow twisted so it makes a loopRepeatAn icon representing an arrow twisted so it makes a loopInfoAn icon representing the letter ‘i‘ in a circleInfoAn icon representing the letter ‘i‘ in a circleInfoAn icon representing the letter ‘i‘ in a circleInfoAn icon representing the letter ‘i‘ in a circleInfoAn icon representing the letter ‘i‘ in a circleAlertAn icon representing an exclamation mark in an octogoneAlertAn icon representing an exclamation mark in an octogoneAlertAn icon representing an exclamation mark in an octogoneAlertAn icon representing an exclamation mark in an octogoneAlertAn icon representing an exclamation mark in an octogoneStackAn icon representing 3 tiles on top of each otherStackAn icon representing 3 tiles on top of each otherStackAn icon representing 3 tiles on top of each otherStackAn icon representing 3 tiles on top of each otherStackAn icon representing 3 tiles on top of each other

Shadows

Shadow 0
Shadow 1
Shadow 2
Shadow 3
Custom Shadow 0
Custom Shadow 1
Custom Shadow 2
Custom Shadow 3

Lists

  • ArrowAn icon representing an arrow
    First
  • ArrowAn icon representing an arrow
    Second
  • ArrowAn icon representing an arrow
    Third
  1. ArrowAn icon representing an arrow
    First
  2. ArrowAn icon representing an arrow
    Second
  3. ArrowAn icon representing an arrow
    Third
  • ArrowAn icon representing an arrow
    1. ArrowAn icon representing an arrow
      First
    2. ArrowAn icon representing an arrow
      Second
    3. ArrowAn icon representing an arrow
      Third
  • ArrowAn icon representing an arrow
    • ArrowAn icon representing an arrow
      First
    • ArrowAn icon representing an arrow
      Second
    • ArrowAn icon representing an arrow
      Third

Buttons

Anchor

Form Components






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

Tooltip

TwitterThe outline of a blue bird, the logo of twitter.com Hover Me!

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

Command Center / Search

Tweet

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

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

Before / After Image

Before
After
ArrowAn icon representing an arrowArrowAn icon representing an arrow
Screenshot showcasing the blue noise dithering applied to our cloud scene