Components / Design System
Name (WIP)
3X-DS (Explore, Expand, Experiment)A set of tools and components to build and write content
Logo
Colors
Palette
Card
99%
Blood Oxygen
title propdepth=0depth=1depth=2depth=3Typography
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
Lists
- First
- Second
- Third
- First
- Second
- Third
- Third
Tooltip
Pill
Anchor
Some text then a link to my Twitter account @ode_aksar then the rest of the sentence
Some text then a link to my Twitter account @ode_aksar then the rest of the sentence
Over the past few months, I have been working a lot on Design System and one aspect of this work that I enjoyed focusing on is micro-interactions.
Over the past few months, I have been working a lot on my Design System and one aspect of this work that I enjoyed focusing on is micro-interactions.
Over the past few months, I have been working a lot on my Design System and one aspect of this work that I enjoyed focusing on is micro-interactions.
Form Components
Callout
Almost before we knew it, we had left the ground.~test
Inline Code
const foo= () => 'bar'Code Block
Basic
1console.log("hello world")2/**3* Some comments4*/5function sayHi(name) {6var message = `hi ${name}`7return message;8}
With title and highlighting
Code snippet title
1console.log("hello world")2/**3* Some comments4*/5function sayHi(name) {6var message = `hi ${name}`7return message;8}
Sandpack Code Block
import { motion } from 'framer-motion'; import './scene.css'; const WavingHand = () => ( <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;
