diff --git a/skills/impeccable.md b/skills/impeccable.md new file mode 100644 index 0000000..c383f83 --- /dev/null +++ b/skills/impeccable.md @@ -0,0 +1,88 @@ +--- +name: impeccable +description: Pixel-level polish and restraint laws for high-end pages — the difference between "looks fine" and "looks expensive". Read on demand before final polish or when a page looks amateur but you can't say why. +version: 1.0.0 +auto-load: false +tags: [design, polish, craft, spacing, typography, restraint] +--- + +# Impeccable — The Craft Layer + +## When to use this skill + +Load this at two moments: before the final polish pass on any page, and whenever something "looks off" and you can't name it. This is the craft that separates a template from a designed page. `design-intelligence` tells you the rules; this tells you how to apply them with taste. + +--- + +## The governing principle: restraint + +Expensive design is defined by what it leaves out. Amateur design adds; impeccable design removes. Before adding any effect, shadow, gradient, or animation, ask: does the page get worse without it? If not, don't add it. + +--- + +## Spacing is the signature + +The single biggest tell of quality is spacing, not color or font. + +- **Use a scale, never arbitrary numbers.** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Every margin and padding is one of these. A 37px gap screams amateur. +- **Whitespace is generous and intentional.** Cramped pages feel cheap. Let the hero breathe — 120–200px vertical. Let headings sit apart from their body. +- **Related elements group tight, unrelated elements sit far.** Proximity communicates relationship. A label 4px from its field and 48px from the next group reads instantly. +- **Consistent rhythm down the page.** The vertical gap between sections should feel like one decision repeated, not improvised per section. + +Apply via container and widget spacing through `elementor_update_container` / `elementor_update_element`. + +--- + +## Typography laws + +- **Two typefaces maximum**, usually one. A display face for headings, a clean face for body — or one family across weights. +- **A real type scale.** Don't eyeball sizes. Ratio-based (e.g. 1.25 or 1.333): body 16–18px, then step up for h3/h2/h1. Set these on global fonts (`elementor_get_global_fonts` / `elementor_set_global_font`) so they're consistent. +- **Line length 50–75 characters.** Full-width body text at 1400px is unreadable — constrain the text container. +- **Line height scales inversely to size.** Body ~1.5–1.65; large headlines ~1.05–1.15. Tight headlines, airy body. +- **Weight carries hierarchy, not just size.** A 600 vs 400 contrast often reads better than a huge size jump. + +--- + +## Color discipline + +- **One accent color.** It belongs to the primary action and almost nothing else. The moment the accent appears on three unrelated things, it stops meaning "click here". +- **Neutrals do the heavy lifting.** A near-black that isn't pure #000, a white that isn't pure #FFF, two or three grays. Pure black on pure white is harsh — soften both. +- **Contrast where it matters, calm everywhere else.** The CTA has the most contrast on the page. Body text is readable but not shouting. +- Define all of this once via `elementor_get_global_colors` / `elementor_set_global_color` and reference the system — never paste a one-off hex into a widget. + +--- + +## The details that signal craft + +- **Border radius is consistent.** Pick one (e.g. 8px or 12px) and use it on every card, button, and image. Mixed radii look broken. +- **Shadows are soft and low.** One subtle shadow, large blur, low opacity. Never a hard drop shadow. If you can clearly see the shadow, it's too strong. +- **Images are never stretched or pixelated.** Correct aspect ratios, real resolution. Set alt text (`set_image_alt`, `bulk_set_alt_from_title`) — accessibility is part of polish. +- **Alignment is pixel-true.** Edges line up on a grid. A CTA 3px off from the heading above it reads as sloppy even if no one can name it. +- **Buttons have states.** Hover is a small, fast change — not a bounce. Restraint again. + +--- + +## Motion with taste + +Motion is seasoning. The plugin exposes `motion_list_presets`, `motion_set_entrance`, `motion_set_scroll_fx`, `motion_apply_preset`. + +- **Entrance animations only on the elements that matter** — headline, hero CTA, maybe section headings. Not on every card. +- **Fast and subtle.** 200–400ms, small translate/fade. A slow, large animation feels cheap and delays the content. +- **One motion language per page.** Don't mix a fade-up here with a zoom there with a slide-in elsewhere. +- **Nothing that blocks reading.** If the visitor waits for an animation to see the content, the animation lost. +- After applying motion, `elementor_regenerate_css` and `cache_purge_all`. + +--- + +## The final polish checklist + +Before calling any page done: + +- [ ] Every spacing value is on the scale. +- [ ] One accent color, on the CTA and little else. +- [ ] One consistent border radius everywhere. +- [ ] Shadows soft, low, singular. +- [ ] Type scale is ratio-based; body line length constrained. +- [ ] Alignment is grid-true on desktop and mobile. +- [ ] Motion is minimal, fast, and consistent. +- [ ] You removed at least one thing on the final pass. If you added only, look again.