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.

Monet / Climate Report 2025

03

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.

Monet / Climate Report 2025

04

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

Claude Monet, Water Lilies

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.

Claude Monet, Impression, Sunrise

Reflections

A second card demonstrates multi-column rhythm.

  • Lead phrase. Supporting point one.
  • Second point. One sentence of evidence.
Claude Monet, Impression, Sunrise

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.

Claude Monet, Water Lilies

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.
Claude Monet, Impression, Sunrise

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.

Claude Monet, Impression, Sunrise

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.
Claude Monet, Water Lilies

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.

Programme Report · 2025

08

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

09

Claude Monet, Water Lilies
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.

monet.design

Monet · 2025

10 / 16

Component 11 — toc

Contents

A quieter way into the story.

Now the contents page reads more like a catalogue spread: a composed title block, tilted chapter markers, and softer editorial pacing between sections.

  1. 01

    Chapter 1

    06

    Prelude & Intent

  2. 02

    Chapter 2

    14

    Landscape in Motion

  3. 03

    Chapter 3

    22

    Findings & Texture

  4. 04

    Chapter 4

    31

    Priorities for Action

Curatorial note

Large numerals behave like washed layers in the background. The title remains primary; the number should guide the eye, not label it mechanically.

Monet Design System · TOC Study

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.

Monet Design System

11

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.

Portrait

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)

MONET

opacity: 0.10

Light variant (dark page)

MONET

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.

Monet Design System

16

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.