01 — Logos

Marks, lockups, and downloads.

The Parcion icon is always rendered in Parcion Gold (#B99A38). The full lockup pairs the icon with the wordmark and the descriptor "PRIVATE WEALTH." Use the lockup in most applications; reserve the icon-only and wordmark-only treatments for genuine sizing constraints. Click any file below to download.

Primary lockup

Reversed (for dark backgrounds)

Icon + wordmark + "PRIVATE WEALTH" descriptor. White type with gold icon.

SVG PNG

Primary (for light backgrounds)

Icon + wordmark + "PRIVATE WEALTH" descriptor. Black type with gold icon.

SVG PNG

Alternate lockup (no descriptor)

Use sparingly. Reserved for tight spaces like website headers, footers, and small-format placements where "PRIVATE WEALTH" would be illegible or cut off.

Alternate, reversed

Icon + "PARCION" wordmark only. For dark backgrounds where "PRIVATE WEALTH" would be illegible or cut off.

SVG PNG

Alternate, primary

Icon + "PARCION" wordmark only. For light backgrounds where "PRIVATE WEALTH" would be illegible or cut off.

SVG PNG

Icon only

Use sparingly. Reserved for social avatars, favicons, app icons, and secondary brand patterns where the full lockup cannot sit comfortably. Always rendered in Parcion Gold.

Icon, on dark

Social avatar, favicon, app icon. Use sparingly.

SVG PNG

Icon, on light

Letterheads, documents, secondary patterns. Use sparingly.

SVG PNG

Rules

Use

The primary lockup in most applications
The icon in Parcion Gold (#B99A38), always
The reversed lockup on Off-Black or other approved dark surfaces
Adequate clear space: at least the height of the icon on every side
SVG wherever possible. PNG when SVG is not supported (Office, Slack, social, ad platforms). Export PNG at 2-3× the largest display size.

Avoid

Recoloring the icon. Gold only.
Stretching, rotating, or applying drop shadows to any mark
Placing the lockup on busy photography without a tonal panel behind it
Using the wordmark alone where the icon would also fit comfortably
JPG versions of any logo file. JPG can't hold a clean transparent background.

Developer note: Hatched links above are placeholders. Drop the files into the same folder as this guide using the exact filenames shown in the tooltip (e.g. parcion-primary.svg), and each download will start working without further edits.

02 — Imagery

Approved Parcion photography.

A working library of brand-approved images. Editorial restraint: think film photography, natural light, lived-in luxury. Black and white for people; Kodak Portra-inspired color for environments. No generic stock. No hyper-saturated processing. One strong image, used well, beats three competing visuals.

Default hero images

Two hero defaults govern most outputs. Use these unless there's a defensible reason to pick another. All other images below are options the AI or layout designer may reach for when the default doesn't fit.

Default · Non-financial hero

Use for: brand, About, Approach, Team, Signature Event, philanthropy, lifestyle, recruiting, general marketing. Manifest key: default_hero_general.

View full

Default · Financial hero

Use for: market commentary, Parcion Perspectives, investment strategy, portfolio reporting, tax planning, business sale, ESOP, M&A, performance pieces. Manifest key: default_hero_financial.

View full

Portraits & people

Black-and-white, Ilford Delta tonal feel. Used for team, clients, and human moments. Often paired with dark backgrounds. Portraits are one-off commissions per person, sourced from the team page on parcionpw.com or directly from the Parcion photo library; not download-managed from this guide.

Color & editorial

Kodak Portra-inspired tonal range. Used for lifestyle, environment, and editorial moments. Best on dark surfaces with a soft gradient transition between image and background.

Image 01 · Ferry on Puget Sound, Mt. Rainier at sunset

Hopeful, inspiring, warm. Strong scenic option for non-financial editorial.

View full

Image 02 · Ferry on Puget Sound, Olympic Mountains

Alternate to Image 01. Less dramatic, more restrained. Use in place of Image 01 when the layout needs a quieter scenic.

View full

Image 03 · Container ship

Conveys movement, industry, and Parcion's connection to blue-collar, business, and industrial clients. Strong for business-owner-focused content.

View full

Image 04 · Jobsite at sunset FAVORED

Inspiring, well-framed, shows development and construction. Favored editorial option for business-owner, builder, and industrial-client content.

View full

Image 05 · Shipping abstract, through a ferry

Alternate to Image 03. More abstract framing of shipping/industry. Use in place of Image 03 when the layout calls for atmosphere over literal subject.

View full

Image 06 · Seattle / Puget Sound, place-led

Alternate to Image 01. Establishes place — Seattle and the Puget Sound — more clearly than Image 01. Use when location matters to the piece.

View full

Image 07 · Mountain climbers

Inspiring. Resilience, ambition, scale. Pairs well with content about long-term planning, generational wealth, and what comes next.

View full

Image 08 · Parcion logo on frosted glass, office

Shot in the Parcion office. Use when the layout calls for the firm to appear in image, confidently and without staging. Good for About, Approach, recruiting.

View full

Banners & landscapes

Landscape format for LinkedIn banners and full-width web heroes. Aspirational scenery, nature, open road, depth. Always pair with a dark gradient overlay on the side where the logo will sit.

Banner 01

2048 × 1365. LinkedIn banner, web hero, email header.

View full

Banner 02

4240 × 2832. LinkedIn banner, web hero, email header.

View full

Banner 03

5184 × 3456. LinkedIn banner, web hero, email header.

View full

Rules

Use

Photography that looks like a real photographer shot it with intention
Natural light, soft focus, honest expression
Lived-in environments with depth and tone
Black-and-white for people, color on dark surfaces for environments
One strong photo per layout. Restraint reads as quality.

Avoid

Generic corporate stock, anything that looks like a "wealth management" image search
Overprocessed, hyper-saturated, or stylized treatments
AI-generated photography or composites
Stiff, posed, performative subjects
Images you wouldn't want to see printed and framed

Sourcing stock outside the library

If the approved Parcion library doesn't have what you need, unsplash.com is the approved fallback for editorial-quality stock. Always check with Marketing before publishing anything sourced this way. Do not use Getty, Shutterstock, or generic corporate libraries.

To populate this section: Send a URL (Vercel, Sanity, Cloudflare, any public CDN) and a one-line description for each image. I'll wire each one into the appropriate category card.

03 — Voice

Clear. Confident. Human.

Parcion sounds like a trusted advisor who has seen this before, knows exactly what to do, and is completely focused on you. Calm, confident, and deeply knowledgeable.

Four tonal qualities

Clear. Not simple, but never needlessly complex. Every sentence earns its place.

Confident. Not arrogant, not hedged. "We recommend," not "we think."

Warm. Human, not corporate. "Families," not "high-net-worth individuals."

Precise. No wasted words, no vague claims. Specificity builds credibility.

Use

"Families" over "clients" when possible
"Business owners" or "entrepreneurs"
"Wealth event" or "liquidity event"
"Leading up to, through, and after"
"Unlock the true potential"
"Advocate," "coordinated," "private family office"

Avoid

Em dashes. Always.
"Quarterback," "holistic," "synergy," "leverage" (as a verb)
"Best-in-class," "world-class," "robust"
"HNWIs," "heirs," "solutions," "transaction" (alone)
Exclamation points in client-facing or thought leadership copy
Italics for emphasis or decoration. Italic is reserved for direct quotations and titles of works only.

Voice in practice

Off-brand

Hope this email finds you well! I wanted to touch base on our holistic wealth management solutions and how we can leverage your upcoming liquidity event.

On-brand

As your business sale approaches, I wanted to make sure we have the right plan in place for the proceeds. There are a few decisions in the next 90 days that will have a meaningful impact on your tax situation, and I'd like to walk you through them before anything is finalized.

Off-brand

Parcion Private Wealth offers a full suite of best-in-class wealth management solutions for high-net-worth individuals and their families.

On-brand

Parcion works exclusively with business owners and their families, guiding them leading up to, through, and after the sale of their business. We help them keep more of what they've built, take care of the people they love, and figure out what comes next.

04 — Color

Black-led palette, gold sparingly.

Parcion's dominant surface is black, not navy. Off-Black (#0B0B0B) is the brand's anchor color across web, deck, and print. Gold is a small, deliberate accent: eyebrows, rules, key data points, and the icon. White space carries the weight.

Primary palette

Neutrals first, then the three values of gold. All values are official Parcion brand colors. The surface bias is black, not navy; navy lives in the secondary palette below.

Off-Black

#0B0B0B — Primary surface

Pure Black

#000000 — Logo, type

Carbon

#161616 — Inset panels

Charcoal

#2D2D2C — Body on light

Off-White

#F7F7F7 — Primary light

Light Gray

#D6D6D6 — Dividers

Parcion Gold

#B99A38 — Accent only

Gold Dark

#8D762E — Accent on light

Gold Deeper

#6C5A23 — Shadow, depth

Color rules

Use

Off-Black (#0B0B0B) as the dominant dark surface across web, document, and deck
Off-White (#F7F7F7) as the dominant light surface
Gold for eyebrows, hairline accents, key data points, and the icon
Gold on Black, never gold on Off-White at large size (use Gold Dark on light)

Avoid

Navy (#00141C) as a primary surface. It reads as indigo on most screens. Reserved for data visualization only.
Gold as a heading color or fill. Gold is an accent, never a background or H1.
Introducing colors outside the palette into brand materials
Gradient backgrounds. Gradients are for tonal photo blending only.

Secondary palette (data visualization only)

These colors exist exclusively for charts, graphs, and financial tables that require multiple colors to separate meaning. They are not for backgrounds, headings, or decorative use. Grouped here by family the way the brand book presents them. Navy lives here because the brand book preserves it; reserve it for chart contexts only.

Burgundy

Burgundy Dark

#6A2E35

Burgundy

#8E3E48

Burgundy Mid

#AA4B56

Rust

Rust Dark

#AE3009

Rust

#C2350A

Rust Bright

#D53A0B

Warm Gold

Warm Gold Light

#C3A446

Warm Gold

#CDB365

Warm Gold Pale

#D7C284

Forest & Sage

Forest Dark

#48614A

Forest

#446459

Sage

#8DB999

Steel Blue

Steel Blue Dark

#122735

Steel Blue

#1E6685

Steel Blue Bright

#2A8CB7

Slate & Navy

Slate

#7F88A6

Navy Deep

#00141C — Data only

05 — Typography

Three faces. Calm hierarchy.

Brother 1816 for headings, Palatino Linotype for body, Aptos for tables and data. Century Gothic substitutes for Brother 1816 in Microsoft environments. The scale is intentionally restrained: H1 sits between 32px and 44px, matched to parcionpw.com. Gold is never used as heading text.

Type specimens

H1 / Display Unlock your wealth's potential

H2 / Section Welcome to a new phase of life

H3 / Subhead Discover wealth management for wealth creators

H4 / Label Awards & recognition

Eyebrow Client Exclusive Events

Body As a fully independent advisory firm, Parcion has the flexibility to deliver concierge planning that extends beyond portfolio management.

Pull quote

Clarity creates confidence.

On dark

Unlock your wealth's potential

Headings on dark surfaces remain white. Gold is reserved for the eyebrow above and for small accent moments inside the layout. H1 padding stays generous below, restrained above.

Rules

Use

Brother 1816 (Book or Bold) for all display type; Century Gothic in Microsoft files
H1 in ALL CAPS, white on dark or off-black on light, 32–44px responsive
Generous tracking on H1 and H2 (0.06em–0.18em)
Palatino Linotype Regular for body copy at 16px, line-height 1.6
Aptos for tables, charts, data labels, and legal callouts
Small caps, bold, or a rephrase whenever you would otherwise reach for italic
Italic only for direct quotations and titles of works (books, films, publications, vessels)

Avoid

Gold as H1 text. The brand reads black-and-white with a gold thread, not the other way around.
H1 sizes above 44px on web. Larger sizes belong to print covers, not body pages.
Italics for emphasis anywhere. Italic is reserved for direct quotations and titles of works only.
Center alignment for long-form body copy
Mixing more than two weights inside a single page
Hyphenation in layout copy

06 — Tables & Data

Editorial, analytical, never decorative.

Tables read at 15px (one step up from prior templates) for comfortable on-screen and printed reading. Headers sit on Parcion Gold with black type. Rows alternate white and #F2F2F2. Numbers tabulate.

Beneficiary	Age	Share	Amount	Distribution method & notes
Child 1, Eldest Married, operating own business	32	16.67%	$10,000,000	Outright distribution at age 32 with optional trust overlay for asset protection.
Child 2 Mid-career professional	29	16.67%	$10,000,000	Discretionary trust until 35; HEMS standard for trustee distributions.
Child 3, Youngest Completing graduate studies	25	16.67%	$10,000,000	Education and incentive trust; staggered access at 30, 35, and 40.
Family Foundation Donor-advised structure	—	50.00%	$30,000,000	Donor-advised fund funded at closing for ongoing philanthropic strategy.

Use

Aptos for all table type, headers in bold
Gold header, black type on gold
Alternating row colors: white / #F2F2F2
Right-aligned numbers with tabular-nums
One row per record. Notes belong in their own column.

Avoid

Vertical rules between columns. Rely on whitespace.
Bold inside body cells unless calling out a total
Color-coded rows for status. Use a small label cell instead.
More than five columns on screen at body width

Sample charts

Charts use the secondary palette for differentiation. Gold (#B99A38) is reserved for the line, bar, or segment that carries the point. Neutral tones do the rest of the work. Axis labels in Aptos, light gray, secondary to the data itself.

Performance

Portfolio growth vs. benchmark

Hypothetical, indexed to 100 at start. Gold line is the moment of emphasis.

Parcion portfolio Benchmark

Allocation

Asset class allocation

Sample target allocation. Gold marks the conviction overweight.

Emphasis position Baseline

Distribution

Where the proceeds went

Sample post-liquidity allocation across family priorities. Hypothetical.

Investment portfolio	40%	$24.0M
Estate & next-gen trusts	25%	$15.0M
Philanthropy (DAF)	20%	$12.0M
Reserves & liquidity	15%	$9.0M

On dark surfaces

Same data, same palette, dark background. Axis lines and labels lift to a lighter neutral so they remain legible without competing with the data.

Performance

Portfolio growth vs. benchmark

Hypothetical, indexed to 100 at start. Gold line is the moment of emphasis.

Parcion portfolio Benchmark

Allocation

Asset class allocation

Sample target allocation. Gold marks the conviction overweight.

Emphasis position Baseline

Distribution

Where the proceeds went

Sample post-liquidity allocation across family priorities. Hypothetical.

Investment portfolio	40%	$24.0M
Estate & next-gen trusts	25%	$15.0M
Philanthropy (DAF)	20%	$12.0M
Reserves & liquidity	15%	$9.0M

Chart rules

Secondary palette for series: forest, steel, burgundy, slate, sage. Gold for emphasis only.
Aptos for all chart type, neutral gray for axes and units
Bias legends toward the bottom or right, never floating over data
One idea per chart. If you need two, make two charts.
Always label the takeaway in the chart title, not just the topic

Avoid

Gold as a baseline or background data color
3D effects, drop shadows, glows, or gradients in chart fills
Pie/donut charts with more than five segments
Default Excel or PowerPoint chart styles
Truncated y-axes that exaggerate a small change

07 — Components

Buttons, rules, pull quotes.

Buttons

Primary on light is Off-Black with white text. Hover swaps to gold. Ghost variant carries an Off-Black outline. Buttons never use gold as the default fill.

Learn more See approach

Rules

A neutral hairline for content separation, and a gold hairline reserved for moments of brand emphasis.

Pull quote

A liquidity event is more than a transaction. It is a transition.

Dark surface preview

Pillar 03

Clarity creates confidence

Clients who can see their numbers, visualize their future, and trust their plan make better decisions and face the transition with less fear. Parcion's job is to produce that clarity.

Read the perspective

08 — AI Brief

The bottom line for any AI tool.

This file is designed to be uploaded into Claude Projects, ChatGPT custom GPTs, Copilot, Gemini, or pasted into a single prompt. The block below is the condensed brief. Everything in this document is authoritative for visual production. When the AI is unsure, it should default to the rules in this section.

SYSTEM BRIEF — Parcion Private Wealth visual production
=======================================================

ROLE
You are producing branded visual output for Parcion Private Wealth,
a private family office serving business owners and their families.
Match the rules below exactly. When in doubt, default to: black
surfaces, gold used sparingly as an accent, Brother 1816 headings,
restrained padding, no decoration.

COLOR (the brand reads BLACK, not navy)
- Primary dark surface:   #0B0B0B  (Off-Black) — use for every dark background
- Pure black:             #000000  (logo backgrounds only)
- Carbon inset panel:     #161616
- Body type on light:     #2D2D2C  (Charcoal)
- Primary light surface:  #F7F7F7  (Off-White)
- Paper / white:          #FFFFFF  (use sparingly)
- Light gray divider:     #D6D6D6
- Hairline on light:      #E5E5E5
- Hairline on dark:       #2A2A2A
- Mid gray secondary:     #6B6B6B
- Accent (sparingly):     #B99A38  (Parcion Gold)
- Accent on light bg:     #8D762E  (Gold Dark)
- Gold deeper:            #6C5A23  (shadow, depth)
- NEVER use #00141C as a primary background. Navy is reserved for
  data visualization only.

DATA-VIZ SECONDARY PALETTE (charts/graphs only, never page background)
- Burgundy Dark:  #6A2E35    Burgundy:        #8E3E48    Burgundy Mid:  #AA4B56
- Rust Dark:      #AE3009    Rust:            #C2350A    Rust Bright:   #D53A0B
- Warm Gold Lt:   #C3A446    Warm Gold:       #CDB365    Warm Gold Pl:  #D7C284
- Forest Dark:    #48614A    Forest:          #446459    Sage:          #8DB999
- Steel Dark:     #122735    Steel Blue:      #1E6685    Steel Bright:  #2A8CB7
- Slate:          #7F88A6    Navy Deep:       #00141C  (data only)

TYPE — EXTERNAL / WEB (default)
- Display:  Brother 1816.
- Body:     Palatino Linotype.
- UI/data:  Aptos.
- H1 — Brother 1816, Book, 40pt, ALL CAPS, generous tracking
- H2 — Brother 1816, Book, 24pt, ALL CAPS, same tracking as H1
- H3 — Brother 1816, Bold, 18pt, Mixed-Case
- H4 — Brother 1816, Book, 14pt, Mixed-Case
- Body — Palatino Linotype, Regular, 12–14pt
- Paragraph callout — Palatino Linotype, Bold, 14pt
- Functional / table body — Aptos, Regular or Medium, 12pt
- Legal callout — Aptos Narrow, 12pt, ALL CAPS
- Table headers / chart legends — Aptos, Bold

TYPE — MICROSOFT OFFICE (REQUIRED SWAP)
If the deliverable is a Microsoft Office file — Word (.docx),
PowerPoint (.pptx), Outlook email, Teams, or any other MS surface
— substitute Brother 1816 with Century Gothic on every heading.
This is not just a font swap; it carries the same structural rules:
- H1 — Century Gothic, Regular, 40pt, ALL CAPS
- H2 — Century Gothic, Regular, 24pt, ALL CAPS
- H3 — Century Gothic, Bold, 18pt, Mixed-Case
- H4 — Century Gothic, Bold, 14pt, ALL CAPS
- Body — Palatino Linotype (unchanged)
- Functional / table / data — Aptos (unchanged)
DO NOT substitute another sans-serif (Arial, Calibri, Helvetica)
for Century Gothic in internal materials. Brother 1816 is not
reliably installed on MS systems and falls back to a default font
that breaks the brand. Apply the swap to every heading level
before export.
- H1: ALL CAPS, clamp(32px, 3.2vw, 44px), letter-spacing 0.06em.
  White on dark, off-black on light. NEVER gold. NEVER serif.
- H2: ALL CAPS, 22px, letter-spacing 0.18em.
- H3: Mixed case, 17px, weight 600.
- Body: 16px / line-height 1.6.
- Tables: 15px Aptos. Gold header, black text on header.
- Pull quotes: ALL CAPS, Brother 1816, gold left rule.
- Italics: reserved for direct quotations and titles of works only. Never for emphasis. Never decorative. Never in headings.

VOICE (rules)
- Clear, confident, warm, precise.
- Never use em dashes. Use commas, colons, or short breaks.
- Always Oxford comma. Active voice. Short declarative sentences.
- No exclamation points in client-facing or thought-leadership copy.
- Italics: direct quotations and titles of works only. Never for emphasis. Never decorative. Never in headings.
- Open with the reader's situation, not the firm's credentials.
- "We" is fine; don't start three sentences in a row with it.

VOCABULARY — USE (preferred Parcion terms)
- "wealth event" / "liquidity event"      (not "transaction" alone)
- "business sale" / "business exit"       (not just "the deal")
- "families"                              (over "clients" when possible)
- "business owners" / "entrepreneurs"     (not "high-net-worth individuals")
- "leading up to, through, and after"     (the three-stage phrase)
- "unlock the true potential"             (approved core phrase)
- "clarity" / "confidence"                (pair these intentionally)
- "what's next"                           (natural concept, use freely)
- "advocate"                              (how Parcion describes its role)
- "partner" / "partnership"               (how Parcion describes the relationship)
- "coordinated" / "coordination"          (how Parcion aligns advisors)
- "life-changing"                         (appropriate for wealth events)
- "generational"                          (wealth, impact, planning)
- "bespoke"                               (Parcion's approach)
- "fiduciary"                             (standard Parcion holds itself to)
- "independent"                           (Parcion is fully independent)
- "private family office"                 (how Parcion categorizes itself)
- "the causes they care about"            (philanthropic framing)
- "taking care of the people they love"   (family legacy framing)
- "life simplification"                   (post-event complexity management)
- "smart planning, strong advocacy"       (describes Parcion's service)
- "select group of families"              (conveys exclusivity without arrogance)
- "your values, your vision, your concerns" (opening discovery framing)

VOCABULARY — AVOID (with replacements)
- "quarterback"             → "advocate," "coordinator," "trusted partner"
- "one-stop shop"           → too transactional; remove or rewrite
- "holistic"                → overused, vague; remove or be specific
- "seamless"                → overused; remove
- "synergy" / "synergistic" → corporate jargon; remove
- "leverage" (as a verb)    → "use," "draw on"
- "robust"                  → overused; be specific
- "best-in-class"           → hyperbolic; remove
- "world-class"             → use only in direct quotes from approved materials
- "revolutionary"           → not Parcion's register; remove
- "cutting-edge"            → not Parcion's register; remove
- "thought leadership"      → "perspective," "point of view," or the actual topic
- "wealth management firm"  → "private family office"
- "high-net-worth individuals" / "HNWIs" → "business owners," "families"
- "solutions"               → describe what Parcion actually does
- "product" (for services)  → "planning," "advice," specific service name
- "portfolio-centric"       → Parcion is not portfolio-first; rephrase
- "transaction" (alone)     → "wealth event," "sale" — never standalone
- "heirs"                   → "children," "next generation," "family members"
- "assets"                  → "wealth," "what they've built," or specific terms

GRAMMAR / MECHANICS
- Always Oxford comma. Never em dashes.
- Numbers vs. words: use numerals for statistics and data ("60+
  wealth events," "$3 billion"). Use words for small numbers in
  sentence context ("two goals," "three stages").
- Capitalize "Parcion" and "Parcion Private Wealth" exactly.
- "Signature Event" is capitalized. "What's Next?" includes the
  question mark.

LOGO RULES
- Default: full primary lockup (icon + wordmark + "PRIVATE WEALTH").
- On dark backgrounds: reversed lockup.
- Headers, footers, anywhere small or cramped: alternate lockup
  (icon + wordmark only, no descriptor).
- Icon (gold diamond mark): use sparingly — avatars, favicons, app
  icons. Always Parcion Gold (#B99A38). Never recolored.
- Clear space: at least the height of the icon on every side.

LAYOUT DEFAULTS
- Generous white space. Restraint reads as quality.
- Hero padding: 96–120px top, 120–144px bottom.
- Section padding: 96px top and bottom.
- Max content width: 1180px. Gutter: clamp(20px, 4vw, 56px).
- Card-style: 1px solid hairline, no shadows, no gradients.
- Hairline rules at 1px, in hairline gray or sparingly in gold.

CHART RULES
- Series colors from the secondary palette. Gold for emphasis only.
- Axis labels in Aptos, neutral gray, secondary to the data.
- Legends bias toward bottom or right. Never over the data field.
- One idea per chart. Title states the takeaway, not the topic.
- No 3D, drop shadows, glows, gradients, or truncated y-axes.

WHEN IN DOUBT
- Default to client-facing voice.
- Default to black-and-white with a thin gold thread.
- Default to fewer words.
- Default to the layout patterns in the "Recipes" section.

ASSETS
- All logo and image URLs are in the "Asset Manifest" section.
- Use those exact URLs when embedding imagery or logos.
- For decision logic ("which logo? which surface? gold or not?"),
  see the "Decision Rules" section.

IMAGE DEFAULTS (use these unless you have a defensible reason to pick another)
- Hero, non-financial topic   →  manifest.imagery.default_hero_general
    https://cdn.sanity.io/images/3phttdbo/production/
    01548b6a067a3fee4c7a1c9c42ca391074b9f44c-5760x3600.jpg
- Hero, financial topic       →  manifest.imagery.default_hero_financial
    https://cdn.sanity.io/images/3phttdbo/production/
    fc1a057432b72c5e344f2c9c65443e3fdf9da30f-4032x3024.jpg
- Banner / LinkedIn header    →  manifest.imagery.banners (any of the three)
- Anything else               →  pick from manifest.imagery.editorial_options

09 — Recipes

Copy-paste templates for the most common outputs.

When an AI is asked to "make a one-pager," "write a hero," or "build a LinkedIn slide," these are the working structures it should adapt. All recipes assume the brand stylesheet (parcion-brand.css) is loaded; tokens are provided inline as fallbacks. Do not invent new layouts when one of these will fit.

Recipe 01 — Hero block (dark, image background)

Use for: landing pages, microsite opens, email headers, top of a one-pager. The image is muted under a layered gradient so the headline stays readable.

<section style="
  position: relative;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.78) 0%,
      rgba(11,11,11,0.62) 60%, rgba(11,11,11,0.88) 100%),
    url('IMAGE_URL') center/cover no-repeat, #0B0B0B;
  color: #F7F7F7;
  padding: 120px 56px 144px;
">
  <p class="eyebrow">EYEBROW LABEL</p>
  <h1>Your headline, all caps, restrained.</h1>
  <p class="lede" style="max-width: 60ch; color: #D6D6D6;">
    Lede paragraph. Open with the reader's situation, not
    Parcion's credentials.
  </p>
</section>

Recipe 02 — Two-column section (eyebrow + headline + body)

Use for: any standard section on a light surface. The default content block.

<section style="padding: 96px 0; background: #F7F7F7;
  border-bottom: 1px solid #E5E5E5;">
  <div style="max-width: 1180px; margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);">
    <p class="eyebrow">SECTION LABEL</p>
    <h2>Section headline in all caps.</h2>
    <div style="display: grid;
      grid-template-columns: 1fr 1fr; gap: 48px;
      margin-top: 32px;">
      <div><p>Left column copy.</p></div>
      <div><p>Right column copy.</p></div>
    </div>
  </div>
</section>

Recipe 03 — Stat / fact block

Use for: firm facts, key data points, executive summary numbers. Three or four at most per row.

<div style="display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 32px;
  border-top: 1px solid #2A2A2A;
  border-bottom: 1px solid #2A2A2A;
  padding: 28px 0;">
  <div>
    <p style="font-family: Aptos, sans-serif; font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: #B99A38; margin: 0 0 8px;">LABEL</p>
    <p style="font-family: 'Brother 1816', 'Century Gothic',
      sans-serif; font-size: 34px; font-weight: 500;
      color: inherit; margin: 0; line-height: 1;">$3B</p>
    <p style="font-family: 'Palatino Linotype', serif;
      font-size: 13px; color: #9A9A9A; margin: 8px 0 0;">
      Short context line.</p>
  </div>
  <!-- repeat for each stat -->
</div>

Recipe 04 — Pull quote

Use for: callouts, executive statements, the one line that has to land. ALL CAPS, gold left rule.

<blockquote style="
  margin: 24px 0;
  padding: 24px 24px 24px 40px;
  border-left: 2px solid #B99A38;
  font-family: 'Brother 1816', 'Century Gothic', sans-serif;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0B0B0B;
">
  Clarity creates confidence.
</blockquote>

Recipe 05 — Editorial table

Use for: financial tables, beneficiary breakdowns, fee schedules, comparison grids. Aptos, gold header, alternating rows.

<table style="width: 100%; border-collapse: collapse;
  font-family: Aptos, sans-serif; font-size: 15px;
  color: #0B0B0B; border: 1px solid #E5E5E5;">
  <thead>
    <tr>
      <th style="background: #B99A38; color: #0B0B0B;
        font-weight: 700; font-size: 12px;
        letter-spacing: 0.14em; text-transform: uppercase;
        text-align: left; padding: 14px 18px;
        border-bottom: 1px solid #8D762E;">Column</th>
      <!-- more headers -->
    </tr>
  </thead>
  <tbody>
    <tr><td style="padding: 14px 18px;
      border-bottom: 1px solid #E5E5E5;">Cell</td></tr>
    <tr style="background: #F2F2F2;"><td style="padding:
      14px 18px; border-bottom: 1px solid #E5E5E5;">Cell</td></tr>
  </tbody>
</table>

Recipe 06 — LinkedIn carousel slide (1080 × 1350)

Use for: a single slide in a LinkedIn carousel or standalone post. Dark, full-bleed, one strong line of type.

<div style="
  width: 1080px; height: 1350px;
  background: #0B0B0B; color: #F7F7F7;
  padding: 80px;
  display: flex; flex-direction: column;
  justify-content: space-between;
">
  <!-- Top: logo (use alternate reversed lockup, ~60px tall) -->
  <img src="LOGO_ALT_REVERSED_URL" style="height: 60px;
    width: auto;">

  <!-- Middle: the line that has to land -->
  <h1 style="font-family: 'Brother 1816', 'Century Gothic',
    sans-serif; font-size: 64px; line-height: 1.05;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #F7F7F7; margin: 0; max-width: 18ch;">
    Your single, strong line.
  </h1>

  <!-- Bottom: small supporting line or URL -->
  <p style="font-family: Aptos, sans-serif; font-size: 14px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #B99A38; margin: 0;">PARCIONPW.COM</p>
</div>

Recipe 07 — Email-safe header (HTML email)

Use for: marketing emails, event invitations, whitepaper distribution. Table-based for Outlook compatibility.

<table role="presentation" width="600" cellpadding="0"
  cellspacing="0" style="background: #0B0B0B; color: #F7F7F7;
  font-family: Aptos, Arial, sans-serif; width: 600px;">
  <tr>
    <td style="padding: 32px 40px;">
      <img src="LOGO_ALT_REVERSED_PNG_URL"
        alt="Parcion Private Wealth"
        width="180" style="height: auto; display: block;">
    </td>
  </tr>
  <tr>
    <td style="padding: 0 40px 56px;">
      <p style="font-family: Aptos, sans-serif; font-size: 11px;
        letter-spacing: 0.22em; text-transform: uppercase;
        color: #B99A38; margin: 24px 0 12px;">EYEBROW</p>
      <h1 style="font-family: Georgia, serif;
        font-size: 32px; line-height: 1.15;
        color: #F7F7F7; margin: 0 0 16px;
        text-transform: uppercase; letter-spacing: 0.04em;
        font-weight: normal;">Subject as headline.</h1>
      <p style="font-family: Georgia, serif; font-size: 16px;
        line-height: 1.6; color: #D6D6D6; margin: 0;">
        Open with the reader's situation.</p>
    </td>
  </tr>
</table>

10 — Asset Manifest

Every URL, in one place.

A single machine-readable lookup. When the AI needs to embed a logo or photograph, it should pull from this list rather than reconstructing URLs from elsewhere in the file. Public CDN, no auth required.

{
  "logos": {
    "primary_lockup_light": {
      "use": "Default. Light backgrounds. Icon + wordmark + PRIVATE WEALTH.",
      "svg": "https://cdn.sanity.io/images/3phttdbo/production/5c79bbe89858ce500f6723bfdafd44ec6bd3fbc1-2000x2000.svg",
      "png": "https://cdn.sanity.io/images/3phttdbo/production/9736c9d5462904dd3ebdcccf926d2ea53f98f50a-1905x441.png"
    },
    "primary_lockup_dark": {
      "use": "Default. Dark backgrounds. Icon + wordmark + PRIVATE WEALTH, reversed.",
      "svg": "https://cdn.sanity.io/images/3phttdbo/production/71a5aad964c39f3794afb2f24406083c071dccbc-2000x2000.svg",
      "png": "https://cdn.sanity.io/images/3phttdbo/production/56a4894b1fa953de245165aa4f99587d03f1a94a-1885x435.png"
    },
    "alternate_lockup_light": {
      "use": "Use sparingly. Small spaces on light bg. No PRIVATE WEALTH descriptor.",
      "svg": "https://cdn.sanity.io/images/3phttdbo/production/10f6008aec939c4771682e5ad55e09056b5902a8-2000x2000.svg",
      "png": "https://cdn.sanity.io/images/3phttdbo/production/cb140fa2f41515e06a4c75dbac9bea47a54a2de6-1934x388.png"
    },
    "alternate_lockup_dark": {
      "use": "Use sparingly. Small spaces on dark bg. No PRIVATE WEALTH descriptor.",
      "svg": "https://cdn.sanity.io/images/3phttdbo/production/48b29b92920ec727a2793db9e3f2cc84ba2f0a17-2000x2000.svg",
      "png": "https://cdn.sanity.io/images/3phttdbo/production/f033ca90bf20089f20577dfc14da56c7ea3b9250-1952x451.png"
    },
    "icon": {
      "use": "Use sparingly. Avatars, favicons, app icons. Gold diamond mark only.",
      "svg": "https://cdn.sanity.io/images/3phttdbo/production/0f940e5a73a80ffcd00088df5f77d5ce02932a8d-396x414.svg"
    }
  },

  "imagery": {
    "default_hero_general": {
      "use": "DEFAULT hero image for any non-financial content: brand pages, About, Approach, Team, Signature Event, philanthropy, lifestyle, general marketing. Use this unless the topic is explicitly financial. Apply layered dark gradient overlay for legibility.",
      "url": "https://cdn.sanity.io/images/3phttdbo/production/01548b6a067a3fee4c7a1c9c42ca391074b9f44c-5760x3600.jpg"
    },
    "default_hero_financial": {
      "use": "DEFAULT hero image for any financial content: market commentary, Parcion Perspectives, investment strategy, portfolio updates, tax planning, business sale planning, ESOP/M&A pieces, financial whitepapers. Apply layered dark gradient overlay for legibility.",
      "url": "https://cdn.sanity.io/images/3phttdbo/production/fc1a057432b72c5e344f2c9c65443e3fdf9da30f-4032x3024.jpg"
    },
    "editorial_options": [
      {
        "id": "image_01",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/544b946d779b5a95b4ba65b8ab48c344d417c283-4030x3022.jpg",
        "subject": "Ferry on Puget Sound with Mount Rainier in the background, sunset",
        "mood": "hopeful, inspiring, warm",
        "use_for": "non-financial editorial when a scenic mood is wanted; alternate to default_hero_general for variety"
      },
      {
        "id": "image_02",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/b78b21cb33b7cfedd8fd3a50ff34d9b67b4052db-5472x3072.jpg",
        "subject": "Ferry on Puget Sound, Olympic Mountains in background",
        "mood": "quiet, restrained, scenic",
        "use_for": "alternate to image_01 when the layout needs a less dramatic scenic"
      },
      {
        "id": "image_03",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/eb6786d273c6dc9646b0f1aca18714ac4f4db21e-4856x3427.jpg",
        "subject": "Container ship",
        "mood": "industrial, in motion, grounded",
        "use_for": "business-owner content; signals Parcion's connection to blue-collar, business, and industrial clients"
      },
      {
        "id": "image_04",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/25189a227ed2bfb82b05fe2d6553f1137d46dfc4-4000x2667.jpg",
        "subject": "Construction jobsite at sunset",
        "mood": "inspiring, ambitious, well-framed",
        "use_for": "FAVORED editorial option. Business owners, builders, developers, industrial clients. Prefer this over image_03 when warmth is appropriate.",
        "priority": "favored"
      },
      {
        "id": "image_05",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/da838fbf8a5f323cd5fd79f92b544c6da63f26cd-5472x3648.jpg",
        "subject": "Shipping abstract, framed through a ferry",
        "mood": "atmospheric, abstract, industrial",
        "use_for": "alternate to image_03 when the layout wants atmosphere over literal subject"
      },
      {
        "id": "image_06",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/cf3aaa2b4b2e4ac6c5dda7d7b4ecc938b5aac32d-3072x2304.jpg",
        "subject": "Seattle / Puget Sound, place-led composition",
        "mood": "rooted, regional, grounded",
        "use_for": "alternate to image_01 when establishing place (Seattle, Puget Sound) is more important than mood"
      },
      {
        "id": "image_07",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/8ab3fce6837fe78e9c4cbdbc1a5419070ca82c68-4771x3181.jpg",
        "subject": "Mountain climbers",
        "mood": "resilient, ambitious, scale-driven",
        "use_for": "long-term planning, generational wealth, post-liquidity content, 'what comes next' themes"
      },
      {
        "id": "image_08",
        "url": "https://cdn.sanity.io/images/3phttdbo/production/5c55387c0c1b20f2bb5ee79aa10fe0a0318b0479-8256x5504.jpg",
        "subject": "Parcion logo on frosted glass, shot in the Parcion office",
        "mood": "confident, restrained, real",
        "use_for": "About, Approach, recruiting. Use when the firm should appear in image without staging or model talent."
      }
    ],
    "banners": [
      "https://cdn.sanity.io/images/3phttdbo/production/c7ea7faf99c9ddecd421cd53b836cee651af3333-2048x1365.jpg",
      "https://cdn.sanity.io/images/3phttdbo/production/8a73aabcf8ed53e34dfcf4688e5acf05b126592f-4240x2832.jpg",
      "https://cdn.sanity.io/images/3phttdbo/production/66003e0de4417670c7cbc9ebb1e2d5132f515e42-5184x3456.jpg"
    ],
    "fallback_stock": {
      "use": "If the approved library doesn't fit, source from Unsplash and flag for Marketing review before publishing.",
      "url": "https://unsplash.com"
    }
  },

  "colors": {
    "primary": {
      "off_black":     "#0B0B0B",
      "pure_black":    "#000000",
      "carbon":        "#161616",
      "charcoal":      "#2D2D2C",
      "off_white":     "#F7F7F7",
      "paper":         "#FFFFFF",
      "light_gray":    "#D6D6D6",
      "mid_gray":      "#6B6B6B",
      "hairline":      "#E5E5E5",
      "hairline_dark": "#2A2A2A",
      "gold":          "#B99A38",
      "gold_dark":     "#8D762E",
      "gold_deeper":   "#6C5A23"
    },
    "data_viz_only": {
      "burgundy_dark":    "#6A2E35",
      "burgundy":         "#8E3E48",
      "burgundy_mid":     "#AA4B56",
      "rust_dark":        "#AE3009",
      "rust":             "#C2350A",
      "rust_bright":      "#D53A0B",
      "warm_gold_light":  "#C3A446",
      "warm_gold":        "#CDB365",
      "warm_gold_pale":   "#D7C284",
      "forest_dark":      "#48614A",
      "forest":           "#446459",
      "sage":             "#8DB999",
      "steel_dark":       "#122735",
      "steel":            "#1E6685",
      "steel_bright":     "#2A8CB7",
      "slate":            "#7F88A6",
      "navy_deep":        "#00141C"
    }
  },

  "type": {
    "external_web": {
      "display":   "Brother 1816",
      "body":      "Palatino Linotype",
      "ui_data":   "Aptos",
      "h1": { "font": "Brother 1816", "weight": "Book",    "size": "40pt (web: clamp 32–44px)", "case": "ALL CAPS" },
      "h2": { "font": "Brother 1816", "weight": "Book",    "size": "24pt", "case": "ALL CAPS" },
      "h3": { "font": "Brother 1816", "weight": "Bold",    "size": "18pt", "case": "Mixed Case" },
      "h4": { "font": "Brother 1816", "weight": "Book",    "size": "14pt", "case": "Mixed Case" },
      "body":     { "font": "Palatino Linotype", "weight": "Regular", "size": "12–14pt (web: 16px)" },
      "callout":  { "font": "Palatino Linotype", "weight": "Bold",    "size": "14pt" },
      "data":     { "font": "Aptos",             "weight": "Regular or Medium", "size": "12pt" },
      "table":    { "font": "Aptos",             "weight": "Bold (header) / Regular (body)", "size": "15px web / 12pt print" },
      "legal":    { "font": "Aptos Narrow",      "size": "12pt", "case": "ALL CAPS" }
    },
    "microsoft_office": {
      "applies_to": "Word (.docx), PowerPoint (.pptx), Outlook, Teams, and any other Microsoft surface.",
      "rule": "Substitute Brother 1816 with Century Gothic on every heading. Same sizes, same cases, same hierarchy. Body (Palatino Linotype) and data (Aptos) are unchanged. Required, not optional.",
      "h1": { "font": "Century Gothic", "weight": "Regular", "size": "40pt", "case": "ALL CAPS" },
      "h2": { "font": "Century Gothic", "weight": "Regular", "size": "24pt", "case": "ALL CAPS" },
      "h3": { "font": "Century Gothic", "weight": "Bold",    "size": "18pt", "case": "Mixed Case" },
      "h4": { "font": "Century Gothic", "weight": "Bold",    "size": "14pt", "case": "ALL CAPS" },
      "body":  "Palatino Linotype (unchanged)",
      "data":  "Aptos (unchanged)",
      "do_not_substitute": "Arial, Calibri, Helvetica, or any other sans-serif. Century Gothic only."
    }
  }
}

11 — Decision Rules

If this, then that.

Explicit decision logic the AI should follow when picking between options. Read top to bottom; the first matching rule wins.

If	Then
The output has a background	Default to Off-Black (#0B0B0B). Never use Navy (#00141C) for surfaces.
The output needs a hero image and the topic is NOT financial	Use `default_hero_general`. Brand, About, Approach, Team, Signature Event, philanthropy, lifestyle, recruiting, general marketing all fall here.
The output needs a hero image and the topic IS financial	Use `default_hero_financial`. Market commentary, Parcion Perspectives, investment strategy, portfolio reporting, tax planning, business sale, ESOP, M&A, performance pieces all fall here.
The default hero doesn't fit the specific piece	Pick from `editorial_options` only if a defensible reason exists. Otherwise stay with the default. Banners (LinkedIn header, web rotator) pull from `banners`, not editorial.
The output has a logo and the surface is dark	Use `primary_lockup_dark`. If the placement is under 80px tall, use `alternate_lockup_dark` instead.
The output has a logo and the surface is light	Use `primary_lockup_light`. If the placement is under 80px tall, use `alternate_lockup_light` instead.
The placement is a favicon, avatar, or app icon	Use the `icon` only. Gold (#B99A38) on Black (#000000).
You need an H1 color	White (#F7F7F7) on dark surfaces, Off-Black (#0B0B0B) on light. Never gold. Never serif.
You're adding emphasis to a heading	Use weight or position, not gold. Gold belongs on the eyebrow, the rule, or one chart series.
You need to set type for body copy	Palatino Linotype, 16px, line-height 1.6. On dark, color is #D6D6D6, not pure white.
The output is a Microsoft Office file (Word, PowerPoint, Outlook, Teams)	Replace Brother 1816 with Century Gothic on every heading. Palatino Linotype (body) and Aptos (data) stay unchanged. Required, not optional.
You're building a chart with one key insight	Use gold (#B99A38) on that single series. Everything else uses the secondary palette.
You're building a chart with no single emphasis	Skip gold entirely. Use Forest, Steel, Slate, Burgundy, Sage in that priority order.
You need an italicized word	Use italic only for a direct quotation or the title of a work (book, film, publication, vessel). For emphasis, use small caps, bold, or a rephrase. Never italic in headings.
You'd reach for an em dash	Replace with a comma, a colon, or two short sentences.
You need a stock photograph not in the library	Source from Unsplash and add a note that Marketing should review before publication.
You need a portrait of a Parcion team member	Pull from parcionpw.com/team. Do not generate or composite portraits.
You'd use "clients," "HNWIs," or "heirs"	Replace with "families," "business owners," or "the next generation."
You'd use "quarterback," "holistic," "leverage" (verb), or "synergy"	Replace with "coordinate," "comprehensive," "use," or remove entirely.
You'd open with "Hope this finds you well"	Open with the reader's situation instead.
The output references investment performance	Include the standard disclosure: "Past performance is not indicative of future results." Flag for compliance review.

12 — For Developers

Drop the stylesheet onto any page.

Colleagues building landing pages, microsites, internal tools, or HTML emails can link the Parcion brand stylesheet to inherit the tokens, type system, and base components. The CSS file is independent of this guide.

Install

<link rel="stylesheet" href="parcion-brand.css">

Use the tokens

.my-hero {
  background: var(--pp-off-black);
  color: var(--pp-off-white);
  padding: var(--pp-space-2xl) 0;
}
.my-hero h1 { color: var(--pp-off-white); }   /* never gold */
.my-hero .eyebrow { color: var(--pp-gold); }  /* gold here is fine */

Use the components

<p class="eyebrow">Client Exclusive Events</p>
<h1>Signature Event</h1>
<a href="/rsvp" class="pp-btn">Request invitation</a>

<div class="pp-table-wrap">
  <table class="pp-table">...</table>
</div>

<blockquote class="pp-pullquote">
  Clarity creates confidence.
</blockquote>

Token reference

Token	Value	Use
--pp-off-black	#0B0B0B	Primary dark surface
--pp-off-white	#F7F7F7	Primary light surface
--pp-charcoal	#2D2D2C	Body type on light
--pp-gold	#B99A38	Accent — eyebrows, key data
--pp-gold-dark	#8D762E	Accent on light backgrounds
--pp-navy	#00141C	Data visualization only
--pp-font-display	Brother 1816 …	Headings, display
--pp-font-body	Palatino Linotype …	Body copy
--pp-font-ui	Aptos …	Tables, data, labels
--pp-h1	clamp(32px, 3.2vw, 44px)	H1 display size
--pp-table	15px	Table body size

Interactive HTML standards

Any HTML deliverable built off this brand, including presentations, internal microsites, briefings, or long-form reports, must support the three behaviors below. They are not optional.

Behavior	Specification
Fullscreen toggle	A visible control in the page's fixed nav or floating control bar that calls `requestFullscreen()` and `exitFullscreen()`. Keyboard shortcut `F`. Icon-only is fine; label the button with a `title` attribute for accessibility.
Arrow-key navigation	For paginated deliverables (decks, multi-page briefings), `ArrowDown`, `ArrowRight`, `PageDown`, and `Space` advance. `ArrowUp`, `ArrowLeft`, and `PageUp` retreat. Scroll smoothly to the next or previous section. Disable when focus is inside a form field.
Download as PDF	A visible control in the same nav or control bar that triggers `window.print()` against a print stylesheet. Default orientation by document type: presentations and dashboards default to landscape, long-form documents and reports default to portrait. Always expose an override (a small toggle, a second button, or a one-click prompt) so the user can flip it before printing.

All three controls sit inside the standard Parcion control surface: gold fill, Aptos label at 12px with 0.22em tracking, gold-dark on hover. Do not invent a separate visual treatment for these controls. They behave like any other Parcion UI button.

Reference snippet

Paste these three blocks into any Parcion HTML deliverable to satisfy the standards above. The order of the PDF buttons declares the default: list landscape first for decks and dashboards, portrait first for documents and reports. Either button works regardless of order; ordering is the visual cue to the reader about what the document expects.

1 · HTML — place before </body>

<div class="control-bar">
  <button class="ctrl-btn ctrl-btn-icon" title="Fullscreen (F)" onclick="toggleFullscreen()">⛶</button>
  <button class="ctrl-btn" onclick="downloadPDF('landscape')">PDF · Landscape</button>
  <button class="ctrl-btn" onclick="downloadPDF('portrait')">PDF · Portrait</button>
</div>

2 · CSS — add to your stylesheet

.control-bar {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; gap: 8px; z-index: 200;
}
.ctrl-btn {
  font-family: var(--pp-font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 12px 16px;
  background: var(--pp-gold); color: var(--pp-off-black);
  border: none; cursor: pointer;
  transition: background 120ms ease;
}
.ctrl-btn:hover { background: var(--pp-gold-dark); }
.ctrl-btn-icon { padding: 14px; }

@media print {
  .control-bar, .nav-bar { display: none !important; }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

3 · JavaScript — place before </body>

<script>
// Fullscreen toggle (button + F key)
function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(() => {});
  } else {
    document.exitFullscreen();
  }
}

// PDF download with orientation override
function downloadPDF(orientation) {
  const existing = document.getElementById('pp-print-orientation');
  if (existing) existing.remove();
  const style = document.createElement('style');
  style.id = 'pp-print-orientation';
  const size = orientation === 'portrait'
    ? '8.5in 11in portrait'
    : '11in 8.5in landscape';
  style.textContent = '@page { size: ' + size + '; margin: 0; }';
  document.head.appendChild(style);
  window.print();
}

// Arrow-key navigation across .slide or .section blocks
(function() {
  const sections = Array.from(
    document.querySelectorAll('.slide, .section')
  );
  if (!sections.length) return;
  let current = 0;
  function goTo(i) {
    if (i < 0 || i >= sections.length) return;
    current = i;
    sections[current].scrollIntoView({
      behavior: 'smooth', block: 'start'
    });
  }
  function updateCurrent() {
    const mid = window.innerHeight / 2;
    sections.forEach((s, i) => {
      const r = s.getBoundingClientRect();
      if (r.top <= mid && r.bottom > mid) current = i;
    });
  }
  window.addEventListener('scroll', updateCurrent, { passive: true });
  document.addEventListener('keydown', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
    if (['ArrowDown','ArrowRight','PageDown',' '].includes(e.key)) {
      e.preventDefault(); updateCurrent(); goTo(current + 1);
    } else if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) {
      e.preventDefault(); updateCurrent(); goTo(current - 1);
    } else if (e.key === 'f' || e.key === 'F') {
      toggleFullscreen();
    }
  });
})();
</script>

Working with AI to build a deliverable? Hand it this whole file. The snippet above is the canonical pattern. Tell the AI to paste it in without modification.

The Parcion brand, in one place.

Marks, lockups, and downloads.

Primary lockup

Alternate lockup (no descriptor)

Icon only

Rules

Use

Avoid

Approved Parcion photography.

Default hero images

Portraits & people

Color & editorial

Banners & landscapes

Rules

Use

Avoid

Clear. Confident. Human.

Four tonal qualities

Use

Avoid

Voice in practice

Black-led palette, gold sparingly.

Primary palette

Color rules

Use

Avoid

Secondary palette (data visualization only)

Burgundy

Rust

Warm Gold

Forest & Sage

Steel Blue

Slate & Navy

Three faces. Calm hierarchy.

Unlock your wealth's potential

Rules

Use

Avoid

Editorial, analytical, never decorative.

Use

Avoid

Sample charts

On dark surfaces

Chart rules

Avoid

Buttons, rules, pull quotes.

Buttons

Rules

Pull quote

Dark surface preview

Clarity creates confidence

The bottom line for any AI tool.

Copy-paste templates for the most common outputs.

Recipe 01 — Hero block (dark, image background)

Recipe 02 — Two-column section (eyebrow + headline + body)

Recipe 03 — Stat / fact block

Recipe 04 — Pull quote

Recipe 05 — Editorial table

Recipe 06 — LinkedIn carousel slide (1080 × 1350)

Recipe 07 — Email-safe header (HTML email)

Every URL, in one place.

If this, then that.

Drop the stylesheet onto any page.

Install

Use the tokens

Use the components

Token reference

Interactive HTML standards

Reference snippet