| Info |
|---|
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:
| Panel | ||
|---|---|---|
| ||
Font stack - standardThis font stack is used for all text in components that aren’t considered headings. |
| Panel | ||
|---|---|---|
| ||
Font stack - decorativeThis stack is used only 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
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
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
| |||||||
Heading XS
|
Body
Name | Size | ||||||
|---|---|---|---|---|---|---|---|
Body XL | |||||||
Body L | |||||||
Body M
| |||||||
Body S
| |||||||
Body XS
| |||||||
Overline
|
Links and buttons
Name | Size | ||||||
|---|---|---|---|---|---|---|---|
Link XL | |||||||
Link L | |||||||
Link M
| |||||||
Link S
| |||||||
Link XS
| |||||||
Button L
| |||||||
Button S
| |||||||
CTA Link L
| |||||||
CTA Link S
|