Font stacks and sizes can be overridden by creating your own custom CSS variables.
Stacks
Out of the box Chameleon comes with two defined font stacks:
Font stack - standard
This font stack is used for all text in components that aren’t considered headings.
Font stack - decorative
This stack is used for headings only
Standard and Decorative font stacks can be the same font. This flexibility allows for quick theming of headings without having to define new CSS variables and doesn’t require a component update.
Sizes
Some component in the design system make use of fluid font values. This means that the font will scale between your minimum and maximum allowed font size without needing to define breakpoints.
Headings
Name | Size |
|---|---|
Heading XXL | |
Heading XL | |
Heading L | |
Heading M | |
Heading S NOT FLUID | |
Heading XS NOT FLUID |
Body
Name | Size |
|---|---|
Body XL | |
Body L | |
Body M NOT FLUID | |
Body S NOT FLUID | |
Body XS NOT FLUID | |
Overline NOT FLUID |
Links and buttons
Name | Size |
|---|---|
Link XL | |
Link L | |
Link M NOT FLUID | |
Link S NOT FLUID | |
Link XS NOT FLUID | |
Button L NOT FLUID | |
Button S NOT FLUID | |
CTA Link L NOT FLUID | |
CTA Link S NOT FLUID |