Imagery and Art Direction

Governs every image every Fernando Kylas product may use: the three classes and the one forbidden class, what each may claim, how each is delivered, what each may weigh, and the alternative text it carries.

Status: Approved
Status note: Canonical. The imagery chapter of the Fernando Kylas Brand System; one class is deliberately empty (§5) and three items are acknowledged and intentionally excluded (§12).
Version: 2
Updated: 2026-08-31
Approved by: Fernando Kylas
Approved: 2026-08-31
Supersedes: nothing canonical. It adopts the five visual principles previously published only by system/art-direction.html, which originated them in breach of the publication contract (§1.1), and it revises that page's claim that abstract compositions would be generated rather than licensed (§10.1).
Open items: 6 open, 1 resolved, of 7 recorded
Canonical source: foundations/imagery.md

This is the canonical imagery chapter of the Fernando Kylas Brand System. Every product that inherits the brand inherits this file.

Every byte figure in this chapter was measured, not estimated. File sizes are stat on the delivered file; page totals are transferSize from performance.getEntriesByType, gzipped over HTTP, measured 2026-08-31 on the built tree. Where a figure is a ceiling rather than a measurement, it says so.

Companion	Purpose
`assets/images/ground/`	The ten approved grounds, with `SOURCES.md`
`assets/images/photography/`	The one approved portrait, with `SOURCES.md`
`colour.md` §6 · `accessibility.md`	The theme contract and the gate
`SITE-PLATFORM-ARCHITECTURE.md` §10.3	The page-weight budget every image spends against

What is approved

Fernando Kylas approved Imagery and Art Direction on 2026-08-31. The approval covers the whole governing structure of this chapter: the five visual principles adopted at §1, the three classes and the one forbidden class (§2), the portrait rules (§3), the ground rules including the pairing contract and the element-type rule (§4), the artefact brief (§5.1), the 20 KB ceiling and the derivative decision that follows from it (§6.1), the alternative-text rule (§7), we do not grade, we select (§8), the motion constraints (§9), and the eleven files in assets/images/, which become the approved library rather than a proposed one.

Three things are acknowledged and intentionally excluded, and approving this chapter locks each of them as canon with its question recorded — the same cost colour.md accepted for its cool divider, and the correct one, because reversing any of them later should be a superseding decision rather than an edit.

IMAGE-01, artefact photography does not exist. §5 is empty and the approval covers the brief, not a library that has not been shot. This is the one gap that no amount of selecting can close. Approving the chapter does not make the class stocked, and nothing may be published as artefact photography until it is.
IMAGE-02, the 20 KB ceiling was chosen rather than derived. The measured set tops out at 17,224 bytes and the headroom is one form wide. Approval fixes 20 KB as the rule, with the fact that it was a judgement recorded rather than dressed up as arithmetic.
IMAGE-06, atmospheric landscape stays out. §6.4 records roughly thirty frames that suit this brand's register and are excluded because §4 requires non-representational and a place is recognisable. Approval locks that exclusion, and re-opening it supersedes this decision.

IMAGE-03 (which form belongs to which surface), IMAGE-04 (whether illustration is needed at all) and IMAGE-05 (the licence record's basis) remain open and are outside what was approved: none of them changes a rule this chapter states.

No undocumented change may modify what is approved above. A change supersedes a decision in docs/fkpp/decisions.md, with a reason; it does not quietly replace one.

1. Philosophy

Images are the heaviest thing most websites carry, and this practice sells lightness

That is not a preference. It is the commercial position. A consultancy whose argument is that better digital should be lighter cannot art-direct itself into six megabytes of hero imagery and expect to be believed on the next slide.

So imagery here is not a budget line that gets spent until it runs out. Every image has to earn its bytes against the same page-weight budget the text is competing for, and the budget is a brand decision rather than a technical afterthought.

The five visual principles

Adopted here, canonically, for the first time.

1 · Clarity before decoration. Nothing is added because a space looks empty. Every visual element carries information, establishes a relationship, or marks a boundary. Whitespace is not a gap waiting to be filled; it is what makes the rest legible.

2 · Editorial over promotional. The work reads like a considered publication rather than a sales page: real hierarchy, real reading measures, headlines that state rather than tease. If a page could be a slide, it is probably not saying enough.

3 · Proof over polish. A measured figure beats a beautiful abstraction. Where there is evidence, show the evidence. This is the principle that governs imagery more than any other, and §2 is what it turns into when applied to pictures.

4 · Quiet confidence. No shouting. No stacked superlatives, no aggressive contrast, no motion demanding attention. Confidence looks like precision and calm rather than volume.

5 · Sustainable by design. The visual direction is constrained by what it costs to deliver. Every visual decision carries a weight, and the weight is part of the decision rather than something the developer discovers afterwards.

1.1 Why they are here rather than only on the website

Until this chapter existed, the five principles were published by system/art-direction.html and by nothing else. That page's own contract, printed in its footer, is that the publication renders the canonical rules and originates nothing. It was originating these. A rule with no canonical home cannot be cited, cannot be superseded, and cannot be inherited by a product that does not read the website.

They are unchanged in wording where the wording was already right. What is new is that they are now somewhere a decision can be made about them.

2. The three classes, and the one that is forbidden

Every image in this system is exactly one of three things. A file that is none of them does not enter the repository.

Class	What it is	May it claim anything?	Element	Alternative text
Portrait	A real photograph of a real person, owned or released	Yes: that this person exists and looks like this	`<img>`	Describes the person
Ground	A non-representational surface: form, fold, facet, gradient	No. Nothing.	CSS `background-image`	None. It is not in the accessibility tree
Artefact	A photograph of real work: a screen, a document, a build	Yes: that this work happened	`<img>` or `<figure>`	Describes the work

And one forbidden class, stated as a rule rather than a preference:

No stock photography of people, offices, meetings, handshakes, teams at whiteboards, or anything that depicts work. Not as a hero, not as a filler, not "temporarily".

2.1 Why that line falls where it does

The objection to stock is not that it is bought. It is that it makes a claim it cannot support. A photograph of five people around a laptop asserts a team, a client, a meeting, a project. This practice is one person. The assertion is false, and principle 3 is what makes it inadmissible.

An abstract photograph of a folded sheet of paper asserts nothing. It cannot make a false claim, because it makes no claim. That is the entire difference, and it is why a licensed abstract is admissible under exactly the principle that excludes a licensed office scene.

The test, in one sentence: could a reasonable reader mistake this image for evidence? If yes, it must actually be evidence. If no, it may be scenery.

3. Portrait

One approved file: assets/images/photography/fernando-portrait-studio-01.webp, 928 × 1120, 15,902 bytes. Provenance and the metadata removed on intake are recorded in that directory's SOURCES.md.

3.1 Rules

A portrait appears once on a surface, or not at all. A face is the strongest thing on any page it is on; two of them compete, and the second one is decoration.
It is an <img> with real alternative text. It carries information — who this is — so it is in the accessibility tree and it is described.
It is never a background, never a watermark, never cropped to a circle below 96 px. Below that the face stops being legible and becomes an avatar, which is a different thing with a different job.
It is never used to imply presence at something. A portrait beside a case study reads as he did this. That is a claim, and it is governed by §5, not by this section.

3.2 Where it belongs

On the surfaces where the question who is this? is the reader's actual question: an about page, a proposal cover, a speaker card, a profile. Not on a foundation chapter, a report, or a specification, where the answer to who is this changes nothing about whether the content is right.

4. Ground

Ten files, five forms, two frames each: assets/images/ground/. The forms are ribbon, curve, arc, facet and gradient, and each ships a light and a dark frame. 122,072 bytes for the set; largest single file 17,224.

4.1 A ground makes no claim

It is scenery, and that is its whole permission. It may set a mood, mark a threshold, or give a hero somewhere to sit. It may not stand in for evidence, illustrate a concept, represent a client, or fill a space that has nothing to say.

A ground is never the reason a page exists. If removing it changes what the page means, it was not a ground.

4.2 Pairs, because the theme inverts

colour.md §6.1 makes theme inversion a single-class contract: one attribute flips the whole surface between paper and ink. An image that does not flip with it is a hole in the page.

So a ground ships as a pair, and an unpaired frame cannot be used. That is a hard rule and it cost three otherwise good frames (§6.3). It is also why five forms rather than six: the sixth had a dark frame and no light counterpart, and half a pair is not a ground.

4.3 A ground is a CSS background, never an `<img>`

This is the most load-bearing rule in the chapter, and it is a mechanism rather than an instruction.

.si-ground--ribbon { background-image: url("…/ground-ribbon-light.webp"); }
[data-theme="dark"] .si-ground--ribbon { background-image: url("…/ground-ribbon-dark.webp"); }

Two rules, and deliberately no prefers-color-scheme companion. tokens.css states the contract in its own header: dark is reached through [data-theme] and never through prefers-color-scheme. The operating-system preference is read once, in the inline anti-flash script, which sets the attribute before first paint; CSS then keys on the attribute alone. A ground that consulted the media query would be the one themed thing in the system reading the preference twice.

Four things follow from the element type, and none of them needs to be remembered:

A background is not in the accessibility tree. A ground therefore cannot be given a description, cannot be mis-described, and cannot be quietly promoted into carrying information. The misuse is structurally impossible rather than merely forbidden.
The browser fetches one file, not two. Only the winning declaration's url() is requested, so a pair costs what a single image costs. This is what makes a ground affordable at all (§6.2).
It follows the theme toggle, which <picture> cannot. A <source media="(prefers-color-scheme: dark)"> follows the operating system and ignores the in-page control, so a reader on a light system who switches the page to dark gets a white image on a black page. The [data-theme] selector follows the control, which is the only thing that is ever right. The first version of this section prescribed a prefers-color-scheme block alongside it and that was wrong — see §10.5, which records the defect it caused on the live site and why the mechanism it broke is stricter than it looks.
It cannot be linked, saved or shared as content, which is correct: it is not content.

An inline style attribute is not an alternative. colour.md §6.1 makes an inline background a lint error, and it would defeat point 3.

4.4 What a ground may never do

Sit behind body text. The contrast of text over a photograph is not computable in advance, so it cannot be gated, so it is not permitted. A ground sits behind a heading, a mark, or nothing.
Introduce a second hue. colour.md §5 gives the palette one accent. Every approved ground is near-monochrome; the three candidates that were not are recorded in §6.3.
Repeat on consecutive surfaces. Two grounds in a row is wallpaper.
Appear on a chapter, a report, a specification or a print surface. Those are documents.

5. Artefact photography

This class is empty, and that is the honest state rather than an omission.

Artefact photography is the only imagery that can discharge principle 3 directly: real screens, real documents, real builds, photographed as the objects they are. It is the answer to show the evidence, and it is the one class that cannot be solved by selecting well, because it has to be made.

5.1 The brief, written now so the shoot has a rule to meet

Subject: work that exists. A rendered report on a desk, a device showing a real audit, a printed proposal, a build in progress. Never a mock-up, never a device composite, never a screenshot dressed as a photograph.
Light: one source, soft, directional, with the shadow allowed to fall. The system's own light is a single accent on a plain ground; the photography matches it.
Ground: the artefact sits on paper or on ink, matching colour.md's two grounds, not on a styled desk scene.
Crop: close enough that the artefact is legible as itself. If the reader cannot tell what the document says, the photograph is a texture and belongs in §4.
Weight: the same ceiling as everything else (§6.1).
Consent and release: any identifiable third-party material — a client's name on a screen, a logo on a document — needs the client's permission in writing before the frame may be used. AGENTS.md §8 makes client material non-canonical, and a photograph of it is still it.

5.2 Until then

The honest substitute is the system itself, which is what every page of the publication currently does: type at real scale, the palette shown as it is used, the accent as a mark rather than a fill, and space used as structure. A demonstration is evidence. A photograph of a demonstration is not better evidence.

6. Weight

6.1 The ceiling: 20 KB per file, at delivered dimensions

Every file in the library is at or under 17,224 bytes, at 1920 px wide for a ground and 928 × 1120 for the portrait. The ceiling is 20 KB, which is where the measured set sits with room for one more form.

This is not an aspiration. It is the load-bearing constraint of the whole imagery system, and what it buys is worth stating explicitly:

Because the masters are small enough to ship as they are, there is no derivative pipeline. No resized variants, no srcset, no sizes, no cache of generated thumbnails, no naming scheme for them, and no build step that is not byte-deterministic. The constraint removes machinery rather than requiring it.

A 200 KB master would need every one of those things, and each of them is a place for the delivered file to stop matching the approved one. A 17 KB master needs none of them, and assets/images/ is therefore exactly what is delivered. That is also why the ceiling is a ceiling and not a target: the moment a file needs resizing, the simplicity is gone for every file.

6.2 What an image actually costs a page

Measured on the built tree, 2026-08-31. The fixed floor of a text page is 168.6 KB: six font faces at 149.3, eight stylesheets at 14.5 gzipped, the script at 4.2, the icon at 0.6. The budget for a text page is 210 KB (SITE-PLATFORM-ARCHITECTURE.md §10.3), so a page's own HTML and its images share roughly 41 KB.

	Cost
Fixed floor, every text page	168.6 KB
The heaviest page's own gzipped HTML	~10 KB
One ground (one of the pair is fetched, §4.3)	≤ 17.3 KB
The portrait	15.5 KB
Budget	210 KB

So the rule writes itself: one image per page. Not as restraint for its own sake, but because two is 34 KB and there is not 34 KB. Principle 5 and principle 1 arrive at the same answer from opposite directions, which is usually a sign the answer is right.

6.3 What was rejected, and under which clause

Twenty candidate frames were reviewed individually. Ten were accepted and ten were rejected, every one of them citing a clause rather than a preference.

Rejected	Bytes	Clause
`annie-spratt-JkpBWnvT7vY`	128,406	§6.1 — 7.5× the ceiling
`jan-folwarczny-0ANyD_nW3yo`	82,212	§6.1 — 4.8× the ceiling
`the-blowup-Jz7JIqWYqC4`	44,456	§6.1, and §4.4 — a second green that is not the accent
`joanna-kosinska-mjC9apK53a8`	42,928	§6.1 — over the ceiling
`sarah-dorweiler-x2Tmfd1-SgA`	20,954	§6.1, and §2 — a plant in a vase is a subject
`bench-accounting-nvzvOPQW0gc`	15,310	§2 — a desk and a chair. An office scene is the forbidden class
`shivam-baraik-LlabnED2iHY`	12,034	§4.4 — introduces red
`yalamber-subba-rkAyh3MlAMA`	7,892	§2 — a boat and two people. Representational
`philip-oroni-VfOGf5RWkeg`	16,150	§4.2 — no light counterpart once its intended pair was rejected
`tareq-ajalyakin-21vaqDnMgq4`	7,950	§4.2 — same

6.4 The sixty-five in `visual/img/`, and a correction to how they were excluded

Corrected 2026-08-31, the same day it was written. The first version of this section said sixty further frames were "ruled out as a class without individual review" and described them as people, offices, desks, devices, cities and landscapes. That description was inferred from filenames, not observed, and it was recorded here as though it were a finding. It also had the count wrong: there are sixty-five.

They have now been looked at, and the honest account is this.

The set divides in two. Roughly half is the forbidden class exactly as §2 describes it: laptops on desks, an office sofa, a mug reading HUSTLE, a marketing book styled on a desktop, city streets, robots. The other half is something the first description did not do justice to — a large, coherent, genuinely on-tone body of atmospheric landscape: fog over conifers, mountain ridges dissolving into cloud, still water. Near-monochrome, desaturated, calm. It is closer to this brand's register than anything that was rejected from img-light/ or img-dark/.

They are excluded, and now for a reason that was measured rather than assumed:


Frames	65
Median file size	85,118 bytes
Largest	833,356 bytes
Over the 20 KB ceiling (§6.1)	64 of 65
Over 100 KB	27 of 65

Sixty-four of the sixty-five fail §6.1 on their own file size, at a median more than four times the ceiling. Subject never had to be reached for them, and the first version of this section reached for it anyway.

One frame survives the ceiling, staffan-kjellvestad-y1qOT82fd8k at 17,528 bytes, and it is the single case where the size rule decides nothing. It is fog over a conifer ridge: beautiful, on-tone, and a place. ground/README.md excludes anything recognisable, a place included, so it is out — on a clause rather than on a preference. It is the most interesting rejection in the set, because it is the one where the rule does real work instead of agreeing with the arithmetic.

Whether that clause is right is IMAGE-06, and it is Fernando's, not this chapter's. The set exists, the register fits, and the only thing standing between it and use is one sentence in a README written the same afternoon.

Two of these rejections are worth noticing. yalamber-subba is a beautiful frame, under the ceiling, near-monochrome, and it was the best "open field" in the set. It shows a boat and two people, so it makes a claim, so it is out. And the last two are out for a reason that has nothing to do with them: their counterpart went, and half a pair is not a ground. A rule that only ever excludes the frames you did not want is not a rule.

7. Alternative text

The rule is short and the failure is common.

An image that carries information gets a description that carries the same information. Not the filename, not the caption repeated, not "image of".
An image that carries none is not in the accessibility tree at all. In this system that is enforced by the element type rather than by an attribute: a ground is a background (§4.3), so there is no alt to get wrong.
A <figure> with a <figcaption> still needs alt on its <img> where the caption and the image say different things, and alt="" where the caption already says everything the image does.

Getting this backwards — describing decoration and silently dropping content — is among the most common failures in the audits this practice runs. It costs nothing at the point the image is added and is expensive to retrofit.

8. Treatment and grading

We do not grade. We select.

There is no colour grade, no duotone, no brand-tinted overlay, no shared LUT, and no filter applied to make an image fit the palette.

A grade is a treatment applied to an image that does not belong, to make it look as though it does. Every file in the library is already near-monochrome, already sits on one of the two grounds, and already introduces no second hue — because that was the selection criterion (§4.4, §6.3), not a post-process.

This is principle 5 applied to image treatment: a grade is a pipeline, and a pipeline is weight, a build step, and a second version of every file. Choosing the right frame costs nothing to deliver.

The one permitted adjustment is a flat opacity or a solid scrim declared in CSS, where a ground would otherwise compete with a heading. It is a property of the layout, is declared next to the type it protects, and changes no file.

9. Motion

Motion is not imagery, and this chapter owns only the part where they meet. Easing tokens and durations are assets/images/motion/'s subject and are not yet written (ROADMAP Phase 2).

What is settled here, because it follows from principle 4:

No image moves on its own. No auto-playing video, no carousel, no parallax, no Ken Burns drift on a ground. Motion that starts without being asked for is motion demanding attention.
A ground never animates. It is scenery; scenery that moves is a screensaver.
Any motion respects prefers-reduced-motion, and "respects" means removes, not shortens. base.css already carries the block.

10. Design decisions

10.1 A ground is licensed, not generated — and this revises published text

system/art-direction.html and system/imagery.html both stated, before this chapter, that abstract compositions would be generated from the system rather than drawn by hand. That is superseded. The ground set is licensed photography of physical and rendered form, selected against §2 and §4.4.

Why the change, stated rather than slipped in. Generating the set was the right answer while the alternative was assumed to be stock photography of people, which principle 3 excludes. It is the wrong answer once the actual alternative is on the table: a generator is a build step, a set of parameters, a body of code to maintain, and a family of outputs that all look like each other. A generated ground would also have had to be authored before anything could use it, which is the ordering the Imagery section was already blocked on.

What did not change is the reason the old sentence existed. The set is still excluded from making claims, still near-monochrome, still one accent, still paired to the theme. The rule held; the implementation of it did not have to be code.

CLAUDE.md names abstracting ahead of the evidence and reaching for a framework as the two reflexes to resist. A generator here would have been both.

10.5 The `prefers-color-scheme` block that had to be removed · `IMAGE-07` · RESOLVED 2026-08-31

Found on the live host, 2026-08-31, minutes after upload, by clicking the theme toggle.

The ground rules originally carried a third declaration:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .si-ground--facet { … }   /* WRONG */
}

It was written to catch the reader who never touches the control. It matched forever.

site.js implements light by removing data-theme, not by setting it to "light", so data-theme="light" is a state this system never enters and :not([data-theme="light"]) is always true. On a dark operating system, toggling the page to light removed the attribute, the media block kept matching, and the dark frame stayed on light paper — precisely the failure the block was added to prevent.

The mechanism was already correct without it. tokens.css says so in its own header: dark is reached through [data-theme] and never through prefers-color-scheme. The preference is read once, in the inline anti-flash script, before first paint. Every other themed declaration in this repository follows that; the ground was the only thing that did not, because it was written from first principles instead of from the file that already answered the question.

Two lessons, and the second is the one worth keeping. A guard clause that can never be false is not a guard. And a defect that six hundred local overflow probes and twenty thousand contrast pairs could not see was found in one click on the deployed site, because every one of those probes set data-theme explicitly and the broken state is the one where the attribute is absent. An instrument that never produces the failing input cannot report the failure.

10.2 Why the ceiling is a byte count and not a pixel count

A pixel budget is the usual form and it is the wrong instrument. It constrains the input to the encoder rather than the output, so a 1200 px photograph of foliage can outweigh a 1920 px photograph of a gradient by a factor of ten. The delivered byte is the thing the reader pays for, so it is the thing the rule names. It is also the only figure that can be checked with stat rather than judged.

10.3 Why `assets/images/ground/` rather than `photography/`

A ground is a photograph, so the obvious home is photography/. It is a separate directory because it runs under different rules: no model release is possible or needed, no attribution is owed, it is decorative by definition, and it ships as a background rather than an element. A directory whose README says four different things depending on which file you mean is a directory that will be got wrong.

10.4 Why the portrait was stripped rather than re-encoded

The file carried 7,992 bytes of Photoshop metadata: 34% of it. Removing the EXIF and XMP chunks is a container rewrite, not a re-encode: the compressed image data is byte-identical and the pixel dimensions are unchanged. Re-encoding would have saved more and cost a generation. A lossless 34% is worth more than a lossy 45%, and it is reversible from the source file.

11. What this chapter does not cover

Illustration. assets/images/illustration/ is empty and no illustration exists. Whether the system needs any is IMAGE-04.
Iconography. A separate system with separate rules (ROADMAP Phase 2).
Motion tokens. §9 fixes only what principle 4 already decided.
Video. No video exists and none is planned. When one does, it is a new class here, not an extension of <img>.
Third-party marks — certification badges, partner logos, membership marks. They are someone else's identity used under someone else's rules, they belong to the surfaces that make the claim they support, and they are not brand assets of this system.
Social and Open Graph cards. The one generated card is a publication asset with its own generator; see publication.toml.

12. Open items

IMAGE-01 — artefact photography does not exist. The brief is written (§5.1) and nothing can be shot from a brief alone. This is the one gap that selection cannot close, and it is the only reason §5 is empty rather than stocked.
IMAGE-02 — the ceiling is 20 KB and the measured set tops out at 17,224. The headroom is one form wide and was chosen, not derived. Whether 20 is the right number is a decision, and it is Fernando's.
IMAGE-03 — the five grounds are named for their form (ribbon, curve, arc, facet, gradient). Nothing yet says which form belongs to which kind of surface, so the choice is currently editorial. It may stay editorial; it should say so if it does.
IMAGE-04 — whether illustration is needed at all. No consumer has asked for one, and CLAUDE.md is explicit that a system built before its cases encodes guesses.
IMAGE-05 — the licence record rests on Unsplash's download filename convention and on Fernando's own acquisition of the files, not on a machine check (ground/SOURCES.md). If any file did not come from Unsplash it is removed, not re-labelled.
IMAGE-06 — whether atmospheric landscape may be a ground. §4 requires non-representational, and ground/README.md excludes anything recognisable including a place, so fog over a forest is out today. Roughly thirty such frames exist in visual/img/ and they are closer to this brand's register than several frames that were accepted. Only one is under the ceiling as delivered, so admitting the class would also mean deciding what to do about §6.1 — which is the honest cost of the question, and the reason it is a decision rather than an edit. See §6.4.

13. Provenance

The five visual principles (§1) come from the art-direction document written for the previous website project, preserved in this repository as historical evidence. They were published by system/art-direction.html from 2026-07-26 and are canonical here from 2026-08-31.

The image library was assembled 2026-08-31 from files Fernando acquired for fernandokylas.com. Twenty ground candidates and two portraits were reviewed; ten grounds and one portrait were accepted. Sixty-five further frames in visual/img/ were excluded, sixty-four of them on file size alone; §6.4 records that set and the correction to how it was first described.

Fernando approved this chapter and this library on 2026-08-31, which is what turns a selection into canon. Every acceptance and every rejection is recorded — in SOURCES.md for the files that stayed, in §6.3 and §6.4 for the ones that did not.