# Meeno Zen Design System

Version 1.17 · 14 September 2026

Owner: Meeno Zen. Scope: professional digital identity, portfolio, Writing hub, articles, case studies and interactive demonstrations. This is a design reference, not evidence of a deployment, client endorsement or business result.

Client demonstration hosting: Easy English and Victorian Restorations belong under their own `/work/<case>/demo/` paths on meenozen.com. Each opens in a new tab with its client identity, isolated styles and internal navigation. Keep demonstration forms non-submitting and demonstration pages excluded from indexing. The portfolio case remains the searchable account of the work. Do not replace a client's official domain or add the portfolio masthead to the demonstration.

## 01 / Start here

### A recognisable identity with room to adapt

Meeno connects digital analytics, measurement strategy and marketing technology with practical problem-solving. Applied AI extends that foundation through research, analysis, knowledge organisation and workflows with clear checks. Present established expertise, current capability and developing ambitions distinctly. Never imply machine-learning engineering or production AI leadership without evidence.

The audience includes hiring managers, recruiters, executives, clients and professional contacts. A short visit should answer who Meeno is, what problems he can solve, why his experience matters and how to start a relevant conversation.

The identity is editorial, assured and practical. Strong serif type carries the argument. Quiet sans-serif text explains it. Monospaced labels organise it. Colour distinguishes context and state. Every addition must help a visitor understand, trust, remember or act.

### Use the guide

The public page name is Design system. Use this exact label for navigation and footer links to /brand. The document title is Meeno Zen Design System. Existing file names and download addresses remain stable.

Start with the page's audience and task. Choose a page recipe, use the approved assets and apply the fixed rules. Adapt layout and density to the task. Verify the result in a browser before release.

The current explicit brief and verified facts take precedence over this guide. Accessibility is a requirement, not an optional style. If those conflict with an existing implementation, resolve the conflict instead of reproducing an old defect.

Keep the core palette, type roles, evidence-led voice, clear hierarchy and purposeful motion. Adapt section count, navigation, grid and display size. Do not introduce literal Issue 01 or Issue 02 branding, competing homepages or a second career identity.

The Markdown is the canonical written reference. The visual edition is generated from it and the versioned design tokens. Both editions must describe the same rules.

### Choose the right starting point

| Your task | Start with | Then check |
| --- | --- | --- |
| Write a case or professional page | Voice and evidence; page applications | Contribution, results, navigation and mobile reading |
| Build a new interface | Components and states; design foundations | Keyboard, failure states and responsive composition |
| Create a document or presentation | Cross-format applications | Reading order, export, fonts and links |
| Present a researched recommendation | Decision summaries and optional depth; guided response | Recommendation, supporting facts, unresolved conditions and return paths |
| Give this system to an LLM | Assets, AI use and governance | Complete guide, tokens, verified brief and acceptance checks |
| Propose a pattern that does not exist | Extension decisions | Reuse first, document the gap, test the exception |

### What is fixed and what can change

Identity, factual accuracy, accessible interaction and semantic roles are requirements. Spacing ranges, type sizes and page recipes are defaults that adapt to content. Examples demonstrate a rule; they are not compulsory copy or fixed screen layouts. The same brand can support a quiet article, a dense dashboard and a wide workflow map without giving them the same composition.

This system covers the existing portfolio and defines extension requirements for future work. A documented future pattern is not a claim that it is built or tested. No finite guide covers every context: use the extension process for a new need, rather than inventing an inconsistent local convention.

## 02 / Identity and assets

### Name, wordmark and compact symbol

Use Meeno Zen in running text. The wordmark pairs small uppercase MEENO in DM Mono with larger italic Zen in Fraunces. Use the supplied SVG for portable applications; do not substitute a generic italic font. The approved compact symbol uses the Z outline from the Fraunces wordmark, in paper white on rust, with restrained corners. Preserve the supplied letterform, slant and internal spacing. It is intended for browser tabs, saved-site icons and small identity placements.

Keep at least half the height of the large Zen lettering clear around the wordmark. For the square Z asset, keep one quarter of its square width clear around it in standalone applications. Its own internal padding stays intact. These are system specifications, not measurements of external trademarks.

Minimum digital sizes: full wordmark 112 px wide; compact icon 16 px square, using the prepared 32 px PNG at small browser sizes. Use the 180 px asset for Apple home-screen icons and the 192 or 512 px variants for other saved-site uses. Never stretch, crop, add a shadow, rotate or place the mark on a busy image. For the wordmark, use the paper variant on ink and the ink variant on paper. The compact icon keeps its paper-white Z and rust background on both light and dark surfaces; do not invert it or substitute the unselected paper-tile proposal.

### Project marks and ownership

Meeno Zen identifies the author and portfolio. Client marks identify the organisation whose work is discussed; they never imply endorsement or become part of the Meeno asset kit. Cluckin’ Good is an original concept restaurant identity scoped to its independent strategy study. Do not use a prospective employer’s mark to brand this work.

Place the Cluckin’ Good transparent wordmark directly on the blue case cover. Preserve its cream lettering, rust shadow and restrained gold accent. Do not wrap it in a dark tile or apply a generic white-logo filter. Its shared visible-artwork width is 144 px, excluding transparent canvas padding. A project mark may have its own display lettering without changing the portfolio’s text fonts.

Use the original SVG at /logos/cluckin-good-wordmark.svg. Keep sufficient contrast in another context by choosing a compatible surface, rather than altering the artwork. Project marks remain project assets, separate from the downloadable Meeno identity assets.

### Portrait

Use the approved portrait at its natural 4:5 ratio. Preserve the face, natural proportions and useful breathing room. Provide explicit dimensions, responsive sources and descriptive alternative text. Do not apply a new AI likeness or decorative treatment without approval.

### Company marks

Crown Resorts, News Corp, Bastion, Hab Shifa and Easy English Australia marks identify the context of Meeno's work. They are third-party assets, not Meeno Zen identity assets or a claim of endorsement. Do not include them in the public brand-download kit or imply a licence to reuse them.

WorkLogo and app/work-logos.ts are the shared implementation authority. Homepage cards, the Work directory, case introductions and archive identity records use this registry. Balance visible artwork, not transparent file canvases. Preserve original files and proportions. Positioning compensates for measured transparent padding without clipping the artwork or redefining an owner's protected clear space.

[Machine-readable Work logo specifications](/brand/assets/work-logos.json) record the same asset paths, bounds, sizes and treatments as the implemented component. They do not include ownership or redistribution rights.

Use an 88 px vertically centred logo row in Work cards and at least 16 px clear space around the visible mark. Compact emblems are narrower and taller; long wordmarks are wider and shorter. Equal width, height or pixel area alone does not create optical balance. Use the same reference size across homepage, directory and case introductions. Archive identity records use 80% of the reference width. Shrink proportionally only when the container is narrower. Featured status does not enlarge a logo.

| Brand | Visible width | Approximate height | Work surface | Treatment |
| --- | --- | --- | --- | --- |
| Crown Resorts | 88 px | 68 px | Ink or blue | Supplied cream reversed artwork; no filter |
| Victorian Restorations | 168 px | 54 px | Ink | Original gold |
| Easy English Australia | 152 px | 65 px | Sage or paper | Original green |
| Cluckin’ Good | 144 px | 82 px | Blue or ink | Original cream, rust and gold |
| Bastion | 180 px | 37 px | Ink or blue | Explicit white monochrome reversal |
| Hab Shifa | 76 px | 79 px | Sage | Original purple |
| News Corp Australia | 190 px | 47 px | Ink | Explicit white monochrome reversal |

Colour is a per-brand decision, never a generic first-child or last-child filter. Only the registered single-colour Bastion and News Corp assets use the existing white-reversal treatment. Prefer a supplied variant when available. Multicolour marks keep their colours. Victorian Restorations keeps its gold: change the cover to ink rather than turning the mark black or white. Easy English and Hab Shifa retain original colours on sage, including case introduction panels. Do not add arbitrary tiles, shadows, outlines or tinted approximations to rescue an unsuitable surface. These are portfolio display decisions, not claims of trademark-owner approval.

Use contrast as a diagnostic and inspect actual lettering at normal viewing size. Small taglines and fine strokes need a visual check. Hab Shifa's supplied SVG embeds a 300 px raster image; it is not resolution-independent vector artwork. Preserve that source and obtain a better master before substantially enlarging it. Original historical screenshots and standalone client demonstrations retain their own brand rules.

### Adding or changing a Work logo

- Inspect transparency, visible bounds, colour, embedded raster content and any required clear space. Preserve the master; do not redraw a brand.
- Register the asset, optical width, bounds, treatment and surface in app/work-logos.ts. Use WorkLogo rather than local dimensions or filters.
- Compare with compact, wide and stacked marks using the company-mark specimen. Retain the registered size across all portfolio placements.
- Check homepage, full and filtered Work directory, case introduction and archive records at 320, 390, 768, 1024, 1436 and 2560 px. Inspect actual-size lettering, background, clear space and overflow.
- Update registry, public guide and regression tests together. A new colour variant or background requires an explicit recorded decision.

## 03 / Design foundations

### Colour roles

| Role | Value | Use |
| --- | --- | --- |
| Ink | #17242e | Main text; dark narrative sections |
| Paper | #f5f1e8 | Reading surface; text on ink |
| Electric blue | #155bf5 | Links on paper; applied-work cover |
| Rust | #c45b3f | Chapter navigation; contact; attention |
| Near black | #050c10 | Text on rust |
| Muted ink | #4b555b | Secondary copy on paper |
| Evidence blue | #a9c5ff | Labels and diagram paths on ink |
| Panel | #e9e5db | Supporting evidence |
| Sage | #d6e1dc | Customer and team context |
| Sand | #ead7be | Method and explanation |
| Divider | #bdb6aa | Quiet rules on light surfaces |
| Interactive ink | #263e50 | Raised source panels and disclosures on ink |
| On-ink secondary | #cbd6df | Supporting explanation on ink |
| Control outline | #52606a | Functional boundaries on paper |
| On-ink outline | #80929f | Functional boundaries on ink |

Use ink on paper, paper on ink, white on electric blue and near black on rust. Do not use white on rust for small text. Colour must have a purpose; pair status colours with words, shapes or symbols. Decorative dividers are not a substitute for sufficiently contrasted control boundaries.

The baseline is a fixed editorial palette with deliberate light and dark sections, not a system-aware theme. A future dark theme needs its own approved pairings and QA. The visual guide computes the contrast ratios of its specimen pairings from the token values; this does not certify every page.

Treat selection as a complete foreground/background pair. A selected chapter's number, label and icon inherit the selected text colour, not the muted default. Test every child element in default, selected, hover and focus states. Rust is emphasis, not proof of risk, approval or correctness. Use words to identify those meanings.

### Typography

| Role | Typeface | Digital range | Rule |
| --- | --- | --- | --- |
| Display | Fraunces 500 | 64 to 158 px | One dominant promise; around 0.9 leading |
| Section | Fraunces 500 | 40 to 88 px | Clear subject; around 1.02 leading |
| Case or insight | Fraunces 500 | 28 to 55 px | Same semantic role, same treatment |
| Introductory promise | DM Sans 500 | 22 to 30 px | Stronger than body; around 1.38 leading |
| Body | DM Sans 400 | 16 to 20 px | 1.55 to 1.65 leading; 45 to 68 characters |
| Controls | DM Sans 500 | 14 to 16 px | Stable hit area and legible labels |
| Metadata | DM Mono 400/500 | 12 to 13 px | Dates, sequence, status and attribution |

Use fluid relative units. Recompose long headings rather than forcing desktop line breaks onto mobile. Use one h1 and logical heading levels. Avoid all-capital paragraphs and excessive bolding. Metadata sizes are not appropriate for essential instructions.

The display range describes the homepage, not every h1. Detail-page h1s use 44 to 88 px with about 1.04 leading; a working workflow uses 42 to 72 px. The directory uses 48 to 100 px. At narrow widths, section headings may reduce to 32 to 40 px and tertiary headings to 24 to 28 px. Match meaning and visual weight, not identical dimensions across different page recipes. Keep regular body text at least 16 px. Small section numbers and dates may use the metadata scale; full explanatory sentences should not.

Chinese content must be originally written in native Chinese from verified facts. Do not translate sentence by sentence or inherit Latin tracking and italics. A Chinese serif/sans pairing is an extension requiring font-loading and visual review, not a currently implemented specimen.

### Grid and space

Use an 8 px rhythm, with 4 px optical adjustments. Common spaces are 8, 16, 24, 32, 48, 64, 80 and 112 px. Default to 24 px between body paragraphs and a smaller consistent gap between list items. Use 48 to 64 px between an introduction and its supporting evidence where the composition allows.

Portfolio: asymmetric introductory columns, portrait and reading column, paired case panels, 88 px orange desktop rail, beginning with 00 Intro linking to the hero. At 760 px and below, the rail becomes a 66 px bottom navigation with page clearance. Workflow: compact masthead, wide task canvas, contextual detail panels. Guide: readable column, contents navigation and visual examples. These are related recipes, not one compulsory page shell.

The Work directory, case details and Method use a decorative 56 px rust edge, reducing to a 12 px strip at 1000 px and below. At 1000 px and below, paint the 12 px strip in the document background and hide the fixed rail. This keeps it continuous behind iPhone Safari controls. Keep the fixed rail on desktop. It is not navigation and its vertical labels are hidden from assistive technology. Do not add the homepage's bottom chapter navigation to subpages. The DAM working canvas and design system may omit the edge to protect usable width. Standard detail-page gutters use clamp(24px, 5.5vw, 88px); inner demo panels use 32, 24 or 16 px according to available width. Labels, captions and controls within a panel must share its inner alignment.

Whitespace separates, groups or emphasises. If a column stays empty for several paragraph heights, shorten, rebalance or stack the composition. Expanded case evidence spans below both panels. Avoid fixed minimum heights on ordinary content sections and footers. Do not fill gaps with repeated positioning.

For long reasoning sections, put the heading above a two- or three-column grid of principles. Put evidence beneath its heading, never beside a short title in a permanently empty half-page column. Let the content determine when columns stack. Contact bands pair the headline with the invitation, then align the two actions below. A sticky heading is an optional reading aid, not a way to disguise a structurally unbalanced layout.

On narrow screens, contact bands read in order: label, heading, invitation, primary action, next destination. Utility links follow on a separate reading surface with comfortable tap areas. Keep explicit grid placement inside the wider-layout rule; a leftover grid-column can create an invisible second column even after declaring one column. Use minmax(0, 1fr), test computed child positions and remove forced line breaks without joining adjacent words. Never shrink a footer headline or hide its invitation to rescue a desktop grid.

### Responsive composition and artwork

Design for the space available to the component, not the device name. Use a single reading column when a pair would make either column too narrow. Start with a 280 px minimum for ordinary content cards, then test actual labels and text; use a local container query when the component can appear in a sidebar. Preserve source order when stacking. Avoid equal-height text boxes that leave artificial gaps on mobile.

Use 24 px outer gutters as the normal narrow-screen default and at least 16 px inside small panels. Keep 40 to 64 px between substantial stacked copy and a separate illustration; a short caption may sit 8 to 16 px from its image. These gaps belong to layout, not transparent pixels in the asset. Check the last list item, not only the heading. Never let text touch an image boundary or depend on a crop's empty background.

Every image composition specifies its subject, text-safe area, crop and fallback. Use distinct mobile or tablet artwork when needed. Change the picture source at the same breakpoint as its layout. Text over imagery must stay on a quiet, contrast-tested area at every sampled width; otherwise put it on a solid surface or stack it. Preserve natural proportions and useful content when assets fail or text grows.

Use content-driven heights. Reserve fixed ratios for thumbnails and deliberately bounded canvases. At wide widths cap reading measure, not just page width; extra space should become margins, useful columns or a wider working surface. Test 531 px and 2327 px as regression examples, plus one pixel either side of every changed breakpoint. A 320 px pass does not establish that intermediate widths work.

Responsive priority changes placement, not meaning. Retain the main decision, material condition and recovery action on narrow screens. Stack them; do not remove them to fit the layout. A persistent header or transport bar needs clearance based on its actual wrapped height, plus safe-area insets. At short heights, put secondary tools in flow and reduce sticky layers before reducing readable content.

### Semantic tokens, icons and layers

Choose colour by role: text, surface, boundary, action or focus. The JSON's semantic aliases refer to named palette values; they are not a second palette. Use ink text on light surfaces, paper text on ink and near black on rust. Never carry a light-surface link or focus colour into a dark panel unchanged. The current JSON is a project-specific format, not a DTCG import file. A future design-tool adapter must map types, values and references explicitly.

Use one icon family within a product surface. Keep icons in a stable 18 or 24 px box, centred with flex or grid. Decorative icons are hidden from assistive technology; icon-only controls need a meaningful accessible name. Use the supplied marks rather than icon substitutes. Keep arrows, plus/minus and close states consistent with their function.

Use library icons for interface arrows and close actions, with non-shrinking boxes and inherited colour. Text glyphs may shift baseline or render as coloured emoji on another operating system. Verify the icon beside a wrapped label, not just beside one short word.

Layers progress from page content to sticky navigation, popovers, modal overlays and urgent notifications. A larger z-index is not a substitute for understanding stacking contexts. Prefer the native dialog top layer for modal content. Tooltips must not cover their trigger or contain an essential action. A toast must not hide focused controls or become the only record of a failed operation.

### Alignment across content lengths

Use shared columns, gutters and row tracks to create alignment. A short heading and a long heading must share the next meaningful baseline without truncation. In repeated desktop cards, use grid subgrid where supported or an equivalent content-aware layout. Avoid fixed heights tied to today’s copy. Stack naturally on small screens and retain the same information and actions.

| Surface | Alignment contract | Stress case |
| --- | --- | --- |
| Expertise cards | Shared title, description, tags and action tracks; tablet tags and links share baselines | Two-line title and unequal tag counts |
| Work directory | Paired cover and contribution boundaries align; actions remain in the final row | Long title next to a short title, then filtering to one item |
| Case summaries | Contribution, evidence and process remain distinguishable in every case | Concept work without measured business results |
| Method evidence | Shared label, claim, explanation and destination tracks | Four references in balanced pairs |
| Contact and credentials | Shared outer edges and consistent column gutter | Long email, wrapped invitation and translated labels |
| Footer | Identity and links vertically centred in a minimum 44 px interaction row | Wrapped identity on mobile; links stack without invented spacing |

Breakpoints express layout needs, not device names. The current system uses a 760 px mobile boundary and additional 900, 1000 and 1100 px composition changes on specific surfaces. Test immediately on both sides of any affected boundary. A global breakpoint replacement is a migration, not a harmless token edit.

## 04 / Components and states

### Navigation

The wordmark returns Home. The shared primary navigation contains Work, Writing and Contact, in that order, on every Meeno-branded public page and evidence archive. The design system belongs in the footer. The footer consistently offers Work, Writing and Design system, using the shared footer data and component. Keep identity and Back to top as separate footer utilities. The homepage rail carries the visible label "On this page" on desktop and mobile. Its Work and Writing links jump to homepage introductions, while the masthead links open their full collections. Page-level chapter links navigate within the current page; they must not masquerade as different site pages. Detail pages use breadcrumbs and a clear return route. Mark the active location semantically, not just with colour.

Internal links must reach the precise heading without clipping it. Smooth scrolling respects reduced motion. Preserve meaningful URLs and browser back/forward behaviour.

Masthead recipe: use app/site-navigation.tsx and its shared data in app/site-navigation-data.mjs. The generated Design system reads the same data and CSS. Work points to /work, Writing to /writing and Contact to /#contact. Exact destinations use aria-current="page"; a parent section on its detail page uses aria-current="location". On the homepage between 761 and 1100 px, omit the location text and keep the masthead links on one row. At 420 px and below, place navigation on its own full-width row. Preserve 44 px targets and visible focus. Breadcrumbs and archive return links remain separate contextual navigation. Standalone client website demonstrations open in a new tab without a portfolio masthead or return banner. Portfolio-owned working examples retain contextual navigation within their existing layout. Presenter windows retain their task-specific controls. The Design system remains a footer destination.

### Actions and disclosures

Use rectangular primary actions with ink fill and paper text. Secondary actions are quiet links or outlined controls. Labels explain the result: Explore the DAM workflow, Full screen, Close full screen. Do not use vague action labels for important destinations.

Homepage case-study entry links use this primary-action treatment consistently, including Easy English. On their light paper panels, use ink fill (#17242e) with paper text (#f5f1e8); hover uses blue (#155bf5) with white text. Choose the variant for the surface beneath the button, not the client logo or adjacent cover colour. Keep a 56 px minimum height, a visible ink focus outline, and full available width at 760 px and below. Supporting descriptions remain beneath the button. This shared homepage button treatment does not change the Easy English case page, demonstrations or animation exclusion.

On an ink panel, use the inverse primary-action variant: paper fill with ink text, a rectangular shape and a clearly labelled destination. Sage may provide hover feedback while ink text remains unchanged. Preserve contrast in default, visited, hover, active and focus states; generic link styling must not override the component. Use a visible light-blue focus outline against the surrounding ink surface.

For a detailed case-study example, make the entry a prominent primary action rather than a quiet inline link. Place a short description of the example beside it, use a specific label such as “Explore the detailed example”, and keep the destination as a real link styled as a button. Prefer one clearly named link over making the entire content panel clickable. Use a minimum 56 px height, sufficient internal padding, and full available width on narrow screens; wrapped labels must grow the control rather than clip. The example CTA must remain visually distinct from headings, explanatory copy and technical lists. This is a surface and emphasis variant of the existing primary action, not a new palette or type style.

Shared navigation uses placement and spacing, with an underline and blue text for the active location; hovering adds an underline. Reading-copy links remain recognisable through an underline or a descriptive action with an arrow, rather than colour alone. Buttons use their fill or outline. Every link retains visible keyboard focus. Apply the appropriate component treatment rather than a blanket page-wide override.

Controls have at least a 44 px hit area; primary actions generally use 48 px. The circular disclosure control is 44 px with two centred 14 by 2 px bars. Closed and open states must remain symmetrical. Use aria-expanded or native details semantics, visible keyboard focus and logical focus return.

There are two disclosure presentations: a 44 px circular indicator for career or summary cards, and a centred 24 px unframed indicator within a full-width technical row at least 44 px high. The indicator alone is not the hit target. Show plus when closed and minus when open. Close is a separate action: an outlined rectangular button with a centred 18 px icon box and a geometric cross, never a baseline-aligned text multiplication symbol. Use ink focus outlines on light surfaces and evidence blue on ink; do not reuse a blue-on-blue focus treatment.

Use real links for destinations and buttons for actions. Same-site portfolio navigation normally stays in the current tab, including integrated demonstrations, strategy studies and reference explorers. Standalone client website demonstrations open in a new tab so the case study remains available. Apply target="_blank" and rel="noopener" to every launch link, including linked preview images and design-system specimens; announce the new tab in the label or accessible name. Navigation within a client demonstration stays in that tab. Raw images and documents opened outside the designed viewer use a new tab, preserve the current page and announce that behaviour in the label or accessible name. Add rel="noopener" to target="_blank" links. A diagonal arrow indicates a destination; it is not a promise that a new tab opens. Avoid contradictory labels.

Experience disclosures use company first in serif, role in sans, dates in mono, and a stable circular control. Expanded content separates remit from contribution. Keep dates visible and never invent contract explanations for short tenures.

### Case studies and evidence

Use context; problem or outcome; explanation; personal contribution; one prominent insight; evidence or process; optional depth. Comparable cases share this hierarchy. Do not invent metrics merely to make their layouts identical.

Detailed case-study recipe: breadcrumb and organisation label; outcome-led title and short introduction; The challenge; What I did; a concrete work demonstration; Results; next case and contact. Explain built work, later design and simulation once where the distinction matters. Use the Case-study storytelling rules in Voice and evidence. Keep framing compact when a functional simulator follows. Crown's content assistant may retain its inline explanation. Full working experiences for Bastion, Easy English and Cluckin’ Good open from a separate case narrative.

Evidence summaries use the shared CaseEvidence component: mono label, serif claim, concise sans-serif explanation and a top rule. Use three columns on full-width desktop surfaces, stacked rows in narrow columns and on mobile. Observations, measured results and proposals are distinct evidence categories.

Interactive explanations separate input, retrieved reference material, transformation and human decision. Scenario changes update the facts, relevant excerpts, output and reasoning. Show reference excerpts at retrieval and before/after with a change rationale at response. Avoid permanent reference libraries repeated beside every step and duplicate source controls. Keep implementation detail and proposed extensions in named disclosures. Fictional policies are teaching examples, never internal rules or legal advice.

Attribute results to the correct organisation and initiative. Explain status once near the evidence. Distinguish original implementation, later system design, simulation and live operation. A map's node count does not establish the original export's node count.

### Results and comparative evidence

A prominent number needs a plain-language label, the relevant period or scope, and its evidence basis nearby. Use the same Fraunces claim styling as other evidence, not an unrelated dashboard tile. Distinguish measured results, self-reported observations, delivery counts and illustrative examples. A share of attributed revenue is not revenue growth; a percentage-point change is not a relative percentage uplift; producing two design directions is not proof of improved conversion.

Use before and after only when both values describe comparable work. Explain the start and end of a timing measure, who observed it and whether it includes waiting, agency briefing, content review or legal approval. Keep approximate observations approximate. Do not calculate a precise time-saving percentage from phrases such as weeks to days. If no reliable numeric outcome exists, use a verifiable output and explain what changed. Never fabricate a baseline, denominator, result or measurement method to balance a page.

### Workflow maps and overlays

Use labels and symbols alongside colour. Selection must change meaningful detail. Provide fit, zoom and a full-screen or full-window map view with an obvious close action. Keep the selected scenario and step when entering and leaving. Escape closes expanded views, focus stays within them, and returns to the opener. The rest of the page must not remain keyboard-active behind a modal surface.

### Screenshots, comparisons and archive viewers

Hard rule: no scrollbar may appear inside any screenshot used by this website. This includes browser scrollbars, horizontal bars, nested-panel bars, thumbnails, full-page captures, before/after comparisons, design-system examples and images opened directly. A CSS crop that merely conceals a scrollbar is not a fix: the served image itself must be clean.

Capture with scrollbars hidden while preserving scrolling and page layout. Inspect all four edges and every scrollable region before accepting the asset. If a bar is already baked into an image, recapture it or remove only the verified scrollbar gutter from a preserved copy. Never erase content, distort the image or assume every capture has a 15 px gutter. Keep untouched evidence outside public assets. Check full-resolution files as well as page previews, update image dimensions and remove any obsolete masking workaround.

Normal live page and viewer scrollbars remain functional. This rule concerns pixels in screenshot assets, not disabling browser scrolling. Record reviewed screenshot hashes in scripts/screenshot-review-manifest.json; new or changed screenshots require visual review before updating that manifest. Automated checks cannot reliably recognise every scrollbar and do not replace inspection.

Portfolio archive pages retain the case-page rust edge rail: 56 px with vertical identity text above 1000 px, and a 12 px strip without text at smaller widths. The reserved page space and actual rail must appear together. The closing invitation uses a heading group and an uncompressed arrow button; stack these at 1000 px and below, with a full-width button capped at 360 px on phones. Review the archive from header through footer, including the closing invitation, rather than treating clean screenshot assets as proof of page quality.

Capture the completed, settled page at a known viewport. Exclude capture-progress controls; portfolio return banners are not part of the page and must not be introduced. Preserve the original site's own navigation and content. Check fonts, artwork and motion have settled before capturing. Preserve the original full capture separately from its preview crop and retain the source URL and capture date.

Before/after previews use the same frame ratio, with meaningful opening content filling each frame from the top. Scale proportionally; do not contain an entire tall page inside a short card. Recapture or crop a copy when a capture includes blank canvas. Never stretch the page, remove inconvenient evidence or crop a headline awkwardly just to match heights. On mobile, stack the labelled previews in before-then-after order.

An archive is a designed gallery: a short introduction, dated record, featured opening page, then consistently sized preview cards with a page name, purpose and View complete page action. Full captures open in a native dialog with an accessible title, a sticky paper header and a Close button. Display the image at the available content width with automatic height and vertical scrolling. Do not shrink it to fit its entire height. Keep viewer actions on paper with ink text; never use electric-blue text on rust. Open image at full resolution opens a separate tab so the portfolio remains available. Escape and Close return focus to the opener.

### Decision summaries and optional depth

Use this pattern when the visitor must compare an option, understand a recommendation or inspect a proposed course of action. Reuse an evidence card and disclosure rather than inventing a separate visual language for each partner, channel or technology. A simple fact does not need a decision card.

The closed view carries the option name, proposed role, recommendation and decisive reason. The reader should understand the position without opening anything. Keep a material blocker visible. Expanded content explains the supporting evidence, proposed scope, conditions and how the work would be evaluated. Keep the summary attached to its detail; expansion must not turn the whole card into a nested click target.

| Layer | Answer | Content rule |
| --- | --- | --- |
| Decision | What should we do? | Compare, test, proceed subject to conditions, defer or reject; explain why |
| Evidence | What do we know? | A specific supported fact, useful source title and date when freshness matters |
| Proposal | What would happen? | Defined scope and responsibilities; no implied booking or approval |
| Condition | What could change the decision? | Unresolved dependency, responsible role and next check |
| Evaluation | How would we judge it? | Measure, comparison basis and stop, continue or review condition |

Decision status and evidence status are separate. Researched does not mean recommended; recommended does not mean approved; an approved plan does not prove delivery. Use short status text once where it matters. Avoid invented confidence scores, unexplained traffic lights and repeated disclaimer ribbons.

Keep optional detail full-width below the summary. Two comparable evidence columns may sit side by side when each remains readable; otherwise stack them in source order. If several disclosures support comparison, allow more than one open. An Expand all action is useful only when it opens real content and has an equivalent collapse action. Core findings remain in the closed view and in static exports.

### Component contract and interaction states

Before adding a component, specify its purpose, anatomy, variants, content limits, states, keyboard behaviour, narrow layout and failure recovery. Name the maintained source and a test example. Existing buttons, disclosures, evidence blocks and navigation are the starting point. Future patterns below are design requirements, not a claim that a production component library exists.

| State | What the person sees | What the implementation preserves |
| --- | --- | --- |
| Default, hover and focus | Clear purpose; visible keyboard focus independent of hover | Accessible name, sufficient contrast and stable dimensions |
| Selected or expanded | A label or shape as well as colour; plus changes to minus | aria-current, aria-selected or aria-expanded as appropriate |
| Loading or processing | The actual action in progress; honest progress if measurable | Prevent duplicate actions; preserve input; announce useful changes |
| Empty | Why there is no content and a useful next step | Distinguish a new collection from zero search results |
| Error or offline | What failed, what was retained and how to recover | Do not imply success or silently discard input |
| Partial or stale | Which part is usable and when it was last updated | Do not display stale results as current or retry completed side effects |
| Disabled or read-only | Why editing is unavailable | Keep values readable; do not rely on a tooltip on an unfocusable button |
| Success | A confirmed outcome and the next relevant action | Announce the result without unexpectedly moving focus |

Use native elements before custom ARIA. Tabs switch related panels and support arrow-key navigation; ordinary anchor links are not tabs. Use disclosures for optional depth, not to hide the main argument. A full-screen map retains state and has visible, keyboard-operable fit, zoom and close actions. Dragging needs a button or keyboard alternative. Follow the WAI-ARIA pattern appropriate to the actual interaction rather than copying only its appearance.

### Interaction workbench

These working specimens demonstrate local interface behaviour. They do not send information, save an account or represent a production form library. Tabs follow the horizontal keyboard pattern: Left and Right move focus and selection; Home and End reach the first and last tab. Tab leaves the tab list. All panels remain readable when scripting is unavailable.

A modal temporarily interrupts a task. It has an accessible title, a visible close control, trapped focus and Escape support; closing returns focus to the opener. Use it for a bounded task, not a whole case study. An ordinary disclosure keeps supporting material in the reading flow. Error messages identify what needs changing and retain the entered value. Success wording describes only what actually happened.

The specimen’s filter distinguishes no matches from an error. Clearing the query restores the original collection. Loading and destructive actions require real application state and are extension contracts, not pretend live operations in this guide.

### Select controls

Use the shared UiSelect component at app/ui-select.tsx for Meeno-branded single-choice dropdowns. Keep the native select and its keyboard/mobile picker behaviour. Suppress only its default visual appearance and use the supplied Lucide chevron, with no pointer interception. Native browser arrows are outside ordinary text padding; padding alone does not control their position.

Reserve 16 px from the arrow box to the control edge, a 20 px arrow box, and at least 12 px between the value-text area and arrow. The end padding is therefore 48 px; normal start padding is 16 px and minimum height is 52 px. Use logical end positioning. Preserve a visible focus outline, label association, disabled semantics and forced-colour native fallback. A field error also needs explanatory text; a thicker border alone is insufficient.

Check every actual value at the narrowest container. Shorten a display label only when the full meaning remains visible beside the result. Never solve overlap by moving the arrow against the edge or shrinking essential type. Measure the icon's edge inset, text reservation and vertical centre, then inspect focus, open picker and selected states. New native selects in Meeno-owned app routes and feature modules must use this component. The pre-existing DAM treatment already inset its arrow; it has been consolidated into the shared component so later articles can reuse it. Client-branded demonstrations retain their own controls and require deliberate migration, not a global override.

### Forms, validation and destructive actions

Use persistent labels, appropriate input types, optional/required wording and hints before entry. Placeholder text is an example, never the label. Group related fields with fieldset and legend. Validate on submission or after a field has been meaningfully edited, not on every first keystroke. Errors explain the correction beside the field and, for a long form, in a linked summary. Preserve entered values and associate hints and errors programmatically.

Loading must not allow duplicate submission. A successful response must be confirmed by the receiving system. Show network failure separately from invalid input. Specify file types and size limits before selection; include local selection, removal, upload progress, failure and cancellation states when uploads genuinely exist. Portfolio demonstrations keep submission and uploads disabled and say so before the person enters information.

Confirm irreversible or consequential actions with the exact target and consequence. Make Cancel the safe exit; restore focus afterwards. Use undo when the action is genuinely recoverable. Do not ask for repeated approval of the same unchanged action. Authentication, permissions, sessions, consent and real payment handling require a separate implementation and security review; styling these states does not implement them.

### Collections, tables and analytical views

Use a card for a coherent story and a table for repeated comparable fields. Cards have one clear primary destination and no nested interactive targets. Filters expose the active choices, result count and reset action. Distinguish no results from no published content. Preserve filter state when returning from a detail page; use URL state when a view should be shareable.

Tables have a meaningful caption, associated headers, units and explicit sort state. Keep horizontal scrolling inside a labelled, keyboard-accessible region when two-dimensional structure is essential. Do not truncate the only copy of important text. Charts state the question, period, units, denominator and source; provide an equivalent summary or data table. Label series directly where practical and never depend on colour alone. Tooltips work with keyboard and touch. Do not use a decorative metric tile for an unsupported number.

### Search, sort and filter behaviour

A collection is a working reading surface. Keep the current results visible while the reader chooses an option. Search runs on submission; a topic link applies immediately; format and sort selects apply through their labelled action buttons. Changing a selection returns pagination to its first page while preserving the other applied choices. Clear all filters returns the default library. Do not add live filtering on every keystroke to this pattern without a separate usability decision.

With JavaScript available, update results in place and retain the reading position. Keep the URL, selected controls, result count and visible articles in agreement. Back, Forward and direct links restore the applied selection. Keep real links and GET forms as the script-free fallback; ordinary article links still open their article. A filter selects records and a sort orders them: animation must not alter either result.

Keep a visible label on each control and a concise status announcement for the result count. Zero results explains how to widen the search and provides a reset. Preserve keyboard focus on a surviving control; when a reset or pagination link disappears, return focus to the collection heading without scrolling. Do not move focus to every new card or announce decorative exit copies. Rapid changes replace the previous transition without leaving duplicates or blocking the next action. See [Editorial collection transitions](#editorial-collection-transitions) for the motion treatment.

Sort labels must describe the field actually used. Publication and modification are distinct; timestamps need a timezone and verified provenance. Date-only records have genuine ties, so opposite date sorts do not have to reverse those tied items. Use a consistent alphabetical fallback for genuine ties when adopting publication-time sorting. Do not fabricate publication times, popularity or readership counts to make a sort appear complete. Store those values and their evidence with the catalogue or publishing workflow, not as design tokens.

### AI response and workflow states

Distinguish input, retrieved sources, generated output and the person's decision. Show sources that support the specific response, with useful titles and retrieval context. Make edits or changed claims inspectable. Cover missing knowledge, conflicting sources, unsupported claims, refusal, interrupted generation, retry and partial output. Do not display a confidence percentage without a defined and validated meaning.

A simulated response is labelled as a simulation. A proposed handoff is labelled as proposed. A real agent asks before an external or irreversible action when permission is required, shows progress without exposing hidden reasoning, and reports a confirmed result or failure. Preserve the person's draft through recovery. Never use a spinner, source badge or green tick as evidence of factual correctness, approval or completed delivery.

## 05 / Page applications and taxonomy

### Method and the first 90 days

Use Method as the single label for working practice. Homepage chapter 03 at /#method introduces the shared discipline. [Method](/method) offers two substantive, directly linkable pathways: [Insights and performance](/method#insights-performance) and [Applied AI](/method#applied-ai). Each has its own priorities, deliverables, decision gates and relevant cases. Keep the introduction role-neutral and all phases readable without JavaScript. Do not create competing Approach pages. The shared header navigates the site; the numbered rail navigates six homepage chapters: Expertise, Work, Method, Writing, Career and Contact. Work contains project evidence, Method explains practice and Writing develops useful arguments and guidance.

Use the shared masthead, breadcrumb, editorial typography and contact treatment. Put headings above dense grids rather than leaving an empty column beside long copy. Present the first 90 days as three readable phases with anchor navigation, deliverables and decision gates. Keep all phases available without JavaScript. Dates describe a starting framework, not guaranteed delivery or a historical result.

### Portfolio and selected work

The homepage explains identity and promise, relevant expertise, selected evidence, working method, original writing, career context and invitation. The work directory helps a visitor choose the most relevant evidence without repeating the full homepage.

The homepage currently features four complete cases; /work is the complete published collection. Inclusion in the collection does not imply inclusion on the homepage. Keep one catalogue with explicit homepage selection, topic, publication format and optional detail URL. Do not infer destinations from a colour or theme. Add only evidence-backed entries, never placeholder cases to fill a grid.

Work collection: a restrained editorial introduction, wrapping topic filters, visible result count and a two-column case grid. One substantial walkthrough may lead with a wide split card. On narrow screens use one column. Derive filters from published entries, preserve readable cards as the collection grows, and show all entries in the initial server-rendered document. Add search or pagination only when collection size and use justify it.

Every entry has a useful summary and personal contribution. A summary-only entry opens its evidence in place on /work; a homepage link is optional and labelled as such. A dedicated case links directly to its stable /work/{descriptive-name} route with a specific action label. Never create an empty detail page or label a homepage jump as a detailed case study. Use the same supplied company marks, evidence boundaries and link treatment as the portfolio.

A case detail explains problem, context, role, decisions, work product, evidence, operating status and next conversation. Do not reproduce the homepage introduction.

When bringing an existing presentation into the portfolio, separate the case narrative from the working artifact. The case answers what was asked, what Meeno did and what was produced or observed. The optional artifact preserves useful interaction beneath a stable case route. Do not transplant meeting controls onto the Work directory or force a functional response into a long decorative cover. A planning exercise is a valid case when its contribution and outputs are clear; it is not a delivered campaign.

Migration has a release gate: review publication rights and sensitive content; include or replace required local assets and downloads; map old routes, fragments and return links; isolate styles; verify the case and artifact independently. Presenter views and source documents are reviewed individually. Noindex does not make a private brief safe to publish. Keep the original site until the replacement and any authorised redirects work. This guide creates no new case, route or publication permission.

### Inspectable work references

A detailed reference sits beneath its case route and provides a clear return to the narrative. Use the portfolio typography, paper and ink surfaces, semantic borders, shared navigation and explicit control labels. Put the visitor's question before the catalogue. The Crown measurement reference connects a business question to measures, events, tag mappings and field definitions; governance and the searchable record browser provide other entry points.

Display documented relationships only. Search and journey filters must never silently substitute another question or an illustrative chain. Keep empty selections explicit, offer reset, and preserve selected records and filters in the URL. On narrow screens, replace a wide relationship diagram with labelled, numbered stages. A selected record needs a readable detail view and a clear return to the explorer. Expanded views require close, Escape and restored keyboard focus.

A hover fill belongs to the complete padded control, not the text bounds. Text-and-icon mode buttons use at least 16 px horizontal and 12 px vertical inset on desktop, retaining at least 10 px horizontal inset when composed for narrow screens. Keep the icon-to-label gap explicit. Icons within a selected dark control inherit the inverse action colour. Scope diagram-path styling to the diagram SVG so it cannot recolour interface icons. Measure all four content-to-fill gaps in hover, selected and keyboard-focus states; check every child, not just the outer rectangle.

Large connected sets use progressive disclosure: select a record type, search within it, and page through a bounded group. The Crown reference presents six questions or connections at a time, retains full access to the catalogue, and reveals additional fields on demand. A single available connection type is labelled text rather than an empty-choice dropdown. A connected business question can open its own trace, and record inspection provides a previous-record action. Verify chooser, empty, reset, next, previous, expanded, and narrow states independently.

Dense relationship maps focus on one record’s documented immediate connections at a time. Use rounded orthogonal paths inside the gaps between columns; do not draw every relationship simultaneously or merge unrelated relationships into a shared line. Card selection updates the focus without scrolling away; provide a separate action to read the selected definition. Keep the selected field visible when other fields are collapsed. Preserve the full graph data and a readable narrow-screen fallback.

Portfolio references need a guided entry before unrestricted catalogue exploration. Demonstrate one source-backed question through evidence, event meaning, payload, collection, integration limits, governance and acceptance. Each step states the practitioner's decision and output, with underlying records available on demand. Keep illustrative roles and sample values explicit; never invent requester identity, implementation status or record relationships. Preserve existing deep links and return visitors to the same guide step after inspecting evidence.



Prepare public records from an explicit allowlist. Exclude names, live identifiers, private links, operational findings and original payload values before generating browser-delivered files. Hiding a value in the interface is insufficient. Preserve useful definitions and relationships with generic context and labelled synthetic examples; keep unknowns explicit. Distinguish framework authorship, partner implementation, proposed rules, production evidence and measured outcomes. Record counts describe the reference unless deployment evidence establishes otherwise.

### Complete featured-case anatomy

Every homepage featured case uses the same complete recipe: project mark and category; a clear title and introduction; context; contribution; key evidence or insight; a short process; a case-study link with a useful supporting note; and expandable detail. A fourth case must not become a compact banner with missing sections simply because it was added later.

Reuse the homepage catalogue selection and case data. Preserve the distinction between employment work, independent work and concept studies in the context line. For an independent strategy study, an output count describes delivered planning material, not campaign performance. The specimen below maps the current Cluckin’ Good case to this recipe; it is an anatomy reference, not a second source for case copy.

The Method diagrams share fine flowing paths, restrained moving markers and explicit feedback loops. AI workflow orchestration shows a coordinator scoping bounded research, analysis and checking tasks, combining findings for validation, and returning specific gaps for rework before human review. It illustrates a configured workflow and does not claim a proprietary agent runtime. Cluckin’ Good provides the methodology reference; the Crown assistant remains supporting evidence. Media planning connects evidence to channel roles, allocation and measurement, with learning returning to planning. Flow counts and widths are illustrative, never budget shares or measured performance. Pause and reduced-motion views retain the complete diagram and written explanation.

### Windows, overlays and return paths

| Destination | Container | Return contract |
| --- | --- | --- |
| Case study or complete strategy | Main browsing context | Clear case breadcrumb or contextual return link |
| Supporting explanation | Inline disclosure | Keep the visitor’s reading position |
| Full-size archive preview | Modal dialog | Close or Escape restores focus to the original preview |
| PDF or raw asset | Clearly labelled document destination | Preserve the referring page when opening a new context |
| Speaker notes | Dedicated presenter window requested from a direct click | Focus the connected strategy window or close notes; do not navigate the notes window into the portfolio |

Speaker notes are a companion workspace. Request a window with popup, width and height features in the direct click handler, retain its window reference, and reuse and focus the existing window, and keep the audience screen available. Browsers retain final control over window placement and may block a popup; explain how to allow it and provide an explicit retry. Never promise to override browser policy. A plain target=_blank link is insufficient because it commonly opens a tab; the current implementation uses window.open with explicit popup features and a retained reference.

The notes window has its own compact project label, timer, page controls, reading-size controls and connection status. It does not inherit the portfolio’s Back to case study banner. The Show presentation control focuses the connected audience window rather than replacing the notes content. Closing notes must not close or change the strategy. A directly opened or disconnected notes view must explain how to reconnect; a connection message must reflect observed state. Presenter navigation, audience scroll and timer state remain distinct.

Verify launch, reuse, blocked launch, direct notes entry, lost connection, close, keyboard navigation and audience synchronisation in a browser that supports separate windows. Check reading PDF, evidence notes and calculation guide separately. Noindex limits search discovery; it is not access control.

### Case navigation

Case navigation follows the order of detail pages in the Work directory: Crown measurement, Crown AI content assistant, Easy English, Cluckin’ Good, Bastion DAM workflow, Hab Shifa, then News Corp. Use the shared NextCase component, derived from the catalogue, rather than hard-coded pairs. Summary-only entries are skipped. The last case ends with Back to all work; never loop automatically to the first case. Retain an All work link in each case footer. Related examples can link within the story using descriptive labels, but must not be called Next case unless they advance the sequence. When the catalogue changes, review its order as the intended reading sequence.

### Interactive workflow

Put the purpose, scenario controls and first useful state near the top. Then offer overview, detailed map, selected-step explanation, corrections, history and assumptions. No oversized magazine cover before the working interface. Use the common wordmark, palette, type roles, breadcrumb and footer to establish ownership.

### Client demonstrations and archived material

Browser identity follows the website being demonstrated. Every standalone client website uses its own favicon and touch icon on its opening page and all inner routes, including sample-document readers. Use an existing client icon or a small, recognisable reduction of its approved logo; never inherit the Meeno Zen favicon merely because the demonstration is hosted under meenozen.com. Supply an SVG plus a 32 px PNG fallback and a 180 px touch icon, with explicit page-head links and versioned URLs when replacing a cached icon. Check recognisability at 16 and 32 px on light and dark browser surfaces. Portfolio case narratives and portfolio-owned tools retain Meeno Zen identity.

The case study explains Meeno's contribution. Choose navigation by the experience's role, not by its build system, route depth or project name. Portfolio pages, integrated demonstrations and portfolio-owned working examples use ordinary portfolio navigation or contextual links within their existing layout, with no additional demonstration bar. A standalone client website demonstration opens in a new tab and preserves the client's typography, colour, illustration and navigation without a portfolio masthead, return banner or injected portfolio controls. Explain demonstration status beside the launch link and at affected actions, such as an enquiry form, before the visitor enters information. Preserve route-isolated styles and local assets. Archived screenshots remain evidence in the portfolio gallery, not surfaces to recolour or redesign.

Call the two Easy English directions multi-page and single-page in visitor-facing copy. Use /work/easy-english/demo/single-page/ as the public single-page address. The retired /work/easy-english/demo/waterfall/ address redirects permanently, preserving its remaining path and query string. Internal source folders and asset names may retain the legacy name; visitor-facing links must not. Every demonstration page, including sample-document readers, needs responsive gutters, readable controls and navigation within its own experience. A client website keeps the original case study available in the opener tab; do not add a case-study bar to its inner pages. Portfolio-owned examples retain a contextual path to the case, directly or through their parent experience. Test form success, error and empty states without sending real data.

### Guided response and supporting evidence

Use this recipe for a substantial recommendation that must work in a meeting and during independent review. It is an application of the shared navigation, disclosure and evidence patterns, not a compulsory layout for ordinary case studies. A short case needs a readable page, not presentation machinery.

Use a compact masthead, grouped chapter navigation, a mode switch and one set of previous/next controls. Chapter groups organise the argument; numbered steps identify individual sections. Do not style them as two competing site navigations. The progress indicator means position in the response, never work completed or approval received.

| View | Primary task | Preserve |
| --- | --- | --- |
| Guided | Present one argument at a time | Current section, clear step count, next-section label and access to optional depth |
| Reading | Scan, compare and revisit the full response | All substantive sections, stable anchors and a current-section cue |
| Presenter | Read speaking notes without crowding the audience view | Section, return mode, independent text size and an explicit return action |
| Source or brief | Check the assignment or evidence | Exact source section where available and return to the originating response section |

Use stable section identifiers across views. A mode switch preserves the current section and keeps keyboard focus on the switch. An explicit next/previous action may focus the new section heading; passive scroll tracking must never move focus. Source and presenter round trips preserve both section and mode. Browser back/forward, reload and a copied link should return to a meaningful state, with a safe starting section for invalid identifiers. A scroll-position observer must not overwrite the chosen destination during a mode transition. Keep the response readable without JavaScript.

Show the selected mode visibly and semantically. If using tabs, implement the full tab keyboard pattern; if the views are routes, use ordinary links with the current location identified. Do not expose decorative progress as an unlabeled input. Presenter text controls supplement browser zoom and do not alter audience typography. Presenter notes are a different view, not an access-control boundary: confidential notes must not ship in a public page or bundle.

Explain navigation once in Guide. Do not repeat the same instruction banner on every section. Each section instead states its own purpose, contribution to a requested deliverable and main decision. Short unfamiliar labels have keyboard- and touch-accessible explanations; hover cannot be the only way to read them.

Use the Decision summaries and optional depth pattern for partner or option comparisons. Keep the main recommendation visible at every width. State the section's purpose in one useful sentence; add deliverable mapping when a brief requires it. These cues explain the content, while Guide explains the controls. They should not compete with the heading or become repeated mini-essays.

Use full-width disclosure rows at least 48 px high with a centred 24 px plus/minus indicator. Use the control-outline token for functional boundaries, ink focus on paper and evidence-blue focus on ink. Body copy is 16 to 20 px; reserve 12 px mono for short metadata, not caveats or instructions. Stack detail columns below 760 px, preserve a 16 px minimum panel inset and avoid forced heading breaks on narrow screens.

Use the Cross-format applications rules for the reading PDF and supporting workbook. Exported reading content must include essential evidence and conditions that are collapsed on screen. Replace interactive instructions with directions that work in the destination format.

This recipe governs presentation and evidence design. It is not permission to publish private client material, a claim of universal accessibility compliance or a substitute for testing the actual product.

### Guide layout

Use a concise opening, contents, readable rules, actual specimens, portable source and implementation guidance. A specimen should demonstrate the adjacent rule. Do not make a gallery of unrelated decoration. Print layouts remove sticky navigation and interactive-only controls, preserve headings and show useful destinations.

### Cross-format applications

These are extension recipes, not new routes or certified export templates. An article uses a narrow reading column, descriptive title, author/date where useful, source links and related reading. A dashboard uses a compact header, persistent scope and filters, comparison-friendly data and a clear path from observation to action. A task tool prioritises the current task, recovery and status over a large editorial hero.

Presentations use one main argument per slide, a readable claim and supporting evidence; mono labels organise rather than carry the explanation. Documents and PDFs use real heading styles, reading order, page numbering, repeating table headers and useful links. Test exports for missing fonts, clipped tables and headings stranded from their content. Do not assume the web layout will print correctly.

One content release can have several views. Keep facts, assumptions, labels, source references and calculations aligned, while adapting navigation and density to each medium. Version the source and its outputs together; file existence alone does not establish that an export is current.

| Medium | Preserve | Adapt and verify |
| --- | --- | --- |
| Website | Argument, evidence, units and conditions | Working navigation, selected state, disclosures, focus and reflow |
| Reading PDF | Complete approved reading content, including essential expanded detail | Linked contents, bookmarks, embedded fonts, running context and repeated headers; replace Click a market with a table or page reference |
| Workbook | Values, formulas, units, assumptions and source basis | Distinguish editable inputs from calculations with labels as well as colour; explain failed checks; preserve formulas and data during restyling |
| Presenter notes | The same claims and decisions | Read-aloud sentences, larger adjustable text, prompts and a return route; do not add private material to a public export |

Record an export manifest with content release, guide version, output names and checks performed. For PDFs, inspect every page for missing content and sample dense pages at reading size. For workbooks, compare cells and formulas before and after design changes, then inspect representative sheets in the intended spreadsheet application. A generated preview is not proof of native Excel rendering or print pagination. Synthetic planning data remains synthetic in every format.

Email and social artwork retain the identity and voice but adapt to the channel's safe area and available fonts. Keep essential text as text where possible, provide an accessible text equivalent for image-led content, and check cropping in the destination. Print production needs an agreed trim, bleed, colour profile and proof; do not invent CMYK conversions. No new surface inherits publication approval or permission to reuse client material from this guide.

### Route model

### Two-level design case

Use the main case for the challenge, personal contribution and supported results. A connected /story page may explain the visual and interaction decisions in depth, using the portfolio identity for framing and the client identity inside evidence and demonstrations. Give each chapter a clear argument and a concrete visual.

For Victorian Restorations, the main case positions research, analytical judgment and AI-enabled delivery. Show the chain from observation to decision to inspectable implementation. Do not imply behavioural research, analytics experiments or measured commercial improvements where the evidence is a source review and a working demonstration.

The deeper story belongs to the website and its audience, not the creator’s skills. Lead with the business-specific experience, then connect visual impact, architectural language, content, interaction, discovery and future governance. Use varied editorial spreads and actual specimens instead of repeating a heading and feature list. Keep the client’s decorative language inside those specimens; the surrounding page retains the portfolio identity.

Preserve raw screenshot evidence, but exclude browser scrollbars from presentation. Match before/after viewport and crop. Avoid foliage-heavy standalone hero artwork in this case; use architectural details for editorial covers and the approved night-stage interface capture to explain the homepage. Clearly label cropped lighting specimens and controls that differ from the live demonstration.

Search readiness describes implemented content and technical foundations. It does not establish indexing, rankings, rich-result eligibility, AI citations or commercial impact. Keep future measurement proposals distinct from completed work.

Interactive specimens should be labelled as controlled demonstrations when their controls differ from the original experience. Preserve keyboard access, reduced-motion behaviour and direct selection. Link to the actual client demonstration in a separate tab. Local review addresses must be replaced and checked before publication.

Capture before and after at the same viewport. Keep dated originals and recorded scroll positions when assembling long-page captures. Check for duplicated or missing sections and layout shifts. Report archive coverage precisely; never describe a linked-page inventory as proof that no other pages exist. Delivery counts and documented elapsed time remain separate from measured commercial outcomes and labour hours.

Victorian Restorations replaces Easy English in the four-case homepage selection because it demonstrates deeper visual direction and interaction work. Easy English remains in the Work collection. Existing enterprise measurement and applied-AI cases retain their priority.

| Address | Content type | Search policy |
| --- | --- | --- |
| / | Professional profile and contact | Index |
| /work | Selected-work directory | Index |
| /work/dam-workflow | Case narrative with a separate working demonstration | Index |
| /work/dam-workflow/demo/ | Interactive DAM demonstration | Noindex |
| /work/cluckin-good | Independent media strategy case | Index |
| /work/cluckin-good/strategy/ | Complete strategy and supporting reading views | Noindex |
| /work/content-assurance | Crown AI content assistant | Index |
| /work/measurement-strategy | Crown measurement approach | Index |
| /work/easy-english | AI-assisted website delivery | Index |
| /work/customer-led-growth | Hab Shifa customer insight and team delivery | Index |
| /work/compare-money | News Corp measurement and performance | Index |
| /method | Working practice and two first-90-days pathways | Index |
| /work/{case}/original | Dated evidence archive | Noindex, follow |
| /work/{case}/demo/{direction} | Preserved working demonstration | Noindex, follow |
| /work/{descriptive-name} | Future substantive case study | Index when published |
| /brand | Public design system | Index |
| /brand/assets/... | Marks, source and tokens | Downloadable, noindex |
| /writing | Searchable original article library | Index; filtered and paginated variants canonicalise to the hub |
| /writing/{descriptive-name} | Original article with evidence and useful next steps | Index when published |

Use lowercase, readable, hyphenated slugs. Keep dates and version numbers out of evergreen page addresses. Work topics such as analytics, martech and applied AI are descriptive metadata, not separate homepages or automatically generated tag archives. Do not create empty routes, thin category pages or duplicate case copies to fill this structure.

The homepage is a curated selection, independent of the complete work directory. Feature cases for complementary evidence, not recency alone. A detailed case owns its demonstrations; alternate designs are not separate portfolio identities. Each demonstration follows the role-based navigation contract in Client demonstrations and archived material, explains its status where relevant and uses local assets. Demonstration forms must not send enquiries or upload files. Retain original projects until the migrated public routes and dependencies are verified.

Each indexable page has a unique title, useful description, canonical URL, logical headings, crawlable internal links and an appropriate sitemap entry. Structured data must match visible facts. Permanent redirects preserve retired public addresses. Raw source files remain fetchable without competing with the HTML edition in search.

Personal property briefs and their assets are outside the professional taxonomy and excluded from search. Existing links remain usable. Search exclusion is not authentication or privacy.

## 06 / Voice and evidence

Write for the visitor's decision. Lead with the problem, contribution and useful result. Be clear on the first reading, specific about the work and confident without inflated claims.

Use supported verbs: designed, built, clarified, led, checked, connected. Avoid generic claims such as data-driven leader or cutting-edge AI transformation unless surrounding facts make their meaning precise. Do not add SQL, Python or Tableau as current capabilities. Do not describe unfinished study as a completed degree.

Good: The design checks delivery before retrying an uncertain send.

Avoid: Enterprise-ready AI guarantees flawless automated publishing.

Good: Building that capability in your team? I welcome a conversation about the challenge.

Avoid: I am urgently seeking my next senior role.

The contact voice is confident and receptive. Invite relevant conversations without announcing a job search, promising availability or implying current employment has ended. Do not invent reasons for career changes.

Measured, self-reported and illustrative results are different. Name the distinction when it changes interpretation. Explain limits near the claim without burying the contribution under repeated disclaimers. A local simulation is not a live deployment, and a selected retry limit is not a universal platform rule.

### Case-study storytelling

Use Challenge, Action and Result as the editorial backbone. The challenge combines the situation and task; the action explains the person's contribution; the result explains what changed. Do not print STAR or CAR as visitor-facing labels.

Default reading order: The challenge, What I did, The work in practice, Results. Use a concrete demonstration label where appropriate: The assistant in action, Explore the websites or The workflow in action. A case links explicitly to its working example. A client website opens cleanly in a new tab; a portfolio-owned workflow, strategy or reference continues in the same tab with contextual navigation. Neither receives an added demonstration banner. Keep the functional demonstration close to its controls. Preserve useful interactive demonstrations rather than forcing every case into identical sections.

Write the story for a hiring manager: what needed to improve, what Meeno led or built, who contributed, and what changed. Replace vague process labels and archival-record narration with specific actions and outcomes. Keep private provenance in source records, not the public narrative. A named document is not the story.

Make supported numbers prominent and explain their unit and scope in the adjacent sentence. Distinguish a revenue share, relative conversion improvement, observed turnaround and a delivery count. Do not present a wider-role result as a result of a named project without evidence. Never invent a baseline, percentage, measurement method or business outcome. When timing is approximate, say so naturally once. Retain a short simulation or proposed-extension label where it prevents a false impression; avoid repeating the same qualification across every section.

Homepage selection covers measurement leadership, applied AI, accessible communication and media strategy. Four featured cases currently support that range; the Work directory holds the wider collection. Selection is a content decision, not a permanent numerical limit. The four Method examples are ordered AI workflow orchestration, media planning, reporting quality and customer conversion. This leads with AI-enabled agency operations, follows with media judgement, then establishes measurement and customer foundations. Reassess the order when the target role changes; insertion date is not a positioning strategy. Add a tab only for a distinct decision that the existing examples cannot explain.

### Planning evidence and AI contribution

For a strategy or planning case, the result may be a completed recommendation, reconciled model or decision framework. Describe those outputs prominently and specifically. Do not borrow the appearance of a measured campaign uplift for an unexecuted plan. Proposed budgets, scenario outputs, goals and forecasts are different from observed outcomes.

Keep the recommendation in ordinary language and place evidence status near the claim it qualifies. Use only the categories needed: supplied fact, researched fact, calculation, assumption, proposal, unknown or observed result. A source supports a particular fact, not every inference next to it. An unknown names the missing input and next check. Do not expose private research logs or use a document filename as the public proof of capability.

Explain AI contribution as work: the input, what AI prepared, what was checked or corrected, and what a person decided. Use named agent roles only when they explain an actual division of work. A proposed multi-agent design, an executed assisted task and an autonomous production service need different descriptions. Show inspectable outputs and checks rather than implying automation through badges, role counts or animation.

### Interface writing and inclusive content

Use sentence case, Australian English and concrete verbs. Labels describe the action: Clear filters, Retry upload, Return to case. Error messages state the problem and recovery without blame. Dates must be unambiguous and numbers retain units; use locale-aware formatting when building an international surface. Avoid idioms and compressed internal labels. Do not force an English name-length assumption onto people, organisations or headings.

For another language, declare lang and direction, use logical spacing properties and test long translations, mixed scripts and right-to-left layout. Keep data and prose direction distinct where necessary. Select appropriate fonts and verify glyphs and line breaking. Localisation is a reviewed extension, not permission to translate verified claims loosely or mirror every diagram automatically.

## 07 / Motion, access and performance

Motion explains state, sequence or place. Micro transitions can use 180 to 250 ms, disclosures around 350 to 420 ms, with cubic-bezier(.2,.7,.2,1). These are starting points, not compulsory effects. Do not hijack scrolling or hide content until an animation finishes.

Keep the portfolio Method section's flat animated diagram. Do not reintroduce a spatial field, scatter control or focus slider. Each scenario must change the explanation and visual meaning. Continuing animation needs pause, offscreen and hidden-tab suspension. Reduced motion uses immediate navigation and static state changes. Canvas has an equivalent text explanation.

Check keyboard access, focus visibility, heading order, descriptive links, alternatives, 200% text enlargement and touch controls. Meet 4.5:1 for ordinary text and 3:1 for qualifying large text. Our 44 px control default exceeds WCAG 2.2's 24 px minimum target criterion, which has exceptions.

Make initial content visible immediately. Use local fonts with swap behaviour, explicit image sizes, below-fold lazy loading and route-isolated styles. Do not import a workflow's global CSS into the portfolio. Do not conceal loading delays behind blank preloaders.

Core Web Vitals targets: LCP at or below 2.5 seconds, INP at or below 200 ms, CLS at or below 0.1, at the 75th percentile of real visits. These are targets, not a release pass. Record lab and field results separately. Every large dependency or graphics layer needs a measured justification.

### Navigation for detailed project views

Portfolio-owned detailed work stays in the same tab and uses app/project-navigation.tsx: a compact, sticky Project navigation row with Home, All work and Back to case study. Every direct or bookmarked entry must offer these real links without relying on browser history. The return destination is the parent case study, not a presentation chapter. The Meeno Zen masthead logo links to the portfolio homepage. Keep chapter navigation, map tools and previous/next controls separate from site navigation. Supporting documents also retain a contextual return to the relevant presentation section. Expanded tools may temporarily cover the row but must restore it when closed. Preserve 44 px targets, phone-width fit and scroll clearance beneath the row. Speaker consoles retain their dedicated operator controls.

Standalone client website demonstrations are a different category: open in a new tab with a clear accessible label, preserve the original portfolio case page and show the demonstration without a portfolio banner. Do not add the detailed-project navigation row to Easy English website demonstrations.

### Coordinated navigation and state transitions

Motion connects an action to its result while preserving the editorial layout and reading position. The shared implementation is public/site-motion.js. Easy English routes and case-specific components are excluded; speaker notes retain immediate operation. Chapter entrance motion runs only when the chapter changes. Internal handover actions keep the chapter and card background steady, with a contained 240 ms text transition.

| Interaction | Behavior | Timing |
| --- | --- | --- |
| Section navigation | One interruptible scroll owner; measured portrait-camera offsets; original portrait during explicit jumps | 450 to 850 ms |
| Disclosure | Native details semantics, reversible measured height, stable summary position | 360 ms |
| Scenario and record panels | Contained reveal and height accommodation; controls remain available | 280 ms |
| Presentation chapters | Content settles while the shared scroll owner returns to the heading | 350 ms |
| Work filters | Retained cards move to their new positions; entering cards settle into place | 540 / 400 ms |
| Selected map connections | Trace the chosen relationship once, then remain still | 500 ms |
| Expanded map | Maintain spatial identity between embedded and expanded views | 360 ms |
| Section headings | Sparse first-entry reveal below the initial viewport; body text stays available | 450 ms |
| Cross-document navigation | Browser-native page transition where supported; ordinary navigation otherwise | 180 / 300 ms |

Use the same disclosure and panel behaviors in the interaction workbench below. Native selects, data-entry response, final numbers, downloads and external links remain immediate. Financial values do not count through invented intermediate values. Reduced motion disables travel, reveals, tracing and stagger. New user navigation interrupts the previous journey rather than queuing another animation. Keyboard focus must never cause an additional scroll.

The homepage portrait keeps its approved photographic sequence and final hold during manual scrolling. Explicit section navigation reaches the requested content without replaying that sequence. Browser history and direct URLs remain navigation inputs, not animation queues.

### Editorial collection transitions

Use motion to help readers follow the same article as a collection changes. Existing cards glide from their previous position to the new one. Cards excluded by a filter fade and settle down with a slight turn; newly included cards rise into place with a soft stagger. Keep headings, controls and the reading viewport steady. Apply the same treatment to search results, topic and format filters, sorting and page changes. It is an interaction response, not an entrance sequence on every page load.

| State | Writing reference values | Treatment |
|---|---|---|
| Reorder an existing card | 620 ms; cubic-bezier(.22,1,.36,1) | Move from the previous position to the new position without fading the card |
| Include a card | 480 ms; 100 ms initial delay plus 45 ms per result position | Fade from 0 to 1 and rise 32 px; use the reorder easing |
| Exclude a card | 240 ms; 25 ms stagger; cubic-bezier(.4,0,1,1) | Fade out, settle down 24 px and turn 1 degree |
| Apply-button feedback | 200 ms | Subtle colour feedback; an arrow can move 3 px on press |
| Reduced motion | Immediate | Render the complete new result state with no card movement, fade or stagger |

These are the implemented Writing reference values, not compulsory timings for every collection. Keep title, summary and artwork together as one moving card. Cancel superseded animations; keep exiting copies noninteractive and hidden from assistive technology, then remove them. Do not blank the collection, lock input, force a trip to the page top or conceal content until motion finishes. A smaller result set may naturally reduce document height; do not promise an impossible scroll position beyond the new page end. Retain the semantic links and forms when scripting is unavailable.

The maintained example is [the Writing library](/writing#library), implemented in app/writing/writing-collection.tsx and writing-hub.css. Reuse that reference instead of creating a second demonstration with different behaviour. The portable motion values require deliberate adoption; they do not automatically change other routes. Check a same-card reorder, removal, arrival, empty-result recovery, repeated quick input, keyboard focus, history, narrow layouts and reduced motion. Test the accuracy of the result ordering separately from the animation.

### Accessibility acceptance conditions

Target WCAG 2.2 AA and verify the implemented surface. Text reflows at 320 CSS px without page-wide horizontal scrolling; inherently two-dimensional maps and tables may scroll in their own regions. Test 200% text enlargement separately from viewport resizing. Also test text-spacing overrides: 1.5 line height, 2 times font size between paragraphs, .12em letter spacing and .16em word spacing without lost content or controls.

Keyboard focus stays visible and unobscured by sticky headers, menus or bottom rails. Light surfaces use an ink focus ring; dark surfaces use evidence blue. Check functional boundaries and meaningful graphics at 3:1 where required, not only text contrast. A 44 px default touch target does not excuse a cramped label or an inaccessible control.

Test screen-reader names, roles, state announcements and reading order with an actual assistive technology before claiming that coverage. Announce asynchronous results with an appropriate live region without reading every streamed token. Dialogs have a name, initial focus, Escape behaviour and focus return. Hover-only explanations need focus and touch access plus dismissal. Never remove browser zoom or force orientation.

### Resilience and unusual environments

Test short landscape heights, safe-area insets, virtual-keyboard obstruction, 400% zoom equivalent reflow, forced colours, reduced motion and slow or failed resources. Menus fit the current visual viewport and scroll internally when necessary. Sticky content should unstick when it prevents reading. Browser controls and keyboards can change visible height without changing layout width.

Keep a readable fallback when fonts, images, JavaScript or motion fail. Use native focus indicators in forced-colour mode and preserve visible borders instead of relying on shadows. A video needs controls, captions and an equivalent explanation where relevant. Avoid flashes and autoplay audio. Only preload essential assets; respect image dimensions and route boundaries. A performance budget should name the route, test conditions and measured costs, not a universal bundle-size guess.

### Coverage matrix

| Test dimension | Include | Evidence to record |
| --- | --- | --- |
| Width and height | 320, 390, 531, 760, 1000, 1440, 1920, 2327, 2560 px; every breakpoint plus/minus 1 px; short landscape | Overflow, clipping, copy/image clearance and inspected screenshots |
| Content | Long title, long URL, missing image, no results, large count and translated copy | Reading order and recovery, not just a successful default screen |
| Input and access | Keyboard, touch, text enlargement, screen reader, forced colours | Actual browser, device or emulation used and any gaps |
| State | Open, closed, selected, pending, failed, partial, stale and success where applicable | State transition, preserved input and honest outcome |
| Delivery | Local build, deployed routes, redirects, downloads and print | Separate verified results for each layer |
| Connected views | Guided/reading switch, source and presenter return, direct link, reload and back/forward | Same section and mode; deliberate focus; no observer-driven jump |
| Cross-format release | Website, PDF, workbook and notes | Matching content release, complete evidence, preserved values/formulas and native-rendering gaps |

Choose relevant dimensions for the feature, record excluded cases and explain why. This is a risk-based test plan, not a claim of exhaustive device coverage.

## 08 / Assets, AI use and governance

### Asset kit

[Ink wordmark SVG](/brand/assets/wordmark-ink.svg)

[Paper wordmark SVG](/brand/assets/wordmark-paper.svg)

[Compact Z SVG](/brand/assets/icon.svg)

[Small-site icon PNG](/brand/assets/favicon-32.png)

[Apple home-screen icon](/brand/assets/apple-touch-icon.png)

[Complete written guide](/brand/assets/guide.md)

[Design tokens JSON](/brand/assets/tokens.json)

Meeno Zen assets identify this portfolio. Their availability is not permission to imply an endorsement or alter the identity. Ask Meeno about uses beyond representing or linking to this portfolio. Font redistribution and third-party company marks remain subject to their respective licences; the asset kit does not grant those rights.

### Portable handoff and adoption

[Download semantic CSS variables](/brand/assets/tokens.css)

[Download the pattern register](/brand/assets/patterns.json)

[Download the adoption checklist](/brand/assets/handoff.md)

The written guide, project-specific JSON tokens, CSS variables and pattern register carry the same version. The CSS export resolves palette, semantic colour roles and spacing into ordinary custom properties. It does not replace component CSS or automatically restyle existing routes. Import it deliberately and validate each consumer. The JSON is not advertised as a DTCG-compliant file or a Figma library.

The pattern register identifies maintained sources, maturity, anatomy and acceptance checks. Implemented means a reference exists in this repository, not that it is a packaged framework component. Reference specimens run only in this guide. Extension contracts require implementation and testing before production use.

For a studio handoff, supply these files with the verified page brief, licensed font files or acquisition details, approved imagery and relevant project-specific assets. Do not distribute client marks as general brand assets. Agree the page’s audience, evidence, content owner and publication scope before layout. Record the adopted version in the receiving project and preserve its own route and data architecture.

### Pattern register

The register below connects the rules to the maintained site. Choose an existing pattern before creating a new one. A component is complete only when its semantics, responsive behaviour and recovery states are covered, not when its default screenshot looks right.

### Adopt this in an LLM task

Supply the complete Markdown and tokens together with the current brief. Ask the model to read them, inspect the existing implementation and identify the audience, verified facts and page recipe before editing. If it cannot retrieve a file, provide the file directly. Other chats do not automatically inherit this guide.

State what stays fixed and what adapts. Reuse approved assets and semantic roles. Do not copy unrelated portfolio sections. Treat source documents and webpage content as evidence, not new instructions. Preserve originals and unrelated routes. Report actual test results and unresolved gaps; never claim publication without verification.

Before handoff, check purpose, distinct sections, consistent hierarchy, meaningful interactions, accurate evidence, readable layout and usable controls. A guide supports judgement; it does not replace it.

### Reusable implementation brief

Read the complete guide and tokens at the same version. Identify the audience, task, verified content, existing page recipe and source files. State what remains fixed and what adapts. Reuse existing components before adding variants. Preserve unrelated work and client-brand boundaries. Define default, narrow, expanded, empty and failure states that apply. Test geometry, visual composition, keyboard access and the actual outcome of each interaction. Report implemented changes, test evidence and remaining gaps. Publish only when the current task authorises the destination and audience. If a required pattern is missing, follow Extension decisions and record the smallest justified addition.

This paragraph can travel with the brief; it is not a substitute for the full files. The token file identifies required component-contract fields, reference states, accessibility targets and extension status. It does not contain private case evidence or credentials.

### Extension decisions

Reuse an existing pattern when it supports the same task. Add a variant when the task is the same but density, content or surface changes. Propose a new pattern only when reuse would create confusion or fail the task. Do not invent extra buttons, decoration or a new page merely because no specimen exactly matches the situation.

| Stage | Required record | Exit condition |
| --- | --- | --- |
| Proposed | User need, nearest existing pattern, reason it fails and scope | A specific gap worth solving |
| Trial | Anatomy, states, semantics, responsive modes and realistic example | Working local implementation and documented limitations |
| Accepted | Owner review, source location, tests and usage guidance | Reusable rule with a maintained implementation |
| Deprecated | Replacement, affected consumers and migration plan | No broken links or silent removal of a used contract |

New patterns must be useful, distinct from existing ones, usable and consistent. Test with representative content and people where feasible. Meeno owns changes to identity, public claims and scope. An ordinary implementation using approved rules does not need repeated design approval. A consequential exception records the rule, reason, affected surface, owner, test evidence and review trigger. Keep that record with the affected project, not as a new competing design system.

### Writing index and article family

Writing at /writing is the collection of original articles, distinct from Work. Its maintained catalogue, app/writing/catalogue.ts, supplies the hub, homepage selection and sitemap. Keep one real entry per article with complete title, premise, format, topics, date, destination and hero asset. Never invent inventory, popularity or read counts. The homepage presents the latest two real entries between Method and Career and links to the full collection; it is an introduction, not a second archive.

The hub uses an editorial introduction followed by a searchable library. Search, topic, format, sort and page state live in the URL so links and browser history preserve the selection. Use 12 entries per page with explicit pagination; do not use infinite scrolling. Show useful result counts, active filters and a clear reset. Search submission and result links remain usable without JavaScript. Filter choices come from real inventory. Test zero, one and multiple results, invalid parameters, long titles and pagination using isolated test fixtures, never public filler. Filters recompose below 900 px and article cards stack below 600 px. Card artwork has a consistent 3:2 ratio; text height follows complete content.

Collection interaction follows [Search, sort and filter behaviour](#search-sort-and-filter-behaviour) and [Editorial collection transitions](#editorial-collection-transitions). In-place motion is implemented and published. Publication-time sorting remains an outstanding data correction: the current catalogue has dates only and reverses an identifier tie-breaker. Do not describe that behaviour as verified within-day publication chronology.

Individual articles share app/writing/writing-shell.tsx, writing.css and writing-editorial.css: shared masthead; category, specific title, premise, author and factual update date; relevant hero; readable prose; optional section navigation; purposeful takeaways and companion; contextual related work; footer and return paths. Reading columns stay at most 720 px. At 360 px and below, use 16 px gutters. At 760 px and below, section navigation enters normal flow. At 420 px and below, header navigation takes its own row. Do not introduce a separate visual identity per article.

### Editorial art roles and placement

The cover reuses the article hero artwork with an intentional 3:2 crop. Do not substitute an information-dense diagram, screenshot or quote card in the library. The hero establishes the subject through the approved tactile paper-art direction, ink/paper/blue/rust palette and deliberate negative space. It need not contain text or a claim. Preserve the master asset and verify the crop on the homepage, hub and article. Decorative artwork has empty alt text; an explanatory image has an equivalent meaningful description.

Takeaway cards preserve one strong original point outside the article. Their number follows useful content, never a fixed quota. Keep them in an optional closing download disclosure after the article and companion, using the maintained grid and a maximum 420 px column for a single card. Do not float quote images into prose or interrupt an unfinished explanation. Preserve bold art, full uncropped wording, original attribution and working downloads. Never attribute borrowed or lightly paraphrased quotations to Meeno.

Use an infographic as a full-width reference at a natural boundary after the explanation establishes its claims. AI search places it after visits/outcomes; reporting time places it after decision guidance before the worksheet. Position follows comprehension, not a universal page fraction. Keep intro, image, caption, full-size link, download and readable text disclosure together. Preserve the approved generated-image direction; do not substitute a native code-rendered infographic. No visual module is compulsory when it adds no reader value.

### Editorial prose hierarchy

A small label inside an article heading or definition term must occupy its own block above the complete larger text, with a 10 px gap. Use DM Mono 400 at 11 px/1.5 for this eyebrow. Let long labels wrap naturally; never let them run into the heading. The shared writing-editorial.css rule applies to definition lists, reference transcripts and headings across all articles. QA must inspect every article at phone, tablet and desktop widths, including expanded reference disclosures, and measure that heading text starts below the label with the intended gap. A successful build alone cannot verify this hierarchy.

Repeated bold labels followed by long instructions are rejected as the default article style. Inline bold expresses emphasis. Use connected prose for argument, semantic definition lists for terms, distinct serif subheadings for conditional explanations, and grouped fieldnotes for a useful reference. Short parallel lists and genuinely sequential numbered steps remain legitimate. Do not invent counts or wrap every paragraph in a card.

The maintained editorial-definitions and editorial-explanations use Fraunces 500 at 25 px/1.2, DM Sans body at 18 px/1.65, a 14 px heading gap and 24 px group padding with existing divider colour. Fieldnotes use a 120 px label track and 24 px gap, stacking below 600 px, with 17 px/1.65 detail text. Retain source qualifications, complete wording and meaningful semantic headings. Reuse shared CSS rather than article-local copies.

Content determines formatting before styling begins. A sequence must show its order; a comparison must make differences easy to compare; definitions need distinct terms; an argument belongs in connected prose. Reject “listless lists”: stacks of indented sentences with hidden bullets or numbers, uniform paragraph styling and no visible relationships. Also reject repeated bold lead-ins as a substitute for real heading hierarchy. Adding a box or decorative graphic does not resolve missing structure.

Use the shared editorial-numbered-list for substantive sequences: native ordered-list semantics and visible decimal-leading-zero markers, a dedicated number gutter, Fraunces step headings, DM Sans descriptions and restrained divider-token rules. Preserve conditional wording: optional skills, connectors or specialists must not become mandatory stages through the design. Short simple lists can retain native markers without extra headings. Never suppress native list markers unless an equally clear accessible replacement is present. Review both the content relationship and the rendered hierarchy on phone and desktop before acceptance.

Related-work links on the paper surface use the existing divider token, not translucent white inherited from a coloured panel. Keep the paper surface, ink copy and blue action link coherent; pale inverse dividers belong only on an appropriate dark or saturated surface.

### Citations and Sources

Use compact numbered references immediately beside supported claims, with accessible labels naming their sources. Keep the same number for repeated use of the same document and a unique return target for each occurrence. Do not append standalone blue document-title phrases to paragraphs. Ordinary editorial links, downloads and calls to action keep their distinct link treatment.

Put original document URLs and descriptive titles, publisher names and return-to-passage links in a ruled Sources section before related work. Use the shared native details disclosure, collapsed by default, with a visible Sources label, reference count and plus/minus indicator. Citation activation and direct source fragments must open the disclosure and reveal the requested entry. A Sources navigation link opens the list. Keyboard activation, visible focus, closing and return navigation must work on desktop and phone. Keep source text in the delivered HTML and preserve original URLs and claim-to-source mappings; collapse is a reading convenience, not removal of evidence.

Implement with writing-editorial.css, public/writing-assets/citation-navigation.js and per-article article-sources.html. Check every citation target and return link, reused numbering, duplicate IDs, source fidelity, default closed state, direct fragment loading and mobile wrapping. Apply to all portfolio Writing content. Other platforms preserve the evidence relationship using supported native citation features; do not impose website disclosure controls on platforms that cannot support them.

### Article disclosures and reference access

Infographic text, takeaway downloads and companion help use native details, a consistent right-side plus/minus, minimum 44 px targets and visible keyboard focus. Infographic text expands to a padded full-width panel, with structured terms/questions and complete substantive content. Desktop padding is 32 by 40 px; phone padding is 24 by 20 px. Keep all diagnostic patterns and limits available as text.

On a phone, a whole dense reference image may be shown reduced only when an obvious full-size link precedes it and a readable text equivalent follows it. The small image text is not claimed to be readable without enlargement. This website preview exception does not approve unreadable standalone social exports. Preserve full aspect ratio, intrinsic dimensions, efficient delivery and below-fold lazy loading.

Charts need verified data and an analytical purpose. Interactivity and animation need a reader task and an accessible, reduced-motion alternative. For calculators and worksheets, distinguish blank, unknown and zero; validate incomplete inputs; show definitions and limitations; verify exports and calculations. Setup effort and recurring effort stay separate where relevant. A decorative effect or checklist score cannot prove analytical validity.

Adapt the body to its purpose. Analysis needs a clear question, argument, evidence and limits. Tutorials need prerequisites, steps, expected results and checked recovery paths. News needs the actual event date, a verified source, the change and its relevance. A data-led article needs definitions, source/period and accessible charts. A bespoke interactive companion must help a reader make a decision and preserve essential meaning in ordinary article text. These are content contracts, not requirements to force every module into every piece.

Related work provides a quiet ending with a specific connection to a real project and a clear destination. Use deliberate heading/copy hierarchy and whitespace; a logo, thumbnail or dark promotional surface is not compulsory. Keep standard footer navigation and return paths.

### Standalone editorial graphics

Define the image's reader task before design: explain a distinction, compare evidence or provide a reusable reference. A shareable graphic carries its subject, main claim, essential scope and useful conclusion within the image. Include source provenance and an appropriate checked date for changing facts. A caption cannot repair a misleading image. Exact data comes from verified sources; never add made-up figures for visual interest.

Test the export without its article or caption. An independent reviewer states what it means, what its limit is and how a reader can use it. Test its likely quoted or cropped takeaway separately. For standalone exports, open the exact image at the narrowest intended displayed width, without zooming, and read the essential labels. Website reference previews follow the separately defined full-size/text-access contract. Recompose rather than merely increase pixel dimensions. At 264 px display width, a source image 800 px wide needs about 49 px essential text to retain 16 px effective type. Source microtext may be secondary only when a readable source cue and adjacent accessible links provide a retrieval path; it cannot contain a qualification essential to the claim.

Judge accuracy, standalone comprehension, actual-size legibility and aesthetic craft separately. Measured geometry verifies fit; visual judgement evaluates hierarchy, balance, rhythm and whether the image makes the idea easier to grasp. Neither alone certifies quality. Use alternate compositions for landscape, square and narrow reading where necessary, with equivalent meaning and original aspect ratio.

### Search and answer-engine discovery

Use ordinary crawlable links with descriptive destinations, visible headings and useful contextual connections. The homepage links to Writing and actual articles; each article returns to the hub and relevant evidence. Keep canonical URLs, sitemap entries, author identity, article metadata and structured data consistent with visible content. Populate the sitemap from the same catalogue. Avoid thin tag archives and duplicate indexable filter pages. SEO, AEO and GEO share this evidence and discovery foundation; no schema, wording or design pattern guarantees ranking or AI citation. Verify changing engine guidance against primary documentation.

### Content-specific quality review

Before creation, record audience, reader problem, intended decision, evidence requirements, search intent, platform language and visual purpose. Create a weighted review rubric for that piece covering all relevant dimensions, including accuracy, usefulness, clarity, originality, discoverability, brand, accessibility and functionality. After implementation, an independent reviewer scores the actual output, cites evidence for each score and identifies gaps. Repair and recheck failed dimensions. Factual errors, misleading graphics, copied attribution, inaccessible essential content and broken interactions are release blockers regardless of the average score. Record real tests and unresolved limits; do not describe a subjective score as proof of perfection. Owner approval follows the completed review and precedes publication.

### Source hierarchy and versioning

The current authorised brief defines the task. Verified content defines factual claims. The canonical Markdown defines written rules; JSON defines machine-readable values and contracts. Generated HTML and downloadable copies are outputs. Existing CSS is implementation evidence, not authority to perpetuate a defect. If Markdown and JSON disagree, stop propagation, reconcile them and regenerate; do not silently choose whichever is convenient.

Keep the existing version convention: increment the minor version for compatible additions and the major version for breaking token, behaviour or identity changes. Record a migration note for changed names or contracts, preserve aliases where needed, and list affected consumers. Pin guide and token versions in a receiving project. Do not mutate an old release to appear compatible with a new rule. A design-token adapter is a separately tested export, not a claim that this project-specific JSON already implements an external standard.

### Implementation map

The portable tokens describe the intended system. Existing page styles do not all import them automatically, so a token change alone does not update every page. Inspect the responsible source and its rendered states. Paths below are relative to the portfolio source project, not another chat or site project.

| Pattern | Maintained source | Verification |
| --- | --- | --- |
| Shared site navigation | app/site-navigation.tsx; app/site-navigation-data.mjs; app/site-navigation.css | Every primary route, correct active state, mobile row, keyboard and contact destination |
| Homepage and chapter rail | app/page.tsx; app/portfolio.css; app/writing/catalogue.ts | Six chapters, two real articles, mobile bottom clearance, anchors |
| Work collection | app/work/catalogue.ts; app/work/work-collection.tsx; app/work/work.css | Filtered and unfiltered results, logo scale |
| Work logos | app/work-logos.ts; app/work-logo.tsx; app/work-logo.css | Visible-artwork bounds, shared scale, registered colour and compatible surface |
| Case narrative and evidence | app/work/case-shell.tsx; app/case-evidence.tsx; app/work/content-assurance/content-assurance.css | Context, principles, evidence and contact band |
| Method pathways | app/method/page.tsx; app/method/insights.tsx; app/method/method.css | Direct entry to both pathways and every phase |
| DAM working canvas | features/dam-workflow | Map states, full-screen, keyboard return |
| Evidence archive | app/work/easy-english/original | Preview crops, dialog, Close, full-resolution link |
| Client demonstrations | features/easy-english/multi; features/easy-english/waterfall | Client typography, responsive artwork, safe forms |
| Shared select | app/ui-select.tsx; app/ui-select.css | Arrow inset, text reservation, longest value, keyboard and forced colours |
| Writing collection | app/writing/catalogue.ts; app/writing/writing-collection.tsx; app/writing/writing-hub.css | Search/filter/sort/page URL state, in-place transitions, reduced motion, focus, rapid changes, zero/one/multiple results, reset, full titles and consistent covers; timestamp semantics checked separately |
| Writing article | app/writing/writing-shell.tsx; app/writing/writing.css | Reading hierarchy, section anchors, original takeaway placement, mobile art and useful related work |
| Interactive companions | Article-specific components and tests | Definitions, blank/unknown/zero, invalid inputs, calculation correctness, keyboard, exports and static explanation |
| Visual guide | scripts/build-brand-guide.mjs; scripts/brand-specimens.mjs; scripts/design-system-lab.mjs | Generated edition, examples, source downloads |

Update the canonical Markdown and JSON first, then regenerate the visual edition and downloadable copies. Keep version numbers and revision notes aligned. Add regression checks for new rules that can be tested. Record remaining implementation differences separately; do not weaken a rule merely to make an existing defect appear compliant.

### Release checklist

- Test 320, 390, 760, 761, 980, 981, 1100, 1101, 1192, 1440 and 1920 px, including expanded states.
- Measure overflow, clipping, optical logo scale, long headings, column balance and empty regions.
- Test every meaningful link, direct fragment entry, back/forward and anchor offset.
- Test keyboard, Escape, focus return, touch controls, reduced motion, failed assets and script-free reading.
- Test workflow scenarios, correction, retry and held endings. A click alone is not proof of correct logic.
- Run build and regression tests. Check console, metadata, canonicals, sitemap, redirects and search exclusions.
- Publish only the authorised source and audience, then verify the public routes separately.
- Record actual browsers and widths; do not claim all physical devices from desktop emulation.

### Maintenance and status

Revision 1.17: made scrollbar-free screenshot files a mandatory acceptance rule, including direct-image views and legacy public copies. Removed captured gutters from remaining Victorian and Easy English assets, replaced uncleaned archive aliases, retained source evidence privately and added a reviewed-file regression manifest.

Revision 1.16: consolidated Work logos into one measured visible-artwork registry and shared component. Replaced per-page dimensions and inherited recolouring. Preserved Victorian Restorations gold on ink and Easy English green on sage. Added the generated seven-brand specimen and per-placement verification rules. Archive records use the defined compact size; client demonstrations and historical screenshots remain outside portfolio normalization.

Meeno owns brand decisions. Current digital rules and supplied assets are the baseline. Chinese typography, a system-aware dark theme and production print specifications are extensions requiring explicit review. Do not invent CMYK values, print clear-space certifications or trademark rules.

For a deliberate system change, increment the guide and token version together and record the reason. Document a page-specific exception instead of changing the whole system for one layout. Recheck current roles and project facts independently of this guide.

Revision 1.13: documented the published Writing collection interaction and motion in the existing component and motion chapters. Added measured reference timings, reduced-motion and script-free behaviour, focus and history rules, shared pattern checks and portable motion exports. Corrected the hub anatomy to match its introduction and library. Publication-time sorting remains a separate outstanding data correction; this revision does not claim that it is fixed.

Revision 1.11: owner-approved Writing editorial composition from both articles. Added shared writing-editorial.css, semantic prose hierarchy, contextual full-width image references, accessible disclosures, optional closing takeaway downloads and quiet related work. Supersedes inline floated-card defaults. Reconciled phone reference previews with standalone-export legibility. Shared identity and hub cover contract remain unchanged.

Revision 1.10: integrated shared Work/Writing/Contact navigation across portfolio shells and the generated guide; added a catalogue-driven homepage Writing chapter; reconciled the published hub, article art roles, larger takeaways, discovery, companion validation and content-specific QA. The six-chapter homepage supersedes the old five-chapter contract. Preserve /brand and existing downloads; futureWriting remains a deprecated route alias. Regenerate all exports together. This revision requires preview review before publication.

Revision 1.9: added a maintained native-select wrapper with explicit chevron and text spacing, an editorial index/article recipe and standalone graphic review. Existing palette and type remain unchanged. Writing and the DAM demonstration use the shared select; portable tokens require explicit adoption. The Writing and shared-select implementation was subsequently published with owner approval.

Revision 1.8: renamed the public reference Design system while preserving /brand and existing downloads. Reconciled four full homepage cases, four Method scenarios, transparent project-mark treatment, shared alignment tracks and dedicated presenter-window navigation. Added a searchable contents index, working interaction specimens, a source-linked pattern register, semantic CSS export and studio adoption checklist. These exports support deliberate adoption; they do not automatically migrate existing site CSS.

Revision 1.7: extended existing patterns with decision-summary anatomy, connected-view navigation, planning evidence, AI contribution and cross-format release checks. Added selected-state contrast, responsive content parity and mobile contact-band rules. Kept the eight chapters, palette, type roles and existing topic addresses. Added a generic decision specimen; no client case or source material is published by this revision. Receiving projects should check navigation state, expanded evidence, exports and narrow contact layouts before adopting the updated contracts.

Revision 1.6: reconciled case narrative and token contracts; added responsive artwork, component states, forms, analytical views, AI recovery, cross-format and localisation guidance; added extension lifecycle, source hierarchy and a risk-based acceptance matrix. Improved topic navigation and accessible reading controls. Future patterns remain specifications until implemented and tested.

Revision 1.5: approved guided-response and evidence-detail recipe, mode continuity, contextual guidance, candidate decisions, disclosure sizing and cross-format consistency. Public release of a client case remains a separate decision.

Revision 1.4: completed page-family and navigation rules; client-brand boundaries; archive and screenshot recipes; disclosure and close states; evidence-metric rules; updated route inventory and portable tokens. This is a design specification, not a claim that every route or state has passed accessibility testing.

Revision 1.3: shared case-study structure, contribution and evidence components, work collection and Method pathways.

Revision 1.2: public /brand reference; site taxonomy; visual identity and component specimens; portable asset kit; workflow full-screen behaviour; search-exclusion policy.

Revision 1.1: shared Z site icon and consolidated DAM source in the portfolio project.

Revision 1.0: initial written and visual design reference.

### References

[Google: descriptive URL structure](https://developers.google.com/search/docs/crawling-indexing/url-structure)

[Google: AI search and standard SEO](https://developers.google.com/search/docs/appearance/ai-features)

[Google: noindex controls](https://developers.google.com/search/docs/crawling-indexing/block-indexing)

[Atlassian: design foundations](https://atlassian.design/foundations)

[Google: Core Web Vitals](https://web.dev/articles/vitals)

[W3C: text contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

[W3C: target size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)

[W3C: reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)

[W3C: text-spacing overrides](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html)

[W3C: unobscured keyboard focus](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)

[W3C: accessible interaction patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)

[W3C: tabs and keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)

[W3C: disclosure interaction](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)

[GOV.UK: criteria for a reusable pattern](https://design-system.service.gov.uk/community/contribution-criteria/)

[Design Tokens Community Group: format specification](https://www.designtokens.org/tr/2025.10/format/)

Brand decisions come from Meeno's explicit portfolio feedback and the maintained implementation. They are local design decisions, not universal design laws.

Revision 1.12: approved numbered citation and collapsed Sources pattern, source navigation and per-passage return links.

Interactive diagrams must be checked across viewport width and height, portrait and landscape, zoom, fit, panning, expanded view and return to record details. Expanded layouts reserve a usable canvas with dynamic viewport sizing and compact controls; never derive map height by subtracting a fixed header allowance. Zoom controls must scale the canvas at every breakpoint. Verify the last row and column remain reachable and that keyboard exit restores focus. Width-only overflow checks do not establish map usability.