Design System

# Monet

An editorial serif design inspired by Claude Monet's Le Bassin aux Nymphéas — mist, water, and soft morning light.

Color Palette

accent-earth

#2980AF — Hanada-iro

accent-olive

#00A2B0 — Asagi-iro

accent-stone

#83A5BA — Mist Gray

accent-gold

#738DC2 — Cornflower Blue

accent-sage

#7CBDC3 — Water Lily

accent-danger

#E593B4 — Monet Rose

bg-page

#f0f4f7 — Cool Mist

bg-page-alt

#e4ecf2 — Alt Mist

bg-frame

#0d1a24 — Deep Ink

Typography — EB Garamond

H1 · 88px · 500

# Headline

H2 · 34px · 500

## Section Heading

H3 · 24px · 500

### Subsection Title

Body · 17px · 400 · 1.65

The water reflects a sky of softest grey, where impressions dissolve into feeling.

Quote Text · 20px · italic

Light bends across lily pads at dawn, each surface a mirror of the sky above.

Body Italic · 17px

Light bends across lily pads at dawn, each surface a mirror of the sky above.

Eyebrow / Caption · 12px · 0.18em

Annual Report · Section Label · 2026

Layout 01 — Fullbleed · qa=false

slot: content

100% × 100% · image-title component

Use image-title --left for cover · --right for closing

Layout 02 — Narrative · qa=true

slot: left

1.618fr

slot: right

1fr

Layout 03 — Narrative Reverse · qa=true

slot: left

1fr

slot: right

1.618fr

Layout 04 — Highlight Cols · qa=true

Section Label

## Three equal columns

slot: 1

1fr

slot: 2

1fr

slot: 3

1fr

Layout 05 — Halves · qa=true

slot: left

1fr

slot: right

1fr

Layout 06 — Stacked · qa=true

slot: top

1fr

slot: bottom

1.618fr

Component 01 — text-panel

Annual Review · 2025

## Narrative Heading

A brief curatorial line can slow the reader down before the main argument begins.

Use one or two compact paragraphs when continuous prose fits the content better than a list. Restraint is a Monet virtue.

- Lead phrase. Supporting explanation for this key finding.
- Second point. One sentence of evidence or context.
- Third point. Keep items roughly equal in length.

Key Findings

### Three priorities for 2026

Use a short lead-in when the panel needs a softer transition into bullets or recommendations.

- Lead phrase. Supporting explanation for this first point.
- Second point. One sentence of context or evidence.
- Third point. Keep each item roughly equal in length.

Component 02 — stat-card

Performance Signals

## Key Metrics

Variant A — Vertical

Performance signal

27%

### EBIT Margin

Expanded for the third consecutive quarter as premium mix offset freight pressure and held pricing discipline through softer volume.

Variant B — Horizontal

Operational baseline

4.8x

### Inventory Turnover

Higher cycle efficiency reduced working-capital drag without adding new capacity, leaving headroom for seasonal demand swings.

Component 03 — editorial-image-top

Water gardens

### Image leads before the copy explains the point.

Choose this component when the visual should establish texture, materiality, or field context before the audience reads the narrative.

Reflections

### A second card demonstrates multi-column rhythm.

- Lead phrase. Supporting point one.
- Second point. One sentence of evidence.

Soft light

### Third column completes the editorial spread.

Three equal editorial-image-top cards inside highlight-cols-grid form a natural proof-block.

Component 04 — editorial-text-top

Programme findings

### Lead with the argument, then let the image confirm it.

Use this component when the audience should understand the point first and only then read the image as supporting evidence.

Photo caption · field site · 2025

Operational data

### Second card for rhythm demonstration.

- Key metric. Supporting point in one sentence.
- Second insight. One line of clarifying detail.

Photo caption · 2025

Summary view

### Third module closes the three-column argument.

Three editorial-text-top cards follow the same vertical rhythm — text first, image as evidence below.

Photo caption · 2025

Component 05 — editorial-text-left

### Full-width module title — spans both columns, anchors the composition above

Category label

Supporting description. One or two sentences that position this card within the broader page argument.

- Lead phrase. Supporting explanation for this point.
- Second point. One sentence of context or evidence.
- Third point. Keep each item roughly equal in length.

Component 06 — echart-panel

Revenue Analysis

### Annual Revenue by Segment

FY 2022–2025 · USD Millions

Source: Company Financials · 2025

Margin Trend

### Operating Margin 2020–2025

Percentage · Year-on-Year

Source: Company Financials · 2025

Component 07 — flow-horizontal

Process Overview

## Four-phase programme

#### Discovery

Cross-regional baseline mapping and legacy risk exposure formally catalogued across all operating units.

#### Assessment

Full supplier sprint completed. Ninety-four percent of Tier 1 suppliers assessed against new emissions criteria.

#### Roadmap

Priority interventions ranked by impact-to-effort ratio and mapped to capital plan through 2027.

#### Execution

Programme office stood up with quarterly governance milestones and board-level reporting cadence.

Component 08 — flow-vertical

Execution Timeline

## Phase by Phase

Vertical flow for chronological phases, execution stages, or progress narratives read top to bottom.

#### Foundation

Governance framework and cross-functional team mobilised. Baseline data collected.

#### Pilot

Three pilot sites selected. Interventions tested against KPI targets for a full operating cycle.

#### Scale

Successful pilot learnings codified. Rollout plan activated across all remaining sites.

#### Embed

Continuous improvement programme handed to operational teams. External audit scheduled annually.

Component 09 — data-table

Emissions Performance

## GHG Emissions by Scope

Key Figures — GHG Emissions

Scope | 2021 | 2022 | 2023 | 2024 | YoY
--- | --- | --- | --- | --- | ---
Direct Emissions
Scope 1 | 1,329 | 1,273 | 1,156 | 1,042 | −10%
Scope 2 | 1,618 | 1,433 | 820 | 0 | −100%
1+2 (net) | 2,947 | 2,706 | 1,976 | 1,042 | −47%
Value Chain
Scope 3 | 8,450 | 8,120 | 7,890 | 7,340 | −7%
Total | 11,397 | 10,826 | 9,866 | 8,382 | −15%

Thousands of tonnes CO₂e · Source: Company Disclosures 2024

Data Notes

### Table structure guide

- col-highlight. Spotlight current or most important year — apply to both th and td.
- section-header. Group rows by category label spanning all columns.
- subtotal row. Heavier weight with double-rule border top and bottom.
- delta.positive. Uses accent-olive. delta.negative uses accent-danger.

Monet Design System

Component 10 · image-title · --left variant

# Opening
Statement
Here.

Self-contained full-canvas component. Dominant photograph with blur layer, gradient overlay, and composited foreground text.

10 / 16

Component 11 — toc

Usage notes

### TOC Panel

- Tilt number plaques. Use lightly rotated chapter cards instead of utility numerals so the index feels collected, not engineered.
- Catalogue title stacking. Let the main heading break across two offset lines to create a more composed, art-book-like entrance.
- Restore TOC semantics. Each row should read as chapter label, title, and page number before anything more decorative is added.

Component 12 — quote

Variant A — Initials

"

The water in Monet's garden was not a subject. It was a mirror — a surface that made visible what the eye usually passes over: light itself, in motion, without form.

Claire Gaudient

Curator, Musée de l'Orangerie · Paris

Variant B — Photo

"

Light does not illuminate objects — it dissolves them. The boundary between thing and reflection is where painting begins.

Marguerite Lefèvre

Art Historian · École des Beaux-Arts

Component 13 — brand-watermark

Usage

## Brand Watermark

Decorative top-right brand trace. Shown here via inline SVG for preview purposes — in production, use a transparent PNG or SVG file via `brand-watermark.png`.

Default (light page)

opacity: 0.10

Light variant (dark page)

opacity: 0.14 · --light

Component 14 — page-number

14 / 16

Default — light background

05 / 12

class: `page-number`

Light variant — dark background

05 / 12

class: `page-number page-number--light`

Component 15 — timeline-journey-horizontal

Programme History

## Journey Timeline

Mar 2019 Programme Launch Baseline mapping launched.
Nov 2019 Supplier Audit Supplier sprint completed.
Jun 2020 Roadmap Published Priorities mapped to capital plan.
Feb 2022 Pilot Phase Three sites validated the model.
Sep 2023 Scale-up Rollout activated system-wide.
2025 Embedded Operations handoff completed.

Component 16 — timeline-journey-vertical

Vertical Timeline

## Six Milestones

Nodes alternate left and right of the axis. DOM order is always axis-dot → stem → tip-dot → label; CSS controls visual direction.

Mar 2019 Programme Launch Baseline mapping launched across all units.
Nov 2019 Supplier Audit 94% of Tier 1 suppliers assessed.
Jun 2020 Roadmap Interventions ranked and capitalised.
Feb 2022 Pilot Phase Three sites validated the model.
Sep 2023 Scale-up Rollout expanded to all remaining facilities.
2025 Embedded Annual audit embedded in operations.