felhom.eu/documentation/audits/redesign-2026-10-10/AUDIT.md

Home-page redesign — the audit before anything is touched

Date: 2026-10-10 · Scope: website/index.html (+ its English twin website/en/index.html) · Baseline: felhom.eu main @ 7ff64f40ed, clean, in sync with origin/main · Method: taste-skill §11.B, run against the live site, not the file on disk.

Companion skill files written in the same session: skills/felhom-web-design/SKILL.md (the override layer) and skills/SOURCES.md (provenance of the vendored design-taste-frontend).

---

A. Design read (taste-skill §0.B)

Reading this as: a redesign-preserve of a trust-first consumer landing page, for Hungarian households who are considering handing their family photographs to a box in their own hall, with a plain-spoken technical language, leaning toward the existing Felhom v2 token set plus real product photography.

The audience is the thing most of the current page gets wrong. It is not a procurement panel and not a self-hosting hobbyist. It is a household that has to decide whether to trust a person. The page currently contains no person, no box, and no evidence that either exists.

B. How the measurements were taken

Claude in Chrome cannot resize this workstation's Chrome: resize_window returns success and window.innerWidth stays at 1920. Chrome DevTools device mode (R-918's recipe) could not be driven either, because the extension's keystrokes reach the page, not the browser chrome.

What worked, and why it is faithful: the page was rendered inside a same-origin iframe of the chosen CSS width. The site frames itself, so the iframe's own width drives the media queries. Two positive observables confirm the layout really is the mobile one rather than a squeezed desktop one:

• at 390 px the hamburger computes to display: block (it is none on desktop), and
• document.documentElement.clientWidth === scrollWidth === 375 — the viewport minus the scrollbar, with no horizontal overflow.

Both the desktop and the phone figures below come from that harness. Screenshots are cropped to the iframe's rectangle, so what is shown is the page at that width and nothing else.

C. Brand tokens in use (preserve)

Token	Value	Note
--bg-0 / --bg-1 / --bg-2	#0A1220 / #0F1B2E / #16263F	One locked dark theme. No prefers-color-scheme block anywhere in site.css
--text-1 / --text-2	#EDF2F9 / #94A6BF	Measured 16.67:1 and 7.56:1 against --bg-0. AAA, not merely AA
--blue / --blue-bright	#0083D8 / #2EA8F5	One accent, used consistently. §4.2's Color Consistency Lock already passes
--radius	2px	§4.4's Shape Consistency Lock already passes. box-shadow is in the gate's BANNED list
--font-ui	Plus Jakarta Sans, self-hosted	Latin + latin-ext, 48 KB
--font-data	JetBrains Mono, self-hosted	31 KB — see finding R6

The token layer is in good shape and is not what makes the page look AI-made. Nothing in §C is proposed for change.

D. Information architecture and conversion paths (preserve)

Nav: Szolgáltatások · Alkalmazások · Technológiák · Mentések · GYIK · Kapcsolat + language globe. One line at desktop, hamburger below 900 px. §4.7's nav rules already pass.

Conversion path: home → /teszteles (primary CTA, twice) → /kapcsolat. Secondary paths to /alkalmazasok, /technologiak, /biztonsagimentes.

No URL, nav label, anchor ID or form field is proposed for change (§11.F).

E. The page as it stands, measured

	Desktop 1440	Phone 390
Full page height	10 922 px	19 913 px
Screens of scrolling	≈ 11.6	≈ 23.6
Sections	11 + footer	same
Requests / weight	16 requests, 533 KB, hosts: felhom.eu 13, stats.felhom.eu 2	—
Em dashes (—) in rendered text	18	—

Section inventory, in page order, with the layout family each uses:

#	Heading	Layout family	Items	Height
1	(hero)	hero-content	2	900
2	Mit tud a doboz ma?	why-grid	10	1732
3	Így néz ki a vezérlőpult	dash-grid	4	1120
4	Miért ne a felhőszolgáltatók?	problem-grid	3	610
5	Miért válaszd a saját szervered?	why-grid again	4	755
6	Hogyan működik?	process-steps	5	715
7	Mit kapsz tőlünk?	service-list	5	1010
8	Telepíthető Alkalmazások	apps-showcase	10	939
9	Professzionális Technológiák	apps-showcase again	7	939
10	Adataid biztonságban	backup-content	2	519
11	Zárt teszt	why-grid a third time	3	1056
12	Érdekel? Beszéljünk!	contact-box	2	500

F. Patterns to keep

1. The token layer and the contrast wins (§C). Honour them; §11.C.
2. "Mit tud a doboz ma?" — the content is the best thing on the site. Ten concrete, hedged, honest facts. The layout is wrong, the writing is right.
3. "Ismert korlátok" — naming the shared household password and the missing DLNA is the single most trust-building paragraph on the page. It stays, and it should be easier to find.
4. The four real dashboard screenshots. Real product images, already vendored, already with captions that are claims. They are the asset the hero is missing.
5. The picture viewer (gallery.js), and its JS-off behaviour.
6. The whole SEO head block (§H).
7. The nav, the footer and both CTAs' wording. Jelentkezem tesztelőnek is one label for one intent, used twice — §4.5's No-Duplicate-CTA-Intent already passes.

G. Patterns to retire

Each row names the taste-skill rule it breaks.

#	Pattern	Where	Rule broken
R1	The hero's "visual" is the logo (logo.png, 49 KB), beside a claim that states nothing. The real product pictures sit three sections lower	hero	§4.8 "Hero needs a real visual"; a logo fills the slot without showing the product
R2	Hero content floats in the middle of a 900 px band, roughly 300 px of empty space above it; on the phone the logo takes the top half and pushes the CTA to the fold	hero	§4.7 HERO TOP PADDING CAP — "reads as a layout bug, not as intentional space"
R3	"Professzionális otthoni szerver telepítés és üzemeltetés" as the one-line value proposition. Also "Ipari szintű megoldások", "Professzionális Technológiák", "Kulcsrakész megoldások, professzionális kivitelezéssel"	hero + §7 + §9	§9.D filler verbs; felhom-web-design §5 — an empty word with no fact beside it
R4	The same section header shape 11 times out of 11: centred h2 of two words with a blue-coloured tail in a <span>, then a centred grey sub-line	every section	§4.3 anti-centre bias; the templated rhythm the operator describes
R5	Three layout families carry five sections. why-grid runs three times, apps-showcase twice	§2, §5, §11 / §8, §9	§4.7 Section-Layout-Repetition Ban — a family may appear once
R6	process-steps numbered 1–5 and service-list numbered 01–05.	§6, §7	§9.F "NO generic step labels"; "NO section-number eyebrows"
R6b	JetBrains Mono (31 KB) is loaded for 13 characters. Exactly 13 elements on the page use --font-data: the ten numbers in R6, plus the 3 / 2 / 1 of the backup rule. Retiring R6 alone therefore does not drop the font — the 3-2-1 figures must also move to the UI font, which they do not need	§6, §7, §10	page weight; §4.9 (mono is for data, and these are not data)
R7	problem-grid is three equal feature cards	§4	§9.C — banned outright
R8	A ten-card grid under "Mit tud a doboz ma?", 1732 px tall, every card the same weight	§2	§4.9 "Long lists need a different UI component, not a longer list" (> 5 items)
R9	18 em dashes in the rendered text	throughout	§9.G, kept in full; in Hungarian the gondolatjel is – anyway
R10	Two sections are a catalogue of someone else's logos in words — app names and technology names as plain text in identical tiles	§8, §9	§4.9 content density; they duplicate /alkalmazasok and /technologiak, which both already exist
R11	Nobody is behind it. The only human trace on the page is "Üzemeltető: Nagyfenyvesi Viktor" in the legal footer line	whole page	The brief's core finding; §0.A audience
R12	"Miért ne a felhőszolgáltatók?" argues against Google before the page has said what Felhom is	§4	§4.9 — the fourth section is too early for a competitor argument

H. SEO baseline — carried over unchanged

From audits/seo-2026-10-10/ (6 indexed, 7 not indexed, nothing wrong with the home page) and the file itself. These exact strings are preserved unless the operator says otherwise:

• <title>Felhom.eu — Saját felhőd, saját szabályaid | Otthoni szerver szolgáltatás</title>
• meta description (the "58 telepíthető alkalmazás, háromszintű automatikus mentés…" line)
• canonical https://felhom.eu/; hreflang hu / en / x-default
• All Open Graph and Twitter tags, and the LocalBusiness JSON-LD block
• h1 text: Saját felhőd, saját szabályaid

One conflict to settle at STOP 1. The <title> and three OG/Twitter titles contain an em dash, and the JSON-LD description contains "Professzionális". R3 and R9 would change them, the SEO-keep rule says do not. Recommendation: leave all four alone this round. They are the strings Google has indexed, the em dash is invisible to a visitor in a browser tab, and a title change is worth doing deliberately on its own, not as a side effect of a layout change.

I. Dial reading (taste-skill §1)

Dial	Current site	Proposed	Why
DESIGN_VARIANCE	3 — every section is a centred header over a symmetric grid	6	§1.A "redesign - preserve" says match existing; 3 is what causes R4 and R5. 6 buys asymmetry and a real hero without touching the brand
MOTION_INTENSITY	2 — CSS hover only, prefers-reduced-motion block already present	3	Trust-first audience (§1.A row 5 reads 2-3). Deliberately below 4 so §6.B's mandate and the no-JS-library fence never collide
VISUAL_DENSITY	4	4	Unchanged. The density is not the problem; the repetition is

Mode: redesign — preserve.

J. The levers, in priority order (taste-skill §11.D)

Each is one plain sentence. This is the list the operator approves, changes or cuts at STOP 1.

1. Give the hero a real picture and a sentence that says something. Replace the logo with the Indítópult screenshot, and "Professzionális otthoni szerver telepítés és üzemeltetés" with a concrete sentence drawn from the facts already on the page. (R1, R2, R3)
2. Put a face and a name on the page. A new "Ki áll mögötte" section with the operator's photograph and three or four sentences in his own words. (R11)
3. Break the eleven-times-identical section header. Vary alignment and shape so that no two consecutive sections open the same way. (R4)
4. Give each section its own layout family. Split the ten-card grid into a short scannable list, and stop reusing why-grid and apps-showcase. (R5, R7, R8)
5. Re-order so the page answers "what is it" before "why not Google". (R12)
6. Drop the two word-catalogue sections to a single line each with the link they already carry. (R10)
7. Retire the numbered step and service lists, and move the 3-2-1 figures off the mono font, which together take JetBrains Mono (31 KB) off the home page. (R6, R6b)
8. Sweep every em dash out of the rendered text. (R9)

Levers deliberately NOT proposed: no new colour, no new font, no light mode, no animation library, no nav change, no URL change, no change to the four SEO strings in §H.

K. Known risks when this ships

1. site_gates.py walks every *.html under website/ at any depth (R-423) and fails on a page that is in neither TWINS nor NO_TWIN. The preview page must be registered before the gate can pass, and a registered Hungarian page must carry a nav and footer byte-identical to index.html's after normalisation — which is a second, independent reason not to touch the nav.
2. site.css is shared by every page, and scoping it has already bitten in both directions. A base-element change made for the home page leaks into /gyik, /teszteles and the legal pages; but 69035f4af5 (2026-10-10) is the opposite failure — .info-card and .highlight-box were scoped to .page-technologiak / .page-biztonsagimentes, so the new .page-teszteles pages got no card chrome at all and rendered as unstyled text runs. That commit's own conclusion was to fix base rules site-wide rather than patch per page. So the rule here is not "always scope": a genuinely shared improvement (a base a, ul or code rule) goes site-wide on purpose; only a rule that is specifically the home page's new composition hides under body.page-index. Either way the mitigation is the same and is not optional — every other page is screenshotted at 1440 before the switch, which is step D.3.
3. The English twin must move in the same commit, or the twin gate fails.
4. One em dash cannot be swept from one page alone. The shared footer reads © 2026 felhom.eu — Saját felhőd, saját szabályaid, and gate 3 requires every Hungarian page's <footer> to be identical to index.html's. So "zero em dashes" is achievable on the home page's own copy, but that last one needs the same edit on all 14 pages at once. It is a one-character change per file and mechanical, but it is a site-wide change, not a home-page one. Carried as a separate decision for the operator at STOP 3, not done silently.
5. A preview page cannot be registered as a twin pair. Gate 3 requires the nav to be identical to index.html's (whose language globe points at / and /en/), while the twin gate requires a TWINS pair's globe to point at the pair's own two URLs. For preview/ those two demands contradict each other. The Hungarian preview therefore goes in NO_TWIN (where nav, globe structure, BOM, emoji, analytics, dash-language and viewer checks all still run, and only the twin-specific canonical/hreflang checks do not), and the English twin is written in Part D, in the same commit as the switch, where the twin gate does its real job on two public pages.
6. The ?v= cache-bust on site.css must be bumped, or the change looks like it did not deploy.

L. Register

Nothing here is filed as an OPEN-ITEMS.md row yet: the whole list is this session's work and will be closed in it. Anything on the list that the operator cuts at STOP 1, or that is not finished by the end of the session, becomes a row before the session ends.