Date: 2026-09-02
Scope: Design-only analysis. No code changes included here — see findings for follow-up implementation tasks.
Reference branch: adhoc/athena-fiba-design-review-1788354355
Reviewed pages on fiba.nl viewer: Upload screen, Dashboard, Kolommenbalans, Periodebalans, Grootboekkaarten (account + transaction detail), Stamgegevens (Bedrijf)
Visited viewer.fiba.nl live using browser tooling (Kapture/Chrome). Loaded the 5 MB sample XAF file. Captured screenshots of all major screens. Extracted the CSS design token set from viewer.fiba.nl/viewer.css via getComputedStyle and direct fetch. Compared against Athena's token set (frontend/athena-web/src/styles.scss) and component SCSS files. All color values below are directly extracted — none are guesses.
| Token | fiba.nl value | Athena value |
|---|---|---|
| Sidebar background | #0a192f (dark navy) | #ffffff (white) |
| Accent / primary | #d4af37 (gold) | #cc4100 (NDW orange) |
| Accent hover | #e5c158 (lighter gold) | — |
| Body background | #f4f7f6 (off-white) | #fafaf9 (warm off-white) |
| Card background | #ffffff | #ffffff |
| Border | #e2e8f0 | #e7e5e4 |
| Text primary | #0a192f | #1c1917 |
| Text muted | #8892b0 | #a8a29e |
| Success | #28a745 | #16a34a |
| Danger | #dc3545 | #dc2626 |
| Font family | Inter (Google Fonts) + JetBrains Mono | system-ui, -apple-system, … |
| Sidebar expanded | 270px | 224px (14rem) |
| Sidebar collapsed | 68px (icon-only) | N/A — no collapse |
fiba.nl: The sidebar collapses from 270px to 68px icon-only mode via a "← Inklappen" button. When collapsed, only SVG icons remain — no text labels. This frees ~200px of horizontal space for wide tabular data (critical for Periodebalans with 12+ columns).
Athena: 14rem (224px) fixed sidebar, no collapse mechanism exists.
Recommendation: Add a toggle button that collapses the nav-shell to ~56px icon-only mode. The nav links already have SVG icons — show those and hide the text label via aria-label when collapsed. Store collapse state in localStorage. This is especially high-value for Kolommenbalans and Periodebalans.
// nav-shell when collapsed
:host.collapsed {
width: 3.5rem; // 56px
.nav-sidebar__link span { display: none; }
.nav-sidebar__brand { display: none; }
}
fiba.nl: Active nav item = dark navy background + a 3px gold left border (border-left: 3px solid var(--accent)). The indicator is visually dominant without filling the entire row.
Athena: Active = background: var(--surface-2) with no edge indicator. The warm-gray fill is subtle and can be hard to spot compared to hover state (same fill).
Recommendation: Add border-left: 3px solid var(--accent) to .nav-sidebar__link--active and offset padding-left by 3px to maintain alignment. This creates a crisp, accent-colored indicator that works both with the white sidebar and a potential dark sidebar.
// In nav-shell.component.scss
&--active {
background: var(--accent-light);
border-left: 3px solid var(--accent);
padding-left: calc(var(--space-0625) - 3px); // compensate
color: var(--accent);
font-weight: var(--font-weight-medium);
}
fiba.nl: Nav items are grouped under uppercase section labels: ANALYSE, RAPPORTEN, AANVULLINGEN, STAMGEGEVENS. Each group has extra top margin.
Athena: All nav links are in a flat list — no grouping or section labels.
Recommendation: Wrap nav links in <nav-group> elements with an uppercase label <div class="nav-group__label">. Athena already has logical groups (analysis features vs. reports vs. master data), just no visual separation.
fiba.nl: Sidebar is dark navy #0a192f with white text. The dark sidebar creates strong contrast between the nav and the content area, making the active route immediately obvious.
Athena: White sidebar with a right-border separator. The content area is also light (--surface-0: #fafaf9), resulting in low contrast between sidebar and content.
Recommendation: This is a significant visual identity decision. Two options:
background: var(--text-primary) (warm near-black #1c1917), with text using --surface-0, and active state using --accent orange highlight. Requires inverting icon/text colors.Option B is lower risk with currently active concurrent work. Option A is the higher-fidelity match to fiba.nl's visual hierarchy.
fiba.nl: Inter (Google Fonts, weights 400/500/600/700/800) + JetBrains Mono for monospace. Inter renders identically across Windows, macOS, and Linux.
Athena: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif — renders as San Francisco on macOS, Segoe UI on Windows, and Roboto on Android. These have different x-heights and letter-spacing, causing layout inconsistencies in dense tables.
Recommendation: Add Inter via @import in styles.scss. Keep system-ui as the fallback. This affects all table data readability — Inter's tabular figures and tight letter-spacing are particularly beneficial for financial data.
// In styles.scss — top of file
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
}
Update --mono usage in kolommenbalans.component.scss (line 89: currently ui-monospace, monospace) to use var(--mono).
fiba.nl: Table rows at padding: 10px 12px (compact). Column headers: same height, uppercase, font-size: 0.7rem, letter-spacing 0.08em.
Athena (Kolommenbalans): padding: var(--space-05) var(--space-075) = 8px 12px. Column headers: font-size: var(--font-size-xs) = 0.6875rem. Very close match — density is comparable. No change needed here.
fiba.nl: Gold #d4af37. Paired with dark navy sidebar, it reads as a premium financial tool.
Athena: NDW orange #cc4100. This is the correct choice — it is the NDW brand color extracted from the real product. Do NOT change this. The orange reads well on both light and dark surfaces.
No change recommended for the accent color. The existing --accent: #cc4100 is intentional and correct.
fiba.nl: Each major table/section has a full-width dark navy #0a192f header bar with title text in gold. Example: the "Kolommenbalans" dark bar above the table, "Bedrijfsinformatie" and "Auditfile Metadata" bars in the Stamgegevens view.
Athena: Report titles (kolommenbalans__title) are plain text at font-size: var(--font-size-xl), font-weight: semibold — no visual container.
Recommendation: Add a .section-header component: full-width dark surface bar containing the report/section title and (optionally) count/meta text. Use background: var(--text-primary) (warm near-black #1c1917), color: var(--surface-0), with the title highlighted in var(--accent). Appropriate for the top of Kolommenbalans, Grootboek detail header, and Stamgegevens subsections.
.section-header {
background: var(--text-primary);
color: var(--surface-0);
padding: var(--space-075) var(--space-125);
border-radius: var(--radius-md) var(--radius-md) 0 0;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.01em;
.section-header__title {
color: var(--accent);
}
}
fiba.nl: KPI tiles use a 4px solid colored top border only as the status indicator. Remaining 3 sides use a very light #e2e8f0 border. Status colors: green top = OK/positive, gold top = neutral counts.
Athena (dashboard.component.scss lines 716–724):
.kpi-tile {
border: 1px solid var(--border); // full border
&--ok { border-color: var(--success); } // replaces ALL sides
&--warn { border-color: var(--critical); background: var(--critical-light); }
}
The full-border approach (where the entire 1px border changes color) is less prominent than fiba.nl's thick top-only stripe.
Recommendation: Switch to top-border accent:
.kpi-tile {
border: 1px solid var(--border);
border-top: 4px solid var(--border); // default: no status
&--ok { border-top-color: var(--success); }
&--warn { border-top-color: var(--critical); background: var(--critical-light); }
}
This makes the status color more prominent (thicker line) while keeping the tile body clean.
fiba.nl: KPI tile values use a large bold font (~1.8rem). Labels are in uppercase 0.65rem below.
Athena: kpi-tile__value at var(--font-size-2xl) = 1.125rem. Label at var(--font-size-xs) = 0.6875rem.
Recommendation: Increase kpi-tile__value from font-size-2xl (1.125rem) to font-size-3xl (1.625rem). The current size makes tiles feel small compared to the surrounding content.
fiba.nl — Kolommenbalans: The SOORT column shows colored filled pill badges:
background: rgba(30,126,52,.12), color: #1e7e34)background: rgba(26,58,107,.12), color: #1a3a6b)Athena — Kolommenbalans: SOORT column exists but renders plain text (no visual badge). The distinction between ACTIVA/PASSIVA is only readable as text.
Recommendation: Add a soort-badge component/CSS class with type-specific colors. Suggested Athena-compatible palette (keeping warm neutrals):
.soort-badge {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
&--activa {
background: color-mix(in srgb, var(--success) 12%, transparent);
color: var(--success);
}
&--passiva {
background: color-mix(in srgb, #3b82f6 12%, transparent);
color: #1d4ed8;
}
&--wenv {
background: color-mix(in srgb, #7c3aed 12%, transparent);
color: #5b21b6;
}
}
fiba.nl — Grootboekkaarten: Below the <thead> column headers, there is a dedicated filter input row with per-column text inputs (Datum..., Dagboek..., Boekstuk..., Oms...) and Min/Max amount fields. This allows filtering without leaving the table view.
Athena — Grootboek: Filters (filter-input) are placed as a flex row above the table in .grootboek__filters. There are no per-column inline inputs.
Recommendation: For the Grootboek transaction table, add a <tr class="filter-row"> inside <thead> as the second row, with <th> containing compact <input> elements per column. The current above-table filter approach works but creates a context switch. Inline column filtering (per fiba.nl) allows scanning data while adjusting filters.
The existing .filter-input CSS in grootboek.component.scss (line 127) can be reused; it just needs to be placed inside <thead>.
fiba.nl: Empty or zero numeric cells show – (U+2013 en dash). Example: accounts with no mutations show – in MUT.D and MUT.C columns, making it instantly clear these are structural accounts rather than accounts with a 0.00 balance.
Athena: Currently unknown — check behavior. If 0.00 is rendered for zero-balance cells, switch to – for cells where the value is truly null/absent (not a computed zero).
Recommendation: In table cell templates, render – when the value is null | undefined, and € 0,00 only when the value is an explicit zero from the API.
fiba.nl: In the Grootboek transaction table, the "BOEKSTUK" column (document reference e.g. BNK-2026-003682) is rendered as a clickable underlined link styled in the accent color. Clicking it presumably navigates to the memoriaal/transaction detail.
Athena — Grootboek: The boekstuknummer is rendered as plain monospace text (class="mono"). No drill-down link.
Recommendation: Render boekstuknummer as a routerLink (or button styled as a link) that navigates to the Memoriaal filtered to that document. This is a key drill-down interaction missing from Athena's Grootboek.
fiba.nl: The Periodebalans uses P1(JAN) through P12(DEC) as table columns with a "BEGINBALANS" column first. The table scrolls horizontally — all 12 periods are visible.
Athena: Athena ships a Kolommenbalans (period-totals view) but the Periodebalans is a separate view. The horizontal scrolling table with all 12 period columns is the right pattern — worth verifying Athena's Periodebalans implementation scrolls horizontally rather than paginating or truncating.
No design change needed if horizontal scroll is already in place.
fiba.nl: The Grootboek detail view shows a compact toolbar:
Dagboek | Boekstuk | Saldo (dark fill = active)P1 (jan) to: P12 (dec)Kopieer | CSV / Excel | Afdrukken — right-alignedPer pagina: 100 ▼ pagination selector — far rightAthena — Grootboek: Filters (grootboek__filters) are a flat flex row with no visual grouping between filter controls and export/action buttons.
Recommendation: Add visual separation between filter controls (left-aligned) and export actions (right-aligned) using justify-content: space-between on the toolbar. This is already partially done in Kolommenbalans (kolommenbalans__actions) but inconsistent across views.
fiba.nl: Period filters use native <select> dropdowns styled as Van: P1 (jan) ▼ Tot: P12 (dec) ▼ with a checkbox for "Beginbalans" toggle. All period labels show the period number and Dutch month abbreviation.
Athena (dashboard.component.scss, .period-filter): Also uses <select> dropdowns — consistent pattern. No change needed.
fiba.nl: In the Kolommenbalans toolbar, there is a ▼ RGS-weergave button with a gold border and gold text — visually distinct from the gray export buttons. This toggle switches the table to show RGS classification hierarchy.
Athena: No equivalent. This is a feature-level difference, not a design pattern to copy. The pattern of a "special mode toggle" distinguished by accent-colored border (border: 1px solid var(--accent); color: var(--accent)) is worth adopting as a general pattern for toggle-mode buttons that change the data view significantly.
fiba.nl: Export actions (Kopieer | CSV / Excel | Afdrukken) are consistently right-aligned in every report's toolbar. They use a visually unified group (adjacent buttons, same size/style).
Athena: .btn-export exists in dashboard.component.scss (line 779) but it appears in different positions per view. Standardize: export actions always right-aligned in a flex group, separated from filter controls.
fiba.nl: No max-width — content fills the full available width (sidebar-excluded). Wide tables use the full viewport.
Athena (dashboard.component.scss line 3): max-width: 72rem on the dashboard host. This is appropriate for the dashboard (card-based layout) but may be constraining for wide reports like Periodebalans where 12 period columns need space.
Recommendation: Remove max-width on report pages (Kolommenbalans, Periodebalans, Grootboek). Keep it on the dashboard for the card grid layout.
fiba.nl: 270px expanded. The extra width (vs. Athena's 224px) allows longer nav labels without truncation.
Athena: 224px. Current nav labels fit fine at this width. No change needed.
fiba.nl: Each nav link has an SVG icon (16×16) before the text label. Icons are simple stroke-style (2px stroke-width). When collapsed, only icons show with title as tooltip.
Athena: Nav links have no icons. Without icons, the collapsed sidebar (Area 1.1) would only show blank space.
Recommendation: Add small SVG icons to each nav link — a prerequisite for implementing sidebar collapse. Suggested icon set: use a single consistent library (e.g., Lucide icons which matches the stroke style fiba.nl uses). One icon per nav item.
fiba.nl: Clean centered upload UI with dashed border drag zone, large upload icon, golden CTA button ("Bestand kiezen"), file format chips (.XAF, .XFC, V2.0–V4.0, MEERDERE BESTANDEN), and a "Laad voorbeeldbestand" link in gold. Privacy notice shown in a bordered box above.
Athena: Similar upload flow but implemented inside the dashboard layout. The fiba.nl upload-as-landing pattern (full-screen centered upload before any navigation is shown) may be worth adopting for first-time sessions when no XAF is loaded.
| Priority | Area | Specific change | |---|---|---| | High | Nav 1.1 | Sidebar collapse to icon-only (prerequisite: icons) | | High | Nav 8.1 | Add SVG icons to all nav links | | High | Typography 2.1 | Add Inter font | | High | Tables 5.1 | SOORT type badges (ACTIVA/PASSIVA/W&V) | | High | Nav 1.2 | Accent left-border active indicator | | Medium | Color 3.2 | Section header bars (dark surface + accent title) | | Medium | Tables 5.4 | Linked boekstuknummer → drill-down | | Medium | Tables 5.2 | Inline column filter row (Grootboek thead) | | Medium | KPI 4.1 | Switch to top-border accent on KPI tiles | | Medium | KPI 4.2 | Increase KPI tile value font size | | Medium | Nav 1.3 | Navigation section grouping labels | | Low | Tables 5.3 | Em dash for empty/null cells | | Low | Layout 7.1 | Remove max-width on report pages | | Low | Filters 6.3 | Standardize export button right-alignment | | Low | Nav 1.4 | Consider dark sidebar background |
#d4af37 reflects their brand. Athena's NDW orange #cc4100 is correct and intentional — do not change.
Reacties