Styleguide
Gathered here are all styled WordPress editing blocks and page styles.
Elements
Colors:
Blue #4B4BE7
Blue light #DEDEF4
Purple #7676D6
Teal #46E0BC
Teal light #A9F7E5
White #FFFFFF
Lighter #F8F8F8
Light #F1F1F1
Grey #E0E0E0
Dark #AAAAAA
Black light #6E6E6E
Black #454545
Fonts:
Icones Regular
Icones SemiBold
Icones Bold
Text styles
Headings:
Heading h1
Heading h2
Heading h3
Table headings
Paragraph text
Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.
Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Inline bold from “bold” button ornare sem lacinia quam venenatis vestibulum. Inline semibold from “italic” button commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
Large text example — Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.
Small text example — Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.
Blockquote:
Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
Client John Doe
Lists:
- Vulputate
- Sollicitudin
- Commodo
- Adipiscing
- Vestibulum
Links:
Simple link in text.
Interface elements
Buttons:
Buttons will always receive a minimum width…
… but grow with longer text:
Text input:
Checkboxes:
Dev note: input elements of class “augment” will render this custom checkbox and already require a span to follow the input
Radio button:
Dev note: input elements of class “augment” will render this custom radio and already require a span to follow the input
Select dropdown