Developer Outputs

Generated outputs are designed to be used by Landcare websites, standalone documentation sites, Ghost themes, and downstream applications.

The canonical public source is https://landcare.dev. Use these URLs when a website, documentation site, application, Ghost theme, or local group project needs to conform to the current Landcare Design System without copying local brand rules.

Public URL Pattern

Output	Public URL
LDS font loader CSS	`https://landcare.dev/packages/css/dist/fonts.css`
Landcare brand CSS	`https://landcare.dev/packages/css/dist/landcare.css`
Landcare Agriculture brand CSS	`https://landcare.dev/packages/css/dist/landcare-agriculture.css`
Coastcare brand CSS	`https://landcare.dev/packages/css/dist/coastcare.css`
Junior Landcare brand CSS	`https://landcare.dev/packages/css/dist/junior-landcare.css`
Landcare Australia brand CSS	`https://landcare.dev/packages/css/dist/landcare-australia.css`
Per-brand full CSS bundle	`https://landcare.dev/packages/css/dist/{brand}.full.css`
Component CSS	`https://landcare.dev/packages/css/dist/components.css`
PrintView CSS	`https://landcare.dev/packages/css/dist/print-view.css`
Brand token JSON	`https://landcare.dev/packages/tokens/dist/{brand}.tokens.json`
Downstream theme contract	`https://landcare.dev/packages/theme-contract/dist/landcare-theme.contract.json`
Brand schema	`https://landcare.dev/schemas/brand.schema.json`

Use the brand IDs landcare, landcare-agriculture, coastcare, junior-landcare, and landcare-australia in token URLs.

Downstream Theme Contract

Ghost themes, local websites, documentation sites, and downstream applications should start from the theme contract:

https://landcare.dev/packages/theme-contract/dist/landcare-theme.contract.json

The contract is the stable import map for downstream implementation. It lists the approved brand CSS files, token JSON files, schemas, semantic colour aliases, core component examples, and guidance URLs. Use it instead of discovering package paths by convention.

CSS

CSS custom properties are published from packages/css/dist/ to https://landcare.dev/packages/css/dist/.

For a Landcare website, Ghost theme, documentation site, or application, load Open Sans first, then the brand token CSS, then the component CSS, then any local theme or application CSS.

Preferred HTML head setup:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://landcare.dev/packages/css/dist/landcare.css">
<link rel="stylesheet" href="https://landcare.dev/packages/css/dist/components.css">
<link rel="stylesheet" href="/assets/local-theme.css">

If the downstream platform needs CSS imports instead of direct Google Fonts link tags, use the generated LDS font loader before the brand and component CSS:

@import "https://landcare.dev/packages/css/dist/fonts.css";
@import "https://landcare.dev/packages/css/dist/landcare.css";
@import "https://landcare.dev/packages/css/dist/components.css";

Brand CSS files remain token-only. Convenience bundles are also generated per brand for platforms that prefer one stylesheet, for example https://landcare.dev/packages/css/dist/landcare.full.css. The full bundle imports LDS fonts, the selected brand tokens, and components.css; add print-view.css separately when print output is required.

If a repo vendors the files locally, keep the same order and update from the public source regularly.

Then set the brand on the root element or a local wrapper:

<html data-landcare-brand="landcare">
  ...
</html>

Use a brand-specific wrapper when only one section of a site uses a Landcare brand:

<section class="lds-brand-landcare">
  <a class="lds-button" href="/join/">Join the group</a>
</section>

Component classes use the lds- prefix. The individual Digital Components pages show the live example, required classes, and starter markup for each component.

Example component styling with generated semantic tokens:

.local-section {
  color: var(--lds-colour-text);
  border-color: var(--lds-colour-accent);
  font-family: var(--lds-font-body);
}

Digital typography is available through the same CSS layers. Prefer the shared type classes for normal online hierarchy:

<h1 class="lds-type-display">Landcare Design System</h1>
<h1 class="lds-type-title">Project update</h1>
<p class="lds-type-lead">A short summary for the page.</p>
<p class="lds-type-body">Readable online body copy using the Landcare type tokens.</p>

Use .lds-type-display only for larger first-read hero, cover, poster, landing-page, or campaign statements. Use .lds-type-title for the standard page, report, form, template, campaign, or material title. .lds-type-title is an alias of the H1 title role and maps to the --lds-type-h1-* values through --lds-type-title-* custom properties.

Use the lower-level --lds-type-* custom properties only when a local component needs a custom selector while still following the Landcare typography system.

Digital Component CSS

The shared component layer is published at https://landcare.dev/packages/css/dist/components.css.

Start with:

<form class="lds-form">
  <div class="lds-field">
    <label class="lds-label" for="email">Email</label>
    <input class="lds-input" id="email" name="email" type="email">
    <p class="lds-help-text">Use the address you check most often.</p>
  </div>
  <button class="lds-button" type="submit">Register</button>
</form>

Use the component pages for the canonical class names and usage notes. Do not create local class systems that duplicate Landcare component classes unless the component does not exist yet.

PrintView CSS

The PrintView CSS layer is published at https://landcare.dev/packages/css/dist/print-view.css. Use it when a website page, documentation page, report, proposal, handout, or public record needs to print as a readable A4 document rather than as a screenshot of the website.

@import "https://landcare.dev/packages/css/dist/fonts.css";
@import "https://landcare.dev/packages/css/dist/landcare.css";
@import "https://landcare.dev/packages/css/dist/components.css";
@import "https://landcare.dev/packages/css/dist/print-view.css";

PrintView sets A4 portrait as the default shared print format, with A4 margins, point-sized print typography, print-safe tables, readable links, page-break behaviour, and browser-supported page numbering. It also hides screen navigation when printing from documentation-style pages.

Use portrait for normal website pages, reports, proposals, public records, field sheets, letters, and downstream project documentation. Use landscape only when the site or material explicitly opts in, such as style-guide pages, token tables, component guidance, visual specimens, and comparison-heavy documentation.

The Landcare Design System documentation site opts into A4 landscape for its own pages. Downstream projects that import only print-view.css, such as project documentation sites, inherit the shared portrait default unless they add their own page-size override.

The documentation site generates a repeated print page header from the page breadcrumb. PrintView places --lds-print-breadcrumb in the browser's print margin box, with an underline beneath it, so the breadcrumb appears at the top of every printed page rather than only once at the start of the document.

PrintView footer labels are blank by default for downstream safety. Set print variables on the root <html> element or :root, because browser print engines may not reliably resolve custom properties that are only set on body inside @page margin boxes.

Official downstream print variables:

Variable	Purpose
`--lds-print-footer-left`	Preferred left footer label, usually the site, organisation, or document name.
`--lds-print-footer-right`	Optional right footer label, such as page numbering or a short site URL.
`--lds-print-site-name`	Site-level name available to local CSS and templates.
`--lds-print-site-url`	Site-level URL available to local CSS and templates.
`--lds-print-document-label`	Backward-compatible document/site label used when `--lds-print-footer-left` is not set.
`--lds-print-breadcrumb`	Per-page print breadcrumb shown in the top margin, such as `NEWS / ARTICLE TITLE`.

Set --lds-print-footer-left for every downstream site and --lds-print-breadcrumb for pages that need printed section context:

<html
  data-landcare-brand="landcare"
  class="lds-brand-landcare"
  style="
    --lds-print-site-name:'YOUR SITE NAME';
    --lds-print-site-url:'https://example.org';
    --lds-print-footer-left:'YOUR SITE NAME';
    --lds-print-document-label:'YOUR SITE NAME';
    --lds-print-breadcrumb:'HOME / SECTION / CURRENT PAGE';
  "
>

Ghost CMS example:

<html
  lang="{{@site.locale}}"
  style="
    --lds-print-site-name: '{{@site.title}}';
    --lds-print-site-url: '{{@site.url}}';
    --lds-print-footer-left: '{{@site.title}}';
    --lds-print-document-label: '{{@site.title}}';
  "
>

Per-page breadcrumb example:

--lds-print-breadcrumb: 'NEWS / ARTICLE TITLE';

Then apply the print document class to the page body or the main printable wrapper:

<body class="lds-print-document">

If --lds-print-breadcrumb is not set, the repeated print header has no breadcrumb text. If no footer variables are set, the print footer label is blank. If --lds-print-footer-left is set, that value appears in the footer. If only --lds-print-document-label is set, that value still appears for backward compatibility.

Use the Markdoc {% printBreak /%} tag when a major section, table, or specimen should start on a new printed page. It appears only as a quiet divider online, but becomes a hard page break in print preview and PDF export.

For formal browser PDF exports, use Chrome or Microsoft Edge where possible. Safari may not reliably render custom page counters, margin headers and footers, or recto-verso margins.

Use optional print document furniture when a page needs visible document context on screen or in fallback print engines:

<article class="lds-print-document lds-brand-landcare">
  <header class="lds-print-document-header">
    <span>Example organisation</span>
    <span>Draft report</span>
  </header>
  ...
  <footer class="lds-print-document-footer">
    <span>yourname.landcare.example</span>
    <span>Version 0.1</span>
  </footer>
</article>

Token JSON

Token JSON is published from packages/tokens/dist/ to https://landcare.dev/packages/tokens/dist/. Application code should consume these files rather than duplicating brand values.

https://landcare.dev/packages/tokens/dist/landcare.tokens.json
https://landcare.dev/packages/tokens/dist/landcare-agriculture.tokens.json
https://landcare.dev/packages/tokens/dist/coastcare.tokens.json
https://landcare.dev/packages/tokens/dist/junior-landcare.tokens.json
https://landcare.dev/packages/tokens/dist/landcare-australia.tokens.json

Downstream Import

A downstream implementation can either reference the public landcare.dev URLs directly or vendor a reviewed copy into the repo. If files are vendored, record the source URL and update date in the local changelog.

The test workflow copies a Landcare CSS file and token file into tests/fixtures/downstream-section/apps/docs/landcare-design-system.