deepatience.com · redesign 2026-07 · porting spec for Kadence
One page of truth for the redesign in this folder (index.html, tools.html, clarity.html, calm.html). Palette and fonts are the BRAND-KIT locks; everything else is the redesign's proposal. Port = one scoped token sheet all Kadence pages import, replacing the ten bespoke per-page stylesheets on live.
Hex values are the Kadence global palette (BRAND-KIT); the three zone tints extend it. Contrast ratios are computed WCAG 2.1.
Gold is never text on a light background (live site currently violates this at 2.5:1 with #b89243 eyebrows; use --muted instead). Gold carries no meaning alone; it decorates. One green CTA band per page maximum: it is the loud moment.
Montserrat, one family, weights 400/600/700/800. Scale is clamp()-fluid, ratio ~1.25 at desktop. All headings text-wrap:balance; body text-wrap:pretty; measure capped at 62ch.
Base 4px. Section padding uses the top three steps; component padding the middle; never invent values between steps.
--s3 · 12pxlabel-to-text gap--s4 · 16pxparagraph rhythm, field gaps--s6 · 24pxcard padding, grid gaps--s8 · 32pxcard padding (large), head-to-grid--s12 · 48pxintra-section blocks--s16 · 64pxquiet section padding (follow, footer)--s24 · 96pxmajor section padding (all content zones)Content width 1290px (Kadence), narrow column 842px, gutter clamp(1.25rem,4vw,2.5rem). Breakpoints, ONE set for every page: 520 / 820 / 920 (mobile stack / tablet collapse / nav collapse). Radii: cards 16px, badges 10-12px, buttons pill.
Primary = green pill, cream text, 52px min height (44px in the header). One primary per view. Secondary beside a primary is always the quiet inline arrow link on the same axis, never a second loud button and never a bordered pseudo-heading. On green bands the primary inverts to cream. Ghost is reserved for commercial-but-secondary actions (Amazon). Tap targets ≥44px everywhere.
White on sage zone, gold hairline border, soft shadow, dashed list dividers with gold dot markers.
Same shell, eyebrow kind-label on top, CTA pinned to the bottom edge (flex column, margin-top auto).
2px gold border on cream: for user-generated moments (the TGIFF clarity page). Distinct from marketing cards.
Shadow tokens: --shadow 0 16px 36px -14px rgba(20,45,32,.16) for cards; --shadow-lg for hero imagery and the opt-in card. Never a hard black shadow.
Pages alternate full-bleed background zones so long pages read as chapters, not one scroll of cream. Order on the homepage:
Max one green band between header and footer. Never two tinted zones of the same tint adjacent. A zone earns a tint only if its job differs from its neighbors. Announcement bar (deep green) shows sitewide EXCEPT on /clarity/ (it sells that page) and /calm/ (sleep context). Exit popup: same two exclusions.
| Item | How to port |
|---|---|
| Tokens | One scoped stylesheet (e.g. .dp-2607 wrapper class) defining every var above; each page's Custom-HTML block wraps in it. Map --cream/--ink/--green/--muted/--gold to --global-palette9/4/2/5/1 with hex fallbacks. |
| Fonts | Inherit the Kadence global Montserrat (font-family:inherit); force text-transform:none on h1/h2 (Kadence uppercases). Load Libre Baskerville only on funnel pages + the wordmark. Remove the dead Fraunces+Inter @imports and the dp-font-fix hack; restyle .site-title, nav, .dee-footer, #dee-banner, #dee-pop to Montserrat/Libre Baskerville per the lock. |
| Nav (07-02) | Menu = The Method · Tools · Articles · About + button "Get the Clarity Pages". Press/Book/Giving move to the footer. WP gotcha: pass FULL args when reordering menu items (position-only args blank the item). |
| Images | Covers to WebP ≤80KB; hero images loading="eager" fetchpriority="high" class="skip-lazy"; everything below the fold lazy. |
| CSS gotcha | WP strips backslashes in Custom-HTML <style>: no \NNNN escapes; this system uses none (list markers are drawn dots). |
| Meta | Every page gets a meta description at port time (9 live pages are missing one). |