Home /Foundations /Colour

Colour

Colour tokens are stored in brand presets and generated into CSS and JSON. Websites, Ghost themes, documentation sites, applications, and component code should use the generated CSS variables rather than copying colour values by hand.

Usage Guidance

Use colour as a hierarchy tool, not decoration. A strong Landcare layout should usually feel calm, clear, and recognisably branded before it feels colourful. Let typography, spacing, alignment, photography, and logo placement do most of the work; use colour to identify the brand, guide attention, and separate information.

Code Usage

For implementation, use semantic colour aliases first. They let universal components work across Landcare, Coastcare, Junior Landcare, Landcare Agriculture, and Landcare Australia without hardcoding one brand's raw colour names.

.example-callout {
  background: var(--lds-colour-surface-soft);
  border-left: 8px solid var(--lds-colour-accent);
  color: var(--lds-colour-text);
}

.example-button {
  background: var(--lds-colour-action);
  color: var(--lds-colour-on-accent);
}

Use raw named colour variables, such as --lds-colour-landcare-green, only for brand reference tables, designer handoff, colour-critical artwork notes, or one-off cases where the exact named colour is the subject.

Semantic Alias Example: Landcare

Colour Swatches And Raw Token Data

The following swatches show approved primary and secondary raw colour tokens for each brand. Use these tables for brand reference, designer handoff, print production values, merchandise, signage, and colour-critical reproduction.

Landcare Australia

The Landcare Australia master palette uses four primary colours and four secondary colours. Use this palette as the corporate reference for national communications and upstream brand decisions.

Landcare

The Landcare palette uses four primary colours and four secondary colours from the Landcare Australia colour guidance.

Coastcare

The Coastcare palette uses two primary colours and six secondary colours. The blue-led primary palette distinguishes coastal and marine work while retaining shared Landcare system colours.

Junior Landcare

The Junior Landcare palette uses two primary colours and six secondary colours. The warmer primary palette supports learning, youth, and education materials while remaining inside the approved brand system.

Colour Grouping

Pairing And Triads

Think about colour in pairs and three-colour groups. A pair controls contrast and emphasis, such as Landcare Green on Dark Grey. A triad controls overall colour balance: one background or field colour, one dominant brand colour, and one accent or support colour.

The examples below show approximate colour percentage only. They are not composition templates. Use the ratios to judge visual weight across a page, poster, slide, interface, or print item; place content, photography, logo, and whitespace according to the material's communication need.

Landcare Pairings

Coastcare Pairings

Junior Landcare Pairings

Accessibility And Contrast

Colour must never be the only way information is communicated. Pair colour with text labels, icons, patterns, position, or headings where meaning matters. Test foreground and background combinations in the actual medium: a colour pair that works on a large poster may fail in a small mobile interface or a projected presentation.

Use approved brand colours, but prioritise legibility and inclusion. For detailed contrast guidance, see Accessibility.

Data Visualisation Colour

Use colour in charts to help people understand the data, not to decorate the chart. A simplified Landcare approach is adapted from Atlassian’s data visualisation colour guidance: start with one brand colour, add categorical colours only when the categories need to be separated, and never rely on colour alone. See Atlassian Design: Data Visualization Color.