Agentic Hub Design DNA — Extracted 2026-05-24

> Source: https://innerverse-voice-scratch.s3.us-east-1.amazonaws.com/agentic-hub/index.html

> Purpose: Reference for reskinning Genius (genius.silentinfinity.com) to match this aesthetic exactly.

---

CSS Custom Properties (verbatim from :root)


:root {
  --bg:       #0a0b0f;
  --card:     #14161c;
  --raised:   #1b1e26;
  --line:     #2a2e3a;
  --ink:      #e8ebf0;
  --dim:      #9aa0ad;
  --mute:     #5a6070;
  --accent:   #6aa9ff;
  --accent-s: rgba(106,169,255,.12);
  --good:     #56d39c;
  --warn:     #f0b54e;
  --danger:   #f4736b;
}

Note — Genius already has these tokens exactly. The only delta is:

Genius adds --line-soft:#1a1d24, --accent-glow:rgba(106,169,255,.35) (additional tokens — keep them)
Agentic Hub --line:#2a2e3a vs Genius --line:#23262f — Agentic Hub is slightly lighter/more visible. Genius should adopt #2a2e3a.

---

Body Background


/* Agentic Hub */
background:
  radial-gradient(820px 480px at 50% -8%, rgba(106,169,255,.13), transparent 64%),
  var(--bg);

/* Genius (current — slightly more complex) */
background:
  radial-gradient(1100px 600px at 50% -10%, rgba(106,169,255,.10), transparent 60%),
  radial-gradient(700px 400px at 90% 30%, rgba(86,211,156,.045), transparent 60%),
  var(--bg);

Agentic Hub uses a single, tighter top-center blue bloom. Genius adds a secondary teal bloom at 90% right — a subtle but real difference; remove the secondary gradient to match exactly, or keep it (it's additive, not garish).

---

Typography Stack


font-family: 'Inter', sans-serif;          /* body, UI labels */
font-family: 'JetBrains Mono', monospace;  /* eyebrows, tags, numbers, chains */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

Type Scale

|---|---|---|---|---|

| H3 (card title) | 1.16rem | 700 | -.01em | ink |

| H4 (flow title) | 1rem | 700 | 0 | ink |

| Eyebrow (mono) | .72rem | — | .22em | accent |

| Section label (mono) | .72rem | — | .18em | mute |

| Lede / body | 1.08rem | — | 0 | dim |

| Card desc | .9rem | — | 0 | dim |

| Card promise | .86rem | 500 | 0 | accent |

| CTA link | .82rem | 600 | 0 | ink |

| Tags (mono) | .6rem | — | .1em | good |

| Stats label | .8rem | — | 0 | mute |

| Footer | .78rem | — | 0 | mute |

| Tier price | 1.7rem | 800 | 0 | ink |

| Tier name (mono) | .7rem | 800 | .14em | accent |

Line height: body 1.6, hero 1.05.

Heading Gradient (verbatim)


background: linear-gradient(100deg, #6aa9ff, #9ec9ff 55%, #56d39c);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

---

Spacing Rhythm

Base unit: 4px (0.25rem). All multiples of 4.

| Token | Value |

|---|---|

| Container max-width | 1080px |

| Container padding | clamp(2.6rem, 6vw, 5rem) 1.4rem 6rem |

| Card padding | 1.5rem 1.4rem |

| Card gap | 1rem |

| Section gap (above sec label) | 2.6rem |

| Section label bottom | 1.2rem + 0.7rem border |

| Card-img height | 148px |

| Hero img height | clamp(180px, 27vw, 280px) |

| Icon box | 42×42px |

| Flow block padding | 1.8rem 1.6rem |

| Waitlist block padding | 1.9rem 1.7rem |

| Tier grid gap | 0.8rem |

---

Shape Language

|---|---|---|---|

| Icon box (.ic) | 11px | 1px rgba(106,169,255,.25) | — |

| Tag pill | 6px | 1px rgba(86,211,156,.25) | — |

| Hero img | 18px | 1px solid --line | — |

| Flow block | 16px | 1px solid --line | — |

| Waitlist block | 18px | 1px rgba(106,169,255,.3) | — |

| Tier cards | 13px | 1px solid --line | — |

| Featured tier | 13px | rgba(106,169,255,.5) | — |

| CTA button | 11px | — | — |

No box-shadows on cards at rest. Hover shadow: implicit from translateY only.

---

Composition Patterns

Hero


[JetBrains Mono eyebrow — uppercase, accent]
[H1 — 800 weight, gradient span]
[Lede — dim, max-width 38rem, centered]
[Stats row — flex, gap 2.2rem, mute/ink]
[Hero image — full-width, 18px radius, 1px border]

Text-center, image below text (not beside it).

Section Separator


.sec {
  font-family: 'JetBrains Mono';
  font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
  margin: 0 0 1.2rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}

Plain monospace label at mute, ruled by a bottom border. No icon, no h2 in Agentic Hub — contrast with Genius's richer sec that has icon + h2 + count badge.

Card Grid


.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }

Two rows of 3 cards. Each card: flex-column, image top, icon+number row, h3, promise (accent), desc (dim), open CTA with animated arrow.

Card anatomy (top to bottom):

1. .card-img — 148px image bleed to edges, top-rounded

2. .tag — absolute top-right, green pill (Live status)

3. .card-top — flex row: .num (mono, mute) right-aligned

4. h3 — title

5. .promise — accent colored one-liner

6. .desc — dim body copy, flex:1

7. .open — "Open X →" with animated arrow

Flow / Narrative Block

Single full-width card below the grid. Prose + a .chain row of mono-tagged spans connected by accent arrows (→).

Waitlist / CTA Block

Gradient card (linear-gradient(150deg,#161a26,#12141b 75%)), accent border, 3-col tier grid inside, email form below.

Navigation

None in Agentic Hub. Clean page — no sticky nav. (Genius has a sticky pill nav; keep it as Genius-specific enhancement.)

Footer


footer { margin-top: 3rem; text-align: center; font-size: .78rem; color: var(--mute); }

Two lines: brand name bold, attribution line. No border. No links.

---

Motion


/* Cards */
transition: border-color .2s, transform .15s, background .2s;
.card:hover { border-color: rgba(106,169,255,.5); transform: translateY(-3px); background: var(--raised); }

/* Arrow */
.open .arrow { transition: transform .15s; }
.card:hover .open .arrow { transform: translateX(4px); }

/* Input focus */
.wl-form input:focus { outline: 0; border-color: var(--accent); }

No entrance animations, no keyframes, no scroll-triggered reveals. All transitions are hover-only, duration 150–200ms. Deliberate restraint — the page loads static.

---

Gradient Recipes


/* Hero heading gradient */
linear-gradient(100deg, #6aa9ff, #9ec9ff 55%, #56d39c)

/* Waitlist block background */
linear-gradient(150deg, #161a26, #12141b 75%)

/* Body background bloom */
radial-gradient(820px 480px at 50% -8%, rgba(106,169,255,.13), transparent 64%)

---

Key Markup Skeleton


<div class="wrap">
  <header>
    <div class="eyebrow">Section · Label</div>
    <h1>Headline with <span class="grad">gradient part.</span></h1>
    <p class="lede">Supporting lede copy...</p>
    <div class="stats">
      <div><b>6</b> live MVP demos</div>
      ...
    </div>
    <div class="hero-img" style="background-image:url(...)"></div>
  </header>

  <div class="sec">Section label text</div>
  <div class="grid">
    <a class="card" href="...">
      <div class="card-img" style="background-image:url(...)"></div>
      <span class="tag">Live</span>
      <div class="card-top">
        <span class="num">01</span>
      </div>
      <h3>Card Title</h3>
      <div class="promise">One-liner value prop in accent color.</div>
      <div class="desc">Body copy in dim.</div>
      <div class="open">Open Card <span class="arrow">&rarr;</span></div>
    </a>
  </div>

  <div class="flow">
    <h4>Narrative heading</h4>
    <p>Prose...</p>
    <div class="chain">
      <span>Step A</span><i>&rarr;</i><span>Step B</span>
    </div>
  </div>

  <footer>
    <p><b>Brand Name</b> &mdash; tagline</p>
  </footer>
</div>

---

Delta: Agentic Hub vs Genius (what Genius needs to change)

|---|---|---|---|

| --line | #2a2e3a | #23262f | Update Genius to #2a2e3a |

| Container max-width | 1080px | 1120px | Tighten to 1080px |

| Card grid min-width | 20rem | 14rem | Genius tiles are smaller chips — use 20rem for feature sections |

---

Written by SCOUT · 2026-05-24 · For the design agent reskinning Genius.