Design System
Color Palette
Background --background
Black --black
Yellow Accent --accent-yellow
Purple Accent --accent-purple
Orange Accent --accent-orange
Typography Showcase
h1.heading
The quick brown fox jumps over the lazy dog
h1 / .heading1
The quick brown fox jumps over the lazy dog
h2 / .heading2
The quick brown fox jumps over the lazy dog
h3 / .heading3
The quick brown fox jumps over the lazy dog
h4 / .heading4
The quick brown fox jumps over the lazy dog
h5 / .heading5
The quick brown fox jumps over the lazy dog
h6 / .heading6
The quick brown fox jumps over the lazy dog
p (Body Text)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Components
Tags
Yellow Tag Purple Tag Orange Tag
Cards — Column (in Grid)
Sample Project Card
This is how project cards look when rendered within a grid component.
Another Project Card
Cards support different accent colors for their preview areas and tags.
Cards — Row
Row Layout Card
Cards in row direction display the preview and info side by side.
Another Row Card
Useful for list views or blog post listings.