Disclaimer for 2022: this was developed in 2019/2020 as an exploration and proof of concept, but not formally adopted by Xbox or the XDS system :) Refer to everything with caution and reach out to laweldon@microsoft.com for any questions!
| Level | Category | Color | Font | Size | Line Height |
|---|---|---|---|---|---|
| H1 | Primary | Grey_X0, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Secondary | Grey_X0, 80% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Tertiary | Grey_X0, 64% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Disabled | Grey_X0, 48% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H2 | Primary | Grey_X0, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Secondary | Grey_X0, 80% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Tertiary | Grey_X0, 64% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Disabled | Grey_X0, 48% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H3 | Primary | Grey_X0, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Secondary | Grey_X0, 80% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Tertiary | Grey_X0, 64% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Disabled | Grey_X0, 48% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H4 | Primary | Grey_X0, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Secondary | Grey_X0, 80% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Tertiary | Grey_X0, 64% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Disabled | Grey_X0, 48% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| Subtitle1 | Primary | Grey_X0, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Secondary | Grey_X0, 80% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Disabled | Grey_X0, 48% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle2 | Primary | Grey_X0, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Secondary | Grey_X0, 80% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Disabled | Grey_X0, 48% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Body1 | Primary | Grey_X0, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Secondary | Grey_X0, 80% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Tertiary | Grey_X0, 64% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Disabled | Grey_X0, 48% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Green - Rest | Green_X35, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Green - Hover/Focus | Green_X25, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Green - Pressed | Green_X45, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Yellow - Pressed | Yellow, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Primary | Grey_X0, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Secondary | Grey_X0, 80% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Tertiary | Grey_X0, 64% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Disabled | Grey_X0, 48% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Caption1 | Primary | Grey_X0, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Secondary | Grey_X0, 80% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Tertiary | Grey_X0, 64% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Disabled | Grey_X0, 48% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption2 | Primary | Grey_X0, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Secondary | Grey_X0, 80% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Tertiary | Grey_X0, 64% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Disabled | Grey_X0, 48% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Green - Rest | Green_X35, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Green - Hover/Focus | Green_X25, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Green - Pressed | Green_X45, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Yellow - Rest | Yellow, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| ButtonText | Primary | Grey_X0, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Secondary | Grey_X0, 80% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Disabled | Grey_X0, 48% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| TagText | Primary | Grey_X0, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Secondary | Grey_X0, 80% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Disabled | Grey_X0, 48% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| Level | Category | Color | Font | Size | Line Height |
|---|---|---|---|---|---|
| H1 | Primary | Grey_X100, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Secondary | Grey_X100, 80% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Tertiary | Grey_X100, 64% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Disabled | Grey_X100, 48% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 40px (5rem) | 48px (6rem) |
| H2 | Primary | Grey_X100, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Secondary | Grey_X100, 80% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Tertiary | Grey_X100, 64% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Disabled | Grey_X100, 48% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 32px (4rem) | 40px (5rem) |
| H3 | Primary | Grey_X100, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Secondary | Grey_X100, 80% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Tertiary | Grey_X100, 64% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Disabled | Grey_X100, 48% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H3 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 24px (3rem) | 32px (4rem) |
| H4 | Primary | Grey_X100, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Secondary | Grey_X100, 80% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Tertiary | Grey_X100, 64% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Disabled | Grey_X100, 48% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| H4 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Light | 20px (2.5rem) | 28px (3.5rem) |
| Subtitle1 | Primary | Grey_X100, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Secondary | Grey_X100, 80% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Disabled | Grey_X100, 48% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 16px (2rem) | 24px (3rem) |
| Subtitle2 | Primary | Grey_X100, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Secondary | Grey_X100, 80% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Disabled | Grey_X100, 48% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Subtitle2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 14px (1.75rem) | 20px (2.5rem) |
| Body1 | Primary | Grey_X100, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Secondary | Grey_X100, 80% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Tertiary | Grey_X100, 64% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Disabled | Grey_X100, 48% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Green - Rest | Green_X60, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Green - Hover/Focus | Green_X50, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Green - Pressed | Green_X70, 100% | Segoe Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body1 | Accent - Yellow - Pressed | Yellow, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Primary | Grey_X100, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Secondary | Grey_X100, 80% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Tertiary | Grey_X100, 64% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Disabled | Grey_X100, 48% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Body2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 13px (1.625rem) | 18px (2.25rem) |
| Caption1 | Primary | Grey_X100, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Secondary | Grey_X100, 80% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Tertiary | Grey_X100, 64% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Disabled | Grey_X100, 48% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 12px (1.5rem) | 16px (2rem) |
| Caption2 | Primary | Grey_X100, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Secondary | Grey_X100, 80% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Tertiary | Grey_X100, 64% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Disabled | Grey_X100, 48% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Green - Rest | Green_X60, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Green - Hover/Focus | Green_X50, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Green - Pressed | Green_X70, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| Caption2 | Accent - Yellow - Rest | Yellow, 100% | Segoe Regular | 20px (2.5rem) | 14px (1.75rem) |
| ButtonText | Primary | Grey_X100, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Secondary | Grey_X100, 80% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Disabled | Grey_X100, 48% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| ButtonText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 13px (1.625rem) | 16px (2rem) |
| TagText | Primary | Grey_X100, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Secondary | Grey_X100, 80% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Disabled | Grey_X100, 48% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| TagText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 12px (1.5rem) | 16px (2rem) |
| Level | Category | Color | Font | Size | Line Height |
|---|---|---|---|---|---|
| H1 | Primary | Grey_X0, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Secondary | Grey_X0, 80% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Tertiary | Grey_X0, 64% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Disabled | Grey_X0, 48% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H2 | Primary | Grey_X0, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Secondary | Grey_X0, 80% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Tertiary | Grey_X0, 64% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Disabled | Grey_X0, 48% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H3 | Primary | Grey_X0, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Secondary | Grey_X0, 80% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Tertiary | Grey_X0, 64% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Disabled | Grey_X0, 48% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H4 | Primary | Grey_X0, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Secondary | Grey_X0, 80% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Tertiary | Grey_X0, 64% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Disabled | Grey_X0, 48% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| Subtitle1 | Primary | Grey_X0, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Secondary | Grey_X0, 80% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Disabled | Grey_X0, 48% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle2 | Primary | Grey_X0, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Secondary | Grey_X0, 80% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Disabled | Grey_X0, 48% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Body1 | Primary | Grey_X0, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Secondary | Grey_X0, 80% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Tertiary | Grey_X0, 64% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Disabled | Grey_X0, 48% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Green - Rest | Green_X35, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Green - Hover/Focus | Green_X25, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Green - Pressed | Green_X45, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Yellow - Pressed | Yellow, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Primary | Grey_X0, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Secondary | Grey_X0, 80% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Tertiary | Grey_X0, 64% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Disabled | Grey_X0, 48% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Caption1 | Primary | Grey_X0, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Secondary | Grey_X0, 80% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Tertiary | Grey_X0, 64% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Disabled | Grey_X0, 48% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption2 | Primary | Grey_X0, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Secondary | Grey_X0, 80% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Tertiary | Grey_X0, 64% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Disabled | Grey_X0, 48% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Green - Rest | Green_X35, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Green - Hover/Focus | Green_X25, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Green - Pressed | Green_X45, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Yellow - Rest | Yellow, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| ButtonText | Primary | Grey_X0, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Secondary | Grey_X0, 80% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Disabled | Grey_X0, 48% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| TagText | Primary | Grey_X0, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Secondary | Grey_X0, 80% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Tertiary | Grey_X0, 64% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Disabled | Grey_X0, 48% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Green - Rest | Green_X35, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Green - Hover/Focus | Green_X25, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Green - Pressed | Green_X45, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| Level | Category | Color | Font | Size | Line Height |
|---|---|---|---|---|---|
| H1 | Primary | Grey_X100, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Secondary | Grey_X100, 80% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Tertiary | Grey_X100, 64% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Disabled | Grey_X100, 48% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 80px (10rem) | 96px (12rem) |
| H2 | Primary | Grey_X100, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Secondary | Grey_X100, 80% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Tertiary | Grey_X100, 64% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Disabled | Grey_X100, 48% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 64px (8rem) | 80px (10rem) |
| H3 | Primary | Grey_X100, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Secondary | Grey_X100, 80% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Tertiary | Grey_X100, 64% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Disabled | Grey_X100, 48% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H3 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 48px (6rem) | 64px (8rem) |
| H4 | Primary | Grey_X100, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Secondary | Grey_X100, 80% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Tertiary | Grey_X100, 64% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Disabled | Grey_X100, 48% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| H4 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Semilight | 40px (5rem) | 56px (7rem) |
| Subtitle1 | Primary | Grey_X100, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Secondary | Grey_X100, 80% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Disabled | Grey_X100, 48% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 32px (4rem) | 48px (6rem) |
| Subtitle2 | Primary | Grey_X100, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Secondary | Grey_X100, 80% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Disabled | Grey_X100, 48% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Subtitle2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 28px (3.5rem) | 40px (5rem) |
| Body1 | Primary | Grey_X100, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Secondary | Grey_X100, 80% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Tertiary | Grey_X100, 64% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Disabled | Grey_X100, 48% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Green - Rest | Green_X60, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Green - Hover/Focus | Green_X50, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Green - Pressed | Green_X70, 100% | Segoe Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body1 | Accent - Yellow - Pressed | Yellow, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Primary | Grey_X100, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Secondary | Grey_X100, 80% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Tertiary | Grey_X100, 64% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Disabled | Grey_X100, 48% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Body2 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 26px (3.25rem) | 36px (4.5rem) |
| Caption1 | Primary | Grey_X100, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Secondary | Grey_X100, 80% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Tertiary | Grey_X100, 64% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Disabled | Grey_X100, 48% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption1 | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Regular | 24px (3rem) | 32px (4rem) |
| Caption2 | Primary | Grey_X100, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Secondary | Grey_X100, 80% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Tertiary | Grey_X100, 64% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Disabled | Grey_X100, 48% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Green - Rest | Green_X60, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Green - Hover/Focus | Green_X50, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Green - Pressed | Green_X70, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| Caption2 | Accent - Yellow - Rest | Yellow, 100% | Segoe Regular | 20px (2.5rem) | 28px (3.5rem) |
| ButtonText | Primary | Grey_X100, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Secondary | Grey_X100, 80% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Disabled | Grey_X100, 48% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| ButtonText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 26px (3.25rem) | 32px (4rem) |
| TagText | Primary | Grey_X100, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Secondary | Grey_X100, 80% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Tertiary | Grey_X100, 64% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Disabled | Grey_X100, 48% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Green - Rest | Green_X60, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Green - Hover/Focus | Green_X50, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Green - Pressed | Green_X70, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
| TagText | Accent - Yellow - Rest | Yellow, 100% | Bahnschrift Bold | 24px (3rem) | 32px (4rem) |
