Tokens, components, and block patterns for the Trinity landing page and WordPress site. Each pattern section maps directly to a reusable Gutenberg block or unsynced pattern.
Dark-first. One background, one text, three accent colours — each owned by one Trinity layer. All tints and glass surfaces derived from these six roots.
| Token | Value | Usage |
|---|---|---|
| --bg | #111111 | Page background — only background used |
| --text | #E0DDD5 | Primary text — warm off-white · contrast 13.91:1 |
| --t2 | rgba(224,221,213, 0.70) → #a2a09a | Body copy, descriptions, secondary text · contrast 7.22:1 WCAG AAA ↑ was 0.50 / 4.23:1 |
| --t3 | rgba(224,221,213, 0.35) → #595856 | Ghost text — intentional only (attribution, footers) · contrast 2.66:1 ↑ was 0.22 / 1.77:1 |
| --t4 | rgba(224,221,213, 0.09) | Ultra-ghost — vertical section numbers only |
| Token | Value | Usage |
|---|---|---|
| --gl | rgba(255,255,255, 0.025) | Default card background |
| --glb | rgba(255,255,255, 0.055) | Default card border, dividers |
| --glh | rgba(255,255,255, 0.11) | Hover state border |
Three typefaces, three roles. Never substitute. Font weights and sizes are specified as exact values — use clamp() for responsive scaling at hero sizes.
| Token | Family | Weights | Role |
|---|---|---|---|
| --fd | Syne | 700, 800 | Display — hero titles, section headings, segment names, CTA headings |
| --fb | Manrope | 300, 400, 500, 600 | Body — all paragraph copy, labels, buttons |
| --fm | JetBrains Mono | 400, 500 | Code — eyebrows, labels, mono tags, terminal |
| Element | Desktop | Tablet ≤1024px | Mobile ≤640px | Line height |
|---|---|---|---|---|
| Hero Sub | 23px | 21px | 19px | 1.85 |
| Section Sub | 22px | 20px | 18px | 1.82 |
| Body / Prose | 21px | 19px | 17px | 1.82 |
| Eyebrow / Label | 14px | 13px | 12px | — |
| Terminal / Code | 16px | 15px | 14px | 1.9 |
| Hero Eyebrow | 14px | 13px | 12px | — |
One MCP to Bind Them All — an MCP server that runs on your machine and connects your AI client to any number of WordPress sites simultaneously.
The conversation becomes the operating layer. The dashboard becomes the review layer.
Your time is entirely yours — until WordPress needs attention. Then an hour of creating becomes an hour of clicking through menus.
With the Trinity, your site reports to you. Ask what's wrong and get a structured answer in a conversation, not a dashboard.
All spacing is on a base-8 scale. Layout uses two column widths. Padding is always 56px horizontal at desktop.
| Name | Value | Usage |
|---|---|---|
| --col | 800px | Content column — all body text and sections |
| --wide | 1140px | Wide column — stats bands, full-bleed elements |
| Column padding | 56px | Horizontal padding on all .c and .cw wrappers |
| Section gap | 160px | Vertical margin between major sections |
| Hero padding | 160px top / 120px bottom | Each layer hero section |
| Card gap | 2px | Gap between adjacent cards (dense grid feel) |
| Segment gap | 80px | Between .seg blocks in one-pipeline section |
| Prose gap | 20px | Between paragraphs in .prose blocks |
| Stat band padding | 64px / 56px | Full-bleed stat bands — vertical / horizontal |
| Section border radius | 8–14px | Cards 8px · Transport/Segment 12px · Terminal 14px |
Small, reusable elements. Each maps to a single Gutenberg block or inline HTML class.
Layer label shown above each hero headline. Pill shape, animated dot, mono text. Three colour variants — one per layer.
eyebrow / eyebrow--y / eyebrow--g. The dot is a <span class="ebdot"> inside.1px horizontal gradient line. Used under hero headlines. Three colour variants.
gl / gl--y / gl--g. Set separator to "wide" width, custom colour disabled — styling is pure CSS.Small tinted labels. Used inline in content and in stat-band accent labels.
pill py / pill pp / pill pg / pill p0 inside a Paragraph block.Two variants. Green primary for the preferred action (shop/install). Ghost for secondary (GitHub). Always pair in this order: ghost left, green right.
btn--g. Ghost button: class btn--ghost. Use Buttons block in horizontal layout with gap 10px.Opening section of each Trinity layer. Eyebrow + large title + sub paragraph + glow line. Title uses Syne 800, last line in accent colour via <em>.
| Element | Spec |
|---|---|
| Eyebrow | JetBrains Mono · 14px desktop / 13px tablet / 12px mobile · uppercase · margin-bottom 52px |
| Title | Syne 800 · clamp(3rem, 5.5vw, 5rem) · tracking -0.045em · lh 1.03 · margin-bottom 36px |
| Title em (accent) | display:block · color: --y / --pl / --g depending on layer |
| Sub | Manrope 300 · 23px desktop / 21px tablet / 19px mobile · lh 1.85 · color --t2 · max-width 540px · margin-bottom 80px |
| Glow line | 1px · opacity 0.28 · max-width 90px · variant matches layer colour |
One MCP to Bind Them All — an MCP server that runs on your machine and connects your AI client to any number of WordPress sites simultaneously.
Full-bleed band with four stats. Sits immediately after each hero section. Each band has an accent colour variant matching its layer.
| Element | Spec |
|---|---|
| Number | Syne 800 · clamp(2.8rem, 4.2vw, 4rem) · tracking -0.045em · lh 1 · accent colour class (sy/sg/sp/sw) |
| Label | JetBrains Mono · 14px desktop / 13px tablet / 12px mobile · uppercase · tracking 0.1em · accent-tinted colour per band variant |
| Column divider | 1px border-right using accent colour per band |
| Band padding | 64px vertical · 56px horizontal |
Heading + sub-paragraph used to open every content section within a layer. Always followed by the content block it introduces.
sh + Paragraph with class sp2. Optionally preceded by a ghosted vertical section number (sn class, absolute positioned — requires Group block with position relative).
| Element | Spec |
|---|---|
| Heading (.sh) | Syne 700 · clamp(1.8rem, 3vw, 2.6rem) · tracking -0.03em · lh 1.12 · color --text · margin-bottom 16px |
| Sub (.sp2) | Manrope 300 · 22px desktop / 20px tablet / 18px mobile · lh 1.82 · color --t2 · max-width 580px · margin-bottom 56px |
Every module ships with a default permission state built into the source code. Read is on. Write is on. Delete is off — across every module, from first install.
Bordered list of named capabilities. Label left (mono, uppercase, 52px wide), title + description right. Used for technical feature lists, MCP annotations, bridge tools.
cap-list + border-top. Each item: Group block with class cap-item + border-bottom → two Column blocks (52px left, 1fr right) → left: Paragraph with class cap-n → right: Heading H3 with class cap-title + Paragraph with class cap-desc or nested prose Group.
The AI agent connects as a WordPress user. The WordPress role you assign governs exactly what the AI can reach.
Only abilities marked mcp.public: true appear in the manifest. Everything else is invisible.
Two-column list of value propositions. Name left in Syne 700 (200px), copy right in Manrope 300. Used in the "What changes" section.
value-list + border-top. Each item: Group with class value-item → Columns block (200px fixed left, 1fr right) → left: Heading H3 with class value-name → right: Paragraph with class value-copy.
Two-column card: 220px aside on left (label + name), body on right (transformation headline + copy). Three colour variants. Used in "Who this is for" section.
audience-block (220px left, 1fr right, gap 2px) → Left: Group with class audience-aside → Paragraph label (audience-label--y/p/g) + Heading (audience-name) → Right: Group with class audience-body audience-body--y/p/g → Heading (audience-transform) + Paragraph group (audience-copy).
Every morning you open six dashboards. Your CRM doesn't know what your community platform knows. You're manually correlating data between silos that will never talk to each other.
With the Trinity, one conversation covers all of it.
Standalone headline above a full-width card. Label + display-size name sit above the card with 28px of space. Three colour variants. Used in "One pipeline" section.
seg → Header group with class seg-header: Paragraph (seg-label seg-label--y/p/g) + Heading H3 (seg-name) → Card group with class seg-card seg-card--y/p/g: Heading H4 (seg-transform) + Paragraph group (seg-copy) with gap 18px between paragraphs. Repeat for each segment, with margin-top 80px between.
You open six dashboards every morning. Your CRM doesn't know what your bookings platform knows.
The Trinity connects the dots — all in one WordPress database, all reachable in one conversation.
Vertical chain of boxes connected by thin lines. Used to show the flow from AI client through adapter to unlocked abilities. Three box states: default, purple-accented, open/unlocked.
Feature card with label, display-size name, description, and feature bullet list. Two variants: SSH (yellow-accented) and HTTP (default glass). Used side by side in abilities-mcp section.
transport (or transport--ssh) → Paragraph (tr-label / tr-label--http) + Heading (tr-name / tr-name--http) + Paragraph (tr-desc) + List block with class tr-features.
Connects over your existing SSH tunnel. Auto-reconnects with exponential backoff, replays the MCP handshake on reconnect.
Dark-on-darker terminal window with traffic light dots, tab label, and coloured code lines. Used to show real AI sessions. Always green cursor at end.
Vertical stack of step cards. Step number left (28px, mono), filename in green mono, description in body text. Active state: green-accented card.
boot-seq (flex column, gap 2px) → each step: Group with class boot-step (or boot-step--active) → Columns (28px left, 1fr right) → left: Paragraph (boot-n) → right: Paragraph (boot-file) + Paragraph (boot-desc).
Card showing an AI agent role. Role label (mono, uppercase), agent name (semi-bold), description. Active/featured state uses green accent. Used in Knowledge Layer section.
agent (or agent--kl for active) → Paragraph (agent-role) + Heading H3 (agent-name / agent-name--g) + Paragraph (agent-desc).
Two-column grid of document type cards. Type label (mono, uppercase), document name (medium weight), description. Active state uses green accent. Used in Knowledge Layer section.
kl-doc (or kl-doc--active) → Paragraph (kl-doc-type / kl-doc-type--g) + Heading H3 (kl-doc-name / kl-doc-name--g) + Paragraph (kl-doc-desc).
End-of-layer call to action. Alpha release label, heading, one-line description, and one or two buttons. Green button = preferred path (shop). Ghost button = GitHub. Where there is only one path, use only the green button.
layer-cta (border-top, padding-top 48px, margin-top 80px) → Paragraph (layer-cta-label) + Heading H2 (layer-cta-heading) + Paragraph (layer-cta-text) + Buttons block with class layer-cta-btns → Ghost button + Green button. Three instances across the page, one per layer.
| Layer | GitHub URL | Shop URL | Buttons |
|---|---|---|---|
| abilities-mcp | github.com/Wicked-Evolutions/abilities-mcp | — | Green only |
| abilities-mcp-adapter | github.com/Wicked-Evolutions/abilities-mcp-adapter | community.wickedevolutions.com/item/abilities-mcp-adapter/ | Ghost + Green |
| abilities-for-ai | github.com/Wicked-Evolutions/abilities-for-ai | community.wickedevolutions.com/item/abilities-for-ai/ | Ghost + Green |
Free tier on GitHub. Full Pro — including write and delete abilities — available from our shop with automatic updates in your WordPress admin.
Full-width centred statement. Large Syne 800 text, accent em in yellow. Sub-line in ghost text. Attribution in mono below. Used once — between the layers and the final CTA.
quote-monument (border-top + border-bottom, 140px padding) → Paragraph/Heading with class quote-text (text-align centre) with <em> in yellow → Paragraph with class quote-attr. The sub-line "The site is the shared state." is a <span> with inline ghost styling.