Developer Outputs

Generated outputs are designed to be used by Landcare websites, standalone documentation sites, and Landcare-branded sections inside Opries.com repositories.

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

Public URL Pattern

Output	Public URL
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`
Component CSS	`https://landcare.dev/packages/css/dist/components.css`
PrintView CSS	`https://landcare.dev/packages/css/dist/print-view.css`
Paper Forms CSS	`https://landcare.dev/packages/css/dist/paper-forms.css`
Brand token JSON	`https://landcare.dev/packages/tokens/dist/{brand}.tokens.json`
Artefact specs JSON	`https://landcare.dev/packages/artifacts/dist/{brand}.artifacts.json`

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

CSS

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

For a Landcare website or application, load the brand token CSS first, then the component CSS.

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

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 local styling with generated tokens:

.local-section {
  color: var(--lds-colour-dark-grey);
  border-color: var(--lds-colour-landcare-green);
  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-h1">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 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/landcare.css";
@import "https://landcare.dev/packages/css/dist/components.css";
@import "https://landcare.dev/packages/css/dist/print-view.css";

PrintView sets A4 landscape as the normal documentation and style-guide 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 the documentation site.

Use landscape for style-guide pages, token tables, component guidance, visual specimens, and comparison-heavy documentation. Use portrait only where the artefact itself requires it, such as paper forms, field sheets, letters, or other single-page document templates.

The documentation site generates a print-only page header from the breadcrumb. The current page appears in Landcare Green, earlier breadcrumb items stay black, and an underline separates the header from the page. The page number appears in the bottom margin as uppercase eyebrow/metadata text.

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>Your Name Landcare</span>
    <span>Draft report</span>
  </header>
  ...
  <footer class="lds-print-document-footer">
    <span>yourname.landcare.example</span>
    <span>Version 0.1</span>
  </footer>
</article>

Paper Forms CSS

The Paper Forms CSS layer is published at https://landcare.dev/packages/css/dist/paper-forms.css. Use it with PrintView when a web page needs to render a form, survey, field sheet, attendance sheet, or consent page that can be reviewed online and printed as a real paper artefact.

@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";
@import "https://landcare.dev/packages/css/dist/paper-forms.css";

Start a paper form with lds-print-view, then place each A4 form page inside lds-print-sheet:

<section class="lds-print-view lds-brand-landcare">
  <article class="lds-print-sheet">
    <header class="lds-print-header">
      <p>Your Name Landcare</p>
      <h1>Field data sheet</h1>
    </header>
    <section class="lds-print-section">
      <div class="lds-paper-field">
        <span class="lds-paper-label">Site ID</span>
        <span class="lds-paper-line"></span>
      </div>
    </section>
  </article>
</section>

Use the Paper Forms component pages for the correct classes for handwriting lines, tick boxes, scale indicators, ranking fields, matrix questions, signatures, consent sections, and field-data tables. Keep the same markup for screen review and printing; the Paper Forms layer keeps the form controls suitable for handwriting, survey consistency, and later data entry.

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

Artefact Specs

Web and print artefact data is published from packages/artifacts/dist/ to https://landcare.dev/packages/artifacts/dist/.

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

Opries Import

An Opries section 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, token file, and artefact file into tests/fixtures/opries-section/apps/docs/landcare-design-system.