Version 2.2 October 2026 Supersedes v2.1

CRX•Money Brand Guidelines

The CRX•Money brand system: primitives, semantic color roles, typography, component language and the product tokens the app consumes. Use it to keep every surface (app, website, reports and exports) recognizable as one product.

v2.2 reconciles the product tokens with what ships, adds the state, data, reporting and asset rules teams were missing, and checks every contrast claim on this page when the site is built.

Trustworthy Analytical Premium Efficient Direct and calm

What changed in v2.2

§02 One set of five principles, used the same way in the hero, reviews and copy.
§03 §04 The stacked signature is an approved secondary lockup. Favicon sizes match what ships, and clear space and minimum size are drawn.
§05 §06 Steel, Steel Navy and Silver Grey join the canon, the link color is defined, and focus, brand and warning are distinct roles.
§07 The type scale is in px for screens, with print sizes in pt and a caption and label step.
§08 Spacing and radius tokens match what ships.
§09 §11 §12 Hover, pressed, focus, disabled and invalid states for every control. Every contrast ratio is computed when the site is built.
§10 New rules for number formatting, table states, the chart palette and favorable or unfavorable deltas.
§13 The public site paints only with canon tokens and is light-only, with at most one dark island per screen.
§14 A page spec and a downloadable four-page report sample.
§15 Capture, anonymization, alt-text and icon rules.
§16 The product-name rule, copy patterns and a glossary.
§17 A rule index built from every section, with drawn misuse examples.
§18 The real file list, plus token JSON and asset package downloads.

Light and dark, §13 to §18

§13: Light-only by decision, with at most one dark island per screen. The site declares a light color scheme.
§14: Reports and the default PDF are light. Dark crops may appear in presentations and marketing.
§15: Light by default. Any dark crop is paired with its light version. The current crops are light and due for recapture.
§16: Mode-independent.
§17: The examples use the shared tokens, so they follow the mode they sit in.
§18: The signature and the mark ship light and dark. The square icon, favicons and social card are single-mode.

Proposing a change

The guide lives in the website source and is checked on every build. To propose a change, open a work item in the CRX•Money Azure DevOps project naming the section (§NN), the problem and the evidence. Changes land through a pull request that keeps check:brand green; a change to a rule bumps the guide version and adds a line to this list. To keep a copy, print the page or save it as PDF: the print styles drop the navigation.

01 BRAND FOUNDATION

A serious financial software brand built for clarity.

CRX•Money sits closer to institutional finance than speculative fintech. Every surface should carry the five principles in §02: trustworthy, analytical, premium, efficient, and direct and calm.

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, reporting and public-site expression (§11, §13, §14). Dark mode is the continuous application expression (§12).

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.

Brand affirmations

Quiet authority over loud energy.
One personality from the app to the report to the site.
Premium comes from restraint, not decoration.
Plain words, then stop.

Off-brand signals

Flashy, noisy or over-gamified interpretations.
Generic crypto-neon or speculative-fintech visuals.
Choices that feel louder than the product itself.

02 BRAND PRINCIPLES

Five principles shape every visual and verbal choice.

These five describe the brand. The hero names them and §16 applies them to copy. Each principle links to the sections that turn it into rules; use them to judge any choice this guide does not cover.

Trustworthy

Visual

The same thing looks the same everywhere: states, numbers and colors mean one thing each, sources stay visible, and nothing changes without a reason.

Verbal

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

Shows up in §06 Color roles §11 Product (light)§12 Product (dark)§14 Reporting

Analytical

Visual

Put the numbers first. Keep color disciplined so that change and exceptions stay visible, and align every figure so it can be compared at a glance.

Verbal

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

Shows up in §07 Typography §10 Data surfaces §14 Reporting

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.

Shows up in §05 Color system §08 Layout §13 Website

Efficient

Visual

Make the next action obvious and the path to it short: clear labels, predictable placement and one primary action per view.

Verbal

Name actions with verbs and things with the product’s own nouns, so people never translate.

Shows up in §09 Components §16 Voice and copy

Direct and calm

Visual

Spend emphasis once per view. Cut decorative noise, animation theatre and competing highlights, and leave room for the content.

Verbal

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

Shows up in §13 Website §15 Imagery §16 Voice and copy

Expenses dropped! $10,628 ▼ 6.8% Great news!

Louder: celebrates instead of informing

Expenses $10,628 −6.8% vs Mar

Calmer: value, change and period at a glance

Do

Name the principle a design decision serves when you propose or review it.
Use the five names as written, in hero copy, reviews and briefs.
When two options are both on brand, pick the quieter one.

Don't

Inventing a sixth trait for one campaign or screen.
Choosing a treatment because it is new rather than because it is clearer.
Treating calm as empty: calm still states the number and the next step.

03 LOGO SYSTEM

The approved identity stays intact: an evolution, not a redesign.

Four lockups make up the system: the horizontal signature, the stacked signature, the symbol-only mark and the square icon. Production stays PNG-first until a controlled vector redraw lands.

Primary signature

Signatures on light surfaces

The horizontal signature leads on website headers, report pages, documentation and other quiet light surfaces. Below it: the stacked signature for square and centered formats, and the symbol-only mark.

Dark surface usage

Signatures on dark surfaces

Use the dark artwork on Midnight, Deep Navy and other dark application surfaces. It is drawn for them; never recolor the light version instead, and add no effects.

Compact mark

Symbol-only mark

The mark without the wordmark, for collapsed navigation, chips, narrow toolbars and other tight formats where the signature would drop below 140px wide. Square avatar slots take the square icon instead.

Square exports

Favicon and app icon

Favicon 16

32×32

64×64

SVG (draft)

128×128

Touch 180

256×256

Square icons are exported separately at each size. Never shrink the full signature into a favicon slot. The SVG icon is a draft. Its vector redraw is deferred to a later v2.x release; until then, use the PNG exports for anything printed or scaled up.

Lockup hierarchy

Horizontal signature: the primary lockup, wherever it fits at 140px wide or more.
Stacked signature: secondary, for square and centered formats only, such as report covers, social cover images and splash screens. Never in navigation or app chrome.
Symbol-only mark: for tight formats below 140px wide, such as collapsed navigation, chips and narrow toolbars.
Square icon: browser tabs, launchers, touch icons and any square avatar or integration slot.

Asset status

Keep the PNG masters intact; they are the approved artwork.
Export new sizes only from the 8× reference artwork in §18.
Never derive new masters from screenshots or copied slide art.

Do

Use the horizontal signature by default.
Match light or dark artwork to the surface it sits on.
Take every logo file from §18.

Don't

The stacked signature in navigation, headers or app chrome.
A signature, horizontal or stacked, shrunk into a favicon or avatar slot.
The draft SVG scaled up for print.

04 LOGO RULES

Protect clear space, size and contrast.

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

Clear space

x = diameter of the gold separator dot

Keep at least x of clear space on every side of a signature, measured from the artwork, not the file edge, and never less than 8px on screen. On the horizontal signature x is about one sixth of the artwork height; the diagram is drawn to that scale. The stacked signature uses the same x, and the symbol-only mark uses a quarter of its own height.

Minimum size

Each lockup has a floor

Signature, 140 px

Stacked, 96 px

Mark, 20 px tall

Favicon, 16 px

Horizontal signature: 140 px wide on screen, 32 mm in print.
Stacked signature: 96 px wide on screen, 22 mm in print.
Symbol-only mark: 20 px tall (about 40 px wide) on screen, 5 mm tall in print.
Favicons: 16, 32 and 48 px (ICO bundle) and a 180 px touch icon; §18 lists every file.

Do

Use the light artwork on Paper, Porcelain and other light neutrals.
Use the dark artwork on Midnight, Deep Navy and Slate Navy.
Over imagery, place the logo on a quiet supporting panel.

Don't

Recolor or re-gradient the logo.
Stretch, skew, rotate or add effects.
Place the logo 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.

Porcelain White

#F7F7F4

Paper White

#FFFFFF

Mist Grey

#D9DADC

Steel Grey

#8B9097

Steel

#4F5B66

Graphite

#2F343A

Near Black

#1C2025

Muted Gold

#B08D57

Deep Gold

#8F5D18

Midnight Navy

#0D1B2A

Deep Navy

#132238

Slate Navy

#1E314A

Steel Navy

#2A3C54

Blue Grey

#6E7C8C

Silver Grey

#B5C0CC

Soft Silver

#C8D0D8

Off White

#F3F5F7

Rich Gold

#C9A14A

Pale Gold

#E3C978

Cream Gold

#F1E4BB

Role logic – Porcelain and paper carry long-form reading. Steel carries labels; Steel Grey only draws control edges. Midnight is the application canvas, Deep Navy is the card, Slate Navy is the raised or inset layer and Steel Navy draws the edges between them. Gold should punctuate the system, not become the system. Light mode uses Muted Gold for emphasis and Deep Gold for small type and focus. Dark mode uses Rich Gold for the primary action and Pale Gold for warnings and the hover lift.

App extensions are shades the product theme needs that are not part of the two brand families: link colors, cooler app borders and panel tints. They live in the same arsenal so no product surface hardcodes hex, but new brand surfaces should reach for the primitives above first.

Link Steel

#3B5571

Light link default (--text-link)

Link Steel Hover

#2D4258

Light link hover

Border Cool

#D8DDE3

Light app border, slightly cooler than Mist Grey

Panel Soft

#F2F4F6

Light app table header and panel tint

Surface Soft

#F8F9FB

Light card underlay

Cool Mist

#ECEFF2

Light secondary background

Bone

#ECEDEA

Light sidebar background

Link Blue

#A8C8EE

Dark link default (--text-link)

Link Blue Hover

#C3DAF4

Dark link hover

Off Silver

#E7EAEE

Dark long-form body copy in the app

Do

Choose colors by name from this palette. Every value lives in crx-tokens.css.
Let neutrals carry the surface, and gold punctuate it.
Use the App extensions only inside the product theme.

Don't

Raw hex, rgb or near-miss colors in product, site or report code.
A new color that is not added to this palette and the token file first.
Mixing the light and dark families on one surface. A dark island counts as its own surface.

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	Applied as
Primary	Core actions, strong hierarchy and key navigation moments.	Graphite #2F343A	Rich Gold #C9A14A	`--accent-primary`
Secondary	Quiet controls, supporting layers and non-primary emphasis. Applied as the secondary-control edge on a raised fill.	Steel Grey #8B9097	Blue Grey #6E7C8C	`--border-strong`
Success	Positive movement, settled states and healthy completion cues.	Forest Green #2F7D57	Sage Green #57A37B	`--accent-success`
Info	Contextual states, references and informational emphasis.	Steel Blue #4C6E91	Mist Blue #7AA7D9	`--accent-info`
Warning	Review-needed states and selective caution emphasis.	Muted Gold #B08D57	Pale Gold #E3C978	`--accent-warning`
Danger	Rejected exceptions, errors and negative movement.	Rosewood #A34E58	Coral Rose #D77A84	`--accent-danger`

Do

Reserve each role for its purpose: Success for completion, Warning for review, Danger for errors, Primary for the one main action.
Test semantic colors in real UI states (buttons, badges, alerts), not isolated chips.
Keep the gold budget to one or two emphasis moments per view.

Don't

Stacking Success, Warning and Danger in the same viewport.
Using Primary as decoration. Reserve it for the dominant action.
Setting long-form body copy in any semantic color, especially gold.
Mixing dark-mode semantic variants into light-mode surfaces or exports.

07 TYPOGRAPHY

Inter Display leads; IBM Plex Mono handles anything read as data.

Two typefaces do all the work. Inter Display gives the product its calm, disciplined voice across UI, website and reports. IBM Plex Mono handles anything that is read as a machine-addressable reference: IDs, JSON, export strings, code.

SCREEN

Inter Display

rsms.me/inter

Usage: Every rendered surface of the product and website uses Inter Display in weights 400–700. Its tighter metrics are tuned for screen rendering at every size; its full OpenType feature set supports disambiguated digits (ss02), open digits, round / square punctuation and 13 character variants (cv01–cv13).
CSS stack: InterDisplay, "Segoe UI", Arial, sans-serif
Loading: Self-hosted in /assets/fonts/inter with the Regular weight preloaded. Variable and static-weight WOFF2 files available in the repo.

PDF

Inter

rsms.me/inter

Usage: A broader-metric sibling of Inter Display. Reserve it strictly for PDF body copy where the renderer compresses Inter Display at 10–12pt. Never use it in the live UI, website or app shell: mixing the two metrics in one surface is visible.
CSS stack: Inter, InterDisplay, "Segoe UI", Arial, sans-serif
Embedding: Embed static weights 400 + 500 + 600 + 700; avoid the variable font (many PDF readers fall back to system metrics). Subset to Latin-1 unless a multi-language export actually ships. Pair with Inter Display for PDF cover and title pages.

SCREEN

IBM Plex Mono

Google Fonts

Usage: Used in-app and on the website anywhere text is read as code or a machine-addressable reference: JSON viewers, UUID chips, API-payload inspectors, CSS tokens, export-string displays, diagnostic panels. Plex Mono has no programming ligatures, which is the right default for data where characters must stay unambiguous.
CSS stack: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Loading: Loaded via Google Fonts with weights 400, 500 and 600. For self-hosting, OFL 1.1 allows unrestricted redistribution and embedding.

PDF

IBM Plex Mono

github.com/IBM/plex

Usage: Same family as the screen mono; embedded into PDF exports wherever a transaction reference, receipt number, UUID, export string or raw JSON block appears. Because Plex Mono has no ligatures, characters stay unambiguous without any feature flags to remember.
CSS stack: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Embedding: Embed static weights 400 and 500; subset to Latin-1 + digits + common symbols. OFL 1.1 licensed, so PDF embedding is unrestricted. No ligature-disable toggle needed since Plex Mono ships without them.

Display / cover

Short titles only. Inter Display, 600–700. Print: 34–40pt.

40–48px

Page titles

Primary page hierarchy. Inter Display, 600. Print: 26–30pt.

28–36px

Subheads

Section breaks. Inter Display, 600. Print: 16–18pt.

18–22px

Body copy

145–160% line height. Inter Display 400–500 on screen. Print: 11.5–13pt, Inter 400–500.

14–16px

Data hero

Balances and ratios. Inter Display, 600–700 with tabular figures. Print: 24–32pt.

28–36px

Mono / reference

IDs, JSON keys, export strings. IBM Plex Mono, 400–500. Print: 9.5–11pt.

12–14px

Caption and label

Table headers, metric labels, eyebrows and helper text. Inter Display 600; uppercase with wide tracking for headers and eyebrows, sentence case for helper text. Never below 11px on screen or 8pt in print (§14). Print: 8–9pt, Inter 600.

11–12px

Feature	Use	CSS
`tabular‑nums lining‑nums`	Balances, rates, timestamps: any column of numbers.	`font‑variant‑numeric: tabular‑nums lining‑nums;`
`ss02 (Inter Display)`	Disambiguated zero: the 0 gets a dot so it cannot be read as an O.	`font‑feature‑settings: "ss02";`
`cv11 (Inter Display)`	Single-story `a`: crisper headline display; do not enable in body.	`font‑feature‑settings: "cv11";`
`zero (IBM Plex Mono)`	Slashed zero: the 0 gets a slash so it cannot be read as an O.	`font‑feature‑settings: "zero";`

Embed static Inter Display weights 400 / 500 / 600 / 700 in PDF. Avoid the variable font file.
Swap Inter Display for regular Inter in PDF body copy when a reader compresses Inter Display at small sizes.
Embed IBM Plex Mono (400 + 500) for every reference, code or JSON string in PDF exports.
Subset to Latin-1 unless a multi-language export is actually shipping.

Do

Inter Display for every UI surface; IBM Plex Mono for every code or reference string.
Enable tabular figures on any column of numbers.
Subset and embed fonts in PDF exports. Never rely on a reader's system fonts.
Keep the IBM Plex Mono slashed-zero on wherever a 0 lives next to an O.

Don't

Using Inter Display below 11pt as body copy in PDF: tighter metrics hurt readability there.
Embedding the variable font in PDF: most readers fall back to system metrics.
Mixing Inter with Inter Display on the same surface: the metric jump is visible.
Using a proportional font for UUIDs, JSON output or export strings.

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 stays the same.

Spacing scale

One 4px-based scale across product, web and documents, shipped as --space-1 to --space-8. Nest it from the outside in: page regions 48, sections 32, related blocks 24, card padding 16. Reports feel airy; the application can be denser, but never compressed. The bars are drawn to scale.

--space-1

4px Icon-to-label gaps, chip padding

--space-2

8px Control padding, tight stacks

--space-3

12px Card padding (compact), row gaps

--space-4

16px Card padding, form field gaps

--space-5

24px Between related blocks

--space-6

32px Between sections inside a page

--space-7

40px Page gutters on wide screens

--space-8

48px Between major page regions

Radius

The shared component styles and the public site already use these tokens. The app theme still uses its framework defaults (6px controls, 16px cards) until the Crx component migration moves it onto them.

--radius-sm 4px Chart bars, small chips

--radius-control 8px Buttons, inputs, navigation items

--radius-card 12px Cards, tables, charts, metric cards

--radius-panel 16px Report pages, notes and inner panels on the site

--radius-editorial 24px Editorial cards and panels on the public site only

--radius-pill Full Badges and pills

Application

Breakpoints follow the app framework: 576, 768, 992, 1200 and 1400px.
12-column grid inside the shell with 24px gutters.
Dashboards and grids run fluid inside the shell. Forms and detail panels stop at about 720px; text blocks at about 72 characters.

Website

Breakpoints: 640, 768, 1024, 1280 and 1536px.
Pages run up to 1280px wide (marketing) or 1024px (legal), with 24px side margins, 40px from 1024px up.
Card grids use two to four columns with 16 to 24px gaps. Long-form text stops at about 72 characters; legal pages at about 80.

Reports

A4 portrait with 22 mm top, 18 mm side and 20 mm bottom margins gives a 174 mm text block (§14). Lines stay under about 90 characters.
A two-column grid for metric rows; tables run the full text width.
More white space than the app: one dominant module per page.

Density

Comfortable is the default: 8px vertical cell padding. Cards pad 16px; metric cards and charts pad 12px.
Compact (.crx-table--compact) is for operator queues and long tables: 4px vertical cell padding, same type sizes.
Never compress type to gain density; remove columns or move detail into a drawer first.

Surface and composition rules

Grid feel: strong columns, predictable gutters, generous outer margins.
Surfaces: base, card and raised are the normal maximum of three layers.
Borders: 1px and subtle; never heavy outlines.
Keep controls next to the data they act on, never floating away from it.

Do

Lead every screen and page with one dominant module.
Take every gap, padding and radius from the scale above.
Keep line length to about 72 characters in the app and on the site, 80 on legal pages and 90 in reports.

Don't

Off-scale values such as 10px or 0.65rem, even when they "look right".
Large editorial radii inside the application.
Shrinking type to fit more rows instead of switching to compact density.

09 COMPONENT LANGUAGE

Controls should look capable, not decorative.

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

Light scope

Hover Pressed Focus Focus

Account or report ID Statement date Enter a date in YYYY-MM-DD format.

Draft Pending Settled Review Exception

Dark scope

Hover Pressed Focus Focus

Account or report ID Statement date Enter a date in YYYY-MM-DD format.

Draft Pending Settled Review Exception

Do

One primary action per panel. Reserve Primary for the dominant verb.
Secondary controls are hollow-by-default; filled secondary needs a reason.
Focus is structural first (ring, border), color second. Keep it visible on every control.
Status badges stay short, subdued and singular; avoid stacking three colors on one row.

Don't

Two Primary buttons competing on the same panel.
Heavy outlines or decorative borders that compete with content hierarchy.
Gold filled into arbitrary chrome. Reserve it for one or two emphasis moments per view.
Focus state that relies on color alone with no structural cue.

10 DATA SURFACES

Tables, cards and dashboards carry the working product experience.

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

Light scope

Income $24,312 +8.8% vs Mar

Expenses $10,628 −6.8% vs Mar

Net cash $125,784 +12.2% vs Mar

Open exceptions 7 +3 vs Mar

Monthly expenses peaked in February at $14,200 and have eased since, to $10,628 in April.

Income
Expenses

Income has outpaced expenses every month since November; April's gap was $13,684.

Date	Description	Amount
Apr 26	Variance review, operating account	$1,245.32
Apr 21	Restaurant dinner	−$87.60
Apr 13	Freelance payment	$10,586.00
Page total		$11,743.72

Compact density
Date	Description	Amount
Apr 29	Consulting invoice 2026-041	$7,226.00
Apr 24	Interest received	$312.18

No transactions match these filters Clear the date filter or widen the range to see April activity.

Loading transactions…

Balances couldn't refresh The bank connection timed out at 14:05 BRT. Figures shown are from 13:30 BRT.

Dark scope

Income $24,312 +8.8% vs Mar

Expenses $10,628 −6.8% vs Mar

Net cash $125,784 +12.2% vs Mar

Open exceptions 7 +3 vs Mar

Monthly expenses peaked in February at $14,200 and have eased since, to $10,628 in April.

Income
Expenses

Income has outpaced expenses every month since November; April's gap was $13,684.

Date	Description	Amount
Apr 26	Variance review, operating account	$1,245.32
Apr 21	Restaurant dinner	−$87.60
Apr 13	Freelance payment	$10,586.00
Page total		$11,743.72

Compact density
Date	Description	Amount
Apr 29	Consulting invoice 2026-041	$7,226.00
Apr 24	Interest received	$312.18

No transactions match these filters Clear the date filter or widen the range to see April activity.

Loading transactions…

Balances couldn't refresh The bank connection timed out at 14:05 BRT. Figures shown are from 13:30 BRT.

Money

Two decimals in tables, detail views and exports: $10,586.00.
Metric card heroes use whole units, with the exact value one click away: $125,784.
Abbreviate (k, M; mil, mi in pt-BR) only for chart axes and data labels: $14.2k. Never in tables, captions or exports.
Format with the workspace locale: $10,586.00 (en-US), R$ 10.586,00 (pt-BR). When a view mixes currencies, show the ISO code: USD 10,586.00.

Negatives and change

Negative amounts take a true minus sign before the symbol: −⁠$87.60. The amount stays in the body text color.
Color and arrows belong to change, not to sign: a delta is favorable or unfavorable by what it means for the reader.
Deltas are always signed. Percent deltas take one decimal (+8.8%, −⁠6.8%); count deltas are whole numbers (+3).
Percentages take one decimal; stored rates show up to two (4.25%).
Accounting parentheses, ($87.60), appear only in statement-style PDF exports.

Dates and empty values

In tables, write dates in sentence case: Apr 13, or Apr 13, 2026 when the year is not obvious (pt-BR: 13 abr., 13 abr. 2026). Never all caps.
Exports, file names and IDs use ISO 8601: 2026-04-13.
Audit times use 24-hour clock with the time zone: 14:05 BRT.
Show zero as 0.00. Use an em dash (—) only for "no value".

Table behavior

Header: uppercase label in --text-muted on the inset fill. Numeric headers align right with their column.
Hover: the row takes the hover fill. Selected: a light gold tint and the 3px gold leading bar; interactive grids also set aria-selected on the row.
Sort: the active column shows an arrow (↑ or ↓) and sets aria-sort. Unsorted columns show nothing.
Totals: a footer row in bold with a stronger top edge; never a colored band. Label what it sums ("Page total" or "Total, all 128 rows").
Truncation: long text ends in an ellipsis with the full value in a tooltip. Numbers never truncate.
Density: comfortable by default; compact for operator queues with many rows. Both keep tabular numerals.
Paging: a quiet footer with the visible range ("1–25 of 128") and plain previous/next controls.

Charts

One emphasis series in gold. Everything else is context in neutral or blue series colors.
Categorical series use --chart-series-1 to 3, in that order. More than three series is a table, not a chart.
Sequential scales run from the inset fill toward the primary text color; never a rainbow.
Gridlines are horizontal only, in --chart-grid. Value axes carry the unit ($5k); labels use --text-muted at 11px or larger.
Label the emphasis directly with its value, so it stands out without color.
Never put a balance and a flow on one axis. Plot balances and movements in separate charts.
The legend sits below the plot, in series order. A single series needs no legend.
Every chart has a caption that states the takeaway in words. It is the text alternative, so the graphic can be hidden from screen readers.
Charts do not animate in. Values change in place.

Empty, loading and error

Empty: say what is missing and the next useful action. Separate "nothing yet" from "no results for these filters".
Loading: keep the section in place and show static placeholders with a short "Loading…" label. No spinners over data.
Error: stay inside the section, say what failed in plain words and offer a retry. Never a page-wide error for one card.

In the product

Metric cards: CrxMetricCard.
Tables with sorting, paging and row actions: CrxDataGrid (its contract defines the loading, empty and error states).
Chart plus commentary blocks: CrxSummaryBlock.
Empty states: CrxEmptyState. Loading: CrxLoadingState.

--chart-series-1 Graphite / Soft Silver

--chart-series-2 Steel Blue / Mist Blue

--chart-series-3 Steel Grey / Blue Grey

--chart-emphasis Muted Gold / Rich Gold

--chart-muted Steel Grey / Blue Grey

--chart-grid Mist Grey / Steel Navy

Do

Right-align numeric columns and use tabular figures for every balance and rate.
One summary metric, one chart and one supporting note is usually enough per block.
Color a delta by meaning. Falling expenses are good news, so they are green.
Give every chart a caption that states the takeaway in words.
Show the next useful action in every empty state.

Don't

Decorative chart styling, heavy gridlines or marketing-style framing on analysis surfaces.
Proportional numerals in columns. Digits drift and balances stop lining up.
Red for a number just because it went down.
Five semantic colors in one dashboard tile. Noise over signal.
Empty states with no next step, or spinners laid over stale numbers.

11 PRODUCT APPLICATION (LIGHT)

Light mode is the reporting expression.

Light is the canonical mode for document-grade surfaces. The tokens below are the single source of truth the Blazor product consumes. Any in-app dark or light color that is not listed here is out of brand.

Where it belongs

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

Surface feel

Porcelain and paper carry the reading surface. Graphite drives the hierarchy. Muted gold accents one or two moments per view, never more.

Gold budget

Treat gold as punctuation. If a viewport reads gold first, reduce gold. Never set long-form body copy in gold.

Token	Role	Palette / Hex	Usage
`--surface-base`	Canvas	Porcelain White #F7F7F4	Page canvas for reading, reports and review screens.
`--surface-raised`	Card	Paper White #FFFFFF	Cards, panels, inputs and document surfaces above the canvas.
`--surface-inset`	Inset region	Mist Grey #D9DADC	Table headers, neutral badges and quiet inset strips inside cards.
`--surface-overlay`	Overlay	Paper White #FFFFFF	Modals, popovers and detached menus that float above cards.
`--surface-hover`	Hover fill	Cool Mist #ECEFF2	Hover fill for secondary controls, navigation rows and table rows.
`--surface-pressed`	Pressed fill	Mist Grey #D9DADC	Pressed fill for secondary controls.
`--surface-selected`	Selected fill	Paper White #FFFFFF	Selected navigation rows on the inset rail, always paired with the gold leading bar.
`--surface-disabled`	Disabled fill	Mist Grey #D9DADC	Disabled buttons and inputs. It sits close to the canvas so the control recedes.
`--text-primary`	Maximum-emphasis text	Near Black #1C2025	Headlines, statement totals, input values and strong hierarchy.
`--text-secondary`	Body copy	Graphite #2F343A	Readable body text across reports, tables and panels.
`--text-muted`	Labels and support	Steel #4F5B66	Labels, column headers, axis captions, placeholders and helper text.
`--text-disabled`	Inactive text	Steel Grey #8B9097	Disabled labels only. WCAG exempts them; never use it for content.
`--text-on-accent`	Text over accents	Paper White #FFFFFF	Labels on the primary action and on Success, Info and Danger fills.
`--text-on-warning`	Text over warning	Near Black #1C2025	Labels on Warning fills. Gold is too light to carry a white label.
`--text-link`	Link	Link Steel #3B5571	Inline links. Always underlined in running copy.
`--text-link-hover`	Link hover	Link Steel Hover #2D4258	Inline link hover and active state.
`--accent-primary`	Primary action	Graphite #2F343A	The one primary button per view and dominant navigation moments.
`--accent-primary-hover`	Primary hover	Near Black #1C2025	Primary hover. Light deepens to Near Black; dark lifts to Pale Gold.
`--accent-primary-pressed`	Primary pressed	Near Black #1C2025	Primary pressed fill, drawn with the pressed inset edge below.
`--accent-brand`	Brand emphasis	Muted Gold #B08D57	Selective premium emphasis: one or two highlighted moments per view.
`--accent-brand-deep`	Small-type gold	Deep Gold #8F5D18	Eyebrows, section numbers and highlight captions in small type.
`--accent-success`	Positive state	Forest Green #2F7D57	Settled states, favorable movement and healthy completion cues.
`--accent-info`	Informational	Steel Blue #4C6E91	Contextual states, reference metadata and informational emphasis.
`--accent-warning`	Caution	Muted Gold #B08D57	Review-needed states. A fill, never a text color, and always carries a label.
`--accent-danger`	Error state	Rosewood #A34E58	Rejected exceptions, errors, unfavorable movement and error helper text.
`--border-default`	Hairline	Mist Grey #D9DADC	Card edges, table grid lines and quiet dividers.
`--border-strong`	Control edge	Steel Grey #8B9097	Input and secondary-button borders at rest.
`--border-hover`	Control edge, hover	Graphite #2F343A	Secondary-button border on hover and press.
`--border-pressed`	Pressed edge	Steel Grey #8B9097	2px inset edge that marks a pressed primary button.
`--border-focus`	Focus ring	Deep Gold #8F5D18	2px outer focus ring, offset 2px, on every interactive element.
`--border-focus-on-accent`	Focus ring over accent	Deep Gold #8F5D18	Focus ring around accent-filled controls, so it never melts into the fill.
`--chart-series-1`	Chart series 1	Graphite #2F343A	First categorical series.
`--chart-series-2`	Chart series 2	Steel Blue #4C6E91	Second categorical series.
`--chart-series-3`	Chart series 3	Steel Grey #8B9097	Third categorical series and comparison periods.
`--chart-emphasis`	Chart emphasis	Muted Gold #B08D57	The single highlighted series or bar in a chart.
`--chart-muted`	Chart context	Steel Grey #8B9097	De-emphasized bars and context series next to the emphasis.
`--chart-grid`	Chart grid	Mist Grey #D9DADC	Gridlines and axis rules. Decorative, never the only cue.

	Context	Pair	Ratio	WCAG
Aa	Headline on canvas Text · needs 4.5:1	`--text-primary` #1C2025 on `--surface-base` #F7F7F4	15.25:1	Normal AAA Large AAA
Aa	Headline on card Text · needs 4.5:1	`--text-primary` #1C2025 on `--surface-raised` #FFFFFF	16.37:1	Normal AAA Large AAA
Aa	Eyebrow on canvas Text · needs 4.5:1	`--accent-brand-deep` #8F5D18 on `--surface-base` #F7F7F4	5.22:1	Normal AA Large AAA
Aa	Body copy on canvas Text · needs 4.5:1	`--text-secondary` #2F343A on `--surface-base` #F7F7F4	11.69:1	Normal AAA Large AAA
Aa	Body copy on card Text · needs 4.5:1	`--text-secondary` #2F343A on `--surface-raised` #FFFFFF	12.55:1	Normal AAA Large AAA
Aa	Labels on canvas Text · needs 4.5:1	`--text-muted` #4F5B66 on `--surface-base` #F7F7F4	6.47:1	Normal AA Large AAA
Aa	Labels on card Text · needs 4.5:1	`--text-muted` #4F5B66 on `--surface-raised` #FFFFFF	6.95:1	Normal AA Large AAA
Aa	Column header on inset Text · needs 4.5:1	`--text-muted` #4F5B66 on `--surface-inset` #D9DADC	4.96:1	Normal AA Large AAA
Aa	Link on card Text · needs 4.5:1	`--text-link` #3B5571 on `--surface-raised` #FFFFFF	7.70:1	Normal AAA Large AAA
Aa	Primary button label Text · needs 4.5:1	`--text-on-accent` #FFFFFF on `--accent-primary` #2F343A	12.55:1	Normal AAA Large AAA
Aa	Primary button label, hover Text · needs 4.5:1	`--text-on-accent` #FFFFFF on `--accent-primary-hover` #1C2025	16.37:1	Normal AAA Large AAA
Aa	Success badge text Text · needs 4.5:1	`--text-on-accent` #FFFFFF on `--accent-success` #2F7D57	5.00:1	Normal AA Large AAA
Aa	Info badge text Text · needs 4.5:1	`--text-on-accent` #FFFFFF on `--accent-info` #4C6E91	5.32:1	Normal AA Large AAA
Aa	Warning badge text Text · needs 4.5:1	`--text-on-warning` #1C2025 on `--accent-warning` #B08D57	5.29:1	Normal AA Large AAA
Aa	Danger badge text Text · needs 4.5:1	`--text-on-accent` #FFFFFF on `--accent-danger` #A34E58	5.54:1	Normal AA Large AAA
Aa	Neutral badge text Text · needs 4.5:1	`--text-primary` #1C2025 on `--surface-inset` #D9DADC	11.70:1	Normal AAA Large AAA
Aa	Favorable delta on card Text · needs 4.5:1	`--accent-success` #2F7D57 on `--surface-raised` #FFFFFF	5.00:1	Normal AA Large AAA
Aa	Unfavorable delta and error text on card Text · needs 4.5:1	`--accent-danger` #A34E58 on `--surface-raised` #FFFFFF	5.54:1	Normal AA Large AAA
Aa	Input value on card Text · needs 4.5:1	`--text-primary` #1C2025 on `--surface-raised` #FFFFFF	16.37:1	Normal AAA Large AAA
Aa	Input border on card Control edge or graphic · needs 3:1	`--border-strong` #8B9097 on `--surface-raised` #FFFFFF	3.21:1	Non-text AA
Aa	Focus ring on canvas Control edge or graphic · needs 3:1	`--border-focus` #8F5D18 on `--surface-base` #F7F7F4	5.22:1	Non-text AA
Aa	Focus ring on card Control edge or graphic · needs 3:1	`--border-focus` #8F5D18 on `--surface-raised` #FFFFFF	5.60:1	Non-text AA
Aa	Accent focus ring on canvas Control edge or graphic · needs 3:1	`--border-focus-on-accent` #8F5D18 on `--surface-base` #F7F7F4	5.22:1	Non-text AA
Aa	Chart emphasis on card Control edge or graphic · needs 3:1	`--chart-emphasis` #B08D57 on `--surface-raised` #FFFFFF	3.09:1	Non-text AA
Aa	Chart context series on card Control edge or graphic · needs 3:1	`--chart-muted` #8B9097 on `--surface-raised` #FFFFFF	3.21:1	Non-text AA

Primary button

Default Aa · Label Graphite fill, Paper White label.

Hover Aa · Label Near Black fill, Paper White label.

Pressed Aa · Label Near Black fill, Paper White label, Steel Grey edge. 2px inset edge.

Focus Aa · Label Graphite fill, Paper White label, Deep Gold ring. 2px outer ring, offset 2px.

Disabled Aa · Label Mist Grey fill, Steel Grey label. No border, no gold.

Secondary button

Default Aa · Label Paper White fill, Graphite label, Steel Grey edge.

Hover Aa · Label Cool Mist fill, Near Black label, Graphite edge.

Pressed Aa · Label Mist Grey fill, Near Black label, Graphite edge.

Focus Aa · Label Paper White fill, Graphite label, Steel Grey edge, Deep Gold ring. 2px outer ring, offset 2px.

Disabled Aa · Label Mist Grey fill, Steel Grey label. No border.

Navigation item

Default Aa · Label Mist Grey fill, Graphite label. Sits on the quiet inset rail.

Hover Aa · Label Cool Mist fill, Near Black label.

Selected Aa · Label Paper White fill, Near Black label, Muted Gold leading bar. 3px leading bar.

Focus Aa · Label Mist Grey fill, Graphite label, Deep Gold ring. 2px outer ring.

Form input

Default Aa · Label Paper White fill, Near Black label, Steel Grey edge.

Focus Aa · Label Paper White fill, Near Black label, Deep Gold edge. Solid 2px edge, no glow.

Error Aa · Label Paper White fill, Near Black label, Rosewood edge. Pair with danger helper text.

Disabled Aa · Label Mist Grey fill, Steel Grey label, Mist Grey edge.

Status badge

Neutral Aa · Label Mist Grey fill, Near Black label.

Info Aa · Label Steel Blue fill, Paper White label.

Success Aa · Label Forest Green fill, Paper White label.

Warning Aa · Label Muted Gold fill, Near Black label. Counts against the gold budget.

Danger Aa · Label Rosewood fill, Paper White label.

Horizontal signature (light) --surface-base / --surface-raised
Default product lockup in app bars, sign-in and report headers.
Symbol-only mark (light) --surface-raised
When the signature would drop below 140px wide: collapsed sidebars, chips and avatars.
Square icon Browser and OS chrome
Favicons, app launchers and touch icons. Never rebuilt from the signature.

Do

Graphite for primary actions. Gold is accent, not the action color.
Keep the gold budget to one or two emphasis moments per view.
Graphite for body copy, Steel for labels and column headers, Steel Grey only for control edges and disabled labels.
A 2px Deep Gold focus ring, offset 2px, on every interactive element.
Near Black labels on Muted Gold warning fills (5.29:1).

Don't

White labels on Muted Gold fills: 3.09:1, below AA for normal text.
Steel Grey for any text that must be read: 2.99:1 on canvas.
A Muted Gold focus ring: 2.87:1 on canvas, below the 3:1 non-text minimum.
Gold on buttons, rows or chrome that are not brand emphasis moments.
Colors outside the token table above. It is the canonical palette.

12 PRODUCT APPLICATION (DARK)

Dark mode is the operational application expression.

Dark is the canonical mode for continuous-monitoring and multi-panel workspaces. The tokens below are the single source of truth the Blazor product consumes. Any in-app surface, text or accent color that is not listed here is out of brand.

Where it belongs

Continuous monitoring, navigation-heavy workflows, dashboards and multi-panel analysis environments. Exports stay light unless a specific presentation need demands dark.

Surface stack

Midnight is the canvas. Deep Navy is the primary card surface. Slate Navy is the raised / focused layer, used for overlays and active selections.

Gold in dark

Gold is more load-bearing in dark than in light: it is the primary action color. Keep supporting accents (Info, Success, Danger) quieter so gold stays legible.

Token	Role	Palette / Hex	Usage
`--surface-base`	Canvas	Midnight Navy #0D1B2A	Application canvas for operational, multi-panel workspaces.
`--surface-raised`	Card	Deep Navy #132238	Cards, panels, inputs and document surfaces above the canvas.
`--surface-inset`	Inset region	Slate Navy #1E314A	Table headers, neutral badges and quiet inset strips inside cards.
`--surface-overlay`	Overlay	Slate Navy #1E314A	Modals, popovers and detached menus that float above cards.
`--surface-hover`	Hover fill	Steel Navy #2A3C54	Hover fill for secondary controls, navigation rows and table rows.
`--surface-pressed`	Pressed fill	Midnight Navy #0D1B2A	Pressed fill for secondary controls.
`--surface-selected`	Selected fill	Deep Navy #132238	Selected navigation rows on the inset rail, always paired with the gold leading bar.
`--surface-disabled`	Disabled fill	Slate Navy #1E314A	Disabled buttons and inputs. It sits close to the canvas so the control recedes.
`--text-primary`	Maximum-emphasis text	Off White #F3F5F7	Headlines, statement totals, input values and strong hierarchy.
`--text-secondary`	Body copy	Soft Silver #C8D0D8	Readable body text across reports, tables and panels.
`--text-muted`	Labels and support	Silver Grey #B5C0CC	Labels, column headers, axis captions, placeholders and helper text.
`--text-disabled`	Inactive text	Blue Grey #6E7C8C	Disabled labels only. WCAG exempts them; never use it for content.
`--text-on-accent`	Text over accents	Midnight Navy #0D1B2A	Labels on the primary action and on Success, Info and Danger fills.
`--text-on-warning`	Text over warning	Midnight Navy #0D1B2A	Labels on Warning fills. Gold is too light to carry a white label.
`--text-link`	Link	Link Blue #A8C8EE	Inline links. Always underlined in running copy.
`--text-link-hover`	Link hover	Link Blue Hover #C3DAF4	Inline link hover and active state.
`--accent-primary`	Primary action	Rich Gold #C9A14A	The one primary button per view and dominant navigation moments.
`--accent-primary-hover`	Primary hover	Pale Gold #E3C978	Primary hover. Light deepens to Near Black; dark lifts to Pale Gold.
`--accent-primary-pressed`	Primary pressed	Rich Gold #C9A14A	Primary pressed fill, drawn with the pressed inset edge below.
`--accent-brand`	Brand emphasis	Rich Gold #C9A14A	Selective premium emphasis: one or two highlighted moments per view.
`--accent-brand-deep`	Small-type gold	Rich Gold #C9A14A	Eyebrows, section numbers and highlight captions in small type.
`--accent-success`	Positive state	Sage Green #57A37B	Settled states, favorable movement and healthy completion cues.
`--accent-info`	Informational	Mist Blue #7AA7D9	Contextual states, reference metadata and informational emphasis.
`--accent-warning`	Caution	Pale Gold #E3C978	Review-needed states. A fill, never a text color, and always carries a label.
`--accent-danger`	Error state	Coral Rose #D77A84	Rejected exceptions, errors, unfavorable movement and error helper text.
`--border-default`	Hairline	Steel Navy #2A3C54	Card edges, table grid lines and quiet dividers.
`--border-strong`	Control edge	Blue Grey #6E7C8C	Input and secondary-button borders at rest.
`--border-hover`	Control edge, hover	Rich Gold #C9A14A	Secondary-button border on hover and press.
`--border-pressed`	Pressed edge	Midnight Navy #0D1B2A	2px inset edge that marks a pressed primary button.
`--border-focus`	Focus ring	Rich Gold #C9A14A	2px outer focus ring, offset 2px, on every interactive element.
`--border-focus-on-accent`	Focus ring over accent	Off White #F3F5F7	Focus ring around accent-filled controls, so it never melts into the fill.
`--chart-series-1`	Chart series 1	Soft Silver #C8D0D8	First categorical series.
`--chart-series-2`	Chart series 2	Mist Blue #7AA7D9	Second categorical series.
`--chart-series-3`	Chart series 3	Blue Grey #6E7C8C	Third categorical series and comparison periods.
`--chart-emphasis`	Chart emphasis	Rich Gold #C9A14A	The single highlighted series or bar in a chart.
`--chart-muted`	Chart context	Blue Grey #6E7C8C	De-emphasized bars and context series next to the emphasis.
`--chart-grid`	Chart grid	Steel Navy #2A3C54	Gridlines and axis rules. Decorative, never the only cue.

	Context	Pair	Ratio	WCAG
Aa	Headline on canvas Text · needs 4.5:1	`--text-primary` #F3F5F7 on `--surface-base` #0D1B2A	15.91:1	Normal AAA Large AAA
Aa	Headline on card Text · needs 4.5:1	`--text-primary` #F3F5F7 on `--surface-raised` #132238	14.62:1	Normal AAA Large AAA
Aa	Eyebrow on canvas Text · needs 4.5:1	`--accent-brand-deep` #C9A14A on `--surface-base` #0D1B2A	7.18:1	Normal AAA Large AAA
Aa	Body copy on canvas Text · needs 4.5:1	`--text-secondary` #C8D0D8 on `--surface-base` #0D1B2A	11.15:1	Normal AAA Large AAA
Aa	Body copy on card Text · needs 4.5:1	`--text-secondary` #C8D0D8 on `--surface-raised` #132238	10.25:1	Normal AAA Large AAA
Aa	Labels on canvas Text · needs 4.5:1	`--text-muted` #B5C0CC on `--surface-base` #0D1B2A	9.42:1	Normal AAA Large AAA
Aa	Labels on card Text · needs 4.5:1	`--text-muted` #B5C0CC on `--surface-raised` #132238	8.66:1	Normal AAA Large AAA
Aa	Column header on inset Text · needs 4.5:1	`--text-muted` #B5C0CC on `--surface-inset` #1E314A	7.13:1	Normal AAA Large AAA
Aa	Link on card Text · needs 4.5:1	`--text-link` #A8C8EE on `--surface-raised` #132238	9.25:1	Normal AAA Large AAA
Aa	Primary button label Text · needs 4.5:1	`--text-on-accent` #0D1B2A on `--accent-primary` #C9A14A	7.18:1	Normal AAA Large AAA
Aa	Primary button label, hover Text · needs 4.5:1	`--text-on-accent` #0D1B2A on `--accent-primary-hover` #E3C978	10.67:1	Normal AAA Large AAA
Aa	Success badge text Text · needs 4.5:1	`--text-on-accent` #0D1B2A on `--accent-success` #57A37B	5.74:1	Normal AA Large AAA
Aa	Info badge text Text · needs 4.5:1	`--text-on-accent` #0D1B2A on `--accent-info` #7AA7D9	6.92:1	Normal AA Large AAA
Aa	Warning badge text Text · needs 4.5:1	`--text-on-warning` #0D1B2A on `--accent-warning` #E3C978	10.67:1	Normal AAA Large AAA
Aa	Danger badge text Text · needs 4.5:1	`--text-on-accent` #0D1B2A on `--accent-danger` #D77A84	5.80:1	Normal AA Large AAA
Aa	Neutral badge text Text · needs 4.5:1	`--text-primary` #F3F5F7 on `--surface-inset` #1E314A	12.05:1	Normal AAA Large AAA
Aa	Favorable delta on card Text · needs 4.5:1	`--accent-success` #57A37B on `--surface-raised` #132238	5.27:1	Normal AA Large AAA
Aa	Unfavorable delta and error text on card Text · needs 4.5:1	`--accent-danger` #D77A84 on `--surface-raised` #132238	5.33:1	Normal AA Large AAA
Aa	Input value on card Text · needs 4.5:1	`--text-primary` #F3F5F7 on `--surface-raised` #132238	14.62:1	Normal AAA Large AAA
Aa	Input border on card Control edge or graphic · needs 3:1	`--border-strong` #6E7C8C on `--surface-raised` #132238	3.74:1	Non-text AA
Aa	Focus ring on canvas Control edge or graphic · needs 3:1	`--border-focus` #C9A14A on `--surface-base` #0D1B2A	7.18:1	Non-text AA
Aa	Focus ring on card Control edge or graphic · needs 3:1	`--border-focus` #C9A14A on `--surface-raised` #132238	6.60:1	Non-text AA
Aa	Accent focus ring on canvas Control edge or graphic · needs 3:1	`--border-focus-on-accent` #F3F5F7 on `--surface-base` #0D1B2A	15.91:1	Non-text AA
Aa	Chart emphasis on card Control edge or graphic · needs 3:1	`--chart-emphasis` #C9A14A on `--surface-raised` #132238	6.60:1	Non-text AA
Aa	Chart context series on card Control edge or graphic · needs 3:1	`--chart-muted` #6E7C8C on `--surface-raised` #132238	3.74:1	Non-text AA

Primary button

Default Aa · Label Rich Gold fill, Midnight Navy label.

Hover Aa · Label Pale Gold fill, Midnight Navy label.

Pressed Aa · Label Rich Gold fill, Midnight Navy label, Midnight Navy edge. 2px inset edge.

Focus Aa · Label Rich Gold fill, Midnight Navy label, Off White ring. 2px outer ring, offset 2px.

Disabled Aa · Label Slate Navy fill, Blue Grey label. No border, no gold.

Secondary button

Default Aa · Label Deep Navy fill, Soft Silver label, Blue Grey edge.

Hover Aa · Label Steel Navy fill, Off White label, Rich Gold edge.

Pressed Aa · Label Midnight Navy fill, Off White label, Rich Gold edge.

Focus Aa · Label Deep Navy fill, Soft Silver label, Blue Grey edge, Rich Gold ring. 2px outer ring, offset 2px.

Disabled Aa · Label Slate Navy fill, Blue Grey label. No border.

Navigation item

Default Aa · Label Slate Navy fill, Soft Silver label. Sits on the quiet inset rail.

Hover Aa · Label Steel Navy fill, Off White label.

Selected Aa · Label Deep Navy fill, Off White label, Rich Gold leading bar. 3px leading bar.

Focus Aa · Label Slate Navy fill, Soft Silver label, Rich Gold ring. 2px outer ring.

Form input

Default Aa · Label Deep Navy fill, Off White label, Blue Grey edge.

Focus Aa · Label Deep Navy fill, Off White label, Rich Gold edge. Solid 2px edge, no glow.

Error Aa · Label Deep Navy fill, Off White label, Coral Rose edge. Pair with danger helper text.

Disabled Aa · Label Slate Navy fill, Blue Grey label, Steel Navy edge.

Status badge

Neutral Aa · Label Slate Navy fill, Off White label.

Info Aa · Label Mist Blue fill, Midnight Navy label.

Success Aa · Label Sage Green fill, Midnight Navy label.

Warning Aa · Label Pale Gold fill, Midnight Navy label. Counts against the gold budget.

Danger Aa · Label Coral Rose fill, Midnight Navy label.

Horizontal signature (dark) --surface-base / --surface-raised
Default product lockup on Midnight or Deep Navy chrome.
Symbol-only mark (dark) --surface-raised / --surface-overlay
Collapsed sidebars, modal headers and narrow toolbars below 140px.
Square icon Browser and OS chrome
The same icon set in both modes. It carries its own dark field.

Do

Rich Gold for primary actions. It is the load-bearing action color in dark.
An Off White focus ring around gold fills; a Rich Gold ring everywhere else.
Midnight is the canvas, Deep Navy the card, Slate Navy the raised and inset layer, Steel Navy the edge.
Hover lifts the gold to Pale Gold; pressed returns to Rich Gold with a Midnight inset edge.
Midnight labels on every accent fill, including Success (5.74:1) and Danger (5.80:1).

Don't

Off White labels on Sage Green or Coral Rose fills: 2.77:1 and 2.74:1, both below AA.
Blue Grey for labels on cards: 3.74:1. Use Silver Grey.
A Rich Gold focus ring on a Rich Gold fill. It disappears into the button.
Gold fills or outlines on disabled buttons. They read as active or selected.
Info, Success or Danger out-shouting the gold. Keep them quieter.
Colors outside the token table above. It is the canonical palette.

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 builds trust, shows the product truthfully and hands people off to app.crx.money.

crx.money

CRX•MoneyAlpha

Financial clarity for modern private operations.

Secure multi-user financial operations, evidence-aware review, auditable rules, and trusted journal posture in one operating surface.

Open App Learn More

Public site tone

The site introduces trust, scope and method. It is lighter and more editorial than the app: more white space, larger type, one idea per block.

Handoff to app.crx.money

"Open App" is always the primary action and goes to app.crx.money in the same tab. "Learn More" is the secondary action and stays on the page. Name the domains in copy so people know where they will land.

Calls to action

Use only actions that exist: Open App and Learn More today. Add "Request demo" or "Sample report" only when the flow behind them ships.

Proof, not decoration

Show real product crops from the app in light mode, cropped to the panel that proves the point, with demo data only (§15). No lifestyle imagery, no mockups of features that do not exist.

Navigation

Horizontal signature at left, 36px tall (30px on small screens); three to five text links; a Learn More outline pill and the Open App pill at right.
On the home page and this guide the bar is sticky: Paper at 80% with a soft blur and shadow.
On small screens the links fold into a menu with every page; Open App stays visible. Only the app link is called Open App.

Hero

Eyebrow (CRX•Money plus the Alpha pill), a headline of three lines at most, a one-sentence lede.
The Open App / Learn More pair, then proof: up to three short signal cards and up to two real product crops.
At most one dark panel in the hero, and it carries copy, not decoration.

Footer and legal pages

Footer: the square icon, the CRX•Money eyebrow, one line on what the site is, and Brand, Security, Privacy and Terms of Use links separated by a bullet.
Legal pages: one column up to 1024px wide, a "Last updated" pill under the lede, body at 16px and about 80 characters a line. The header keeps Open App as a text link.

Marketing type scale

Hero headline 48–72px Inter Display 700, line height 0.98, three lines at most.

Section title 34–59px Inter Display, fluid with the viewport.

Card title 20–24px Inter Display 600–700.

Lede 18–20px One sentence under the headline.

Body 14–18px Line height about 1.8 on the site, roomier than the app.

Eyebrow 12px Uppercase, wide tracking (about 0.2em), Deep Gold.

Dark mode and motion

Light-only, with dark islands

crx.money is a light site: it declares a light color scheme and does not follow the visitor’s dark-mode setting. Dark appears only as deliberate islands, at most one per screen, painted with Midnight and Deep Navy with Off White and Soft Silver text. The app is where dark mode lives (§12).

Motion follows §18: color and border transitions at 140ms, no scroll-triggered animation, and smooth scrolling switches off under reduced motion. The only shape change is the menu icon turning into a close icon.

Social card

One card for every page: /og-card.png, 1200 × 630, PNG.
Keep everything inside an 80px safe area; platforms crop the edges.
Light canvas, one claim in three lines at most, one line of support, the app.crx.money pill (filled, the handoff) and crx.money (outline), the approved square icon and one gold rule.
No coins, no dark variant, no screenshots too small to read. Regenerate it from its source with npm run og:build.

Site role	Canon token	Resolves to
`crx-ink`	`--text-primary`	Near Black #1C2025 (light)
`crx-ink-soft`	`--text-secondary`	Graphite #2F343A (light)
`crx-ink-muted`	`--text-muted`	Steel #4F5B66 (light)
`crx-night`	`--color-midnight-navy`	Midnight Navy #0D1B2A
`crx-night-soft`	`--color-deep-navy`	Deep Navy #132238
`crx-gold`	`--accent-brand`	Muted Gold #B08D57 (light)
`crx-gold-deep`	`--accent-brand-deep`	Deep Gold #8F5D18 (light)
`crx-gold-soft`	`--color-cream-gold`	Cream Gold #F1E4BB
`crx-gold-pale`	`--color-pale-gold`	Pale Gold #E3C978
`crx-paper`	`--surface-raised`	Paper White #FFFFFF (light)
`crx-paper-soft`	`--surface-base`	Porcelain White #F7F7F4 (light)
`crx-silver`	`--color-soft-silver`	Soft Silver #C8D0D8
`crx-on-night`	`--color-off-white`	Off White #F3F5F7
`crx-action`	`--accent-primary`	Graphite #2F343A (light)
`crx-action-hover`	`--accent-primary-hover`	Near Black #1C2025 (light)
`crx-on-action`	`--text-on-accent`	Paper White #FFFFFF (light)
`crx-line`	`color-mix(in srgb, var(--color-near-black) 10%, transparent)`	Near Black at 10%
`crx-line-strong`	`color-mix(in srgb, var(--color-near-black) 18%, transparent)`	Near Black at 18%
`crx-edge-hover`	`--border-hover`	Graphite #2F343A (light)

Do

Make Open App the primary action in the header and the hero; the 404 page may lead back home instead.
Prove claims with real, light-mode product crops.
Use the site role names, never raw colors.

Don't

Calls to action for flows that do not exist yet.
Dark mode on the public site, or more than one dark island per screen.
Mockups, stock photos or screenshots with real customer data.

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, on screen, on paper and in a spreadsheet.

CRX•Money · Monthly Treasury Review · April 2026 Confidential · Sample data

Movements

April transactions

Date	Description	Status	Amount
Apr 2	Office lease, April	Settled	−$4,200.00
Apr 3	Client retainer, Halvorsen Studio	Settled	$6,500.00
Apr 7	Contractor payroll	Settled	−$2,850.00
Apr 9	Card settlement	Review	−$1,318.42
Subtotal, 4 of 10 rows			−$1,868.42

Generated 2026-05-02 09:00 BRT from CRX•Money · Northwind demo workspace Page 3 of 4

Page and margins

A4 portrait by default, with US Letter on the same layout. Margins are 22 mm at the top, 18 mm at the sides and 20 mm at the bottom. Keep text lines under about 90 characters.

Running header and footer

Top left: report name and period. Top right: classification. Bottom left: when and where it was generated ("2026-05-02 09:00 BRT from CRX•Money", workspace). Bottom right: "Page n of N". The cover carries the horizontal signature, 60 to 65 mm wide at top left, and no running header. The last page closes with a one-line disclaimer naming the data source and its limits.

Type

Inter Display sets the cover, titles and figures, and IBM Plex Mono sets references. Body copy uses Inter at 10 to 11 pt; where Inter is not embedded, Inter Display stands in at 11 pt or more. Labels never go below 8 pt. Embed static weights, never the variable font (§07).

Numbers and tables

Follow §10: right-aligned tabular figures, two decimals in tables, a true minus for negatives, signed deltas. Accounting parentheses are allowed in statement-style reports only. Label every total with what it sums.

Color and greyscale

Light palette only. One gold emphasis per page. Review-needed items use Warning gold; errors and unfavorable movement use Rosewood. Every color cue also has a word, arrow or sign, so the page still reads when printed in greyscale.

Print charts

Context bars in Steel Grey and the emphasis in Graphite when the page already spends its gold elsewhere, so the two separate in greyscale. Label the emphasis with its value. Axis labels at 8 pt or more, gridlines at 0.5 pt, horizontal only.

Lines and fills

Rules and gridlines are at least 0.5 pt; use 0.75 pt under table headers and above totals. Anything thinner disappears in print. No true black fills and no full-bleed color.

CSV and XLSX exports

ISO 8601 dates (2026-04-13), a dot decimal separator and no thousands separator, signed amounts in one column, one header row in sentence case, and a currency column when amounts can mix currencies.

File names

crx-money_<report>_<workspace>_<period-end>.<ext>, for example crx-money_monthly-treasury-review_northwind_2026-04-30.pdf. Fields are separated by underscores and words inside a field by hyphens, so the name sorts and parses cleanly.

Dark mode

Dark crops may appear in presentations and marketing, never as the default PDF or print style.

Do

Put the period, workspace, generation time and page count on every page.
Make every flagged item traceable to the rows it covers, with a status column.
Right-align amounts with one precision per column.
Pair every color cue with a word, arrow or sign.
Start new layouts from the report sample.

Don't

Screenshots of the app pasted into a report.
Hairline rules below 0.5 pt, or labels below 8 pt.
Danger red for items that only need review.
Abbreviated amounts ($125.8k) in report tables or exports.

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 itself, the reports and simple graphics that reinforce structure rather than noise.

Use

Product truth and data-led graphics

Real product captures, report pages, charts, tables and simple diagrams. Crop to the panel that proves the point.

Operating cash flow stays positive every month, March to February (sample data).

Two providers are connected and none needs attention.

These are the current site crops. They predate the capture rules below (1× captures, a chart still labeled as mock, a button color that has since changed) and are due for recapture on the demo workspace, with a paired dark crop.

Optional

Abstract support, never spectacle

A quiet grid, a cropped interface detail or a soft tonal field built from the palette can frame a page. One per page at most, and always behind content, never instead of it.

Quiet grid

Interface detail

Tonal field

Avoid

Speculative finance clichés

Coins, token stacks, neon glows, meme-crypto motifs, loud 3D renders, busy lifestyle stock and cartoon illustration weaken trust and pull the brand away from serious software. The brand never hosts off-brand imagery, so these are named, not shown.

Coins and token stacks
Neon glow on black
Rocket or moon motifs
Stock people at screens

Capturing product screenshots

Light mode by default; use dark crops only for presentations and dark sections, and pair them with the light version.
Capture at 2× device pixel ratio from a 1440px-wide window, then crop to the panel; never upscale a 1× capture.
Crop out browser chrome, the OS and the cursor. Leave 16 to 24px of the surrounding surface around the panel.
Use the demo workspace only. Names, balances, account numbers, tax IDs, emails, document images and file names must be fictional. Never blur, pixelate, bar out or crop around real data: recapture on demo data instead.
Third-party logos (banks, exchanges) appear only as provider identifiers, at their own colors and never larger than the CRX•Money mark.
Re-capture when the UI changes. A crop that no longer matches the product is a broken promise.

Alt text

Screenshots: say what the image proves, not what it looks like: "Review queue with three items awaiting evidence". Captions state the takeaway.
Charts follow §10: the caption states the takeaway and is the text alternative, so the chart graphic itself is hidden from screen readers.
Decorative textures and backgrounds get empty alt text so screen readers skip them.

Icons

Today the app’s navigation and several actions still use filled icons, and icon sizes are not yet applied consistently. Both move to this policy with the Crx component migration.

Bootstrap Icons, the set the app already ships. Do not mix in other icon families.
Outline by default. Use the filled variant only to show a selected or active state, or inside a status badge.
Sizes: 16px inline with text, 20px in buttons and navigation, 24px for empty states and page headers.
Color icons with the text tokens. Use semantic colors only when the icon itself signals a state.
Every icon-only button has an accessible name.

People

Portraits are allowed only for real people in a real role: team pages, quotes and case studies, with their consent, in natural light and neutral settings. No staged stock of people pointing at screens, celebrating or holding devices.

Do

Lead with real, light-mode product crops on demo data.
Caption every crop with what it proves.
Use Bootstrap Icons in outline, sized 16, 20 or 24px.

Don't

Screenshots that show real customer names, balances or identifiers.
Mockups of features that do not exist.
Mixed icon families, emoji or decorative icon colors.

16 VOICE AND COPY

Write with confidence, precision and calm.

The verbal system should sound intelligent, composed and evidence-led. It supports trust in the product rather than performing excitement. These rules cover every surface that speaks: the app, the site, reports, emails and notifications.

Trustworthy

Say what happened, why it matters and what happens next. Never hide a cost, a limit or an error.

Analytical

Lead with the number, the comparison or the evidence. State facts before attitude.

Premium

Use precise, composed words. Confidence comes from clarity, not from luxury adjectives.

Efficient

Short verbs for actions, product nouns for things. Cut filler before cutting meaning.

Direct and calm

Reassure without overpromising. Answer, then stop.

Writing the product name

CRX•Money, with the bullet (U+2022), in all reader-facing copy: the app, the site, reports and emails.
CRX Money, with a space, only where the bullet cannot be typed or rendered, such as SMS or some form fields.
crx-money in URLs, file names and identifiers; crx.money and app.crx.money as domains.
Never CRX-Money, Crx Money, CRXMoney, or CRX Money where the bullet renders, in reader-facing copy. CRX-Money is the repository and Azure DevOps project name only.

Mechanics

Sentence case for headings, buttons, navigation and labels. Names of product areas and report types keep their capitals (Review / Match, Chart of Accounts, Monthly Treasury Review). Uppercase eyebrows and table headers are a style, so write their source text in sentence case.
Numbers, money and dates follow §10: $10,586.00, −⁠$87.60, +8.8%, Apr 13, 2026.
An en dash for ranges (Apr 1–30, 2026), a minus sign for negatives, a hyphen only inside words. Avoid dashes as sentence breaks in product copy: use a period. No exclamation marks in product copy.
Page titles read Area – Page: the area keeps its capitals, an en dash separates, and the page part is sentence case (Reports – Profit and loss).
Curly quotes and apostrophes in display copy; straight ones only in code and identifiers.

Headline

Better

Quarterly cash visibility in one view.

Avoid

The future of finance is here.

Button

Better

Review exceptions

Avoid

Unlock insights

Toast

Better

Rule saved. It applies to new movements.

Avoid

Woohoo! You’re all set!

Error

Better

Couldn’t import the file. It isn’t a PDF, XML, OFX or image file. Choose another file.

Avoid

Oops! Something went wrong.

Empty state

Better

No exceptions this month. New ones appear here as movements arrive.

Avoid

Nothing to see here!

System copy

Better

3 movements need review.

Avoid

Great news – we found something interesting!

Email subject

Better

Monthly Treasury Review for April is ready

Avoid

🚀 Your report just dropped!

Report title

Better

Monthly Treasury Review, April 2026

Avoid

Your Amazing April Money Recap

Errors

Say what happened, why if you know, and what to do next: "Couldn’t refresh balances. The bank connection timed out. Try again in a few minutes."
Never blame the reader. Put error codes last, in mono, for support.
Replace raw technical messages ("Save failed: {error}") with the pattern above.

Empty states

Name what is missing and the next useful action: "No movements yet. Connect an integration or import a statement."
When filters hide everything, say so: "No movements match these filters."

Destructive actions

Name the object and the consequence: "Delete 3 movements? Their evidence stays in Document Review."
The confirm button repeats the verb and count ("Delete 3 movements"); the other button is "Cancel". Never "Are you sure?" or "OK".

Emails and notifications

The subject is the event in sentence case: "Your password was reset" or "3 movements need review".
The first line says what happened; offer one action; sign off as CRX•Money. No marketing in transactional mail.

Workspace: The shared space where a team’s accounts, documents and rules live. Never "tenant" in reader-facing copy.
Transactions: The product area (Transactions – Review, Journal, Import). Use it for the area, not for the items inside it.
Movement: A single money movement from any source. Once posted, it lives in the Journal.
Review / Match: The queue where movements get evidence and a decision before they reach the Journal.
Journal: The trusted ledger of posted movements.
Exception: A movement, document or rule result that broke an expectation and needs action. Warning while it waits for review; Danger once rejected (§06, §14).
Evidence: A document or record that supports a movement.
Rule: An automation that classifies or routes movements.
Integration: A connection to a bank, exchange or file source.
Member: A person with access to a workspace. Operator is a member’s role, not another kind of person. Avoid "user" in reader-facing copy.

Locale

Product copy is written in English (en-US) today. The target is that numbers, money and dates follow the workspace locale, so a pt-BR workspace sees R$ 10.586,00 and 13 abr. 2026. Not there yet: the Journal formats in pt-BR whatever the workspace locale. When copy is translated, the product name and the glossary terms translate consistently, from one shared glossary.

Writer’s checklist

Front-load the verb or the number.
One or two sentences per message.
Count before noun: 3 movements, not three movements.
No trailing period on buttons, titles or labels.

Do

Write the product name as CRX•Money.
Use the glossary terms, the same way everywhere.
Give every error and empty state a next step.

Don't

Exclamation marks, emoji or "Oops!" in product copy.
Raw technical errors shown to readers.
"Are you sure?" confirmations that do not name what will happen.

17 DO / DON’T

The system succeeds when restraint is protected.

Every section except this one ends with its own do and don’t. This index gathers the first of each, so a review can start here and jump to the full rules. The misuse examples below are drawn with the real styles, so they look exactly as wrong as they would in the product.

Section	Do	Don’t
§01 Brand foundation7 items	Quiet authority over loud energy.	Flashy, noisy or over-gamified interpretations.
§02 Brand principles6 items	Name the principle a design decision serves when you propose or review it.	Inventing a sixth trait for one campaign or screen.
§03 Logo system6 items	Use the horizontal signature by default.	The stacked signature in navigation, headers or app chrome.
§04 Logo rules9 items	Use the light artwork on Paper, Porcelain and other light neutrals.	Recolor or re-gradient the logo.
§05 Color system6 items	Choose colors by name from this palette. Every value lives in crx-tokens.css.	Raw hex, rgb or near-miss colors in product, site or report code.
§06 Color roles7 items	Reserve each role for its purpose: Success for completion, Warning for review, Danger for errors, Primary for the one main action.	Stacking Success, Warning and Danger in the same viewport.
§07 Typography8 items	Inter Display for every UI surface; IBM Plex Mono for every code or reference string.	Using Inter Display below 11pt as body copy in PDF: tighter metrics hurt readability there.
§08 Layout and spacing6 items	Lead every screen and page with one dominant module.	Off-scale values such as 10px or 0.65rem, even when they "look right".
§09 Component language8 items	One primary action per panel. Reserve Primary for the dominant verb.	Two Primary buttons competing on the same panel.
§10 Data surfaces10 items	Right-align numeric columns and use tabular figures for every balance and rate.	Decorative chart styling, heavy gridlines or marketing-style framing on analysis surfaces.
§11 Product application (light)10 items	Graphite for primary actions. Gold is accent, not the action color.	White labels on Muted Gold fills: 3.09:1, below AA for normal text.
§12 Product application (dark)11 items	Rich Gold for primary actions. It is the load-bearing action color in dark.	Off White labels on Sage Green or Coral Rose fills: 2.77:1 and 2.74:1, both below AA.
§13 Website application6 items	Make Open App the primary action in the header and the hero; the 404 page may lead back home instead.	Calls to action for flows that do not exist yet.
§14 Reporting and exports9 items	Put the period, workspace, generation time and page count on every page.	Screenshots of the app pasted into a report.
§15 Imagery6 items	Lead with real, light-mode product crops on demo data.	Screenshots that show real customer names, balances or identifiers.
§16 Voice and copy6 items	Write the product name as CRX•Money.	Exclamation marks, emoji or "Oops!" in product copy.
§18 Asset guidance4 items	Keep one approved source package and derive every export from it.	Deriving new masters from screenshots, copied slides or ad hoc exports.

Stretched or recolored logo Distorts approved artwork. See §04 Logo rules

Gold flood Gold is punctuation, not paint. See §06 Color roles

Rainbow chart One emphasis series; color carries meaning. See §10 Data surfaces

Red for good news Falling expenses are favorable. See §10 Data surfaces

Two primary buttons One primary action per view. See §09 Component language

Grey body copy Steel Grey text fails contrast. See §11 Product application (light)

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.

Every file below is published at the path shown, and the package download bundles all of them. Take assets from here, not from screenshots or slides, so web, product, reporting and presentation surfaces stay aligned.

File	Format	Size	Use
Signature The default lockup. Use the horizontal signature wherever it fits at 140px wide or more; §03 sets when the stacked version applies.
crx-money-logo-horizontal-light.png `/brand/crx-money-logo-horizontal-light.png`	PNG	1465 × 218 187 KB	Primary signature on light surfaces.
crx-money-logo-horizontal-dark.png `/brand/crx-money-logo-horizontal-dark.png`	PNG	1490 × 218 183 KB	Primary signature on dark surfaces.
crx-money-logo-vertical-light.png `/brand/crx-money-logo-vertical-light.png`	PNG	2048 × 1250 650 KB	Stacked signature for square and centered formats, light.
crx-money-logo-vertical-dark.png `/brand/crx-money-logo-vertical-dark.png`	PNG	2046 × 1252 653 KB	Stacked signature for square and centered formats, dark.
Symbol-only mark Below 140px wide, switch to the mark. Never go below 20px on screen (§04).
crx-money-mark-light.png `/brand/crx-money-mark-light.png`	PNG	2048 × 1006 547 KB	Mark without the wordmark, light.
crx-money-mark-dark.png `/brand/crx-money-mark-dark.png`	PNG	2048 × 1013 534 KB	Mark without the wordmark, dark.
Square icon and favicons For browser tabs, launchers and avatars. Use the size closest to the slot instead of scaling the signature down.
crx-money-icon.svg draft `/brand/crx-money-icon.svg`	SVG	Vector, 256 × 256 artboard 9 KB	Square icon source. Draft until the vector redraw.
crx-money-square-icon-32.png `/crx-money-square-icon-32.png`	PNG	32 × 32 2 KB	Square icon for small square slots, such as integration lists.
crx-money-square-icon-64.png `/crx-money-square-icon-64.png`	PNG	64 × 64 5 KB	Square icon, footers and lists.
crx-money-square-icon-128.png `/crx-money-square-icon-128.png`	PNG	128 × 128 14 KB	Square icon, app launchers.
crx-money-square-icon-256.png `/crx-money-square-icon-256.png`	PNG	256 × 256 39 KB	Square icon, avatars and integrations.
favicon.ico `/favicon.ico`	ICO	16, 32 and 48 7 KB	Browser favicon bundle.
favicon.svg draft `/favicon.svg`	SVG	Vector 9 KB	Scalable favicon (same draft artwork as the SVG icon).
favicon-16x16.png `/favicon-16x16.png`	PNG	16 × 16 1 KB	Raster favicon.
favicon-32x32.png `/favicon-32x32.png`	PNG	32 × 32 2 KB	Raster favicon.
apple-touch-icon.png `/apple-touch-icon.png`	PNG	180 × 180 33 KB	iOS home-screen icon.
Social One card for every page; §13 sets its content rules.
og-card.png `/og-card.png`	PNG	1200 × 630 154 KB	Open Graph and X card for every page.
Product crops Light-mode app captures used on the site and in §13/§15. All five predate the §15 capture rules and are due for recapture on the demo workspace; recaptures are named crx-money-crop-<surface>-<mode>.png.
reporting-proof-light.png recapture `/app-screenshots/reporting-proof-light.png`	PNG	1258 × 982 189 KB	Reporting: cash-flow summary and trend.
integrations-connect-provider-light.png recapture `/app-screenshots/integrations-connect-provider-light.png`	PNG	1011 × 839 160 KB	Integrations: overview and provider picker.
review-match-proof-light.png recapture `/app-screenshots/review-match-proof-light.png`	PNG	1300 × 963 230 KB	Review/match queue. Do not reuse: real data behind redaction.
audit-proof-light.png recapture `/app-screenshots/audit-proof-light.png`	PNG	1189 × 958 178 KB	Audit trail. Do not reuse: shows identifiers.
documents-evidence-proof-light.png recapture `/app-screenshots/documents-evidence-proof-light.png`	PNG	1354 × 983 279 KB	Document review. Do not reuse: real document behind redaction.
Reference artwork The masters every export above was made from. Start here for any new size.
crx-money-light-approved-reference-8x.png `/brand/crx-money-light-approved-reference-8x.png`	PNG	5520 × 2880 1.9 MB	Light master at 8×. Source for new light exports.
crx-money-dark-approved-reference-8x.png `/brand/crx-money-dark-approved-reference-8x.png`	PNG	5520 × 2880 4.2 MB	Dark master at 8×. Source for new dark exports.
Reporting The reference layout for PDF reports (§14). Fictional demo data.
crx-money-report-sample.pdf `/brand/crx-money-report-sample.pdf`	PDF	A4, 4 pages 350 KB	Report sample: cover, summary, table and page spec.
Tokens Colors and component styles for light and dark modes, for code and for design tools.
crx-tokens.css `/brand/crx-tokens.css`	CSS	21 KB	Color tokens and component styles for light and dark modes, as the website and app load them.
crx-tokens.json generated `/brand/downloads/crx-tokens.json`	JSON	11 KB	The same palette and light/dark tokens, for design tools.

Shared asset rules

Name brand asset files in lowercase with hyphens: crx-money-<asset>-<variant>-<mode>[-<size>].<ext>. Platform files keep the names browsers and social networks expect (favicon.ico, apple-touch-icon.png, og-card.png). Report and export files follow §14.
The SVG icon is a draft. Use the PNG masters for anything printed or scaled up until the vector redraw lands.

Tokens

One stylesheet, shared/brand/crx-tokens.css, holds every color and component token. A sync script copies it into the website and the app. The website build stops if a copy, a swatch, a token table or a published contrast pair drifts from it.

Product

Product screens use the §11/§12 application tokens (surface, text, accent, border) through the shared Crx component set (page shell, cards, data grid, metric cards, empty states), so §09 and §10 apply directly. The app theme maps those tokens onto its framework with the §05 primitives, including the App extensions. Never hardcode hex, and keep tabular numerals in every numeric column.

Reporting

Reports stay light by default and follow §14. The report sample in the Reporting group above is the reference layout for covers, running headers, tables and print type.

Motion

Transitions are for color, border and background only: 140ms ease, never longer than 200ms. The one exception is a small affordance such as the menu icon morphing into a close icon. Numbers and charts do not animate. Every transition switches off under prefers-reduced-motion.

Presentations and marketing

One clear claim, one real product crop and one restrained gold accent per slide or card.

What may evolve in v2.x

Next: a controlled vector redraw of the signature and symbol, an expanded icon pack and a deeper chart library. Fixed: the approved mark character, the core palette, the Inter Display and IBM Plex Mono type pairing, gold restraint and the dual-mode system.

Do

Keep one approved source package and derive every export from it.
Download files from this section, never from a copy in a deck or chat.

Don't

Deriving new masters from screenshots, copied slides or ad hoc exports.
Renaming files outside the naming rule.

CRX•Money Brand Guidelines

What changed in v2.2

A serious financial software brand built for clarity.

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

Brand affirmations

Off-brand signals

Five principles shape every visual and verbal choice.

Trustworthy

Analytical

Premium

Efficient

Direct and calm

Do

Don't

The approved identity stays intact: an evolution, not a redesign.

Signatures on light surfaces

Signatures on dark surfaces

Symbol-only mark

Favicon and app icon

Lockup hierarchy

Asset status

Do

Don't

Protect clear space, size and contrast.

x = diameter of the gold separator dot

Each lockup has a floor

Do

Don't

A shared neutral backbone with two deliberate modes.

Light / reports

Dark / application

App extensions

Do

Don't

Semantic UI color supports meaning. Data color stays disciplined.

Do

Don't

Inter Display leads; IBM Plex Mono handles anything read as data.

Do

Don't

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

Application

Website

Reports

Density

Surface and composition rules

Do

Don't

Controls should look capable, not decorative.

Do

Don't

Tables, cards and dashboards carry the working product experience.

Money

Negatives and change

Dates and empty values

Table behavior

Charts

Empty, loading and error

In the product

Do

Don't

Light mode is the reporting expression.

Where it belongs

Surface feel

Gold budget

Primary button

Secondary button

Navigation item

Form input

Status badge

Do

Don't

Dark mode is the operational application expression.

Where it belongs

Surface stack

Gold in dark

Primary button

Secondary button

Navigation item

Form input