Design system

FIRESTARTER

21 cores, 2 fontes e 20 tipografias cadastradas em Firestarter → Layout.

Cores

Accent 400 #ffa038 --fs-color-accent-400
Accent 700 rgb(168, 85, 0) --fs-color-accent-700
Accent 900 #3d1b04 --fs-color-accent-900
Brand 50 rgb(244, 249, 246) --fs-color-brand-50
Brand 100 #e8f3ec --fs-color-brand-100
Brand 700 #3F6E4F --fs-color-brand-700
Brand 800 rgb(47, 85, 64) --fs-color-brand-800
Brand 900 #142a1f --fs-color-brand-900
Brand 950 rgb(13, 33, 24) --fs-color-brand-950
Grayscale 0 #ffffff --fs-color-grayscale-0
Grayscale 50 #f2f2f0 --fs-color-grayscale-50
Grayscale 400 #c4bfba --fs-color-grayscale-400
Grayscale 600 rgb(130, 123, 117) --fs-color-grayscale-600
Grayscale 800 #4a4541 --fs-color-grayscale-800
Grayscale 900 #1c1a18 --fs-color-grayscale-900
Modal Background rgba(10, 10, 10, 0.41) --fs-color-modal-background
Secondary 50 rgb(250, 246, 242) --fs-color-secondary-50
Secondary 100 #f2e8de --fs-color-secondary-100
Secondary 600 rgb(139, 94, 60) --fs-color-secondary-600
Secondary 700 rgb(112, 75, 48) --fs-color-secondary-700
Secondary 800 rgb(90, 60, 39) --fs-color-secondary-800

Fontes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fraunces 600, 700
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Manrope 100, 200, 300, 400, 500, 600, 700, 800, 900

Tipografias

Display Large .display-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Display Medium .display-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 1 .fs-typo-heading-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 .fs-typo-heading-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 3 .fs-typo-heading-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 4 .fs-typo-heading-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 5 .fs-typo-heading-5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 6 .fs-typo-heading-6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Large .body-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Medium .fs-typo-body-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Small .body-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Small Hide XS .body-small-hide-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label Large .label-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label Medium .label-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label Small .label-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button Large .button-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button Medium .heading-4-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button Small .button-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caption .caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tag .tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Atendimento

Minha conta

FIRESTARTER

Cores

Fontes

Tipografias

Receba nossas novidades

Contatos

Mapa do Site

Nossas Políticas

Sobre a Fazenda

FAQ & Ajuda

Segurança e Privacidade