Theme
Mishcon Reports
This framework supports accessible themes, using dark (prefers-color-scheme: dark), dim (prefers-contrast: less) and light (prefers-color-scheme: light) modes. Available on accessibility software and also using the 'prefers' syntax. To enable this we use a collection of surfaces, all available to the report and each of which change to their most suitable values when the color scheme is changed, either using Browser function or by the theme dropdown (top right)
.surface
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-black
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-1
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-2
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-3
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-4
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-brand
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-accent
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-brand-light
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-brand-dark
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-light
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.surface-dark
Body text
- Text alt
.text-alt- Text invert
.text-cc- Accent
.text-accent- Type
.text-type- Issue 01
.text-issue- Label accent
.label-accent
Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Brand
Accent
Text
Text Alt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.