Confluxion Point AI Design Kit

Source of truth for building Confluxion-Point-branded UI. Drop this file into any AI agent (Claude, ChatGPT, Cursor, etc.) before asking it to build anything Confluxion-related.

How to use: Paste this file into your AI tool and say: "Use this Confluxion design kit to build [what you need]."

PART 1 — DESIGN TOKENS

Fonts

• Sans (primary): Inter (weights: 400, 500, 600, 700, 800)
• Serif (italic only): Cormorant Garamond (weights: 500, 600, 700 — italic style)
• Fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
• Feature settings: font-feature-settings: "ss01", "cv11";

Cormorant Garamond is used italic only and only for:

• The wordmark ("Confluxion Point")
• Pull-quote serif accents
• The rare in-body name-drop

Never use Cormorant for body, headings, or buttons.

Colors

Brand

Surface

Rules / Borders

Typography Scale

Display (Inter, weight 800, tight)

Display globals:

• font-weight: 800
• letter-spacing: -0.028em (mobile), -0.035em (xxl desktop)
• line-height: 0.98

Body

Special

Spacing

4px base grid. Common multiples: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px.

Section padding desktop: padding: 80px 0 to padding: 112px 0. Section padding mobile: padding: 64px 0 to padding: 80px 0. Container: max-width: 1280px; margin: 0 auto; padding: 0 48px; (mobile: padding: 0 24px;)

Borders & Radius

Z-index Stack

PART 2 — COMPONENT SPECS

Buttons

Primary CTA (the signature)

Pill shape, navy background, cream text, circular amber arrow on the left.

<a href="#" class="btn-pill">
  <span class="arrow-circle">›</span>
  Book a 20-min Call
</a>

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0F1E3D;
  color: #ffffff;
  border: none;
  padding: 14px 28px 14px 14px;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
}
.btn-pill:hover { background: #050E22; }
.btn-pill-lg { padding: 18px 36px 18px 18px; font-size: 1.06rem; }

.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #C2811A;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1;
}
.btn-pill-lg .arrow-circle { width: 40px; height: 40px; font-size: 1.25rem; }

Text / link button

<a href="#" class="btn-link">See what we sell <span aria-hidden>→</span></a>

.btn-link {
  font-family: Inter;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0F1E3D;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(15, 30, 61, 0.3);
  transition: text-decoration-color 160ms;
}
.btn-link:hover { text-decoration-color: #C2811A; }

Cards

Service card (hardcorner, hairline border)

<div class="service-card">
  <p class="service-num">01</p>
  <h3 class="display display-md">Fractional Data & Ops Leadership</h3>
  <p class="service-body">A senior data and operations partner embedded into your firm — without the head count line.</p>
  <ul class="service-bullets">
    <li><span class="mark">›</span> Data strategy &amp; 12-month roadmap</li>
    <li><span class="mark">›</span> Vendor selection &amp; migrations</li>
    <li><span class="mark">›</span> Hiring your first data hire</li>
  </ul>
</div>

.service-card {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-card.is-featured {
  background: #F8F5EF;
  border-color: #C2811A;
}
.service-num {
  font-family: Inter;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: #C2811A;
}
.service-body {
  font-size: 0.96rem;
  line-height: 1.55;
  color: #4B5563;
}
.service-bullets { list-style: none; padding: 0; margin: 0; }
.service-bullets li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.92rem;
  color: #4B5563;
  padding: 4px 0;
}
.service-bullets .mark { color: #C2811A; font-weight: 800; }

Eyebrows

Standard (on cream)

<p class="eyebrow">What we sell</p>

.eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #6B7280;
}

On navy panel

<p class="contact-eyebrow">
  <span class="contact-eyebrow-dot"></span>
  Talk to us
</p>

.contact-eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #E8C988;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #C2811A;
  border-radius: 9999px;
}

Stat / counter blocks

The Confluxion "PullQuote" pattern — big amber digit, short serifish body.

<section class="pullquote">
  <p class="eyebrow">From a prior engagement</p>
  <div class="pullquote-counter">
    <span class="pullquote-counter-num">2.5×</span>
    <span class="pullquote-counter-unit">ROI in year one</span>
  </div>
  <p class="pullquote-text">
    <span class="block">of busy work,</span>
    <span class="accent block">freed up for the real work.</span>
  </p>
</section>

.pullquote {
  background: #F8F5EF;
  padding: 80px 48px;
  text-align: center;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.pullquote-counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.pullquote-counter-num {
  font-family: Inter;
  font-weight: 800;
  font-size: 6.4rem;
  color: #C2811A;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pullquote-counter-unit {
  font-size: 1.25rem;
  color: #4B5563;
}
.pullquote-text { margin-top: 16px; font-family: Inter; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.028em; line-height: 1.1; }
.pullquote-text .accent { color: #C2811A; }
.pullquote-text .block { display: block; }

Contact / CTA block (navy panel)

The footer/CTA block at the bottom of every page.

.contact-block {
  background: #0F1E3D;
  color: #ffffff;
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}
.contact-block h2 { color: #ffffff; }
.contact-block .accent-orange { color: #C2811A; }
.contact-block p { color: rgba(255, 255, 255, 0.92); }
.contact-block .text-cream-soft { color: rgba(255, 255, 255, 0.7); }
.contact-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.18;
  pointer-events: none;
}
.contact-glow-1 { background: #C2811A; top: -200px; right: -100px; }
.contact-glow-2 { background: #4B5563; bottom: -300px; left: -150px; opacity: 0.12; }

.contact-cta-pill { background: #C2811A; }
.contact-cta-pill:hover { background: #92610F; }
.contact-cta-pill .arrow-circle { background: #ffffff; color: #0F1E3D; }
.contact-link {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.contact-link:hover { text-decoration-color: #C2811A; }

Text contrast rules for the navy panel:

• Body text: rgba(255, 255, 255, 0.92) — never rgba(... , 0.7) or slate gray
• Eyebrows: #E8C988 (amber-soft) with a #C2811A dot prefix
• Captions / footer-style text inside the navy block: rgba(255, 255, 255, 0.7) is OK

Top nav

<header class="topnav">
  <div class="topnav-inner">
    <a href="/" class="topnav-logo"><!-- wordmark + mark --></a>
    <nav class="topnav-nav">
      <a href="/#services">Services</a>
      <a href="/#process">Process</a>
      <a href="/#work">Work</a>
      <a href="/ai-trainings">AI</a>
      <a href="/#about">Partners</a>
      <a href="/articles">Insights</a>
      <a href="/faq">FAQ</a>
      <a href="/#contact">Contact</a>
    </nav>
    <!-- CTAPill on the right -->
  </div>
</header>

.topnav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #E5E7EB;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topnav-nav {
  display: none;
  gap: 32px;
}
@media (min-width: 768px) { .topnav-nav { display: flex; } }
.topnav-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #4B5563;
  text-decoration: none;
  transition: color 160ms;
}
.topnav-nav a:hover { color: #0F1E3D; }

PART 3 — VOICE & COPY

Confluxion Point is a firm. The site, decks, and PDFs read as a small team, not a freelancer.

Always

• we / us / our — never I / me
• Anchor on value (dollars saved, hours back, ROI multiple, payback months) — never on speed of build ("weekend project," "I built this fast")
• Anchor headline ROI claim: "Most builds pay back 2.5× in year one"
• Use the existing taglines verbatim when they fit:
  • "Your team should be in the field. Not the spreadsheet."
  • "Twenty minutes. No pitch."
  • "Shipped in weeks, not quarters."
  • "Field first. Office second. Spreadsheets, last."

Never

• "I" / "me" / "my" in any client-facing copy
• Calling Confluxion a "side project" or "weekend build"
• Mentioning the $30K starting price in cold outreach (price belongs in the discovery call)
• Generic AI hype language ("revolutionary," "AI-powered," "next-gen")
• Pure motion adjectives without numbers ("fast," "quick," "rapid" — always pair with a concrete number)

Headline patterns that work

• Big statement + one accent-orange word: "Your team should be in the <span class="accent-orange">field</span>."
• Number-led: "<span class="accent-orange">2.5×</span> ROI in year one."
• Permission framing: "Twenty minutes. No deck."
• Loss framing: "$25,000 a year on a workflow we can automate in 6 weeks."

PART 4 — LAYOUT PATTERNS

Landing/hero pattern (most common ask)

[Top nav with 8 links, CTAPill on right]
[Hero: 7-col headline + 5-col chart/visual]
  - Eyebrow (optional)
  - display-xxl headline with one accent-orange word
  - Body paragraph with bold opener, ROI anchor, soft close
  - Primary CTAPill + secondary btn-link
  - Mini helper line ("Twenty minutes. No deck.")
[TrustBar: logo strip of integrations]
[Section: pain points or "Meet your enemy"]
[PullQuote stat block]
[Services 3-up grid (featured middle card on cream warm)]
[Process steps]
[From/to diagram or before/after]
[Results / case study tiles]
[Mission/about block]
[Partners]
[Contact navy panel]
[Footer]

Pitch slide pattern (single 16:9 slide)

.slide {
  width: 1280px;
  height: 720px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 80px;
  position: relative;
}
.slide-eyebrow { /* top-left */ }
.slide-headline { /* big display-xl or display-xxl */ }
.slide-body { /* max-width: 60ch */ }
.slide-footer {
  position: absolute;
  bottom: 32px;
  left: 80px;
  right: 80px;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #6B7280;
}

Slide footer always: wordmark + page number + confluxionpoint.com.

Multi-slide deck pattern (one HTML → one multi-page PDF)

For decks: put every slide in ONE HTML file, separated by .slide sections with page-break-after: always. Chrome headless print produces one PDF page per slide.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Confluxion · [Deck Topic]</title>
  <!-- Google Fonts + base CSS goes here -->
  <style>
    @page { size: 1280px 720px; margin: 0; }
    body { margin: 0; background: #ffffff; }
    .slide {
      width: 1280px;
      height: 720px;
      padding: 80px;
      position: relative;
      display: flex;
      flex-direction: column;
      page-break-after: always;
      break-after: page;
      overflow: hidden;
    }
    .slide:last-child { page-break-after: auto; break-after: auto; }
    .slide-footer {
      position: absolute;
      bottom: 32px;
      left: 80px;
      right: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      color: #6B7280;
    }
    /* Title slide variant: navy background, cream text */
    .slide.is-title { background: #0F1E3D; color: #ffffff; }
    .slide.is-title .slide-footer { color: rgba(255,255,255,0.7); }
    /* Stat slide variant: warm cream */
    .slide.is-stat { background: #F8F5EF; text-align: center; justify-content: center; }
  </style>
</head>
<body>
  <!-- Slide 1: Title -->
  <section class="slide is-title">
    <p class="eyebrow" style="color:#E8C988;">Pitch · [Date]</p>
    <h1 class="display display-xxl" style="margin-top:auto;color:#ffffff;max-width:60ch;">
      <span style="display:block;">The deck title goes</span>
      <span style="display:block;">in <span class="accent-orange">two lines</span>.</span>
    </h1>
    <div class="slide-footer">
      <span><!-- wordmark --></span>
      <span>1 / N · confluxionpoint.com</span>
    </div>
  </section>

  <!-- Slide 2: Stat -->
  <section class="slide is-stat">
    <p class="eyebrow">From a prior engagement</p>
    <div style="display:flex;align-items:baseline;justify-content:center;gap:16px;margin-top:24px;">
      <span style="font-family:Inter;font-weight:800;font-size:12rem;color:#C2811A;line-height:1;letter-spacing:-0.04em;">2.5×</span>
      <span style="font-size:1.5rem;color:#4B5563;">ROI in year one</span>
    </div>
    <div class="slide-footer">
      <span><!-- wordmark --></span>
      <span>2 / N · confluxionpoint.com</span>
    </div>
  </section>

  <!-- More slides... -->
</body>
</html>

Slide types to keep in your back pocket:

• .slide.is-title — navy bg, cream text, big headline (always slide 1)
• Default .slide — cream bg, headline + body
• .slide.is-stat — paper-warm bg, centered big stat
• .slide.is-quote — paper-warm bg, large pull quote in serif italic Cormorant Garamond
• .slide.is-cta — navy bg, cream text, big "Twenty minutes. No pitch." closer

Footer convention on every slide: wordmark on the left, page number + confluxionpoint.com on the right, 0.85rem, #6B7280 (or cream/0.7 on navy slides).

Case study / one-pager

Single page, max-width 720px, vertical flow:

1. Eyebrow ("Case study · 2025")
2. Big display-lg client name + workflow
3. The before: paragraph
4. The build: bulleted list
5. Stat row (3 stats horizontal: hours back, dollars saved, ROI multiple)
6. Quote from the buyer (use pullquote pattern)
7. Contact CTA bottom

PART 5 — DON'T DO

1. ❌ Don't use system-ui as a body font — Inter only
2. ❌ Don't use Calibre, DM Sans, Geist, or any Leland-era font
3. ❌ Don't put drop shadows on cards
4. ❌ Don't use blue/green status colors — Confluxion's accent is amber (#C2811A) only
5. ❌ Don't use square buttons — pill shape with arrow-circle is the signature
6. ❌ Don't write "I built" or "weekend project" anywhere
7. ❌ Don't use the wordmark without the LogoMark beside it (mark goes to the right)
8. ❌ Don't write headlines without one accent-orange word — every hero gets one
9. ❌ Don't use Cormorant Garamond outside italic display moments
10. ❌ Don't use slate gray (#94a3b8 etc.) on the navy panel — body text on navy is cream at ≥0.92 alpha