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,495978707x1011 mMono
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 mBigNum Outline (Experimenting)
1 AU = 1,495978707x1011 m1 AU = 1,495978707x1011 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
- First
- Second
- Third
- First
- Second
- Third
Buttons
Anchor
Form Components
Card
Base Card
Title for the card
Card with
title
propSome 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
Almost before we knew it, we had left the ground.
Inline Code
const foo = () => 'bar'
Code Block
Basic
1console.log("hello world")23/**4* Some comments5*/6function sayHi(name) {7var message = `hi ${name}`8return message;9}
With title and highlighting
Code snippet title
1console.log("hello world")23/**4* Some comments5*/6function sayHi(name) {7var message = `hi ${name}`8return 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;