Register for the free MAKE YOUR WORK WORKSHOP - online Wednesday 9 February 7:00PM AEST
Register Now
Tour
Pages
landing
Put the spotlight on major features.
inner
Provide a complete picture of your business.
cms
Add dynamic content to your site.
pricing
Articulate your pricing strategy.
account
Welcome new and returning users.
Sections
Blog
Customers
Heroes
Icons
Lists
Metrics
Multipurpose
Navs & Footers
Forms
Pricing
Quotes
Tabs
Videos
UI Snippets
Info
Style Guide
Changelog
Licenses
Getting Started
Get Newleaf
Search
Style Guide
An overview of all base components used in Newleaf.
Colors
Primaries and grays controlled by the Global Swatch feature.
Dark
#1C4A36
Dark - Muted
rgba(28,74,54,0.75)
Dark - Faded
rgba(28,74,54,0.15)
Primary 1
#F1B09D
Primary 2
#094D92
Primary 2
#0F4546
White
#FFFFFF
BG Primary 3
#F9DCS3
Accent 1
#FBF1DA
Accent 2
#F0F9F5
Accent 3
#F6F6F3
Accent 4
#D0C4FB
Accent 5
#F1B09D/50
Text Colors
Primaries and grays controlled by the Global Swatch feature.
Dark
#1C4A36
Dark - Muted
rgba(28,74,54,0.75)
Dark - Faded
rgba(28,74,54,0.15)
Primary 1
#9E6240
Primary 1
#9E6240
Primary 2
#094D92
Primary 2
#094D92
White
#FFFFFF
BG Primary 3
#F9DCS3
BG Primary 3
#F9DCS3
Accent 1
#FBF1DA
Accent 1
#FBF1DA
Accent 2
#F0F9F5
Accent 2
#F0F9F5
Accent 3
#F6F6F3
Accent 3
#F6F6F3
Accent 4
#D0C4FB
Accent 4
#D0C4FB
Accent 5
#F1B09D/50
Accent 5
#F1B09D/50
Typography
Headings, body and other common text elements.
Display
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
uppercase text
Large Text
Large Link
Body Text
Body Link
Small Text
Small Link
Fine Print Text
Fine Print Link
Personal Branding: Crafting Your Social Media Presence
Buttons
Component, text style and size variations
Sizes
Button
Small
Variations
Default
Border
Icon Button
On Dark Background
Default
Border
White
Form Inputs
General style and state variations for text inputs.
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
Form Label
This is some hint text for the input.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Selectables
Styling for checkboxes, selects and radios.
Checkbox
Radio
Choose an option
First Choice
Second Choice
Third Choice
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons - Interface
Common icons used throughout the Newleaf interface.
Dark
White
Icons - Social
Icons for popular social networks.
Dark
White
Icons - Decorative
Sourced from Icons8
Dark
White
