Confluxion Design Kit

Brand voice, colors, type, and writing rules. Source: ~/picasso/confluxion-design-kit.md

Version 1 · June 28, 2026 brandreference

Content

# 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
| Name | Hex | Use for |
|------|-----|---------|
| Ink / Navy | `#0F1E3D` | Primary text, button bg, logo strokes, contact panel bg |
| Ink deep | `#050E22` | Hover state on navy buttons, deep accents |
| Ink soft | `#4B5563` | Body copy |
| Ink mute | `#6B7280` | Eyebrows, captions, fine print |
| Accent (amber) | `#C2811A` | One word per headline; CTA arrow circle; logo center dot |
| Accent deep | `#92610F` | Accent hover |
| Accent soft | `#E8C988` | Subtle accent moments (eyebrow on navy panel) |
| Accent pale | `#F6E9CC` | Accent tag backgrounds |

### Surface
| Name | Hex | Use for |
|------|-----|---------|
| Cream | `#ffffff` | Page background (default) |
| Cream soft | `#F1F3F5` | Subtle alt sections, table stripes |
| Paper warm | `#F8F5EF` | Warm cream surface — pull quotes, stat sections |

### Rules / Borders
| Name | Hex | Use for |
|------|-----|---------|
| Rule | `#E5E7EB` | Hairline borders on cards, dividers |
| Rule soft | `#F1F3F5` | Lighter dividers |

## Typography Scale

### Display (Inter, weight 800, tight)
| Class | Mobile size | Desktop size (md+) | Use for |
|-------|-------------|--------------------|---------|
| `display-xxl` | 3.2rem | 6.4rem | Hero headline |
| `display-xl`  | 2.6rem | 4.6rem | Section H2 |
| `display-lg`  | 2.1rem | 3.2rem | Sub-section header |
| `display-md`  | 1.7rem | 2.4rem | Service card titles |

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

### Body
| Style | Size | Line height | Use for |
|-------|------|-------------|---------|
| Lead | 1.05rem (1.18rem md+) | 1.55 | Hero/section intro paragraphs |
| Base | 1rem (1.05rem md+) | 1.55 | Standard body copy |
| Small | 0.92rem | 1.5 | Captions, footer |
| Mini | 0.85rem | 1.4 | Hero CTA helper, photo captions |
| Fine | 0.72rem | 1.3 | Disclaimers, eyebrow |

### Special
| Style | Spec | Use for |
|-------|------|---------|
| Eyebrow | uppercase, 0.72rem, font-weight 700, tracking 0.16em, color `#6B7280` | Section labels |
| Eyebrow on navy | same, color `#E8C988`, with `#C2811A` dot prefix | Section labels on navy panels |

## 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
| Token | Value |
|-------|-------|
| Border | `1px solid #E5E7EB` |
| Radius (cards) | `0` — Confluxion uses hard corners on content cards |
| Radius (pills / buttons / tags) | `9999px` |
| Radius (input fields) | `8px` |
| Card shadow | **None** — use hairline border + (optional) inset corner accent stroke instead |

## Z-index Stack
| Layer | Value |
|-------|-------|
| Modal | 1010 |
| Takeover modal | 1011 |
| Dropdown | 1012 |
| Toast | 1013 |
| Tooltip | 1014 |

---

# PART 2 — COMPONENT SPECS

## Buttons

### Primary CTA (the signature)
Pill shape, navy background, cream text, **circular amber arrow on the left**.

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

```css
.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
```html
<a href="#" class="btn-link">See what we sell <span aria-hidden>→</span></a>
```

```css
.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)
```html
<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>
```

```css
.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)
```html
<p class="eyebrow">What we sell</p>
```
```css
.eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #6B7280;
}
```

### On navy panel
```html
<p class="contact-eyebrow">
  <span class="contact-eyebrow-dot"></span>
  Talk to us
</p>
```
```css
.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.

```html
<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>
```

```css
.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.

```css
.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

```html
<header class="topnav">
  <div class="topnav-inner">
    <a href="/" class="topnav-logo"></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>
    
  </div>
</header>
```

```css
.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)

```css
.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.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Confluxion · [Deck Topic]</title>
  
  <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>
  
  <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></span>
      <span>1 / N · confluxionpoint.com</span>
    </div>
  </section>

<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></span>
      <span>2 / N · confluxionpoint.com</span>
    </div>
  </section>

</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

Change notes (optional)

Cancel