diff --git a/.impeccable.md b/.impeccable.md index ff0f1cf6..110d0140 100644 --- a/.impeccable.md +++ b/.impeccable.md @@ -41,10 +41,15 @@ Stay close to the current direction. It works. References (what to stay close to): +- **https://www.placestoread.xyz** is the primary visual model for the table, expand row, sorting, and footer. "Like placestoread" means dense single-page list, inline click-to-expand rows that indent under the Name column, sortable headers, minimum decoration. When in doubt about a table or row treatment, check placestoread first. - Magazine reference pages (The Economist, FT Weekend, Monocle). - Field-guide books. Curated, functional, hand-made. - Library card catalogs. Dense tabular information, excellent typography, no decoration for decoration's sake. +Color aversions: + +- No green. The user rejected it when picking the palette. Warm brown-red, ivory, and dark earthy tones are the established system. Do not introduce green even for success states or ancillary accents. + Anti-references (avoid strictly): - Generic dark developer-tool look. No cyan on near-black, neon gradients, VSCode-palette dashboards, terminal-green monospace branding. @@ -70,6 +75,8 @@ Layout and sizing: - The impeccable skill reference rule "cap line length at ~65-75ch" does NOT apply here. Ignore it. Readability at wide widths is carried by vertical rhythm, leading, and the modular type scale instead. - If you believe a width cap is actually necessary for some specific element, ask first with a concrete reason before adding it. - Body type floor is 16px (`--text-base: 1rem`). Content-heavy passages may go to 1.125rem. +- When in doubt about any type size, pick one step larger than what the impeccable skill's scale references suggest. The user has repeatedly corrected sizes upward (11+ separate requests across 8 sessions). Never reduce an existing size unprompted. Footer, meta rows, expand content, labels, headings all trend too small by default. +- Row numbers in the table: left-align, no leading zeros. The user tried zero-padding and rejected it. - Adjacent heading levels differ by at least 0.25rem of rendered size. Color: @@ -88,6 +95,23 @@ CSS hygiene: - Never `text-transform`. Write the casing in the markup. - Sibling components (card lists, grid items) share identical spacing. +Visual consistency check: + +Before shipping any visual change, check peer elements. The user catches inconsistencies repeatedly. + +- Hover and focus states: if one link type gets a hover treatment, peer links (hero topbar, footer, project names, sponsor names, expand-meta) share it. +- Tag variants (group, subcat, source, built-in) inherit the base `.tag` style and differ only where a real difference is needed. +- Typography tiers: labels that play the same role share size, weight, and letter-spacing. +- Symmetric gutters: logo left-gap equals logo right-gap, column paddings match across header and body. +- Role-based color tokens: same role uses the same token everywhere. No one-off inline `color: oklch(...)` buried in a rule. + +Narrow-screen behavior: + +The user actively tests `< 960px` and `< 680px`. Narrow screens must stay functional. + +- Do not drop features that the user might want (sort affordance, filter chips, sticky header where reasonable). Hiding is a last resort and requires justification. +- Always run the `playwright-cli` skill at a narrow viewport after any layout change. + Absolute bans (from the impeccable skill): - No `border-left` or `border-right` greater than 1px as a colored accent stripe on cards, list items, callouts, or alerts. Use a different structure.