Components / Design System


Work In Progressv1.0

Colors

Brand:
Background:
Foreground:
Typeface:

Palette

Typography

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.

p

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

p (bold)

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

p (italic)

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

Lists

  • First
  • Second
  • Third
  1. First
  2. Second
  3. Third

Buttons

Form Components






Card

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

Icons

Tooltip

Hover Me!

Pill

Info Pill
Success Pill
Warning Pill
Danger Pill

Callout

Info Callout
Danger Callout

Inline Code

Some Inline Code

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
}

Live (for React code only)

Hi
đź‘‹
!

Command Center / Search

Tweet

Thom_astro
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

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
9308351100608

© 2021 Maxime Heckel —— SF/NY