Design system
Tipografia
Famílias, escala de tamanhos (Figma) e combinações com cores da marca. Tokens em src/styles/global.css.
Famílias tipográficas
Primária
--typography-font-family-primary·Montserrat
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 — Nomia — economia circular e bioeconomia.
Secundária
--typography-font-family-secondary·Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 — Nomia — economia circular e bioeconomia.
Adicional
--typography-font-family-additional·DM Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 — Nomia — economia circular e bioeconomia.
Escala de tamanhos
Cada linha usa font-primary e a classe de tamanho indicada; altura de linha via token Figma.
| Nome | Classe | Tamanho (var) | Altura de linha | Amostra |
|---|---|---|---|---|
| Super | text-super | --typography-font-size-super | --typography-line-height-a | Nomia — economia circular e bioeconomia. |
| Large | text-large | --typography-font-size-large | --typography-line-height-b | Nomia — economia circular e bioeconomia. |
| H1 | text-h1 | --typography-font-size-h1 | --typography-line-height-c | Nomia — economia circular e bioeconomia. |
| H2 | text-h2 | --typography-font-size-h2 | --typography-line-height-d | Nomia — economia circular e bioeconomia. |
| H3 | text-h3 | --typography-font-size-h3 | --typography-line-height-e | Nomia — economia circular e bioeconomia. |
| H4 | text-h4 | --typography-font-size-h4 | --typography-line-height-f | Nomia — economia circular e bioeconomia. |
| Subtitle | text-subtitle | --typography-font-size-subtitle | --typography-line-height-g | Nomia — economia circular e bioeconomia. |
| Body large | text-body-large | --typography-font-size-body-large | --typography-line-height-h | Nomia — economia circular e bioeconomia. |
| Body | text-body | --typography-font-size-body | --typography-line-height-i | Nomia — economia circular e bioeconomia. |
| Notes | text-notes | --typography-font-size-notes | --typography-line-height-i | Nomia — economia circular e bioeconomia. |
| Extra | text-extra | --typography-font-size-extra | --typography-line-height-j | Nomia — economia circular e bioeconomia. |
Tamanhos × cores (fundo claro)
Mesma frase em cada combinação; tipografia primária.
| Tamanho | Cinza 700 | Cinza 500 | Ciano 600 | Ciano 400 | Teal 600 | Teal 400 | Botânico 700 | Botânico 400 | Laranja 700 | Laranja 400 |
|---|---|---|---|---|---|---|---|---|---|---|
| Super | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Large | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H1 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H2 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H3 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H4 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Subtitle | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Body large | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Body | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Notes | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Extra | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
Tamanhos × cores (fundo escuro)
Superfície bg-monochrome-dark-600.
| Tamanho | Branco | Cinza 100 | Ciano 200 | Ciano 300 | Teal 200 | Botânico 300 | Laranja 300 |
|---|---|---|---|---|---|---|---|
| Super | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Large | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H1 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H2 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H3 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| H4 | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Subtitle | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Body large | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Body | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Notes | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
| Extra | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. | Texto de exemplo em várias cores. |
Pesos na primária (Montserrat)
Normal — Nomia — economia circular e bioeconomia.
Medium — Nomia — economia circular e bioeconomia.
Semibold — Nomia — economia circular e bioeconomia.
Bold — Nomia — economia circular e bioeconomia.