CRX•Money

Version 2.0 April 2026

CRX•Money Brand Guidelines

The imported HTML remains the source artifact. This page now follows its 18-section structure while translating the guidance into reusable data and components.

The site version is intentionally smaller and cleaner than the raw export. It preserves the document logic while making later edits practical.

Trustworthy and calmAnalyticalPremium restraint

01 BRAND FOUNDATION

A serious financial software brand built for clarity.

CRX•Money sits closer to institutional finance than speculative fintech. It should communicate reliable control, disciplined analysis and premium restraint across every surface.

What CRX•Money is

A financial software product that turns account activity, performance and exceptions into readable action.

Mission
Turn complex financial activity into clear, reliable action.
Positioning
Modern and premium, but measured. Structured and efficient, never theatrical.
Surface logic
Light mode is the document and reporting expression. Dark mode is the continuous application expression.

The brand should feel calm enough for reporting, capable enough for dashboards and consistent enough to travel across exports, decks and the public site without changing personality.

Off-brand signals

  • Avoid flashy, noisy, speculative, over-gamified or generic crypto-neon interpretations.
  • Whenever a choice feels louder than the product itself, it is probably off-brand.

02 BRAND PRINCIPLES

Principles should translate directly into visual and verbal choices.

The system becomes coherent when the same principles shape interface design, reporting layout, website pacing and copywriting.

Trustworthy

Visual

Use quiet surfaces, stable grids, consistent contrast and obvious hierarchy. Make interactions feel deliberate rather than playful.

Verbal

State what happened, why it matters and what to do next. Prefer plain confidence over excitement.

Analytical

Visual

Let numbers, charts and tables lead. Keep color disciplined so changes and exceptions remain visible.

Verbal

Lead with evidence, comparisons and distinctions. Avoid vague claims with no observable basis.

Premium

Visual

Create elegance with spacing, proportion and material restraint. Gold should sharpen the system, not flood it.

Verbal

Use precise, composed language. Premium tone comes from confidence and clarity, not luxury buzzwords.

Efficient

Visual

Keep labels concise, actions obvious and spacing regular. Components should feel fast to parse.

Verbal

Use short verbs, short nouns and compact supporting copy. Remove filler before shrinking type.

Direct and calm

Visual

Reduce decorative noise, animation theatre and unnecessary emphasis. Leave room for the content to breathe.

Verbal

Reassure without overpromising. Explain clearly and stop once the answer is understood.

Decision rule

When a choice improves novelty but weakens clarity, trust or efficiency, choose the calmer option.

03 LOGO SYSTEM

The approved identity stays intact in v2.0.

This is an evolution, not a redesign. The current production system remains PNG-first until a controlled vector redraw is commissioned.

Primary signature

Primary light signature

CRX•Money horizontal logo on light surface
CRX•Money vertical logo on light surface
CRX•Money symbol-only mark on light surface

Use for website headers, report covers, documentation and other quiet light surfaces.

Dark surface usage

Dark signature treatment

CRX•Money horizontal logo on dark surface
CRX•Money vertical logo on dark surface
CRX•Money symbol-only mark on dark surface

Use on midnight navy, deep navy and other dark application surfaces. Avoid extra effects.

Square exports

Favicon and app icon

CRX•Money icon export 32×32 32×32
CRX•Money icon export 64×64 64×64
CRX•Money icon export SVG Scalable* SVG Scalable*
CRX•Money icon export 128×128 128×128
CRX•Money icon export 256×256 256×256

Export square icon sets separately rather than shrinking the full signature into illegibility. (*) SVG icon needs rework. It is a draft version for now.

Lockup hierarchy

  • Horizontal signature is primary.
  • Symbol-only mark is secondary.
  • No stacked lockup is approved for production today. Do not improvise one.

Asset status

  • Keep PNG masters intact.
  • Export new derivatives from the approved package only.
  • Never derive new masters from screenshots or copied slide art.

04 LOGO RULES

Protect clear space, size and contrast.

Consistent application matters more than frequency. The mark should feel deliberate, not constantly present.

Clear space

x = diameter of the gold separator dot

Maintain at least one dot-unit of clear space around the entire signature. If the surrounding surface feels crowded, increase the buffer.

Minimum size

  • Full signature - 140 px web / 32 mm print
  • Symbol only - 20 px web / 5 mm print
  • Favicons - 32 / 48 / 64 px exports

Background rules

  • Use the light signature on paper, porcelain and soft light neutrals.
  • Use the dark signature on midnight and deep navy.
  • Over imagery, place the logo on a quiet supporting panel.

Unacceptable treatments

  • Recolor or re-gradient the mark.
  • Stretch, skew, rotate or add effects.
  • Place the mark on gold-heavy or low-contrast fields.
  • Rebuild the signature with live text or approximate fonts.
  • Crop too tightly or crowd the clear space.
  • Export new masters from screenshots or copied slide art.

05 COLOR SYSTEM

A shared neutral backbone with two deliberate modes.

Light/report and dark/application are both first-class. Neutrals carry most of the experience; gold creates distinction without dominating the page.

Light / reports

White + graphite + muted gold

Porcelain White

#F7F7F4

Paper White

#FFFFFF

Mist Grey

#D9DADC

Steel Grey

#8B9097

Graphite

#2F343A

Near Black

#1C2025

Muted Gold

#B08D57

Dark / application

Navy + silver + gold

Midnight Navy

#0D1B2A

Deep Navy

#132238

Slate Navy

#1E314A

Blue Grey

#6E7C8C

Soft Silver

#C8D0D8

Off White

#F3F5F7

Rich Gold

#C9A14A

Pale Gold

#E3C978

Role logic - Porcelain and paper carry long-form reading. Midnight is the application canvas, deep navy is the primary card surface, and slate navy is the raised or focused layer. Gold should punctuate the system, not become the system.

06 COLOR ROLES

Semantic UI color supports meaning. Data color stays disciplined.

Use semantic states sparingly and consistently. Most surfaces should still be neutral, leaving chart emphasis and status meaning easy to parse.

Role Recommended use Light Dark
Primary Core actions, strong hierarchy and key navigation moments. #2F343A #C9A14A
Secondary Quiet controls, supporting layers and non-primary emphasis. #8B9097 #6E7C8C
Success Positive movement, settled states and healthy completion cues. #2F7D57 #57A37B
Info Contextual states, references and informational emphasis. #4C6E91 #7AA7D9
Warning Review-needed states and selective caution emphasis. #B08D57 #E3C978
Danger Exceptions, errors and negative movement. #A34E58 #D77A84

Chart / data-viz palette

  • Prefer neutral labels and gridlines; let data colors do the signaling.
  • Use one emphasis series, one comparison series and a restrained supporting set before adding more variety.
  • Use the dark-mode variants only when the chart lives inside the dark application environment.

Accessibility and gold budget

  • Never set long-form body copy in gold.
  • Maintain accessible contrast in both modes and test semantic colors in real UI states rather than isolated chips.
  • Gold budget: aim for one to two highlighted moments per view. If a viewport reads gold first, reduce gold.

07 TYPOGRAPHY

Inter remains the primary type direction.

Use it consistently across product, web and reports. The system should feel modern, disciplined and numerically reliable.

Primary family

Inter

Primary family for UI, web, reporting and presentation materials.

Dashboard balance overview

Quarterly revenue trend

Latest transactions

Enable tabular figures for balances, rates, dates and columnar values.

Recommended settings

  • Primary family: Inter, with system sans fallbacks.
  • Headings: 600 to 800 weight, tight tracking and short line lengths.
  • Body copy: 400 to 500 weight with comfortable line-height.
  • Numeric data: use tabular lining numerals and right alignment in tables.

Display / cover

Short titles only

34-40 pt

Page titles

Primary page hierarchy

26-30 pt

Subheads

Section breaks and labels

16-18 pt

Body copy

145-160% line-height

11.5-13 pt

Data hero

Balances and ratios

24-32 pt

Mono / reference

IDs and export strings

9.5-11 pt

font-variant-numeric: tabular-nums lining-nums;

08 LAYOUT AND SPACING

The brand feels calm when spacing does most of the work.

A disciplined grid and spacing rhythm make the product feel premium without ornament. Density can change by surface, but the underlying structure should stay consistent.

Spacing rhythm

Use a predictable spacing scale across product, web and documents. Reports should feel airy; the application can be denser, but never compressed.

xs

4

sm

8

md

12

lg

16

xl

24

2xl

32

3xl

40

4xl

48

Surface and composition rules

  • Grid feel: strong columns, predictable gutters, generous outer margins.
  • Density: reports airy; app compact but not compressed.
  • Radius: 12px controls, 16px cards, 20px hero/report containers, full pills only for badges.
  • Surfaces: use base + card + raised as the normal maximum of three layers.
  • Borders: 1px subtle; never heavy outlines.

01

Lead with the most important number or message. Every screen and page should have one dominant module.

02

Use strong columns and predictable gutters. Generous outer margins make the system feel calm.

03

Group controls near the data they affect. Avoid floating miscellany and detached pills.

04

Use three surface layers at most. Base + card + raised is usually enough.

09 COMPONENT LANGUAGE

Controls should look capable, not decorative.

The UI language should remain quiet, structured and modern. Surface layering is gentle, borders stay subtle and gold emphasis remains controlled.

Light / reports

Paper, graphite and restrained gold

Primary Secondary
Search, account or report ID
Positive Informational Review needed
  • Primary action appears once per panel.
  • Secondary controls use neutral fills before outlines.
  • Status badges stay short and subdued.

Dark / application

Navy surfaces with controlled gold emphasis

Primary Secondary
Search, account or report ID
Positive Informational Review needed
  • Placeholder text stays subdued; labels remain high contrast.
  • Focus states use structure first, color second.
  • Prefer navy over true black and layer surfaces gently for depth.

Component rule set - Use one clear primary action, keep badges short, avoid heavy outlines, and let tables and forms communicate capability through order rather than ornament.

10 DATA SURFACES

Tables, cards and navigation carry the working product experience.

These surfaces do most of the brand work inside the application. They should read quickly, align numerically and maintain a calm hierarchy in both modes.

Light / review surfaces

Income $24.3k +8.8%
Expenses $10.6k -6.8%
Investments $45.1k +8.3%
DateDescriptionCategoryAmount
APR 13Freelance paymentIncome$10,586
APR 21Restaurant dinnerExpense$87.60

Dark / operational surfaces

Net cash $125.8k +6.8%

No flagged exceptions this week

Show the next useful action and a short explanation.

Executive summary

One summary metric, one chart or table and one supporting note is usually enough.

Light / review surfaces

  • Right-align numeric values and use subtle gridlines.
  • Let spacing do the work before adding decoration.
  • Charts, tables and summaries should read like analysis, not marketing.

Dark / operational surfaces

  • Navigation, empty states and report blocks should feel useful and controlled, never theatrical.
  • Show the next useful action and a short explanation.
  • A strong title, one summary metric, one chart or table and one supporting note is usually enough.

11 PRODUCT APPLICATION (LIGHT)

Light mode is the reporting expression.

Use light mode for statements, reviews, reports and other document-grade surfaces. It should feel neutral, precise and externally shareable.

Light/report

Document-grade product surfaces

Default export mode
Cash $24k +6.8%
Expense $10k -3.1%
DateDescriptionCategoryAmount
APR 13Treasury reviewReport$125,780
APR 26Variance summaryReview32.4%

Where it belongs

Reports, statements, review screens, exports, investor or admin views and other long-read interfaces. Default export mode is light.

Surface feel

Use paper, graphite and restrained gold. Long tables, summaries and charts should feel neutral, precise and externally shareable.

Reading priority

Lead with readable charts, tables and statement structure rather than decorative hero treatment.

12 PRODUCT APPLICATION (DARK)

Dark mode is the operational application expression.

Use dark mode for continuous monitoring, navigation-heavy workflows and multi-panel analysis. It should feel capable, deep and visually quiet.

Dark/application

Operational product surfaces

Continuous monitoring
Net cash $125.8k +6.8%

Exceptions queue

Multi-panel analysis and navigation-heavy workflows live here.

Where it belongs

Continuous monitoring, navigation-heavy workflows, dashboards and multi-panel analysis environments.

Surface feel

Use midnight as the canvas, deep navy as the primary card surface and slate navy as the raised or focused layer.

Secondary hierarchy

Blue-grey supports secondary hierarchy. Keep exported artifacts light unless there is a specific presentation need.

13 WEBSITE APPLICATION

The public site should feel more open, but never less disciplined.

The site at crx.money is the introductory expression of the brand. It should build trust, show the product truthfully and connect clearly to the application.

CRX•Money

Public site

Financial clarity, without the noise.

CRX•Money combines disciplined reporting and application-grade control in a calm, trustworthy interface.

View platform Sample report
CRX•Money website application preview

Public site tone

The public site introduces trust, scope and methodology. It should feel more open than the app, but never less disciplined.

Relationship to app.crx.money

The public site stays lighter and more editorial. The app becomes denser, more operational and more navigation-heavy.

CTAs and trust cues

Use direct calls to action: Request demo, View platform, Sample report. Show real product crops, reporting examples and proof of process rather than lifestyle imagery.

Social expression

Financial clarity, without the noise.

One statement. One product crop. One restrained gold accent.

CRX•Money square mark

14 REPORTING AND EXPORTS

Exports should read like documents, not screenshots.

Reporting is one of the strongest trust signals in the CRX•Money system. Covers, inner pages and tables should feel precise, formal and well-paced.

Report cover

Monthly Treasury Review

April 2026 / Prepared for executive review / Generated from CRX•Money reporting

Net cash $125.8k +6.8%
Variance 32.4% Review
DateDescriptionCategoryAmount
APR 13Freelance paymentIncome$10,586
APR 21Restaurant dinnerExpense$87.60

Document-grade hierarchy

Use the light/report palette by default. Report covers, executive summaries and internal documents should read like documents, not screenshots.

Charts and tables

Use one emphasis series, quiet gridlines and strong numeric alignment. Tables should rely on spacing and alignment, not dense borders.

Print and export guidance

Avoid true black fills, hairline rules and tiny labels. Protect margins and line-length so PDFs remain readable when printed or shared externally.

Dark mode usage

Dark crops may appear in presentations and marketing, but not as the default PDF export style.

15 IMAGERY

Use product truth, data-led graphics and restrained atmospherics.

Imagery should support trust and comprehension. The best CRX•Money visuals are the product, the reports and simple supporting graphics that reinforce structure rather than noise.

Use

Product truth and data-led graphics

Lead with real product captures, report crops, charts, tables and simple diagrams. Architectural or material textures can appear only as restrained atmospheric support.

CRX•Money product truth preview

Best fit: product screens, report pages, interface details, neutral environments and precision-oriented material cues.

Optional

Abstract support, never spectacle

Subtle grids, cropped metallic details, soft gradients, motion stills from the UI or authentic portraiture can support the system when used sparingly.

Icons should be geometric, mostly outline, evenly weighted and never emoji-like.

Avoid

Speculative finance clichés

Avoid coins, token stacks, neon glows, meme-crypto motifs, loud 3D renders, busy lifestyle stock and cartoon illustration. They weaken trust and move the brand away from serious software.

Coins Neon Hype Cartoon

Whenever an image reads as hype before it reads as clarity, it is off-brand.

Texture guidance: any optional texture should be subtle, low-contrast and secondary to the content. Backgrounds should never compete with charts, tables or headlines.

16 VOICE AND COPY

Write with confidence, precision and calm.

The verbal system should sound intelligent, composed and evidence-led. It should support trust in the product rather than performing excitement.

Direct

  • Say what happened, why it matters and what happens next. Remove theatre before you remove clarity.

Analytical

  • Lead with numbers, comparisons and distinctions. State evidence before attitude.

Reassuring

  • Be calm and clear without overpromising. Confidence comes from precision, not hype.

Writing rules

  • Use short labels, direct nouns, limited adjectives and observable claims.
  • Do not use urgency theatre, crypto jargon, buzzword inflation or exaggerated futurism.

Headlines

Better

Quarterly cash visibility in one view.

Avoid

The future of finance is here.

Buttons

Better

Review exceptions / Export PDF

Avoid

Unlock insights / Start winning

System copy

Better

3 transactions need review.

Avoid

Great news - we found something interesting!

Support copy

Better

Expense variance widened in travel and utilities.

Avoid

Spending got a little wild this month.

17 DO / DON’T

The system succeeds when restraint is protected.

These checks should be easy for teams to remember and enforce. When in doubt, choose the calmer, more disciplined option.

Do

  • Logo Use approved assets on quiet, matched surfaces with correct clear space and contrast.
  • Color Let neutrals lead and use gold for selective emphasis only.
  • Typography Use Inter with tabular numerals for balances, dates and columnar data.
  • UI Prioritize hierarchy, spacing and data readability over decoration.
  • Marketing tone Claim only what can be shown or measured.

Do not

  • Logo Recolor, distort, glow, outline, stack or improvise new lockups.
  • Color Flood screens with gold, rainbow data palettes or heavy true-black backgrounds.
  • Typography Use decorative display fonts, overly small captions or promotional headline styles.
  • UI Over-badge, over-outline, over-round or add novelty interactions that weaken structure.
  • Marketing tone Use hype, urgency theatre, meme finance language or speculative aesthetics.

Quick rule

If a screen, report or page starts to feel louder than the information it contains, simplify the styling before adding anything else.

18 ASSET GUIDANCE

Operationalize the brand through shared assets and tokens.

Shared masters, naming conventions and implementation notes keep web, product, reporting and presentation surfaces aligned as the system grows.

Required file set

Keep one approved source package and generate all derivatives from it.

Logo

  • crx-money_signature-light_rgb@2x.png
  • crx-money_signature-dark_rgb@2x.png
  • crx-money_symbol-light_square-512.png
  • crx-money_symbol-dark_square-512.png

Favicon

  • favicon-16.png
  • favicon-32.png
  • favicon-48.png
  • favicon-64.png

Social

  • og-crx-money-dark-1200x630.png

Reporting

  • report-cover-template.pdf

Tokens

  • crx-money.tokens.json
  • crx-money.css

Shared asset rules

  • Use lowercase, hyphenated, descriptive names. Include mode and export size when useful.
  • Keep one approved source package and generate all derivatives from it.
  • Never derive new masters from screenshots, copied slides or ad hoc exports.

Web

Map the palette to CSS variables and token names that preserve the light/report and dark/application split.

Product

Use semantic colors through component tokens, not one-off hardcoded values. Preserve spacing rhythm and tabular numerals.

Reporting

Use shared page templates, cover logic, margin settings and chart defaults. Reports remain light by default.

Presentations and marketing

Prefer one clear claim, one real product crop and one restrained gold accent.

What may evolve in v2.x

What may evolve in v2.x: a controlled vector redraw, an expanded icon pack, a deeper chart library and motion guidance. What stays fixed: the approved mark character, the core palette, the Inter typographic direction, gold restraint and the dual-mode system.