01. Colour palette

Available in Divi as global colours.

#000000
Black

Headings and body text

#ffffff
White

Alternative background

#f7f5f1
Natural

Main background

#ebebe9
Grey light

Alternative background

#cddf74
Green light

Buttons (black border)

#437637
Green dark

Buttons, headings, links

#cf202f
Red dark

Errors

#971b5e
Purple dark

Keyboard outline

Colour contrast ratio table

Background Text
#000000
#FFFFFF
#F7F5F1
#EBEBE9
#CDDF74
#437637
#CF202F
#971B5E
#666666
Black
#000000
Text
AAA 21
Text
AAA 19.2
Text
AAA 17.5
Text
AAA 14.4
White
#FFFFFF
Text
AAA 21
Text
AA 5.4
Text
AA 5.3
Text
AAA 7.9
Text
AA 5.7
Background
#F7F5F1
Text
AAA 19.2
Text
AA 4.9
Text
AA 4.9
Text
AAA 7.3
Text
AA 5.2
Background2
#EBEBE9
Text
AAA 17.5
Text
AA 4.5
Text
AA 4.5
Text
AA 6.6
Text
AA 4.8
Green light
#CDDF74
Text
AAA 14.4
Text
AA 5.4
Green dark
#437637
Text
AA 5.4
Text
AA 4.9
Text
AA 4.5
Red dark
#CF202F
Text
AA 5.3
Text
AA 4.9
Text
AA 4.5
Purple dark
#971B5E
Text
AAA 7.9
Text
AAA 7.3
Text
AA 6.6
Text
AA 5.4
Grey dark
#666666
Text
AA 5.7
Text
AA 5.2
Text
AA 4.8
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
About WCAG 2.0 contrast

02. Visuals

Logos, graphics

Central Coast Edible Garden Trail
Central Coast Edible Garden Trail logo
Drawing of bee leaving a trail
Drawing of bee leaving a trail

03. Text styles

Styles are defined in child theme stylesheet

H1-H2 headings font

Amatic SC (free Google font)

ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
1234567890

H3-H4 heading and body font

Roboto (free Google font)

ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
1234567890

Heading 1

Heading 1

Colour: white
Weight: 700
Desktop font size: 80px (5rem)
Desktop letter spacing: 1
Mobile font size: 48px (3rem)
Mobile letter spacing: 1
Text shadow (except on Membership pages)

Heading 2

Heading 2

Colour: Green dark
Weight: 700
Desktop font size: 48px (3rem)
Desktop letter spacing: 3.5px
Mobile font size: ?
Mobile letter spacing: ?

Heading 3
Toggle titles (h2)

Heading 3 + Toggle titles (h2)

Colour: Green dark
Weight: 700
Desktop font size: 24px (1.5rem)
Desktop letter spacing: 0
Mobile font size: ?
Mobile letter spacing: ?

Card Heading 2
Card heading 3
Blog grid

Card Heading 2 + Card Heading 3 + Blog grid

Colour: Green dark
Weight: 700
Desktop font size: 32px (2rem)
Desktop letter spacing: 1px
Mobile font size: ?
Mobile letter spacing: ?

Heading 4
Footer Heading

Heading 4 + Footer Heading

Font: Roboto Medium
Colour: Black
Weight: 500
Desktop: 16px (1rem)
Mobile:

Body

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.

Colour: Black
Desktop/Mobile: 16px (1rem)
Font: Roboto Regular (weight 400)

Link

Porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum

List

  • Vivamus magna justo
  • Lacinia eget consectetur sed
  • Convallis at tellus
  • Cras ultricies ligula sed magna dictum porta
  • (Un)ordered list line height: 1.7em

All in one

Heading 1

Cotton candy bear claw oat cake chocolate bar pie. Powder candy jelly chupa chups sesame snaps.

Heading 2

Chupa chups bonbon sugar plum macaroon bonbon sweet dragée. Lemon drops lemon drops brownie bear claw jelly-o cupcake candy pie. Muffin sweet roll pudding muffin jelly jujubes dessert powder.

Heading 3

Lollipop cake cupcake liquorice pudding ice cream bonbon tootsie roll. Pastry ice cream cake marzipan tart tootsie roll wafer shortbread lollipop.

Heading 3

Lollipop cake cupcake liquorice pudding ice cream bonbon tootsie roll. Pastry ice cream cake marzipan tart tootsie roll wafer shortbread lollipop.

Heading 4

Cake liquorice lemon drops liquorice sesame snaps bonbon topping marshmallow powder.

Heading 4

Cake liquorice lemon drops liquorice sesame snaps bonbon topping marshmallow powder.

Heading 4

Cake liquorice lemon drops liquorice sesame snaps bonbon topping marshmallow powder.

Pellentesque in ipsum id orci porta dapibus.

  • Vivamus magna justo

04. Buttons

1 single button style for now.
Change to dark green background and white text on hover.

Button

Smaller Button in header

05. Focus indicator

A.k.a. keyboard outline.
1 pixel offset to avoid contrast issues with dark green and black.
3 pixels wide, dark purple colour, dotted style.

Focused link

Porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum

Focused button

Focused field

06. Cards

Heading: underline on hover
Image: overlay + icon on hover (remove from tab key order with jQuery)

Explore this year’s creative and inspiring gardens!

Open your garden for visitors to enjoy

Volunteers passionate about growing food and community

Status: Published

Cottage style edible garden with perennials, annuals and fruit trees interspersed. Vertical growing and wildlife protection in use, chickens with deep litter system, ponds and food is free verge garden.

Status: Published

Abundant edibles on a small suburban corner block. Includes a front yard food forest, pond, annual vegetable growing beds, a hidden cottage herb and orchard area, and a native verge with community herb garden.

Status: Published

Productive, Permaculture food garden with Bunnies, Chickens, Fish, Insects, and Mushrooms. A medium-sized block amongst the gum trees (with lots of plum trees!) that backs onto a Rumbalara reserve filled with wildlife.

07. Forms

Thin black rounded border around fields.
Button styled like other buttons.
Placeholder text with 0.8 opacity.

Email list signup form

Sign up to receive latest news and garden tips!