Typography
Askara Design System 3.0 — Type Scale & Specimens
Askara Design System 3.0 — Type Scale & Specimens
Two typefaces form the Askara type system. Fonts are self-hosted from this domain. Also available from Google Fonts.
Base font size is 1rem (16px). All sizes in rem. Spacing tokens defined in brand.css.
For each surface, the left column shows the recommended first choice. The right column shows the alternative. All pairings pass WCAG AA minimum.
Complete validated matrix. AA requires 4.5:1 (normal text), 3:1 (large 18px+). AAA requires 7:1.
| Pairing | Ratio | Level | Usage |
|---|---|---|---|
| Aa Espresso on White | 17.7 : 1 | AAA | Default body on light |
| Aa Espresso on Parchment 1 | 16.6 : 1 | AAA | Default body on light |
| Aa Espresso on Mist | 15.5 : 1 | AAA | Body on mist |
| Aa Espresso on Parchment 2 | 14.9 : 1 | AAA | Body on cards |
| Aa Espresso on Phosphor | 13.9 : 1 | AAA | Button hover |
| Aa Navy on White | 13.8 : 1 | AAA | Headings on light |
| Aa White on Navy | 13.8 : 1 | AAA | Headings on dark |
| Aa Cream on Navy | 13.0 : 1 | AAA | Default body on dark |
| Aa Navy on Parchment 1 | 13.0 : 1 | AAA | Headings on light |
| Aa Espresso on Parchment 3 | 12.2 : 1 | AAA | Body on borders |
| Aa Navy on Mist | 12.1 : 1 | AAA | Headings on mist |
| Aa Espresso on Brass Light | 11.8 : 1 | AAA | Body on brass |
| Aa Navy on Parchment 2 | 11.6 : 1 | AAA | Headings on cards |
| Aa Navy on Phosphor | 10.9 : 1 | AAA | Button hover |
| Aa Espresso on Stone | 10.8 : 1 | AAA | Body on stone |
| Aa Light Grey on Navy | 9.8 : 1 | AAA | Footer, secondary on dark |
| Aa Navy on Parchment 3 | 9.5 : 1 | AAA | Headings on borders |
| Aa Navy on Brass Light | 9.2 : 1 | AAA | Headings on brass |
| Aa Navy on Stone | 8.4 : 1 | AAA | Headings on stone |
| Aa Slate on White | 7.9 : 1 | AAA | Secondary body |
| Aa Espresso on Brass | 7.8 : 1 | AAA | Body on brass |
| Aa Slate on Parchment 1 | 7.4 : 1 | AAA | Secondary body |
| Aa Slate on Mist | 6.9 : 1 | AA | Secondary on mist |
| Aa Espresso on Green | 6.7 : 1 | AA | Button text |
| Aa Slate on Parchment 2 | 6.6 : 1 | AA | Secondary on cards |
| Aa Slate on Phosphor | 6.2 : 1 | AA | Secondary on hover |
| Aa Espresso on Destructive | 6.2 : 1 | AA | Error banners |
| Aa Navy on Brass | 6.1 : 1 | AA | Headings on brass |
| Aa White on Brass Deep | 5.9 : 1 | AA | Text on dark brass |
| Aa Cream on Brass Deep | 5.6 : 1 | AA | Body on dark brass |
| Aa Slate on Parchment 3 | 5.5 : 1 | AA | Secondary on borders |
| Aa Slate on Brass Light | 5.3 : 1 | AA | Secondary on brass |
| Aa Navy on Green | 5.2 : 1 | AA | Button text |
| Aa Green on Navy | 5.2 : 1 | AA | CTAs on dark |
| Aa White on Brass Mid | 5.0 : 1 | AA | Text on Brass Mid |
| Aa Navy on Destructive | 4.8 : 1 | AA | Error banners |
| Aa Destructive on Navy | 4.8 : 1 | AA | Error text, dark only |
| Aa Slate on Stone | 4.8 : 1 | AA | Secondary on stone |
| Aa Cream on Brass Mid | 4.7 : 1 | AA | Body on Brass Mid |
| Aa White on Destructive | 2.9 : 1 | Fail | Use espresso instead |
| Aa Green on White | 2.7 : 1 | Fail | Icons only |
| Aa White on Green | 2.7 : 1 | Fail | Icons only |
| Aa Destructive on Parchment | 2.7 : 1 | Fail | Use espresso instead |
| Aa Green on Parchment | 2.5 : 1 | Fail | Icons only |
Both fail WCAG for text on any light surface. Use only for icons, borders, and decorative elements on light backgrounds. For text, use navy or espresso on a green/destructive background instead.