Design System
The design system uses Tailwind CSS and is highly customizable.
Colors
blue
paleblue
magenta
purple
purple-dark
cyan
white
red
yellow
sky-900
black
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
bg
bg-alt
text
action
headline
focus
footer-bg
border
muted
blue
magenta
purple
white
gray-100
Typography
<h1>Heading 1<h1>
<h2>Heading 2<h2>
<h3>Heading 3<h3>
<h4>Heading 4<h4>
<p>Paragraph</p>
font-bold
italic
text-14
text-16
text-18
text-22
text-24
text-28
text-30
text-32
text-36
text-40
text-44
text-48
text-66
Buttons
Button
Pass an element for more control over text display.
<Button> <span className="font-orbitron font-medium text-magenta">Button</span> </Button>
Icons
- AWS
- AlertMeIcon
- Auth0
- Chart
- Check
- Close
- GitHub
- Json
- LinkedIn
- Logo
- NodeJS
- Play
- Ruby
- Ts
- Twitter
- YouTubeIcon
Tile Icons
- AcademicCap
- Adjustments
- Annotation
- Archive
- ArrowCircleDown
- ArrowCircleLeft
- ArrowCircleRight
- ArrowCircleUp
- ArrowDown
- ArrowLeft
- ArrowNarrowDown
- ArrowNarrowLeft
- ArrowNarrowRight
- ArrowNarrowUp
- ArrowRight
- ArrowSmDown
- ArrowSmLeft
- ArrowSmRight
- ArrowSmUp
- ArrowUp
- ArrowsExpand
- AtSymbol
- Backspace
- BadgeCheck
- Ban
- Beaker
- Bell
- BookOpen
- Bookmark
- BookmarkAlt
- Briefcase
- Cake
- Calendar
- Camera
- Cash
- ChartBar
- ChartPie
- ChartSquareBar
- Chat
- ChatAlt
- ChatAlt2
- Check
- CheckCircle
- CheveronDown
- CheveronLeft
- CheveronRight
- CheveronUp
- ChevronDoubleDown
- ChevronDoubleLeft
- ChevronDoubleRight
- ChevronDoubleUp
- Chip
- CipherStash
- ClipboardCheck
- ClipboardCopy
- ClipboardList
- Clock
- Cloud
- CloudDownload
- CloudUpload
- Code
- Cog
- Collection
- ColorSwatch
- CreditCard
- Cube
- CubeTransparent
- CurrencyBangladeshi
- CurrencyDollar
- CurrencyEuro
- CurrencyPound
- CurrencyRupee
- CurrencyYen
- CursorClick
- Database
- DesktopComputer
- DeviceMobile
- Document
- DocumentAdd
- DocumentDownload
- DocumentDuplicate
- DocumentRemove
- DocumentReport
- DocumentSearch
- DocumentText
- DotsCircleHorizontal
- DotsHorizontal
- DotsVertical
- Download
- Download1
- Duplicate
- EmojiHappy
- EmojiSad
- Exclamation
- ExclamationCircle
- ExternalLink
- Eye
- EyeOff
- FastForward
- Film
- Filter
- FingerPrint
- Fire
- Flag
- Folder
- FolderAdd
- FolderDownload
- FolderOpen
- FolderRemove
- Gift
- Globe
- GlobeAlt
- Hand
- Hashtag
- Heart
- Home
- IconCurrencyDollar
- Identification
- Inbox
- InboxIn
- InformationCircle
- Key
- LightBulb
- LightningBolt
- Link
- LocationMarker
- LockClosed
- LockOpen
- Logout
- Logout1
- Mail
- MailOpen
- Map
- MdLibrary
- Menu
- MenuAlt1
- MenuAlt2
- MenuAlt3
- MenuAlt4
- Microphone
- Minus
- MinusCircle
- MinusSm
- Moon
- MusicNote
- Newspaper
- OfficeBuilding
- PaperAirplane
- PaperClip
- Pause
- Pencil
- PencilAlt
- Phone
- PhoneIncoming
- PhoneMissedCall
- PhoneOutgoing
- Photograph
- Play
- Plus
- PlusCircle
- PlusSm
- PresentationChartBar
- PresentationChartLine
- Printer
- Puzzle
- Qrcode
- QuestionMarkCircle
- ReceiptRefund
- ReceiptTax
- Refresh
- Reply
- Rewind
- Rss
- Save
- SaveAs
- Scale
- Scissors
- Search
- SearchCircle
- Selector
- Server
- Share
- ShieldCheck
- ShieldExclamation
- ShoppingBag
- SortAscending
- SortDescending
- Sparkles
- Speakerphone
- Star
- StatusOffline
- StatusOnline
- Stop
- Sun
- Support
- SwitchHorizontal
- SwitchVertical
- Table
- Table1
- Tag
- Template
- Terminal
- ThumbDown
- ThumbUp
- Ticket
- Translate
- Trash
- TrendingDown
- TrendingUp
- Truck
- Upload
- User
- UserAdd
- UserCircle
- UserGroup
- UserRemove
- Users
- Variable
- VideoCamera
- ViewBoards
- ViewGrid
- ViewGridAdd
- ViewList
- VolumeOff
- VolumeUp
- Wifi
- X
- XCircle
- ZoomIn
- ZoomOut