Design system

Fanalyx visual language

Two tiers: fa-* CSS for calculator/workflow pages, React components for interactive islands. Tokens live in @financial-analysis/tokens.

App spine buttons (fa-*)

Used in Astro pages and client-script HTML output.

Callouts (fa-*)

Info

Use for neutral guidance and tips.

Success

Use after a successful save or run.

Warning — Assumptions may not match your situation.

Error

Validation failed — check required fields.

Heroes

Marketing pages use PageHero (fa-page-hero). Calculators and journey steps use WorkflowHero (via WorkflowPageIntro /JourneyStepHero).

Marketing

PageHero sample

Catalog and product pages — Fraunces display, not a workflow card.

Workflow

WorkflowHero sample

Calculator / journey stage title lives inside a card with optional progress.

The Answer + assumptions + compare

Signature craft (#410–#415): one hero metric with tabular lining figures, assumption chips, and optional A/B compare. Helpers:answer-html.ts, assumption-chip-html.ts, compare-html.ts.

Monthly payment

$2,147

What you pay each month at 6.5% over 30 years.

View amortization

Tabular nums utility

$1,234,567.89

Compare toggle

Scenario A

Keep loan

$2,147 / mo

Scenario B

Refinance

$1,892 / mo

Data table (fa-*)

Use fa-data-table + header/cell classes. Wrap wide tables in a focusable scroll region (role="region" / React ScrollableRegion).

Month	Payment	Balance
1	$1,842	$348,158
2	$1,842	$346,310

Theme preview

Toggle dark mode to verify token contrast on both tiers.

Typography

Display hero

Display section

Body large — intro paragraphs and hero subcopy.

Body copy — standard page prose.

Meta copy — labels, footnotes, secondary detail.

Panel title — card and section headings.

Tabular lining figures (.fa-tabular-nums)

$1,842.17 $12,450.00 6.50%

Chips (fa-*)

App spine status tags — use React Badge in islands when possible.

AccentSuccessWarningDangerMuted

Form fields

App spine (fa-input-surface)

Loan amount

Helper text via fa-help-copy.

With error

Required field — use fa-field-error + aria-invalid.

React Input

Annual income

With validation error

Enter a positive number

React buttons

Badges

DefaultPrimarySuccessWarningDanger

Callouts

Info

Deterministic engines with audited formulas.

Success

Analysis saved to the workflow rail.

Warning

Rates are illustrative — verify with your lender.

Error

Required fields are missing.

Cards

Default card

Shared React card from @financial-analysis/ui.

Astro fa-card

App spine card class for static pages.

The Answer

Signature result pattern: one hero tabular number, one meaning sentence, assumption chips, one next step. Answer budget — no competing KPI wall above the fold.

Monthly payment

$1,842.17

What you pay each month on a $350,000 loan at 6.5% for 30 years.

30y 6.5% $350,000

View schedule

Standalone assumption chips

taxes on PMI off extra $200/mo

Compare A/B

Lightweight dual-column compare with segmented toggle (catalog stub).

Scenario A

Buy

$84,200

Net position after 10 years

Scenario B

Rent

$61,400

Invested down payment + rent path

Metric cards

Monthly Payment

$1,842

30-year fixed

Total Interest

$245,120

Over loan term

Hero metric

$1,842

Chart palette

Series colors from --fa-chart-* / chartColors in @financial-analysis/ui — not Tailwind blue/violet. Charts need role+label, axes, and non-color cues (AmortizationChart bar).

chart-1

chart-2

chart-3

chart-4

chart-5

Signature motion

Exactly three motions: ink-dry answer reveal, field highlight, journey progress width. Reduced-motion disables decorative animation.

Journey progress

40% complete

Field highlight demo

Rail card

Workflow rail section

Structured sidebar content in calculator pages.

Body slot for tips, chat context, or impact summary.

Token files

@financial-analysis/tokens (packages/tokens/tokens.css) — semantic CSS variables + Tailwind @theme
packages/ui/src/lib/classNames.ts — React class strings (uses token shadows / status)
apps/web/src/styles/components.css — fa-* component classes
apps/web/src/styles/chat-theme.css — chat third-tier VS Code sub-theme
apps/web/src/styles/a11y-forced-colors.css — forced-colors / prefers-contrast

Styling exceptions

ChatPanel.astro loads chat-theme.css (VS Code–inspired third tier). It is separate from the Fanalyx brand spine documented here.