Design System for Revak Studio
Color System
Color names include a numeric value. Much like font weights, these numbers help us distinguish the relative lightness between values more easily than with names alone.
ct-4
ct-3
ct-2
ct-1
ct-brand
ct-brand-2
bg-4
bg-3
bg-2
bg-1
bg-brand
bg-brand-2
Type
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Heading 1
Heading sizes may overlap with body text sizes
Heading 2
Heading sizes may overlap with body text sizes
Heading 3
Heading sizes may overlap with body text sizes
Heading 4
Heading sizes may overlap with body text sizes
Heading 5
Heading sizes may overlap with body text sizes
Heading 6
Heading sizes may overlap with body text sizes
Text Ultra Large - t-xl
This is a block of text.
Text Large - t-l
This is a block of text. Double-click this text to edit it.
Text Normal
This is a block of text. Double-click this text to edit it.
Text Small - t-s
This is a block of text. Double-click this text to edit it.
Spacing
mx-0
my-0
pi-0
pb-0
my-auto
mx-auto
ml-100
mt-100
mb-100
pi-100
pb-100
stack-100
gap-100
ml-200
mt-200
mb-200
pi-200
pb-200
stack-200
gap-200
ml-300
mt-300
mb-300
pi-300
pb-300
stack-300
gap-300
ml-400
mt-400
mb-400
pi-400
pb-400
stack-400
gap-400
ml-500
mt-500
mb-500
pi-500
pb-500
stack-500
gap-500
ml-600
mt-600
mb-600
pi-600
pb-600
stack-600
gap-600
ml-700
mt-700
mb-700
pi-700
pb-700
stack-700
gap-700
ml-800
mt-800
mb-800
pi-800
pb-800
stack-800
gap-800
w-s
w-n
w-l
w-full
Borders Radious y Shadows
bo-100
bo-200
bo-300
bor-s
bor-n
bor-l
bor-full
sh-s
sh-n
sh-l
Hover
ho-s
ho-n
ho-l
Custom Icons
Buttons
Cards
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Double-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
Utilities
Center
Center
Grid
Stack
Flex
Queries
Tablet
qt-none
qt-sy-auto
qt-flex-wrap
qt-txt-center
qt-w-full
qt-mx-auto
qt-grid-order-1
qt-grid-order-2
Mobile
qm-none
qm-sy-auto
qm-flex-wrap
qm-txt-center
qm-w-full
qm-mx-auto
qm-grid-order-1
qm-grid-order-2
qm-grid-order-3
qm-grid-order-4
qm-grid-order-5