Checklist

Background and motif

• The motif is added with an attribute (data-pe-hero, data-pe-cta, …), not drawn by hand.
• The text column is marked (.ah-in, h2 in a CTA or data-pe-tekst). data-pe-uklad on the section has the expected value.
• The object does not enter the text, it fades towards it.
• The gradient sits opposite the text (text at the bottom → G).
• The gradient is chosen from the table "Jak dobrać i ustawić gradient" (tla.md): a hero, cover or header without the motif = G5 as an arc, stretched.
• The gradient transition covers at least half of the frame. There is no narrow strip of colour under the text.
• A website with light and dark themes: headers and gradients are the same in both.
• Hero: title and lead up to 3 lines.
• Text does not stand on colour. If the section has data-pe-czytelnosc above about 0.15, the text is too long for the frame: shorten the title or lead, or enlarge the frame.
• Light F: frame according to where it is used (web / box / no frame), never mixed within a series.
• The dot grid only on a solid background, never under text, never together with the motif.
• No CSS gradients without grain.

Colour

• Only --pe-* tokens (or values from tokens.json).
• Orange (kolor.md, point 2): the headline dot never with the motif point; next to b1a no headline dot and no points in the buttons beside it; in data only the leader.
• Orange is never text or background. Cobalt never fills a button.
• Small text has contrast ≥ 4.5 : 1 (links on white: Cobalt 600).

Typography and layout

• Geist for headings, Inter for text. No third typeface (except e-mail).
• Sizes and margins from the table of formats (uklad.md), type rounded to 4 px.
• .dot only in slogan headlines; a question headline has no dot.
• Polish typesetting: data-pe-typo or by hand (space before %, one-letter words).
• Logo: the right variant (colour / white), the right corner, min. 14 px.

Content

• "Recommends", not "visible"; the effect, not the activity (marka.md).
• Only confirmed numbers. No "93 out of 100".
• Buttons: verb + object, max. 3 words, one level-1 button per section.

Data and reports

• The title of a chart is a conclusion. The title of a table is a conclusion or a description; a table in text may have no title and no figure. A figure has a footer: source, sample (n), period, address.
• Model icons from assets/llm/sprite.svg, pasted into the page once. Without it the icons are empty.
• Data colours from the classes in css/dane.css (.q1–.q4, .hm1–.hm5, .up), not typed in by hand.
• A report chapter title has no dot: it is a name, not a slogan.
• A page with system blocks loads Geist and Inter (styles.css or Google Fonts as in the sheets).
• A table is built from the layers in dane.md, each added for a reason. Every percentage value has "%" next to the number, numbers sit in .lv fields and the decimal commas line up.
• The best model in a row is not heavier than the main measure. With the heat map off, the row lines are visible.
• A new class in css/ does not repeat a name already in the system (e.g. .kl, .l, .v, .s); check css/ and guidelines/css/.
• A table on a phone: company names are whole (they wrap, they are not cut), the leader dot stands next to the rank number.
• Column widths in style on the header cells, not in <colgroup>: Claude Design drops it.

Export and screenshots

• PDF, PNG, print: data-pe-static and await PEmotyw.ready.
• A black frame without dots = the motif has not started. Call PEmotyw.init(document). Never draw it yourself.

Page styles

• Page styles (e.g. .strona h1 {…}) do not leak into system sections. Write general selectors with a scope (.strona > header h1), otherwise they override .ah-in h1 and the hero gets the wrong title size.

Common mistakes