search

text-sizeTipografia

hashtag
Recomendações de uso

Essas recomendações de uso foram criadas para fornecer orientações sobre a utilização das fontes em nosso produto e garantir consistência, coesão visual e hierárquica em todas as interfaces. É importante ressaltar que as recomendações apresentadas neste guia não são regras imutáveis, mas sim diretrizes que refletem boas práticas a serem seguidas. À medida que o nosso produto evoluir e amadurecer, é possível que essas recomendações sejam revisadas e atualizadas para atender às necessidades.

hashtag
Tipos de token

Atualmente, temos 4 tipos de tokens com diferentes características que foram pensados para contextos específicos. São eles:

chevron-rightBase Regularhashtag

Base Regular 10

Token: ref-typography-baseRegular10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 10

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular 12

Token: ref-typography-baseRegular12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 12

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular 14

Token: ref-typography-baseRegular14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 14

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular 16

Token: ref-typography-baseRegular16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 16

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular 18

Token: ref-typography-baseRegular18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 18

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular 20

Token: ref-typography-baseRegular20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 20

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular 16

Token: ref-typography-baseRegular24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 24

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightBase Stronghashtag

Base Strong 10

Token: ref-typography-baseStrong10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 10

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 12

Token: ref-typography-baseStrong12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 12

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 14

Token: ref-typography-baseStrong14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 14

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 16

Token: ref-typography-baseStrong16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 16

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 18

Token: ref-typography-baseStrong18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 18

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 20

Token: ref-typography-baseStrong20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 20

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 24

Token: ref-typography-baseStrong24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 24

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 28

Token: ref-typography-baseStrong28

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 28

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 32

Token: ref-typography-baseStrong32

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 32

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 36

Token: ref-typography-baseStrong36

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 36

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 40

Token: ref-typography-baseStrong40

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 40

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 44

Token: ref-typography-baseStrong44

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 44

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong 48

Token: ref-typography-baseStrong48

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 48

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightBase Regular Italichashtag

Base Regular Italic 10

Token: ref-typography-baseRegularItalic10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 10

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular Italic 12

Token: ref-typography-baseRegularItalic12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 12

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular Italic 14

Token: ref-typography-baseRegularItalic14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 14

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular Italic 16

Token: ref-typography-baseRegularItalic16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 16

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular Italic 18

Token: ref-typography-baseRegularItalic18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 18

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular Italic 20

Token: ref-typography-baseRegularItalic18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italicitalic

  • font-size: 20

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Regular Italic 24

Token: ref-typography-baseRegularItalic24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 24

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightBase Strong Italichashtag

Base Strong Italic 10

Token: ref-typography-baseStrongItalic10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 10

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 12

Token: ref-typography-baseStrongItalic12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 12

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 14

Token: ref-typography-baseStrongItalic14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 14

  • line-height: ref-typeface-lineHeightSmall

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 16

Token: ref-typography-baseStrongItalic16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 16

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 18

Token: ref-typography-baseStrongItalic18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 18

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 20

Token: ref-typography-baseStrongItalic20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 20

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 24

Token: ref-typography-baseStrongItalic24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 24

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 28

Token: ref-typography-baseStrongItalic28

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 28

  • line-height: ref-typeface-lineHeightMedium

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 32

Token: ref-typography-baseStrongItalic32

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 32

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 36

Token: ref-typography-baseStrongItalic36

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 36

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 40

Token: ref-typography-baseStrongItalic40

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 40

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 44

Token: ref-typography-baseStrongItalic44

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 44

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Base Strong Italic 48

Token: ref-typography-baseStrongItalic48

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 48

  • line-height: ref-typeface-lineHeightLarge

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: N/A

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightLyrics & Lyrics Compacthashtag

Lyrics

Token: ref-typography-lyrics

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightLyrics

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: N/A

  • font-feature-settings: N/A

  • apple-size: Body

Lyrics Compact Primary

Token: ref-typography-lyricsCompactPrimary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightLyricsCompact

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: N/A

  • font-feature-settings: N/A

  • apple-size: Body

Lyrics Compact Primary

Token: ref-typography-lyricsCompactSecondary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightLyricsCompactSecondary

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: N/A

  • font-feature-settings: N/A

  • apple-size: Body

Lyrics Compact Strong Primary

Token: ref-typography-lyricsCompactStrongPrimary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightStrongDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightLyricsCompact

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: N/A

  • font-feature-settings: N/A

  • apple-size: Body

Lyrics Compact Strong Secondary

Token: ref-typography-lyricsCompactStrongSecondary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightStrongDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightLyricsCompact

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: N/A

  • font-feature-settings: N/A

  • apple-size: Body

chevron-rightContenthashtag

Content Primary

Token: ref-typography-contentPrimary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: N/A

  • apple-size: Body

Content Secondary

Token: ref-typography-contentSecondary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizeSecondary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: N/A

  • apple-size: Body

Content Strong Primary

Token: ref-typography-contentStrongPrimary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightStrongDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: N/A

  • apple-size: Body

Content Strong 18

Token: ref-typography-contentStrongSecondary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightStrongDefault

  • font-style: normal

  • font-size: ref-typeface-dynamicSizeSecondary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: N/A

  • apple-size: Body

Content Italic Primary

Token: ref-typography-contentStrongItalicPrimary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: N/A

  • apple-size: Body

Content Italic Secondary

Token: ref-typography-contentStrongItalicSecondary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: ref-typeface-dynamicSizeSecondary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: N/A

  • apple-size: Body

Content Strong Italic Primary

Token: ref-typography-contentStrongItalicPrimary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightStrongDefault

  • font-style: italic

  • font-size: ref-typeface-dynamicSizePrimary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: N/A

  • apple-size: Body

Content Strong Italic 20

Token: ref-typography-contentStrongItalicSecondary

  • font-family: ref-typeface-familySystem

  • font-weight: ref-typeface-weightStrongDefault

  • font-style: italic

  • font-size: ref-typeface-dynamicSizeSecondary

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingDefault

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: N/A

  • apple-size: Body

chevron-rightCopy Regularhashtag

Copy Regular 10

Token: ref-typography-copyRegular10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 10

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular 12

Token: ref-typography-copyRegular12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 12

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular 14

Token: ref-typography-copyRegular14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 14

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular 16

Token: ref-typography-copyRegular16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 16

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular 18

Token: ref-typography-copyRegular18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 18

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular 20

Token: ref-typography-copyRegular20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 20

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular 24

Token: ref-typography-copyRegular24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: normal

  • font-size: 24

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightCopy Stronghashtag

Copy Strong 10

Token: ref-typography-copyStrong10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 10

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong 12

Token: ref-typography-copyStrong12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 12

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong 14

Token: ref-typography-copyStrong14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 14

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong 16

Token: ref-typography-copyStrong16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 16

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong 18

Token: ref-typography-copyStrong18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 18

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong 20

Token: ref-typography-copyStrong20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 20

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong 24

Token: ref-typography-copyStrong24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: normal

  • font-size: 24

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightCopy Regular Italichashtag

Copy Regular Italic 10

Token: ref-typography-copyRegularItalic10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 10

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular Italic 12

Token: ref-typography-copyRegularItalic12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 12

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular Italic 14

Token: ref-typography-copyRegularItalic14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 14

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular Italic 16

Token: ref-typography-copyRegularItalic16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 16

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular Italic 18

Token: ref-typography-copyRegularItalic18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 18

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular Italic 20

Token: ref-typography-copyRegularItalic20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 20

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Regular Italic 24

Token: ref-typography-copyRegularItalic24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightRegularDefault

  • font-style: italic

  • font-size: 24

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

chevron-rightCopy Strong Italichashtag

Copy Strong Italic 10

Token: ref-typography-copyStrongItalic10

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 10

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong Italic 12

Token: ref-typography-copyStrongItalic12

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 12

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong Italic 14

Token: ref-typography-copyStrongItalic14

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 14

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingSmall

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong Italic 16

Token: ref-typography-copyStrongItalic16

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 16

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong Italic 18

Token: ref-typography-copyStrongItalic18

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 18

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong Italic 20

Token: ref-typography-copyStrongItalic20

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 20

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

Copy Strong Italic 24

Token: ref-typography-copyStrongItalic24

  • font-family: ref-typeface-familyCustom

  • font-weight: ref-typeface-weightStrongCustom

  • font-style: italic

  • font-size: 24

  • line-height: ref-typeface-lineHeightParagraph

  • letter-spacing: ref-typeface-letterSpacingCustom

  • paragraph-spacing: ref-typeface-paragraphSpacingMedium

  • font-feature-settings: ref-typeface-fontFeatureSettings

  • apple-size: Body

hashtag
Tipos de aplicação

Cada token é atribuído a diferentes tipos de aplicações. Temos 5 tipos de aplicações que são divididos em large, medium e small e possui tamanhos diferentes para desktop e mobile. São elas:

hashtag
Display

Esse estilo é reservado para situações que demandam destaque e ênfase visual. É utilizado em títulos primários como cabeçalhos de página, títulos de artigos e landing pages. O estilo display funciona melhor em telas maiores, mas isso não impede sua utilização em dispositivos mobile. Esse estilo é utilizado na regra Variable Display.

hashtag
Display Large

Para elementos de maior destaque, como títulos principais da página, seções importantes e chamada de artigos.

Device
Font Size
Tokens possíveis

Mobile

32px

Base Strong 32

Desktop

48px

Base Strong 48

hashtag
Display Medium

Suporte para mudança de tamanho de fonte na tela de playlists e álbuns que terá variação entre large, medium e small a depender da quantidade de caracteres.

Device
Font Size
Tokens possíveis

Mobile

28px

Base Strong 28

Desktop

40px

Base Strong 40

hashtag
Display Small

Recomendado para títulos secundários, que têm um destaque menor do que os "Display Large" como por exemplo os títulos de bloco na Landing Page.

Device
Font Size
Tokens possíveis

Mobile

28px

Base Strong 28

Desktop

40px

Base Strong 40

hashtag
Body

O estilo Body é utilizado no corpo do texto e é responsável por fornecer informações mais detalhadas. É onde a maior parte do conteúdo é apresentada, seja em parágrafos de texto (artigos e comentários), descrições, labels ou outros elementos informativos.

hashtag
Body Large

Utilizado para textos de suporte ao "Display Large" e para passagens de texto mais longas como corpo de texto dos artigos do blog.

Device
Font Size
Tokens possíveis

Mobile

18px

Copy Regular 18, Copy Regular Italic 18, Copy Strong 18, Copy Strong Italic 18

Mobile (Blog)

18px

Content Regular 18, Content Regular Italic 18, Content Strong 18, Content Strong Italic 18

Desktop

20px

Copy Regular 20, Copy Regular Italic 20, Copy Strong 20,

Copy Strong Italic 20

Desktop (Blog)

20px

Content Regular 20, Content Regular Italic 20, Content Strong 20, Content Strong Italic 20

hashtag
Body Medium

Adequado para corpo de texto secundário, como descrições menores.

Device
Font Size
Tokens possíveis

Mobile

16px

Copy Regular 16 | Copy Regular Italic 16 Copy Strong 16 | Copy Strong Italic 16

Mobile (Blog)

16px

Content Regular 16 | Content Regular Italic 16 Content Strong 16 | Content Strong Italic 16

Desktop

18px

Copy Regular 18 | Copy Regular Italic 18 Copy Strong 18 | Copy Strong Italic 18

Desktop (Blog)

18px

Content Regular 18 | Content Regular Italic 18 Content Strong 18 | Content Strong Italic 18

hashtag
Body Small

Adequado para corpo de texto secundário, como descrições menores.

Device
Font Size
Tokens possíveis

Mobile

14px

Base Regular 14 | Copy Regular Italic 14 Base Strong 14 | Copy Strong Italic 14

Mobile (Blog)

14px

Content Regular 14 | Content Regular Italic 14 Content Strong 14 | Content Strong Italic 14

Desktop

16px

Copy Regular 16 | Copy Regular Italic 16 Copy Strong 16 | Copy Strong Italic 16

Desktop (Blog)

16px

Content Regular 16 | Content Regular Italic 16 Content Strong 16 | Content Strong Italic 16

hashtag
Lyric

Esse estilo é exclusivamente utilizado para representar textos escritos em versos, como os encontrados nas letras de música. Esse estilo possui variações de fonte que se adaptam de acordo com o local onde está sendo exibido, podendo ser Arial (Desktop / iOS) ou Roboto (Android).

hashtag
Lyric Large

Tamanho oficial da letra.

Device
Font Size
Tokens possíveis

Mobile

18px

Lyrics 18 ou Lyrics Compact 18

Desktop

18px

Lyrics 18 ou Lyrics Compact 18

hashtag
Lyric Medium

Adequado para acompanhar o tamanho e contexto que a letra está aplicada. Exemplo a citação de letra aparecendo nos comentários e no artigo no blog no site desktop.

Device
Font Size
Tokens possíveis

Mobile

16px

Lyrics 16 ou Lyrics Compact 16

Desktop

18px

Lyrics 18 ou Lyrics Compact 18

hashtag
Lyric Small

Adequado para acompanhar o tamanho e contexto que a letra está aplicada. Exemplo a citação da tradução da letra aparecendo nos comentários e no artigo no blog no site mobile.

Device
Font Size
Tokens possíveis

Mobile

14px

Lyrics 14 ou Lyrics Compact 14

Desktop

16px

Lyrics 16 ou Lyrics Compact 16

hashtag
Label

São estilos utilitários menores, usados ​​para texto dentro de componentes ou para textos muito pequeno no corpo do conteúdo, como legendas.

hashtag
Label large

Utilizado em botões de tamanho large e também pode ser utilizado dentro de componentes diversos de acordo com a necessidade.

Device
Font Size
Tokens possíveis

Mobile

16px

Base Regular 18 | Base Regular Italic 18 Base Strong 18 | Base Strong Italic 18 Copy Regular 16 | Copy Regular Italic 16 Copy Strong 16 | Copy Strong Italic 16

Desktop

16px

Base Regular 20 | Base Regular Italic 20 Base Strong 20 | Base Strong Italic 20 Copy Regular 16 | Copy Regular Italic 16 Copy Strong 16 | Copy Strong Italic 16

hashtag
Label medium

Utilizado em botões de tamanho medium e também pode ser utilizado dentro de componentes diversos de acordo com a necessidade.

Device
Font Size
Tokens possíveis

Mobile

14px

Base Regular 14 | Base Regular Italic 14 Base Strong 14 | Base Strong Italic 14 Copy Regular 14 | Copy Regular Italic 14 Copy Strong 14 | Copy Strong Italic 14

Desktop

14px

Base Regular 14 | Base Regular Italic 14 Base Strong 14 | Base Strong Italic 14 Copy Regular 14 | Copy Regular Italic 14 Copy Strong 14 | Copy Strong Italic 14

hashtag
Label small

Utilizado em botões de tamanho small e também são aplicados em legendas de imagens ou tags, fornecendo informações adicionais em um espaço limitado.

Device
Font Size
Tokens possíveis

Mobile

12px

Base Regular 12 | Base Regular Italic 12 Base Strong 12 | Base Strong Italic 12 Copy Regular 12 | Copy Regular Italic 12 Copy Strong 12 | Copy Strong Italic 12

Desktop

12px

Base Regular 12 | Base Regular Italic 12 Base Strong 12 | Base Strong Italic 12 Copy Regular 12 | Copy Regular Italic 12 Copy Strong 12 | Copy Strong Italic 12

hashtag
Histórico de Atualizações

Figma
Gitbook
Android
iOS
Web

04/08/2025

Ver na tabelaarrow-up-right

chevron-rightAtualizações por datahashtag

hashtag
Agosto/2025

  • 04/08/2025

    • Atualização de componentes

circle-info

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuiçãoarrow-up-right — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.

AnteriorIconografiaPróximoVisão geral dos componentes

Atualizado