Style guide

Defining the design language of the Fine Template.

Typography

Typeface

Plus Jakarta Sans
Aa Bb Cc Dd Ee Ff Gg
Font License
Typography

Headings

Heading
Heading XLarge
Heading
Heading Large
Heading
Heading Medium
Heading
Heading Small
Heading
Heading XSmall

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Typography

Text tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Two Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Size Tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Size Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Size Large
Typography

Rich text

Vestibulum sit amet urna turpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam.

Nulla efficitur auctor hendrerit

Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non.

Aenean porta neque eget consequat fringilla

Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla rhoncus feugiat eros quis consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate ut ligula. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt.

Image caption example text

Vestibulum sit amet urna turpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam.

Nulla efficitur auctor hendrerit

Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non.

Aenean porta neque eget consequat fringilla

Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla rhoncus feugiat eros quis consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate ut ligula. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt.

Rich Text
Colors

Brand

Primary 50
#FFD2B8
Primary 100
#FFC5A3
Primary 200
#FFAC7A
Primary 300
#FF9252
Primary 400
#FF7929
Primary 500
#FF5FF0
Primary 600
#C74A00
Primary 700
#8F3500
Primary 800
#572000
Primary 900
#1F0B00
Colors

Utility

Success
#10B981
Warning
#f59E0B
Danger
#DC2626
Colors

Neutrals

Neutral 50
#fafafa
Neutral 100
#f5f5f5
Neutral 200
#e5e5e5
Neutral 300
#d4d4d4
Neutral 400
#a3a3a3
Neutral 500
#737373
Neutral 600
#525252
Neutral 700
#404040
Neutral 800
#262626
Neutral 900
#171717
Components

Buttons

Navigation Button