Logo Region
A protected area for the approved Landcare, Coastcare, Junior Landcare, or corporate mark. This is a shared component: Reusable parts that work across websites, documents, social tiles, presentations, reports, and group templates.
Purpose
The Logo Region component gives Landcare groups a repeatable way to solve this communication problem without rebuilding the layout from scratch. It should inherit approved colour, typography, spacing, grid, accessibility, and logo guidance from the design system.
When To Use
| Use | Avoid |
|---|---|
| Use when the content or interaction matches the component purpose and benefits from a familiar pattern. | Avoid inventing a one-off layout when this component already solves the job. |
| Use the component with clear hierarchy, generous spacing, and one obvious first-read message or action. | Avoid adding extra borders, colours, icons, or type styles just to make the component feel more designed. |
| Use approved Landcare tokens so group forks can inherit brand updates cleanly. | Avoid local colour, typography, or logo changes that break brand consistency. |
Web Guidance
Use brand and partner blocks to identify ownership, funding, collaboration, source, and contact without overpowering the message.
- Structure: use semantic HTML, predictable reading order, and responsive sizing.
- Accessibility: support keyboard access, visible focus, meaningful labels, sufficient contrast, and colour-independent meaning.
- Layout: align the component to the page grid where it is a major element; use local spacing inside the component.
- State: document default, hover, focus, active, disabled, loading, error, and success states where relevant.
Print Guidance
Use protected logo regions, consistent partner logo heights, clear-space rules, and quiet acknowledgement typography.
- Format: size the component for the final artefact, viewing distance, paper stock, and reproduction method.
- Legibility: use Open Sans, strong contrast, and line lengths that suit the medium.
- Production: preserve margins, trim safety, logo clear space, and enough room for handwriting where required.
- Translation: when the web component becomes print, replace interaction states with clear instructions, labels, QR codes, or contact details.
States And Variants
Document single-logo, multi-partner, funded-by, supported-by, acknowledgement, and legal-note variants.
| Variant | Use |
|---|---|
| Default | The standard form used across normal web and print contexts. |
| Emphasis | A higher-weight version for primary messages, urgent information, or first-read actions. |
| Compact | A denser version for tables, sidebars, forms, footers, and constrained print areas. |
| Example | A filled version for documentation, templates, learning resources, and production references. |
Anatomy
| Part | Guidance |
|---|---|
| Container | Use only when grouping helps. Prefer quiet rules and spacing over heavy boxes. |
| Title or label | Make the component purpose clear in plain language. |
| Body content | Keep copy short, scannable, and aligned to the typography hierarchy. |
| Action or outcome | Make the next step visible, especially in forms, posters, signs, and templates. |
Review Checklist
- Brand: approved colour, typography, logo clear space, and tone.
- Hierarchy: one clear first read, then supporting information.
- Grid: major edges align to the page, print, or component grid.
- Accessibility: contrast, labels, focus, reading order, and colour-independent meaning are covered.
- Output: the component survives the final medium: mobile, desktop, A4, poster, signage, social, or presentation.