UI design requirements — hretheum.com

Direction

The site looks like the profile of an experienced design leader, not like a list of blocks stacked one under another. It has a clear hierarchy, grid and rhythm that make it obvious at once what matters most, with deeper content one click away.

One distinctive thing: the evidence layer. Every fact in the text has a discreet source marker. Hovering, focusing or tapping it shows a preview: the quotation from the source, the document, the status (“confirmed by Eryk” or “verified in code”) and the date. This is the site’s visual signature and its thesis in one, so everything around it should be calm and disciplined.

A second thing, informative rather than decorative: the career timeline from 2000 to the present, showing roles held in parallel (e.g. a consulting practice in 2003–2017 alongside full-time jobs).

What to avoid

The site must not fall into any of the typical templates of generated sites:

a cream background with a serif heading and a terracotta accent;
a near-black background with a single bright accent;
a newspaper layout with hairlines and dense columns;
a set of identical rounded cards with the same shadow and gradient blobs;
all-caps labels above every heading, strings of metadata joined with dots, a monospace typeface for small labels, an arrow “→” tacked onto links;
a large number with a small caption as the default header element;
entrance animations on every section.

Visual system

The implementer starts with a token plan (a palette of 4–6 colours with names and values, typefaces and their roles, a type scale, grid, spacing, radii, shadows) and a review of that plan against the “what to avoid” list before writing any code. The plan goes into the repository as a document and as CSS tokens.

Requirements:

Typography: one or two families, clearly different, self-hosted, with full Polish character support. A type scale with clear steps, a line length of continuous text of up to about 75 characters. Headings as an active element of the design, not a neutral carrier.
Colour: a light theme as the primary one and a dark theme that follows the system setting and has a toggle. The accent is reserved for the evidence layer and interactive states. Text contrast of at least 4.5:1, non-text elements 3:1, in both themes.
Grid: a clear column grid on desktop, asymmetric layouts where they express hierarchy (e.g. a featured work larger than the others). Structure (rules, numbering, borders) only where it carries information; numbering only for content that really is a sequence.
Motion: one considered moment on entering the site, or none; motion in response to a user action (expanding, opening a preview, docking the chat) shows what has changed. prefers-reduced-motion turns off motion that is not a response.
Images: no stock photos and no decorative illustrations. If a case study needs an image, it is only an image from the package (in future); until then, typography and structure.

Modules (reusable components)

Module	Where	Requirements
Site header	everywhere	name, navigation (Work, Experience, About), a language switch that keeps the page, a chat button; on narrow screens a drop-down menu with an accessible button
Identity	home page	one sentence and a summary from the “About” document, with source markers
Work card	home page, `/work`, related	three variants: featured (large), standard, list row; title, organisation or anonymous label, period, role, line, teaser
Line section	home page, `/work`	line name, a short description from the interface (no facts), the works in the line
Work filters	`/work`	line, competency, organisation, type; state in the address (shareable link), results without a reload
Fact sheet	case study	organisation, period, role, line, competencies
Document body	case study, About	Markdown from the package: headings, lists, tables, quotations; a table of contents for longer texts; section anchors
Source marker and preview	wherever there are facts	accessible by keyboard, touch and mouse; preview with the quotation, document, status, date; closes with the Esc key
“Facts in this case study” panel	case study	list of claims, expandable quotations, scrolling to the place in the text
Career timeline	home page (summary), `/experience`	roles over time with parallel roles; a linear version on narrow screens
Requirements matrix	job posting page	a row per requirement, coverage status, expansion with claims and links to case studies
Chat panel	everywhere	see below
Contact	home page, About, case study, job posting page	email, LinkedIn, CV (when it exists)
Footer	everywhere	information on how chat questions are stored, package version, a sentence on the source of the content

Chat panel

A component at the level of the application layout, not the page: the conversation and the panel state survive navigation between pages.
Desktop ≥ 1024 px: docked on the right, 380–420 px, the page content narrows instead of being covered; collapses to a button at the edge; open state remembered.
Below 1024 px: a button opens a full-height bottom sheet, with a focus trap, a close button and Esc.
Suggested questions depend on the page context; on the job posting page the panel is open by default.
Answers announced to screen readers through an aria-live="polite" region; after sending, focus stays in the question field.
Quotations in answers open the same source preview as the markers in the text.
Information about the 90-day retention visible in the panel.
Behaviour and answer guarantees (only from the package, quotations, “I don’t know that”, topic boundaries, limits) unchanged.

Language and addresses

English by default without a prefix, Polish under /pl/…; hreflang for page pairs; the switch leads to the counterpart of the page.
Work slugs stable, in English, shared by both languages, taken from the slug field in the package.

Accessibility, performance, SEO

WCAG 2.2 AA on all pages and states, in both themes and languages: axe with no critical or serious violations, visible focus, a “Skip to content” link, correct landmarks, full keyboard operation, reflow down to 320 px, text spacing 1.4.12.
Performance on a 4G connection: LCP under 2 s on the home page and case studies, CLS under 0.1, home page JavaScript without the chat as small as possible (chat loaded on interaction or after the content has loaded).
No resources from external domains (fonts and icons self-hosted), in line with the current privacy policy.
Main domain indexable: sitemap.xml, robots.txt, metadata and social images generated from the package. Employer subdomains and unknown subdomains stay noindex.

States

Every module has described and tested states: loading, empty (e.g. a filter with no results — with a suggestion of what to change), error (e.g. chat unavailable — with information on what to do), long content, titles in both languages.