STYLEGUIDE

White Button

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Text Sizes

SMALL TITLE TEXT SIZE

This is TINY TEXT SIZE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is MEDIUM TEXT SIZE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is LARGE TEXT SIZE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Buttons

Black Button

Backgrounds

PRIMARY BG

SECONDARY BG

DARK GREY BG

:root{ --readabler-reading-mask: rgba(0, 0, 0, 0.7); } .mdp-readabler-tts { --readabler-tts-bg: rgba(33, 150, 243, 1); --readabler-tts-color: #ffffff; } #mdp-readabler-popup-box { --readabler-overlay: rgba(2, 83, 238, 0.5); --readabler-bg: #ffffff; --readabler-bg-dark: #16191b; --readabler-text: #333; --readabler-text-dark: #deeffd; --readabler-color: #000000; --readabler-color-dark: rgba(33, 150, 243, 1); --readabler-color-transparent: #00000033; --readabler-color-transparent-dark: rgba(33,150,243,0.2); --readabler-border-radius: 20px; --readabler-animate: 600ms; } .mdp-readabler-trigger-button-box { --readabler-btn-margin: 10px; --readabler-btn-padding: 20px; --readabler-btn-radius: 50px; --readabler-btn-border-width: 3px; --readabler-btn-color: #ffffff; --readabler-btn-color-hover: #000000; --readabler-btn-border-color: #ffffff; --readabler-btn-border-color-hover: rgba(33, 150, 243, 1); --readabler-btn-bg: #000000; --readabler-btn-bg-hover: #ffffff; --readabler-btn-size: 24px; --readabler-btn-delay: 0s; } #mdp-readabler-keyboard-box { --readabler-keyboard-light-bg: #ececec; --readabler-keyboard-light-key-bg: #ffffff; --readabler-keyboard-light-key: #111111; --readabler-keyboard-dark-bg: #000000CC; --readabler-keyboard-dark-key-bg: rgba( 0, 0, 0, .5 ); --readabler-keyboard-dark-key: #ffffff; }