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

Button

Icons

  • AWS
  • AlertMeIcon
  • Auth0
  • id: abc11c33Encrypted DocumentEnc(name)Enc(dob)Enc(email)Encrypted IndexesChart
  • 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