Campaign system Advisor photography, product proof, and a plainspoken trust claim in one composition.
Strategic Anchor
The spine of every decision.
Finvisor exists between two extremes.
Software-first platforms deliver speed, but lack strategic judgment. Traditional firms deliver expertise, but move slowly and rely on outdated systems.
Finvisor combines both: senior financial expertise, amplified by AI.
The brand exists to make that advantage impossible to miss.
Senior Experts,
Amplified by AI.
Amplified by AI.
The three-path market
Finvisor is not competing inside an existing category. It is naming a new one. The brand should reinforce that the choice between cheap software and an expensive firm is a false one.
POSITION 01
Software-first
Speed and low price. Misses service quality, responsiveness, strategic depth. Pilot. Zeni. Fincent.
POSITION 02
Traditional firm
Senior expertise and credibility. Misses modern tooling, agility, founder-stage pricing. Armanino. Withum. Kruze.
POSITION 03 FINVISOR
AI-augmented expert
Senior judgment, AI infrastructure, full-stack back office. The category Finvisor defines.
Mission
What Finvisor exists to do.
To help founders and business owners thrive and prosper by delivering a fractional team of financial experts, amplified by AI.
Since 2014, Finvisor has supported startups and small businesses with accounting, CFO support, and other critical back-office operations. We combine experienced financial professionals with AI-powered systems and operational workflows to deliver accurate reporting, faster insights, and actionable guidance that helps founders and CEOs understand how their business is performing and what it will take to reach their next stage of growth.
Values
The five signals the brand must carry.
Trust, expertise, and reliability are table stakes for any finance brand. Warmth and proactivity are where Finvisor differentiates. That is where the brand should lean hardest.
Value 01
Trust
Earned through transparency, not claimed through marketing. VC referrals. Proactive scope conversations. No surprise bills.
Value 02
Expertise
Senior people doing senior work. Controllers, accounting managers, fractional CFOs. Quality review on intake and after every close.
Value 03
Reliability
Showing up, replying, closing the books, getting it right. 24-hour response guarantee. The opposite of "AI with no one home."
Value 04 Differentiator
Warmth
The human layer. The reason referrals happen. Shared Slack channels. Real relationships.
Value 05 Differentiator
Proactivity
Forward-looking by default. Suggesting before being asked. Building Finvisor AI. The Rillet partnership.
Voice
How Finvisor sounds.
A senior person who doesn't need to oversell. Short sentences. Clear claims. No hedging, no jargon.
Five voice principles
01
Confident, never loud.The brand speaks like someone who has done this for twelve years. Quiet authority. The opposite of disruptor-speak.
02
Plain over polished."We close your books in 5 days" beats "we deliver best-in-class financial close cadence." Every time.
03
Specific, not warm for warmth's sake.Show warmth through specificity, not adjectives. "Direct access to your team in slack" beats "we love founders."
04
Pain-aware.Name the founder's pain: surprise bills, missed messages, books closed late. Then show what Finvisor does instead.
05
Human-led, tech-enabled.AI is capability and infrastructure, not a personality. Humans first, technology second, both visible. "Automation powers the work. Experts review and stand behind every number."
Voice examples
When in doubt, write the version on the left.
DoA senior accountant who knows your business and replies the same day.
Don'tBest-in-class fractional finance solutions for high-growth ventures.
DoWe've helped 600+ companies close faster, raise cleaner, and spend less on back-office than they ever did in-house.
Don'tWe are committed to scaling alongside our partners.
DoWhen scope changes, you'll know before we do the work.
Don'tTransparent billing is one of our core values.
Do$500M+ raised by the companies we support.
Don'tTrusted by leading venture capital firms across the ecosystem.
DoSenior experts, amplified by AI.
Don'tAI-powered next-generation finance disruption.
Logo
The mark.
The Finvisor logo has been refined for better balance, stronger weight, and a more professional read. The chevron meaning is preserved (up and to the right, growth) and the wordmark now reads cleanly as Finvisor, not FinVisor.
Primary on light background
Reversed on dark background
Chevron mark, standalone
Chevron mark on navy
Navy favicon
White favicon
Navy circular logo
White circular logo
Logo files final
Logo variations
Primary lockup
Use the navy wordmark with the gold chevron on bone, off-white, or white backgrounds. This is the default for brand, sales, and client-facing materials.
Reversed lockup
Use the bone wordmark with the gold chevron on navy backgrounds. This is the preferred treatment for dark sections, covers, and presentation openers.
Chevron mark
Use the standalone chevron only where the audience already knows the brand: favicon, app icon, small UI moments, social avatar, or internal product surfaces.
Favicon
Use the circular favicon in browser tabs, saved shortcuts, app tiles, and tiny digital placements where the full wordmark will not hold.
Circular logo
Use circular lockups for social avatars, partner thumbnails, app-store style placements, and profile contexts where a square or round crop is required.
Usage rules
Do
Use primary lockup on light backgrounds.Use bone or off-white wherever possible. Use the reversed lockup on navy: chevron stays gold, wordmark becomes bone.
Do
Maintain clear space.Equal to the height of the chevron mark on all sides. Minimum width: 96px screen, 24mm print.
×
Never recolor the chevron.The gold is structural, not decorative. No gradients, shadows, or effects on the wordmark.
×
Never write "FinVisor."Render as "Finvisor" everywhere: body copy, headlines, alt text, and metadata.
Logo mistakes to avoid
Do not use gold text on light backgrounds.Gold fails contrast on white and off-white. Keep gold for the chevron and small accents.
Do not recolor the logo.The wordmark is navy or bone. The chevron is always Finvisor Gold.
Do not stretch or compress.Scale the artwork proportionally. Never redraw or rebuild the letters.
Do not add effects.No shadows, outlines, glows, gradients, bevels, or transparency on the logo.
Do not place it on busy surfaces.Use a clean field of bone, white, or navy so the mark stays precise.
Do not use the chevron as decoration.The mark should identify the brand or support direction. It should not become a random graphic accent.
Color
A palette with authority.
Two structural colors carry the brand: a deep navy that signals seriousness and trust, and a warm gold that signals warmth, optimism, and movement. Click any swatch to copy the hex code.
Core palette
Finvisor Navy
#0C2939
Primary · Backgrounds · Text
Finvisor Gold
#F3BC4A
Accent · Chevron · Emphasis
Off-White
#F3F3F2
Light background · Calm surface
White
#FFFFFF
Surface · Cards · Product UI
Extended palette
Navy Mid
#2F627F
Secondary text · Supporting
Navy Light
#9FC5DB
Tints · Data viz
Gold Soft
#F7CE76
Hover · Tints · Highlights
Off-White Deep
#E8E8E6
Cards · Subtle panels
Combinations to use
FinvisorNavy on off-white for primary brand communications.
Navy on off-whiteUse for pages, docs, proposals, and most long-form reading.
FinvisorOff-white on navy for high-confidence moments.
Off-white on navyUse for covers, hero sections, section openers, and premium brand moments.
FinvisorGold can carry emphasis when navy is behind it.
Gold on navyUse sparingly for the chevron, small accents, active states, or one key detail.
FinvisorNavy Mid supports hierarchy without going pale.
Navy Mid on whiteUse for secondary text, helper copy, metadata, and product-style UI details.
Color rules
01
Navy is the dominant.Use for headlines, primary text, and homepage hero. A page with no navy doesn't feel like Finvisor.
02
Gold is the accent, not the texture.Use it sparingly: on the chevron, a single CTA, or a key word in a headline. If gold is doing more than one job on a screen, one of them is wrong.
03
Off-white over pure white.#F3F3F2 wherever possible. Softens the page and reduces glare without drifting toward warm cream.
04
No neon. No gradients. No glow.The brand sets a calm, premium tone. Anything that feels like fintech-disruptor energy fails the Tamara Test.
Combinations to avoid
FinvisorLow contrast makes the brand feel weaker.
Gold on off-white or whiteFails accessibility for text. Use gold on navy only.
FinvisorPale blue disappears on light surfaces.
Navy Light on whiteToo low contrast for text, labels, and buttons.
FinvisorSupport colors cannot carry dark surfaces.
Navy Mid on navyToo quiet for readable text. Use bone or gold on navy instead.
FinvisorGold should not become the page.
Gold as a large backgroundToo loud for the brand. Reserve gold for emphasis and active states.
Product color usage
In product, color should support hierarchy, state, and financial meaning. Brand colors stay restrained so the interface feels operational, not decorative.
01
Primary text is ink or navy.Use #1A1A1A for dense product UI and #0C2939 when the moment should feel more branded or directional.
02
Secondary text is muted, not pale.#737373, #6E777D, and #2F627F are used for metadata, placeholders, inactive navigation, and helper copy. Keep contrast readable.
03
Semantic color belongs to data and state.Green is used for positive deltas and success, red for overdue or negative values, blue for informational chips, and indigo for interactive links or assignment actions.
04
Gold stays rare in product.It appears as brand accent or selected emphasis, not as default UI text. Never use gold as body text on white or bone.
Secondary Palette
Built for the product, not the brand.
These five color families live exclusively inside the Finvisor product. Use them for data visualizations, chart graphics, and interface state indicators. They are never used in brand communications, marketing materials, presentations, or any surface outside the product UI.
When to use this palette
01
Data visualization. Charts, sparklines, bar graphs, and area fills that need multiple distinguishable series without competing with the Finvisor brand colors.
02
Interface states. Success confirmations, warning banners, error messages, informational tooltips, and hover and focus states inside the product.
03
Illustrations and graphics. Internal diagrams, onboarding illustrations, and chart animations that need semantic color coding beyond navy and gold.
Color scales
Each scale runs from 50 (lightest) to 900 (darkest). The outlined chip in each row marks the primary use shade. Use it for UI elements on light backgrounds. Lighter tones work for tinted backgrounds and fills; darker tones for text labels on light surfaces. Click any chip to copy its hex value.
Red
Errors · Alerts · Destructive actions · Negative trends
Error
#fbe6ec
#f3b1c5
#ed8ca9
#e45782
#df366a
#d70445
#c4043f
#990331
#760226
#5a021d
Orange
Warnings · Caution states · Pending actions · Neutral-negative trends
Warning
#fdf3e6
#f8d9b0
#f4c78a
#efad54
#ec9d33
#e78500
#d27900
#a45e00
#7f4900
#613800
Green
Success · Completed states · Positive trends · Approved
Success
#e6f4f1
#b0dbd5
#8acac0
#55b2a4
#34a392
#018c77
#017f6c
#016354
#014d41
#003b32
Blue
Information · Neutral emphasis · Data series · System messages
Info
#e6f0fa
#b1d0ee
#8cbae6
#579ada
#3686d3
#0468c8
#045fb6
#034a8e
#02396e
#022c54
Indigo
Interactive elements · Hover states · Links · Focus rings · Chart accents
Interactive
#edecfa
#c6c3f0
#aaa6e8
#847ede
#6c65d7
#473ecd
#4138bb
#322c92
#272271
#1e1a56
Semantic state mapping
In the product UI, each state has a fixed color assignment. Consistency matters more than creativity, so engineers and designers should use these tokens without variation. Click any card to copy the primary hex.
Error and Alert
Red 500
#d70445
Warning
Orange 400
#ec9d33
Success
Green 500
#018c77
Information
Blue 500
#0468c8
Interactive and Hover
Indigo 500
#473ecd
Error background
Red 50
#fbe6ec
Warning background
Orange 50
#fdf3e6
Success background
Green 50
#e6f4f1
Info background
Blue 50
#e6f0fa
Typography
One brand face. A product type stack beneath it.
For brand communications, Satoshi carries the system. In product, the team uses a more functional UI stack: Satoshi for branded navigation and key product surfaces, Geist for dense interface text, and Geist Mono for financial data.
Aa
Senior experts.
A finance team that thinks like a partner.
Bookkeeping, CFO advisory, payroll, tax.
We close your books on time. We pick up the phone. We tell you what's coming before it's a problem. Senior people, real relationships, technology that makes both faster.
Reviewed quarterly. 24-hour reply guarantee on monitored channels.
For VC-backed founders
Weight discipline
700
Bold for display.Headlines and the cover hero. Letterspacing tightens (-0.02em to -0.04em) at large sizes.
500
Medium for subheadings.Section headers and key phrases inside body copy.
400
Regular for body.The default. Generous line-height (1.55–1.7) gives the page calm.
300
Light for lead paragraphs only.Used only at large sizes (20px+). Never in small sizes. Light Satoshi at 14px loses legibility.
Product typography
Product type works like infrastructure, not expression: compact sizes, restrained weights, no decorative letterspacing, and color mostly reserved for hierarchy, state, and financial meaning.
SATOSHI
Brand and product identity
Use for branded navigation, selected tabs, primary product labels, key headings, filters, chips, and product-specific actions. Most product usage is Medium 500, with Bold 700 reserved for page or chart titles.
GEIST
Operational UI text
Use for dense product interfaces: sidebars, cards, descriptions, metadata, table labels, and helper text. It carries most day-to-day UI at Regular 400 and Medium 500.
GEIST MONO
Financial data
Use for currency, percentages, KPI deltas, axis labels, command keys, and values that need tabular comparison. Keep it Regular 400 by default; use SemiBold 600 for important positive or negative values.
INTER
Legacy and imported graphics
Appears in maps, charts, and imported visualization patterns. Do not introduce it into new product UI unless the component or charting library requires it.
Observed product scale
| Use | Size and line height | Weight | Typical color |
|---|---|---|---|
| Page and chart titles | 20 normal or 18 on 24 |
Satoshi 700 or Geist 600 | Navy #0C2939 or ink #1A1A1A |
| Section and card headers | 14 on 20 |
Geist 600 or Satoshi 700 | Ink #1A1A1A or Navy #0C2939 |
| Navigation and controls | 14 on 20 |
Satoshi 500 or Geist 500 | Navy, Navy Mid #2F627F, or muted gray #6E777D |
| Body, descriptions, metadata | 12 on 16, 11 on 16, or 11 on 18 |
Geist 400 | Muted gray #737373; ink for names and primary labels |
| Tags, chips, compact labels | 10 on 14 or 11 on 16 |
Geist 500 or Satoshi 500 | Gray for neutral states; semantic product colors for status only |
| Currency and KPI data | 14 on 20, 12 on 16, or 9 on 11.25 |
Geist Mono 400; 600 for emphasis | Ink for neutral data; green and red for deltas and exceptions |
Product rule
Satoshi is the brand typeface. Geist and Geist Mono are product tools.Use them where the interface needs density, scanning, and numerical precision. New product work should avoid adding more families; retire legacy Inter usage when screens are rebuilt.
Color contrast & accessibility
All type must meet WCAG 2.1 AA minimum: 4.5:1 ratio for body text, 3:1 for large text (18px bold or 24px regular and above). Target AAA (7:1) wherever possible. The combinations below have been tested against the Finvisor core palette.
Approved combinations
Aa Body
Navy on Off-White
#0C2939 on #F3F3F2 · 12.0:1
WCAG AAA
Aa Body
Navy on White
#0C2939 on #FFFFFF · 13.4:1
WCAG AAA
Aa Reversed
Off-White on Navy
#F3F3F2 on #0C2939 · 12.0:1
WCAG AAA
Aa Accent
Gold on Navy
#F3BC4A on #0C2939 · 8.0:1
WCAG AAA
Aa Secondary
Navy Mid on White
#2F627F on #FFFFFF · 6.1:1
WCAG AA
Aa Secondary
Navy Mid on Off-White
#2F627F on #F3F3F2 · 5.4:1
WCAG AA
Avoid these fail WCAG AA
Aa Body
Gold on White
#F3BC4A on #FFFFFF · 1.7:1
Fails AA
Aa Body
Gold on Off-White
#F3BC4A on #F3F3F2 · 1.5:1
Fails AA
Aa Body
Navy Light on White
#9FC5DB on #FFFFFF · 1.8:1
Fails AA
Aa Body
Navy Mid on Navy
#2F627F on #0C2939 · 2.2:1
Fails AA
Quick rule
Gold is never a text color on light backgrounds. It passes only when set on Navy (#0C2939). Navy Light (#9FC5DB) is decorative and data-viz only. Never use it as body or label text on light surfaces. When in doubt, default to Navy on Off-White.
Photography
Real people. Real product. No stock.
Photography is where the brand earns its warmth. The team explicitly ruled out stock. The protagonists are the senior advisors clients actually work with, and the product UI clients actually use.
Real team
Actual Finvisor advisors. The people clients meet on calls and message in Slack.
Working, not posing
At desks, on calls, in conversation. Natural light. Real expressions, not directed smiles.
Light backgrounds
Bright, calm, readable environments. The screen should feel like relief, not stimulation.
Real product
Genuine Finvisor AI screens. Real reporting layouts. No mocked dashboards when avoidable.
Do
- Show senior advisors. They are the differentiator.
- Capture in natural light, working environments
- Use color photography, tonally consistent across team
- Pair human imagery with product UI side-by-side
- Wear Finvisor-branded apparel when appropriate
- Get client photography only with explicit permission
Don't
- Use stock photography under any circumstance
- Show people not part of the business
- Direct overly staged smiles or overhead laptop shots
- Apply heavy filters or high-contrast color grades
- Default to office clichés (whiteboards, post-its, fist-bumps)
- Crop in ways that obscure face or working context
Open. Existing library vs. fresh shoot to be decided
Icons
Use Lucide as the product icon library.
Finvisor uses Lucide for UI icons: simple line icons, restrained strokes, and clear product meaning. Do not browse the full library by default. Start with the active set below and add only when the interface has a real new need.
Active Finvisor icon set
houseHome and breadcrumbs
landmarkCompliance and finance
chart-no-axes-combinedReporting and metrics
file-textPayables and invoices
gemTax credit
user-roundContacts and profile
listReceivable and payroll lists
settingsSettings and configuration
searchSearch inputs
funnelFilters
chevron-downSelect menus
xDismiss and remove
infoHelp and support
message-squareFeedback
users-roundTeam selectors
settings-2Advanced controls
Default color
Use Navy or Ink Soft. Gold stays reserved for the Finvisor chevron and rare emphasis states.
Default size
Use 20px in product navigation and 14px to 16px inside dense controls. Keep icons on a 24px source grid.
Stroke
Use Lucide's line style with square caps in brand compositions when possible. Avoid filled icons unless the UI state requires it.
01
Linear, not filled.Stroke-based icons read as calmer and more professional. Reserve fills for the chevron mark and rare functional emphasis.
02
1.5pt stroke at 24px.Heavy enough to read at small sizes, light enough to feel refined. Never go below 1pt.
03
Square caps, mitre joins.Echo the chevron's geometry. Round caps pull the system toward a generic startup feel.
04
24×24 grid, 2px padding.All icons in a 24-unit grid with 2-unit clear space inside the frame.
05
Chevron-derived where natural.For directional or convergence concepts, build from the chevron geometry. Avoid forcing it.
06
Ink, not gold.Icons render in Navy or Ink Soft by default. Gold is reserved for the chevron mark. An all-gold icon set dilutes the brand.
Patterns
Texture and depth through geometry.
Three repeating patterns built from the brand's core geometry. They generate depth in backgrounds, graphics, and compositions. Never use them as primary elements.
Dots
A regular field of small circular marks at a 22 px grid. Adds subtle texture without competing with photography or typography.
Slide backgrounds
Section dividers
Marketing overlays
Grid
Horizontal and vertical lines at a 40 px interval. Evokes precision and structure, ideal behind data-heavy or analytical content.
Report covers
Dashboard backgrounds
Data visualizations
Cross
A plus-mark repeating at a 48 px interval. Drawn from the chevron's axis geometry, it suggests convergence and navigation.
Hero graphics
Brand wallpapers
Print compositions
How to use them Always apply patterns at low opacity (10–30%) so they read as texture, not as a competing element. On dark navy backgrounds use the gold tint; on light bone backgrounds use the navy tint. Never stack two patterns in the same composition.
Brand In Use
A living gallery for real-world applications.
This section is reserved for finished mockups, product moments, photography, and collateral. It should show how the system behaves outside isolated rules: in screens, decks, reports, apparel, office details, and founder-facing touchpoints.
Product UI The brand feels most convincing when the product is visible and specific.
Brand graphics Geometry, dots, and direct language can carry abstract finance ideas without feeling generic.
Milestone poster Use the pattern system and simple proof points to make experience feel concrete.
Advisor photography Real people make the expertise tangible. The copy should be as direct as the image.
Founder-facing proof Owner visibility, direct language, and a real service promise make the brand feel accountable.
Team apparel The reversed lockup works well on navy materials when the chevron stays gold.
Skills
How to use the deck design skill.
The deck skill turns Finvisor source material into presentation-ready artifacts without losing source content. Use it when auditing, reskinning, rebuilding, or creating decks from PPTX, PDF, screenshots, notes, or existing slide content.
What the skill needs
Use finvisor-ui/deck-skill.md as the operating instructions for mode selection, source preservation, design rules, output format, and QA.
Use brand-guide.html as the canonical visual source. The skill should inspect the relevant sections before designing.
Keep logos, patterns, brand-in-use examples, advisor photos, source images, and product visuals available through repo-relative paths.
Provide the PPTX, PDF, screenshots, notes, or outline. The skill must extract text and meaningful images before changing the design.
Step-by-step flow
Start with preservation. The skill should never rewrite, summarize, omit, replace images, or invent proof unless the user explicitly grants permission.
Ask the user to choose: Audit-only, Reskin-only, Rebuild-preserve-content, or Net-new deck.
Recommend HTML for best brand fidelity. Use PPTX only when editable PowerPoint or Google Slides handoff is required. Offer both when useful.
Create a source ledger for all visible text, details, repeated footers, proof points, service names, claims, and credentials.
Create an image ledger for logos, photos, headshots, screenshots, charts, badges, and meaningful source visuals.
Review color, typography, logo, photography, iconography, patterns, and Brand In Use before choosing slide archetypes.
Choose deck rhythm, slide families, grids, proof moments, pattern usage, image treatment, and clean vs. textured slides.
Use real text and real source imagery. Do not flatten text into images or create fake UI, fake logos, fake people, or generic icons.
Run content coverage, image preservation, accessibility, alignment, text-fit, pattern-scale, reference-match, and brand-taste QA.
Output formats
Use for highest visual fidelity: exact grids, nested rounded frames, continuous patterns, Satoshi typography, responsive preview, and browser screenshot QA.
Use when the user needs PowerPoint or Google Slides editability. Treat it as an editable export with stricter rendered PNG QA.
Build HTML as the source of truth, then create a simplified PPTX/export version when editable handoff is also needed.
Return findings, priority, and slide-by-slide fixes without creating a new artifact.
Non-negotiable QA gates
Every source text detail and meaningful image must appear, be intentionally relocated, or be explicitly flagged.
No near-alignment. Rectangles, media, cards, and panels must share exact grid edges, row heights, gutters, and spacing.
Text cannot clip, touch borders, sit too close to edges, break into vertical stacks, or become unreadable in rendered previews.
No random gold squares, fake icons, fake UI, generic SaaS card grids, shadows, gradients, or decorative elements outside the guide.
Recommended prompt Ask the skill to preserve all source text and meaningful images, confirm work mode and output format, use this brand guide as the visual source of truth, and run rendered QA before delivery.
Updates
Keep the guide and design notes together.
This guide is the visual source of truth. When the system changes, update the HTML first, then record the decision in the design documentation so future work starts from the same rules.
Edit brand-guide.html when sections, examples, assets, copy, or interaction behavior change.
Store referenced images and downloads inside the repo, using relative paths that work after deployment.
Update DESIGN.md whenever the guide changes a rule, component pattern, section, asset, or interaction.
Keep .impeccable/design.json aligned when tokens, active sections, icon sets, assets, or core rules change.
Before publishing Confirm the repo version has no local-only paths, no missing assets, and no design rule that exists only in the HTML or only in
DESIGN.md.