[00]frontend developer hub

etops.dev

The starting point for everyone building etops frontends. Style, design, patterns, components and the CDN in one place, all built on Abundantia, our design system for financial products.

system: Abundantia
brand: #8B48FF
token: --abu-color-brandPrimary-500
typeface: Noto Sans Display
grid: 8px layout / 4px detail
cdn: cdn.etops.com
help: design@etops.com

when in doubt // use existing patterns before creating new ones

Style

tokens & foundations

brandPrimary

50100200300400500600700800900

Use var(--abu-color-brandPrimary-500) for primary actions and links. The --abu-color-base-* tokens ship with light-dark(), so dark mode works out of the box.

typefaces

Noto Sans Displayproduct UI, body copy, data

Poppinsetops.com and marketing

spacing

4 8 16 24 32 48

8px grid for layout, 4px grid for the details inside a component.

Design

figma & process

Figma libraries: UI Kit Foundation, Icons and Components, plus your product's own kit (yours to maintain)
Team spaces: Etops General, Abundantia, and your product team
File naming: a Figma file is named after its Jira ticket
Layout: 8px nudge, Auto Layout, spacing tokens instead of hand-tuned gaps
Accessibility: check contrast against WCAG; the target is the European Accessibility Act

Patterns

components & writing

components

writing

CDN

cdn.etops.com/assets/

use it

<!-- shared icon -->
<img src="https://cdn.etops.com/assets/icons/search.svg"
     alt="Search">
<!-- product logo: /assets/{app}/ -->
<img src="https://cdn.etops.com/assets/amp/amp-logo-120.png"
     alt="Asset Manager Pro">

served

product logosiconsfontsglobal cssjavascript

live from the cdn

house rules

Everything is public and crawlable. Nothing internal, personal or secret.
Lowercase, dashes, sizes in image names: amp-logo-120.png.
Max 1 MB per file. Cached for about 30 days, so nothing that changes often.
New assets go in by merge request; the Abundantia team approves.

Products

one design system, every app

amp

Asset Manager Pro

Portfolio management for discretionary wealth and institutional asset managers: analytics, rebalancing, risk, orders.

/assets/amp/

Order Manager

Order capture, routing, execution and post-trade across asset classes.

/assets/om/

fix

FIXhub

One gateway to brokers, custodians and exchanges. FIX, SWIFT, and REST to FIX.

/assets/fix/

Fund Monitor

Risk and ESG oversight for funds: VaR, liquidity, stress tests, UCITS, AIFMD, SFDR.

/assets/fm/

Advisory Hub

Advisor workflows: digital onboarding, client portals, automated rebalancing.

/assets/ad/

Wealth Discovery

Wealth app for relationship managers and client advisors: dashboard, analysis, persons, mandates, reports.

/assets/wd/

Finanzplaner

Financial planning: goals, scenarios and cash-flow analysis.

/assets/fp/

Launchpad

The app launcher. Every etops app a user can open, with search.

/assets/lp/

Web Components

soon

Abundantia components as native web components, usable from any frontend stack. Install, usage and API docs will land here.

Storybook

soon

Every component with its states, props and usage, browsable in one place. How to check out and run it locally will land here.

Guidelines, patterns, and components live in one shared place: Storybook + Wiki. team principles: one source of truth ↗

Boot log

this page's container, snapshot

entrypoint Launching /docker-entrypoint.d/10-envsub.sh
entrypoint Removing alias.
entrypoint Setting 'base' tag to /
entrypoint Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
entrypoint Launching /docker-entrypoint.d/30-tune-worker-processes.sh
entrypoint Launching /docker-entrypoint.d/50-docker-env-variables.sh
entrypoint Injecting environment variables to window.clientConfig: ''
entrypoint Launching /docker-entrypoint.d/90-wait-for-server.sh
entrypoint Configuration complete; ready for start up
[notice]   using the "epoll" event method
[notice]   nginx
[notice]   start cache manager process
[notice]   start cache loader process

Help

abundantia team

Questions, feedback or ideas? Contributions are welcome.

design@etops.com