{ "schemaVersion": 2, "generatedAt": "2026-09-29T07:38:53.382Z", "title": "Design System: TV Mount Australia resource hub", "extensions": { "colorMeta": { "navy": { "role": "primary", "displayName": "Deep Navy", "tonalRamp": [ "oklch(15% 0.0678 263.82)", "oklch(26% 0.0678 263.82)", "oklch(38% 0.0678 263.82)", "oklch(49% 0.0678 263.82)", "oklch(61% 0.0678 263.82)", "oklch(72% 0.0678 263.82)", "oklch(84% 0.0678 263.82)", "oklch(95% 0.0678 263.82)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "blue": { "role": "primary", "displayName": "Interface Blue", "tonalRamp": [ "oklch(15% 0.1967 259.03)", "oklch(26% 0.1967 259.03)", "oklch(38% 0.1967 259.03)", "oklch(49% 0.1967 259.03)", "oklch(61% 0.1967 259.03)", "oklch(72% 0.1967 259.03)", "oklch(84% 0.1967 259.03)", "oklch(95% 0.1967 259.03)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "link": { "role": "primary", "displayName": "Link Blue", "tonalRamp": [ "oklch(15% 0.1440 257.58)", "oklch(26% 0.1440 257.58)", "oklch(38% 0.1440 257.58)", "oklch(49% 0.1440 257.58)", "oklch(61% 0.1440 257.58)", "oklch(72% 0.1440 257.58)", "oklch(84% 0.1440 257.58)", "oklch(95% 0.1440 257.58)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "paper": { "role": "neutral", "displayName": "Cool Paper", "tonalRamp": [ "oklch(15% 0.0045 258.32)", "oklch(26% 0.0045 258.32)", "oklch(38% 0.0045 258.32)", "oklch(49% 0.0045 258.32)", "oklch(61% 0.0045 258.32)", "oklch(72% 0.0045 258.32)", "oklch(84% 0.0045 258.32)", "oklch(95% 0.0045 258.32)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "ink": { "role": "neutral", "displayName": "Reading Ink", "tonalRamp": [ "oklch(15% 0.0356 264.42)", "oklch(26% 0.0356 264.42)", "oklch(38% 0.0356 264.42)", "oklch(49% 0.0356 264.42)", "oklch(61% 0.0356 264.42)", "oklch(72% 0.0356 264.42)", "oklch(84% 0.0356 264.42)", "oklch(95% 0.0356 264.42)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "muted": { "role": "neutral", "displayName": "Slate Text", "tonalRamp": [ "oklch(15% 0.0364 263.29)", "oklch(26% 0.0364 263.29)", "oklch(38% 0.0364 263.29)", "oklch(49% 0.0364 263.29)", "oklch(61% 0.0364 263.29)", "oklch(72% 0.0364 263.29)", "oklch(84% 0.0364 263.29)", "oklch(95% 0.0364 263.29)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "line": { "role": "neutral", "displayName": "Fine Rule", "tonalRamp": [ "oklch(15% 0.0168 259.42)", "oklch(26% 0.0168 259.42)", "oklch(38% 0.0168 259.42)", "oklch(49% 0.0168 259.42)", "oklch(61% 0.0168 259.42)", "oklch(72% 0.0168 259.42)", "oklch(84% 0.0168 259.42)", "oklch(95% 0.0168 259.42)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "tint": { "role": "neutral", "displayName": "Pale Blue", "tonalRamp": [ "oklch(15% 0.0154 257.20)", "oklch(26% 0.0154 257.20)", "oklch(38% 0.0154 257.20)", "oklch(49% 0.0154 257.20)", "oklch(61% 0.0154 257.20)", "oklch(72% 0.0154 257.20)", "oklch(84% 0.0154 257.20)", "oklch(95% 0.0154 257.20)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "white": { "role": "neutral", "displayName": "White", "tonalRamp": [ "oklch(15% 0.0000 0.00)", "oklch(26% 0.0000 0.00)", "oklch(38% 0.0000 0.00)", "oklch(49% 0.0000 0.00)", "oklch(61% 0.0000 0.00)", "oklch(72% 0.0000 0.00)", "oklch(84% 0.0000 0.00)", "oklch(95% 0.0000 0.00)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "focus": { "role": "primary", "displayName": "Focus Blue", "tonalRamp": [ "oklch(15% 0.1506 257.04)", "oklch(26% 0.1506 257.04)", "oklch(38% 0.1506 257.04)", "oklch(49% 0.1506 257.04)", "oklch(61% 0.1506 257.04)", "oklch(72% 0.1506 257.04)", "oklch(84% 0.1506 257.04)", "oklch(95% 0.1506 257.04)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "control-stroke": { "role": "neutral", "displayName": "Control Slate", "tonalRamp": [ "oklch(15% 0.0448 259.61)", "oklch(26% 0.0448 259.61)", "oklch(38% 0.0448 259.61)", "oklch(49% 0.0448 259.61)", "oklch(61% 0.0448 259.61)", "oklch(72% 0.0448 259.61)", "oklch(84% 0.0448 259.61)", "oklch(95% 0.0448 259.61)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "inverse-muted": { "role": "neutral", "displayName": "Inverse Reading Tint", "tonalRamp": [ "oklch(15% 0.0345 261.96)", "oklch(26% 0.0345 261.96)", "oklch(38% 0.0345 261.96)", "oklch(49% 0.0345 261.96)", "oklch(61% 0.0345 261.96)", "oklch(72% 0.0345 261.96)", "oklch(84% 0.0345 261.96)", "oklch(95% 0.0345 261.96)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." }, "inverse-focus": { "role": "neutral", "displayName": "Inverse Focus Tint", "tonalRamp": [ "oklch(15% 0.0664 257.58)", "oklch(26% 0.0664 257.58)", "oklch(38% 0.0664 257.58)", "oklch(49% 0.0664 257.58)", "oklch(61% 0.0664 257.58)", "oklch(72% 0.0664 257.58)", "oklch(84% 0.0664 257.58)", "oklch(95% 0.0664 257.58)" ], "tonalRampStatus": "Generated preview metadata; not implemented palette tokens." } }, "typographyMeta": { "display": { "displayName": "Condensed opening title", "purpose": "Opening H1 only; the same display family also appears in the brand specimen." }, "headline": { "displayName": "Section heading", "purpose": "Responsive Figtree section headings." }, "prose-headline": { "displayName": "Article heading", "purpose": "Figtree H2 within long-form reading content." }, "title": { "displayName": "Resource title", "purpose": "Resource-path, note and document-aside headings." }, "body": { "displayName": "Reading text", "purpose": "Body copy and general controls, with a 72ch article measure." }, "intro": { "displayName": "Opening introduction", "purpose": "Muted explanation beneath H1; 54ch maximum, 1.1rem below 560px." }, "label": { "displayName": "Navigation label", "purpose": "Semibold navigation; 0.9rem below 800px." }, "metadata": { "displayName": "Release metadata", "purpose": "Plain release/status information below title and introduction, and footer text." } }, "shadows": [], "motion": [ { "name": "primary-hover", "value": "background 160ms ease-out", "purpose": "Primary action changes from Interface Blue to Link Blue." }, { "name": "desktop-path-arrow", "value": "transform 160ms ease-out; translateX(4px)", "purpose": "Resource-path arrow on hover above 900px." }, { "name": "reduced-motion", "value": "transition: none; animation: none; scroll-behavior: auto", "purpose": "Respect prefers-reduced-motion: reduce." } ], "breakpoints": [ { "name": "header-and-aside-compact", "value": "1100px" }, { "name": "stacked-layout", "value": "800px" }, { "name": "narrow-catalogue", "value": "560px" }, { "name": "desktop-arrow-motion", "value": "900px (min-width)" } ] }, "components": [ { "name": "Primary download button", "kind": "button", "refersTo": "button-primary", "description": "The implemented solid-blue resource-pack action, with hover and keyboard focus.", "html": "Download resource pack", "css": ".ds-button{display:inline-flex;align-items:center;justify-content:center;min-height:3.15rem;padding:.75rem 1.25rem;background:var(--blue,#176ae1);color:var(--white,#fff);font:700 1rem/1.65 var(--font-body,Figtree,Arial,sans-serif);text-decoration:none;border:0;border-radius:var(--radius,4px);transition:background 160ms ease-out}.ds-button:hover{background:var(--link,#1955a6)}.ds-button:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}@media(prefers-reduced-motion:reduce){.ds-button{transition:none}}" }, { "name": "Swatch copy button", "kind": "button", "refersTo": "button-copy", "description": "The small copy control shown beside colour references when clipboard support is available; this preview shows its visible state.", "html": "", "css": ".ds-copy{padding:.25rem .5rem;border:1px solid var(--line,#d8dfea);background:var(--white,#fff);border-radius:var(--radius,4px);color:var(--link,#1955a6);font:.85rem/1.65 var(--font-body,Figtree,Arial,sans-serif);min-height:36px;cursor:pointer}.ds-copy:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}" }, { "name": "Resource search field", "kind": "input", "refersTo": "input-search", "description": "The progressively enhanced catalogue search field and visible label.", "html": "

18 resources

", "css": ".ds-search{font:1rem/1.65 var(--font-body,Figtree,Arial,sans-serif);color:var(--ink,#121a2b)}.ds-search-label{font-weight:700;display:block;margin-bottom:.5rem}.ds-search-input{font:inherit;width:min(100%,32rem);min-height:3.2rem;padding:.7rem 1rem;border:1px solid #8394af;border-radius:var(--radius,4px);background:var(--white,#fff);color:var(--ink,#121a2b);caret-color:var(--blue,#176ae1)}.ds-search-input:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}.ds-search-count{font-size:.85rem;color:var(--muted,#566176);margin:.75rem 0 1.25rem}" }, { "name": "Resource navigation", "kind": "nav", "refersTo": "navigation-link", "description": "Always-visible document navigation with a current-page underline and responsive wrapping.", "html": "", "css": ".ds-nav{display:flex;gap:1.5rem;flex-wrap:wrap}.ds-nav-link{min-height:44px;display:flex;align-items:center;text-decoration:none;font:650 1rem/1.65 var(--font-body,Figtree,Arial,sans-serif);color:var(--navy,#071536);border-bottom:2px solid transparent}.ds-nav-link:hover,.ds-nav-link[aria-current=page]{border-color:var(--blue,#176ae1)}.ds-nav-link:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}@media(max-width:1100px){.ds-nav{gap:1rem}}@media(max-width:800px){.ds-nav{margin-top:1rem;gap:.4rem 1.35rem}.ds-nav-link{font-size:.9rem}}" }, { "name": "Resource path row", "kind": "custom", "refersTo": "resource-path-row", "description": "The linked row that joins a document title, summary and directional arrow.", "html": "

Website design brief

The purpose, page experience and accessibility guidance for TV Mount website work.

", "css": ".ds-path{padding:1.5rem 0;border-top:1px solid var(--line,#d8dfea);display:grid;grid-template-columns:1fr auto;gap:.5rem 2rem;text-decoration:none;color:var(--link,#1955a6);font:1rem/1.65 var(--font-body,Figtree,Arial,sans-serif)}.ds-path-title{margin:0;color:var(--navy,#071536);font-size:1.25rem;line-height:1.15;font-weight:700;text-wrap:balance}.ds-path-summary{color:var(--muted,#566176);margin:0;grid-column:1;font-size:.95rem}.ds-path-arrow{grid-column:2;grid-row:1/3;align-self:center}.ds-path-arrow svg{width:24px;height:24px;display:block}.ds-path:hover .ds-path-title{text-decoration:underline;text-underline-offset:.2em}.ds-path:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}@media(min-width:900px){.ds-path:hover .ds-path-arrow{transform:translateX(4px);transition:transform 160ms ease-out}}@media(max-width:560px){.ds-path{gap:.5rem 1rem}}@media(prefers-reduced-motion:reduce){.ds-path-arrow{transition:none!important}}" }, { "name": "Reference note", "kind": "card", "refersTo": "reference-note", "description": "A flat pale-blue supporting container with a fine border and rectangular corners.", "html": "

A public resource, not an operations archive.

This repository contains curated briefs and authorised assets.

", "css": ".ds-note{padding:1.5rem 2rem;background:var(--tint,#e8eff9);border:1px solid var(--line,#d8dfea);color:var(--ink,#121a2b);font:1rem/1.65 var(--font-body,Figtree,Arial,sans-serif)}.ds-note-title{color:var(--navy,#071536);font-size:1.25rem;font-weight:700;line-height:1.15;text-wrap:balance;margin:0 0 .5rem}.ds-note-copy{margin:.75rem 0 0}" }, { "name": "Document resource aside", "kind": "custom", "refersTo": "document-aside", "description": "The flat source/download panel beside long-form content; sticky on desktop and static below 800px.", "html": "", "css": ".ds-aside{background:var(--tint,#e8eff9);padding:1.75rem;position:sticky;top:2rem;color:var(--ink,#121a2b);font:1rem/1.65 var(--font-body,Figtree,Arial,sans-serif)}.ds-aside-title{font-size:1.25rem;letter-spacing:-.025em;font-weight:700;line-height:1.15;text-wrap:balance;margin:0 0 1rem;color:var(--navy,#071536)}.ds-aside-meta{margin:.75rem 0 1.25rem}.ds-aside-link{display:inline-block;min-height:36px;color:var(--link,#1955a6);text-underline-offset:.23em;text-decoration-thickness:1px}.ds-aside-link:hover{text-decoration-thickness:2px}.ds-aside-link:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}.ds-aside-list{list-style:none;margin:1rem 0;padding:0}.ds-aside-item{margin:.7rem 0}.ds-aside-note{font-size:.9rem;max-width:72ch;color:var(--muted,#566176);margin:.75rem 0 1.25rem}@media(max-width:800px){.ds-aside{position:static}}" }, { "name": "Resource catalogue table", "kind": "custom", "refersTo": "resource-table-header", "description": "A file table whose narrow layout keeps details and download action grouped within each resource.", "html": "
ResourceFile & usageDownload
Horizontal logoSupplied TV Mount identityPNG · 13.2 KB1021 × 135 pxDownload
", "css": ".ds-table-wrap{overflow:auto}.ds-table{border-collapse:collapse;width:100%;text-align:left;font:.95rem/1.65 var(--font-body,Figtree,Arial,sans-serif);color:var(--ink,#121a2b)}.ds-table-cell{padding:1.15rem 1rem;border-bottom:1px solid var(--line,#d8dfea);vertical-align:top}.ds-table-head .ds-table-cell{background:var(--tint,#e8eff9);font-weight:700}.ds-table-row .ds-table-cell:first-child{padding-left:0}.ds-table-detail{display:block;color:var(--muted,#566176);margin-top:.25rem}.ds-download{white-space:nowrap;font-weight:650;color:var(--link,#1955a6);text-underline-offset:.23em;text-decoration-thickness:1px}.ds-download:hover{text-decoration-thickness:2px}.ds-download:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}@media(max-width:560px){.ds-table-head{display:none}.ds-table-row{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line,#d8dfea);padding:.75rem 0;gap:0 .75rem}.ds-table-row .ds-table-cell{border:0;padding:.5rem 0}.ds-table-row .ds-table-cell:nth-child(2){grid-column:1}.ds-table-row .ds-table-cell:nth-child(3){grid-column:2;grid-row:1/3}}" }, { "name": "Download banner", "kind": "custom", "refersTo": "download-banner", "description": "The navy closing panel with a white heading and a single primary download action.", "html": "

One pack. A clear starting point.

Download the curated briefs, actual logo files, reference fonts, licences and a checksum manifest. Logo artwork, licensed fonts and practical guidance.

Download resource pack
", "css": ".ds-banner{background:var(--navy,#071536);color:#d5e2f9;padding:3rem;display:flex;align-items:center;justify-content:space-between;gap:3rem;font:1rem/1.65 var(--font-body,Figtree,Arial,sans-serif)}.ds-banner-title{color:var(--white,#fff);font-size:clamp(1.75rem,3vw,2.35rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;text-wrap:balance;margin:0 0 1rem}.ds-banner-copy{margin:.75rem 0 0;max-width:55ch}.ds-button{display:inline-flex;align-items:center;justify-content:center;min-height:3.15rem;padding:.75rem 1.25rem;background:var(--blue,#176ae1);color:var(--white,#fff);font:700 1rem/1.65 var(--font-body,Figtree,Arial,sans-serif);text-decoration:none;border:0;border-radius:var(--radius,4px);transition:background 160ms ease-out}.ds-button:hover{background:var(--link,#1955a6)}.ds-button:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}@media(prefers-reduced-motion:reduce){.ds-button{transition:none}}.ds-banner :focus-visible{outline-color:#b8d5ff}@media(max-width:800px){.ds-banner{display:block;padding:2rem}.ds-banner .ds-button{margin-top:1.5rem}}" }, { "name": "Image selection gallery item", "kind": "custom", "description": "A ruled gallery item with a contained 3:2 preview, origin/file labels, 44px actions and a native source/usage disclosure. This snippet shows the enhanced copy control visually; page filtering, clipboard feedback and image-error recovery are progressive enhancements. The surrounding gallery has three columns, two at 1100px and one at 560px.", "html": "
\"Warm

Warm timber living room

AI illustration · Rooms

1796 × 876 px · WEBP · 199 KB

Download Warm timber living roomFull size Warm timber living room (opens in a new tab)
Source & usage

Illustrative room, not a completed customer installation.

Authorised TV Mount Australia work only; no general stock redistribution.

AI-generated for TV Mount website illustration, 29 September 2026.

hero-room.webp

", "css": ".ds-image-item{min-width:0;border-top:1px solid var(--line,#d8dfea);padding-top:1rem;color:var(--ink,#121a2b);font:1rem/1.65 var(--font-body,Figtree,Arial,sans-serif)}.ds-image-preview{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;background:var(--paper,#f7f9fc);border:1px solid var(--line,#d8dfea);padding:.5rem;text-decoration:none;overflow:hidden}.ds-image-preview:hover{border-color:var(--link,#1955a6)}.ds-image-art{width:100%;height:100%;object-fit:contain;display:block}.ds-image-details{padding-top:1rem}.ds-image-title{font-size:1.1rem;font-weight:700;line-height:1.3;color:var(--navy,#071536);margin:0 0 .5rem}.ds-image-meta{font-size:.875rem;color:var(--muted,#566176);margin:.3rem 0;line-height:1.5;font-variant-numeric:tabular-nums}.ds-image-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.7rem}.ds-image-action{min-height:44px;display:inline-flex;align-items:center;font:650 .9rem/1.65 var(--font-body,Figtree,Arial,sans-serif);color:var(--link,#1955a6);text-decoration:underline;text-underline-offset:.23em;text-decoration-thickness:1px}.ds-image-action:hover{text-decoration-thickness:2px}.ds-image-copy{background:transparent;border:0;padding:0;cursor:pointer}.ds-image-source{margin-top:.75rem;font-size:.875rem;line-height:1.55;color:var(--muted,#566176)}.ds-image-summary{cursor:pointer;color:var(--link,#1955a6);min-height:44px;padding-block:.5rem}.ds-image-source-copy{margin:.5rem 0 .75rem}.ds-image-filename{overflow-wrap:anywhere}.ds-image-preview:focus-visible,.ds-image-action:focus-visible,.ds-image-summary:focus-visible{outline:3px solid var(--focus,#1558ad);outline-offset:4px}.ds-image-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ds-image-unavailable{padding:1rem;font-size:.9rem;color:var(--muted,#566176)}.ds-image-item [hidden]{display:none!important}" } ], "narrative": { "northStar": "A readable brand dossier", "overview": "This guide describes the public resource library's visual system. Reference date: 29 September 2026. The organising principle is a readable brand dossier: clear hierarchy, authentic artwork and practical guidance.\n\nThe library combines a practical reading interface with the supplied TV Mount artwork. Condensed opening titles establish hierarchy; Figtree carries navigation, documents and download details. Light paper, white sections, navy headings and fine rules keep long pages readable. Blue concentrates attention on links, the current navigation destination and primary download actions.\n\nThe frontmatter is the normative record of implemented tokens. The companion sidecar supplies component previews, responsive rules and interaction details; its generated tonal ramps are preview metadata, not additional implemented palette tokens.", "keyCharacteristics": [ "Spacious openings followed by readable document and catalogue layouts.", "Actual TV Mount artwork with its native aspect ratio preserved.", "Flat white, paper and pale-blue surfaces divided by fine rules.", "Clearly visible navigation, links and keyboard focus.", "Plain status and release metadata below the title and introduction." ], "rules": [ { "name": "The Reference Separation Rule", "body": "Sampled colours from the supplied logo are labelled artwork references. Keep them separate from interface tokens and preserve the original logo artwork.", "section": "colors" }, { "name": "The Title First Rule", "body": "The H1 leads the opening. Status and release information follow the title and introductory text as plain, muted metadata; no status badge or eyebrow precedes the H1.", "section": "typography" }, { "name": "The Flat Surface Rule", "body": "Preserve tonal layering and thin rules. Do not introduce drop shadows as a substitute for hierarchy in this resource system.", "section": "elevation" } ], "dos": [ "Do use the frontmatter values as the implemented resource-hub tokens.", "Do preserve the supplied artwork and its native aspect ratio.", "Do keep titles before plain status and release metadata.", "Do retain readable document measures, wrapping navigation and explicit download links.", "Do keep keyboard focus visible on both light and dark surfaces.", "Do preserve the complete reading and download experience without JavaScript.", "Do distinguish artwork colour samples from interface references." ], "donts": [ "Don't substitute interface references for the supplied logo artwork.", "Don't place a status badge or eyebrow above a resource-page H1.", "Don't stretch, recolour or recreate the supplied wordmark as live text.", "Don't describe the extended artwork as square or claim a vector master exists.", "Don't add shadows, decorative gradients or rounded content cards to this extracted system.", "Don't invent chip, modal, validation or other component variants that are absent from the reviewed surface." ] } }