Grid
Colors
police-blue
police-blue-20
police-blue-70
bright-gray
bright-gray-50
bright-gray-20
persian-blue
dark-yellow
yellow
red
Typography
font size
lg:text-64 text-40
Text 5xl (64px)
lg:text-5xl text-2xl
Text 4xl (48px)
lg:text-40 text-32
Text 3xl (40px)
lg:text-32 text-2xl
Text 2xl (32px)
lg:text-2xl
Text xl (24px)
text-xl
Text lg (20px)
text-base
Text base (16px)
text-sm
Text sm (14px)
font weight
font-normal
font-weight: 400;
font-medium
font-weight: 500;
Buttons, links
Base
flex gap-2 items-center justify-center text-center font-medium text-police-blue px-10 py-4.25 text-sm uppercase bg-yellow hover:scale-102 active:scale-100 disabled:opacity-20 transition duration-100
flex gap-2 items-center justify-center text-center font-medium
text-white px-10 py-4.25 text-sm uppercase bg-police-blue hover:scale-102 active:scale-100 disabled:opacity-30 transition duration-100
flex gap-2 items-center justify-center text-center font-medium text-police-blue bg-white px-10 py-4.25 text-sm uppercase border border-police-blue hover:scale-102 active:scale-100 disabled:opacity-30 transition duration-100
Small
flex gap-2 items-center justify-center text-center font-medium
text-police-blue px-10 py-1.25 text-sm uppercase bg-yellow hover:scale-102 active:scale-100 disabled:opacity-20 transition duration-100
flex gap-2 items-center justify-center text-center font-medium
text-white px-10 py-1.25 text-sm uppercase bg-police-blue hover:scale-102 active:scale-100 disabled:opacity-30 transition duration-100
flex gap-2 items-center justify-center text-center font-medium text-police-blue bg-white px-10 py-1.25 text-sm uppercase border border-police-blue hover:scale-102 active:scale-100 disabled:opacity-30 transition duration-100
Interface icons
Usage:
{% render 'icon', icon: 'icon-name', class: 'class-name', label: 'label', fill: 'color' %}
play
chevron-left
chevron-right
chevron-up
chevron-down
arrow-right
close
checkmark
burger
trash
pen
email
heart
search
shield
user
bag
settings
minus
plus
play-solid
info
twitter
linkedin
facebook
info-1
success
warning
error
Links
I forgot my password
text-persian-blue text-base underline hover:no-underline active:underline disabled:opacity-30
Forms
input
px-5 py-3.5 border border-police-blue-70 placeholder:text-police-blue-70 hover:border-police-blue focus:!outline-police-blue focus:!outline disabled:opacity-30
input (floating label)
Input
px-5 pt-5 pb-2.5 border border-police-blue-70 placeholder:text-police-blue-70 hover:border-police-blue focus:!outline-police-blue focus:!outline disabled:opacity-30 placeholder:opacity-0 peerLabel
pl-5 absolute text-sm text-police-blue-70 duration-300 transform -translate-y-1.5 top-2 z-10 peer-placeholder-shown:text-base peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:text-sm peer-focus:-translate-y-1.5 start-0 cursor-textinput small
text-sm px-4 py-1 border border-police-blue-70 placeholder:text-police-blue-70 hover:border-police-blue focus:!outline-police-blue focus:!outline disabled:opacity-30
select
appearance-none cursor-pointer bg-select-arrow bg-no-repeat bg-right-2 px-5 py-3.5 pr-10 text-base border border-police-blue-70 placeholder:text-police-blue-70 hover:border-police-blue focus:!outline-police-blue focus:!outline disabled:opacity-30
select small
appearance-none cursor-pointer bg-select-arrow--small bg-no-repeat bg-right-1 px-4 py-1 pr-10 text-sm border border-police-blue-70 placeholder:text-police-blue-70 hover:border-police-blue focus:!outline-police-blue focus:!outline disabled:opacity-30
checkbox
appearance-none cursor-pointer w-5 h-5 p-0 bg-no-repeat bg-contain bg-center border border-police-blue-70 checked:bg-police-blue checked:border-police-blue checked:bg-checkmark disabled:opacity-30
radio button
appearance-none cursor-pointer relative rounded-full w-5 h-5 p-0 border border-police-blue-70 checked:bg-police-blue checked:border-police-blue checked:bg-police-blue before:absolute before:inset-0 before:mx-auto before:my-auto before:w-2.5 before:h-2.5 before:rounded-full before:bg-white before:content-[''] checked:before:block