colorlink
5c74ef8b33
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q8t9GEyyLZbUQu26na1JQg
89 lines
5.0 KiB
Markdown
89 lines
5.0 KiB
Markdown
---
|
||
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.
|