Design System
Internal use only - not indexed
Last updated: May 16, 2025
Colors
Primary
primary
var(--color-primary)
#1a73e8
primary-light
var(--color-primary-light)
#4285f4
primary-dark
var(--color-primary-dark)
#1557b0
Typography
Heading 1 (text-4xl)
Font: System UI, font-weight: bold
Heading 2 (text-3xl)
Font: System UI, font-weight: bold
Heading 3 (text-2xl)
Font: System UI, font-weight: bold
Heading 4 (text-xl)
Font: System UI, font-weight: bold
Normal paragraph text (text-base)
Font: System UI, font-weight: normal
Small text (text-sm)
Font: System UI, font-weight: normal
Gradients
Primary gradient
bg-gradient-to-r from-primary to-primary-light
background: linear-gradient(to right, var(--color-primary), var(--color-primary-light));CSS Variables
CSS Variables from configuration
| Variable Name | Value | Preview |
|---|---|---|
| Primary Colors | ||
| --color-primary | #ff0000 | |
| --color-primary-light | #4285f4 | |
| --color-primary-dark | #1557b0 | |
| Secondary Colors | ||
| --color-secondary | #34a853 | |
| --color-secondary-light | #46c167 | |
| --color-secondary-dark | #2d8644 | |
| Accent Color | ||
| --color-accent | #fbbc05 | |
| Text Colors | ||
| --color-text | #202124 | |
| --color-text-light | #5f6368 | |
| --color-text-muted | #9aa0a6 | |
| Background Colors | ||
| --color-background | #ffffff | |
| --color-background-alt | #f8f9fa | |
| --color-background-dark | #f1f3f4 | |
Icons
Complete collection of icons available in the boilerplate theme. Icons can be used by including them as partials using this syntax:
{{ partial "icons/icon-name" . }}or with custom classes:
{{ partial "icons/icon-name" "w-8 h-8 text-blue-600" }}academic-cap-solid
academic-cap
adjustments-horizontal-solid
adjustments-horizontal
adjustments-vertical-solid
adjustments-vertical
archive-box-arrow-down-solid
archive-box-arrow-down
archive-box-solid
archive-box-x-mark-solid
archive-box-x-mark
archive-box
arrow-down-circle-solid
arrow-down-circle
arrow-down-left-solid
arrow-down-left
arrow-down-on-square-solid
arrow-down-on-square-stack-solid
arrow-down-on-square-stack
arrow-down-on-square
arrow-down-right-solid
arrow-down-right
arrow-down-solid
arrow-down-tray-solid
arrow-down-tray
arrow-down
arrow-left-circle-solid
arrow-left-circle
arrow-left-end-on-rectangle-solid
arrow-left-end-on-rectangle
arrow-left-on-rectangle-solid
arrow-left-on-rectangle
arrow-left-solid
arrow-left-start-on-rectangle-solid
arrow-left-start-on-rectangle
arrow-left
arrow-long-down-solid
arrow-long-down
arrow-long-left-solid
arrow-long-left
arrow-long-right-solid
arrow-long-right
arrow-long-up-solid
arrow-long-up
arrow-path-rounded-square-solid
arrow-path-rounded-square
arrow-path-solid
arrow-path
arrow-right-circle-solid
arrow-right-circle
arrow-right-end-on-rectangle-solid
arrow-right-end-on-rectangle
arrow-right-on-rectangle-solid
arrow-right-on-rectangle
arrow-right-solid
arrow-right-start-on-rectangle-solid
arrow-right-start-on-rectangle
arrow-right
arrow-small-down-solid
arrow-small-down
arrow-small-left-solid
arrow-small-left
arrow-small-right-solid
arrow-small-right
arrow-small-up-solid
arrow-small-up
arrow-top-right-on-square-solid
arrow-top-right-on-square
arrow-trending-down-solid
arrow-trending-down
arrow-trending-up-solid
arrow-trending-up
arrow-turn-down-left-solid
arrow-turn-down-left
arrow-turn-down-right-solid
arrow-turn-down-right
arrow-turn-left-down-solid
arrow-turn-left-down
arrow-turn-left-up-solid
arrow-turn-left-up
arrow-turn-right-down-solid
arrow-turn-right-down
arrow-turn-right-up-solid
arrow-turn-right-up
arrow-turn-up-left-solid
arrow-turn-up-left
arrow-turn-up-right-solid
arrow-turn-up-right
arrow-up-circle-solid
arrow-up-circle
arrow-up-left-solid
arrow-up-left
arrow-up-on-square-solid
arrow-up-on-square-stack-solid
arrow-up-on-square-stack
arrow-up-on-square
arrow-up-right-solid
arrow-up-right
arrow-up-solid
arrow-up-tray-solid
arrow-up-tray
arrow-up
arrow-uturn-down-solid
arrow-uturn-down
arrow-uturn-left-solid
arrow-uturn-left
arrow-uturn-right-solid
arrow-uturn-right
arrow-uturn-up-solid
arrow-uturn-up
arrows-pointing-in-solid
arrows-pointing-in
arrows-pointing-out-solid
arrows-pointing-out
arrows-right-left-solid
arrows-right-left
arrows-up-down-solid
arrows-up-down
at-symbol-solid
at-symbol
backspace-solid
backspace
backward-solid
backward
banknotes-solid
banknotes
bars-2-solid
bars-2
bars-3-bottom-left-solid
bars-3-bottom-left
bars-3-bottom-right-solid
bars-3-bottom-right
bars-3-center-left-solid
bars-3-center-left
bars-3-solid
bars-3
bars-4-solid
bars-4
bars-arrow-down-solid
bars-arrow-down
bars-arrow-up-solid
bars-arrow-up
battery-0-solid
battery-0
battery-100-solid
battery-100
battery-50-solid
battery-50
beaker-solid
beaker
bell-alert-solid
bell-alert
bell-slash-solid
bell-slash
bell-snooze-solid
bell-snooze
bell-solid
bell
bold-solid
bold
bolt-slash-solid
bolt-slash
bolt-solid
bolt
book-open-solid
book-open
bookmark-slash-solid
bookmark-slash
bookmark-solid
bookmark-square-solid
bookmark-square
bookmark
briefcase-solid
briefcase
bug-ant-solid
bug-ant
building-library-solid
building-library
building-office-2-solid
building-office-2
building-office-solid
building-office
building-storefront-solid
building-storefront
cake-solid
cake
calculator-solid
calculator
calendar-date-range-solid
calendar-date-range
calendar-days-solid
calendar-days
calendar-solid
calendar
camera-solid
camera
chart-bar-solid
chart-bar-square-solid
chart-bar-square
chart-bar
chart-pie-solid
chart-pie
chat-bubble-bottom-center-solid
chat-bubble-bottom-center-text-solid
chat-bubble-bottom-center-text
chat-bubble-bottom-center
chat-bubble-left-ellipsis-solid
chat-bubble-left-ellipsis
chat-bubble-left-right-solid
chat-bubble-left-right
chat-bubble-left-solid
chat-bubble-left
chat-bubble-oval-left-ellipsis-solid
chat-bubble-oval-left-ellipsis
chat-bubble-oval-left-solid
chat-bubble-oval-left
check-badge-solid
check-badge
check-circle-solid
check-circle
check-solid
check
chevron-double-down-solid
chevron-double-down
chevron-double-left-solid
chevron-double-left
chevron-double-right-solid
chevron-double-right
chevron-double-up-solid
chevron-double-up
chevron-down-solid
chevron-down
chevron-left-solid
chevron-left
chevron-right-solid
chevron-right
chevron-up-down-solid
chevron-up-down
chevron-up-solid
chevron-up
circle-stack-solid
circle-stack
clipboard-document-check-solid
clipboard-document-check
clipboard-document-list-solid
clipboard-document-list
clipboard-document-solid
clipboard-document
clipboard-solid
clipboard
clock-solid
clock
cloud-arrow-down-solid
cloud-arrow-down
cloud-arrow-up-solid
cloud-arrow-up
cloud-solid
cloud
code-bracket-solid
code-bracket-square-solid
code-bracket-square
code-bracket
cog-6-tooth-solid
cog-6-tooth
cog-8-tooth-solid
cog-8-tooth
cog-solid
cog
command-line-solid
command-line
computer-desktop-solid
computer-desktop
cpu-chip-solid
cpu-chip
credit-card-solid
credit-card
cube-solid
cube-transparent-solid
cube-transparent
cube
currency-bangladeshi-solid
currency-bangladeshi
currency-dollar-solid
currency-dollar
currency-euro-solid
currency-euro
currency-pound-solid
currency-pound
currency-rupee-solid
currency-rupee
currency-yen-solid
currency-yen
cursor-arrow-rays-solid
cursor-arrow-rays
cursor-arrow-ripple-solid
cursor-arrow-ripple
device-phone-mobile-solid
device-phone-mobile
device-tablet-solid
device-tablet
divide-solid
divide
document-arrow-down-solid
document-arrow-down
document-arrow-up-solid
document-arrow-up
document-chart-bar-solid
document-chart-bar
document-check-solid
document-check
document-currency-bangladeshi-solid
document-currency-bangladeshi
document-currency-dollar-solid
document-currency-dollar
document-currency-euro-solid
document-currency-euro
document-currency-pound-solid
document-currency-pound
document-currency-rupee-solid
document-currency-rupee
document-currency-yen-solid
document-currency-yen
document-duplicate-solid
document-duplicate
document-magnifying-glass-solid
document-magnifying-glass
document-minus-solid
document-minus
document-plus-solid
document-plus
document-solid
document-text-solid
document-text
document
ellipsis-horizontal-circle-solid
ellipsis-horizontal-circle
ellipsis-horizontal-solid
ellipsis-horizontal
ellipsis-vertical-solid
ellipsis-vertical
envelope-open-solid
envelope-open
envelope-solid
envelope
equals-solid
equals
exclamation-circle-solid
exclamation-circle
exclamation-triangle-solid
exclamation-triangle
eye-dropper-solid
eye-dropper
eye-slash-solid
eye-slash
eye-solid
eye
face-frown-solid
face-frown
face-smile-solid
face-smile
film-solid
film
finger-print-solid
finger-print
fire-solid
fire
flag-solid
flag
folder-arrow-down-solid
folder-arrow-down
folder-minus-solid
folder-minus
folder-open-solid
folder-open
folder-plus-solid
folder-plus
folder-solid
folder
forward-solid
forward
funnel-solid
funnel
gif-solid
gif
gift-solid
gift-top-solid
gift-top
gift
globe-alt-solid
globe-alt
globe-americas-solid
globe-americas
globe-asia-australia-solid
globe-asia-australia
globe-europe-africa-solid
globe-europe-africa
h1-solid
h1
h2-solid
h2
h3-solid
h3
hand-raised-solid
hand-raised
hand-thumb-down-solid
hand-thumb-down
hand-thumb-up-solid
hand-thumb-up
hashtag-solid
hashtag
heart-solid
heart
home-modern-solid
home-modern
home-solid
home
identification-solid
identification
inbox-arrow-down-solid
inbox-arrow-down
inbox-solid
inbox-stack-solid
inbox-stack
inbox
information-circle-solid
information-circle
italic-solid
italic
key-solid
key
language-solid
language
lifebuoy-solid
lifebuoy
light-bulb-solid
light-bulb
link-slash-solid
link-slash
link-solid
link
list-bullet-solid
list-bullet
lock-closed-solid
lock-closed
lock-open-solid
lock-open
magnifying-glass-circle-solid
magnifying-glass-circle
magnifying-glass-minus-solid
magnifying-glass-minus
magnifying-glass-plus-solid
magnifying-glass-plus
magnifying-glass-solid
magnifying-glass
map-pin-solid
map-pin
map-solid
map
megaphone-solid
megaphone
microphone-solid
microphone
minus-circle-solid
minus-circle
minus-small-solid
minus-small
minus-solid
minus
moon-solid
moon
musical-note-solid
musical-note
newspaper-solid
newspaper
no-symbol-solid
no-symbol
numbered-list-solid
numbered-list
paint-brush-solid
paint-brush
paper-airplane-solid
paper-airplane
paper-clip-solid
paper-clip
pause-circle-solid
pause-circle
pause-solid
pause
pencil-solid
pencil-square-solid
pencil-square
pencil
percent-badge-solid
percent-badge
phone-arrow-down-left-solid
phone-arrow-down-left
phone-arrow-up-right-solid
phone-arrow-up-right
phone-solid
phone-x-mark-solid
phone-x-mark
phone
photo-solid
photo
play-circle-solid
play-circle
play-pause-solid
play-pause
play-solid
play
plus-circle-solid
plus-circle
plus-small-solid
plus-small
plus-solid
plus
power-solid
power
presentation-chart-bar-solid
presentation-chart-bar
presentation-chart-line-solid
presentation-chart-line
printer-solid
printer
puzzle-piece-solid
puzzle-piece
qr-code-solid
qr-code
question-mark-circle-solid
question-mark-circle
queue-list-solid
queue-list
radio-solid
radio
receipt-percent-solid
receipt-percent
receipt-refund-solid
receipt-refund
rectangle-group-solid
rectangle-group
rectangle-stack-solid
rectangle-stack
rocket-launch-solid
rocket-launch
rss-solid
rss
scale-solid
scale
scissors-solid
scissors
server-solid
server-stack-solid
server-stack
server
share-solid
share
shield-check-solid
shield-check
shield-exclamation-solid
shield-exclamation
shopping-bag-solid
shopping-bag
shopping-cart-solid
shopping-cart
signal-slash-solid
signal-slash
signal-solid
signal
slash-solid
slash
sparkles-solid
sparkles
speaker-wave-solid
speaker-wave
speaker-x-mark-solid
speaker-x-mark
square-2-stack-solid
square-2-stack
square-3-stack-3d-solid
square-3-stack-3d
squares-2x2-solid
squares-2x2
squares-plus-solid
squares-plus
star-solid
star
stop-circle-solid
stop-circle
stop-solid
stop
strikethrough-solid
strikethrough
sun-solid
sun
swatch-solid
swatch
table-cells-solid
table-cells
tag-solid
tag
ticket-solid
ticket
trash-solid
trash
trophy-solid
trophy
truck-solid
truck
tv-solid
tv
underline-solid
underline
user-circle-solid
user-circle
user-group-solid
user-group
user-minus-solid
user-minus
user-plus-solid
user-plus
user-solid
user
users-solid
users
variable-solid
variable
video-camera-slash-solid
video-camera-slash
video-camera-solid
video-camera
view-columns-solid
view-columns
viewfinder-circle-solid
viewfinder-circle
wallet-solid
wallet
wifi-solid
wifi
window-solid
window
wrench-screwdriver-solid
wrench-screwdriver
wrench-solid
wrench
x-circle-solid
x-circle
x-mark-solid
x-mark
Icon name copied to clipboard!
Icons are based on Heroicons collection. Outline icons have no suffix (e.g. "check"), while solid icons have "-solid" suffix (e.g. "check-solid"). Click on an icon to copy its name.