# https://finance.neallin.xyz/

[Open the live Fudge conversation](https://design.withfudge.com/share/44msxa40sz/https_finance_neallin_xyz/)

Last updated: 2026-08-05

This is an operate-mode personal-finance dashboard; its strongest choice is the dark navigation rail against a light workspace, with teal, green, and red accents giving financial categories an immediate visual meaning.

The full-page capture could not be completed, so this review covers the rendered desktop and mobile viewports rather than the entire scroll journey.

[Image unavailable: Desktop viewport of the finance dashboard]

![Mobile viewport of the finance dashboard](https://api.withfudge.com/v1/shares/92f9126b-dd9d-4dcc-be5c-c8544fe402b2/attachments/72220d719dbb800e0e938aab/1.jpg)

## What works

- **The visual language fits finance.** The near-black rail, neutral workspace, restrained teal, and clearly differentiated positive/negative accents feel calm and analytical rather than promotional.
- **The page has a recognizable dashboard frame.** Navigation, page heading, summary content, charts, and account-oriented modules are separated into understandable regions.
- **The typography is consistent.** Avenir Next is used across the interface, with heavier display weights for headings and lighter supporting text. The 36px page heading gives the desktop view a clear entry point.
- **The responsive direction is sensible.** The mobile view preserves the same product identity instead of becoming an unrelated redesign.

## Saved references that informed the recommendations

## Captured pages

[![Origin Financial](https://pin.fontofweb.com/8926?format=jpg)](https://design.withfudge.com/share/pin-8926)

[Origin Financial](https://design.withfudge.com/share/pin-8926)

[![Obsidian](https://pin.fontofweb.com/8838?format=jpg)](https://design.withfudge.com/share/pin-8838)

[Obsidian](https://design.withfudge.com/share/pin-8838)

[![Yahoo Finance - Stock Market Live, Quotes, Business & Finance News](https://pin.fontofweb.com/7828?format=jpg)](https://design.withfudge.com/share/pin-7828)

[Yahoo Finance - Stock Market Live, Quotes, Business & Finance News](https://design.withfudge.com/share/pin-7828)

[![Exa | Web Search API, AI Search Engine, & Website Crawler](https://pin.fontofweb.com/4349?format=jpg)](https://design.withfudge.com/share/pin-4349)

[Exa | Web Search API, AI Search Engine, & Website Crawler](https://design.withfudge.com/share/pin-4349)

## Priority improvements

### 1. Make one financial answer dominant

**First change:** redesign the first content block around one primary financial overview rather than giving several rounded modules similar visual weight.

The current interface has a polished dashboard frame, but the hierarchy appears to ask the user to scan multiple cards before understanding the most important number or action. For an operating dashboard, the first question should be immediately obvious: *What is my current financial position, and what changed?*

Use one dominant summary panel containing:

- primary balance or net-worth figure;
- change over the selected period;
- one compact trend visualization;
- a single prominent next action.

Move secondary categories, account lists, and supporting charts below it. Origin Financial is the strongest reference for this direction.

### 2. Increase the size of secondary information

The interface uses many small text styles: 8px metadata, 9–11px labels, and 10.5px controls. That creates a refined compact appearance, but financial dashboards need sustained readability.

Increase:

- navigation labels to at least 12–13px;
- chart labels and supporting values to at least 12px;
- compact controls to 12px or larger;
- uppercase or letter-spaced labels only for genuinely secondary metadata.

Keep the 36px page heading and 20px section headings, but create a more generous gap between heading, explanatory copy, and controls. Yahoo Finance is a useful comparison here: it supports dense information, but grouping and scan paths do more work than tiny type.

### 3. Simplify the mobile navigation model

The desktop rail is a clear strength, but the mobile layout compresses navigation, controls, and page content into a much tighter vertical sequence. On a 390px viewport, the navigation should not compete with the page title or the first financial summary.

Use one of these patterns:

- a compact top bar with only logo, account, and menu;
- a bottom navigation with four primary destinations;
- a slide-out navigation drawer with the full section list.

Do not preserve every desktop navigation item in the mobile header. Keep the primary financial task visible and defer less-used sections.

### 4. Reserve elevation for meaningful hierarchy

The current visual system combines rounded cards, light borders, and several soft shadows. The sections use approximately 16px corner radii, while smaller controls use pill-shaped forms. Individually these choices are polished; repeated across every module, they make the page feel more like a generic dashboard kit.

Use:

- flat bordered surfaces for standard data modules;
- one stronger elevation treatment for the primary overview;
- minimal or no shadow for repeated chart and list sections;
- rounded pills only for filters, statuses, or compact controls.

This would make the most important module feel important without introducing new decoration.

### 5. Make color semantics explicit

Teal, green, red, and gray are useful distinctions, but color should reinforce a written label rather than carry the entire meaning. Pair each state with text such as “income,” “loss,” “linked,” “pending,” or “attention,” and use icons consistently.

The current rendered palette is coherent:

## Colors

- `#e8e8ea`
- `#2f3032`
- `#1a1a1c`
- `#4b9088`
- `#386366`
- `#6ba29c`
- `#dcdee1`

The most useful refinement is not adding more colors; it is assigning each existing color a strict role. Keep teal for actions and selected states, green for positive financial movement, red for negative movement, and gray for inactive or unavailable content.

## Current design values

The rendered page uses Avenir Next throughout, with a 36px page heading, 20px section headings, 14px body text, 16px cards, 9px compact controls, and soft dark shadows on selected elevated surfaces.

```fudge-values
{
  "title": "Current rendered design values",
  "values": [
    {
      "category": "Typography",
      "label": "Body",
      "value": "Avenir Next, 14px / 23.1px"
    },
    {
      "category": "Typography",
      "label": "Page heading",
      "value": "Avenir Next, 36px / 42.48px, weight 700"
    },
    {
      "category": "Typography",
      "label": "Section heading",
      "value": "Avenir Next, 20px / 26px, weight 700"
    },
    {
      "category": "Spacing",
      "label": "Desktop sidebar padding",
      "value": "28px 16px 20px"
    },
    {
      "category": "Spacing",
      "label": "Mobile sidebar padding",
      "value": "10px 14px"
    },
    {
      "category": "Shape",
      "label": "Primary card radius",
      "value": "16px"
    },
    {
      "category": "Shape",
      "label": "Compact control radius",
      "value": "9px"
    },
    {
      "category": "Effect",
      "label": "Section shadow",
      "value": "0 12px 30px rgba(47, 48, 50, 0.07)"
    }
  ]
}
```

## Contrast check

The page provides an exact rendered body pair, but the exact calculation was unavailable for this inspection, so I’m not labeling it as passing or failing.

| Element | Foreground | Background | Size / weight | WCAG | AA | AAA | APCA |
|---|---|---|---|---|---|---|---|
| Body text | `#2f3032` | `#e8e8ea` | 14px / 400 | Unresolved — exact calculation unavailable | Unresolved | Unresolved | Unresolved |

## Vibe-coded appearance check

**Overall verdict: product-specific.**

| Visible occurrence | Judgment | Why |
|---|---|---|
| Dark finance-oriented sidebar with account/navigation grouping | **Earned** | Supports the product’s operating model and gives the interface a recognizable tool identity. |
| Teal, green, red, and gray semantic accents | **Earned** | The colors map naturally to actions, positive movement, negative movement, and inactive states. |
| Repeated rounded bordered cards with soft shadows | **Neutral** | Appropriate for a dashboard, but repetition across every module risks making the interface feel like a generic component library. |
| Very small uppercase and letter-spaced labels | **Generic/default** | They create a polished SaaS look but do not add much financial meaning; they also compete with readability. |
| Pill-shaped filters and compact status controls | **Neutral** | Appropriate when used for selection or state, but they should not spread to ordinary labels or navigation. |
| Consistent Avenir Next typography | **Earned** | The family and weight changes give the interface a calm, professional tone without relying on a technical monospace costume. |

The most valuable next step is therefore not a new color scheme or more decoration: **make the primary financial overview unmistakably dominant, then simplify the mobile navigation around it.**