Kitchen Sink
A collection of styles, components and blocks to see (almost) everything in one place
Typography
Heading Font
Bricolage Grotesque
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Body Font
Geist
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Headings
Hero Text
Hero Text (mobile)
Desktop
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Mobile
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?
Lead Paragraph
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?
Lists
- List item
- List item
- List item
- List item
Font Sizes
|
Font size: 20px / 1.25rem
Line height: 150% |
Font size: 18px / 1.125rem
Line height: 150% |
Font size: 16px / 1rem
Line height: 150% |
Font size: 14px / 0.875rem
Line height: 150% |
Font size: 12px / 0.75rem
Line height: 150% |
|---|---|---|---|---|
|
Text large
Extra bold |
Text medium
Extra bold |
Text regular
Extra bold |
Text small
Extra bold |
Text tiny
Extra bold |
|
Text large
Bold |
Text medium
Bold |
Text regular
Bold |
Text small
Bold |
Text tiny
Bold |
|
Text large
Semi bold |
Text medium
Semi bold |
Text regular
Semi bold |
Text small
Semi bold |
Text tiny
Semi bold |
|
Text large
Medium |
Text medium
Medium |
Text regular
Medium |
Text small
Medium |
Text tiny
Medium |
|
Text large
Normal |
Text medium
Normal |
Text regular
Normal |
Text small
Normal |
Text tiny
Normal |
|
Text large
Light |
Text medium
Light |
Text regular
Light |
Text small
Light |
Text tiny
Light |
Fluid Typography
Headings
Color Swatches
Primitive colors are the foundational building blocks of a design system's
color palette.
They serve as the base for more specific design decisions.
ORANGE
#FA4E03
PINK
#FB8D9D
BLUE
#10539E
GREEN
#42B446
INDIGO
#968ABF
BEIGE
#F2A984
YELLOW
#FABC3C
GREY
#3A3A3A
BLACK
#141414
BLACK (NEUTRAL)
#000000
WHITE
#FFFBEF
WHITE (NEUTRAL)
#FFFFFF
World Colors
DEV
#FABC3C
HOSTING
#FA4E03
SEO
#968ABF
SOCIAL
#42B446
Buttons
Regular
Plus
Arrow up
Arrow down
Pills
Default Style
Hollow
Solid
Alignment
Containerless
Tables
Tables components can be used in lots of different ways, either doing a lot of stuff automatically or leaving it all down to the developer how they want to implement things
Check the code to see the major difference between these different versions
Automatic (Separate data)
General Content
Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia culpa, veritatis quos. Quaerat impedit laudantium ex modi, magni deserunt error tempora, nulla expedita. Rem nemo nostrum harum, temporibus autem!
Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia culpa, veritatis quos. Quaerat impedit laudantium ex modi, magni deserunt error tempora, nulla expedita. Rem nemo nostrum harum, temporibus autem! Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia culpa, veritatis quos. Quaerat impedit laudantium ex modi, magni deserunt error tempora, nulla expedita. Rem nemo nostrum harum, temporibus autem!
| Month | Developer | Approved |
|---|---|---|
| December | Mike | Yes |
| December | Nathan | No |
| January | Cameron | No |
Meet the Team
Questions
-
And here is the answer.
Answer text can be quite long or short as you see fit. It also supports many formatting option such as bold, italic, links to other pages etc.
Headings
Headings and other WYSIWYG content can all be applied in the answer text
Stacked Questions
-
And here is the answer.
Answer text can be quite long or short as you see fit. It also supports many formatting option such as bold, italic, links to other pages etc.
Headings
Headings and other WYSIWYG content can all be applied in the answer text
Latest Work
CTA
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos iure quos ratione distinctio quia, obcaecati fugiat voluptates nam vel error modi eaque maxime dolorem molestias, nemo perspiciatis, itaque necessitatibus, sequi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos iure quos ratione distinctio quia, obcaecati fugiat voluptates nam vel error modi eaque maxime dolorem molestias, nemo perspiciatis, itaque necessitatibus, sequi!