FX Board

# FX Board — DESIGN.md

An exchange-rate board and converter. Family: Swiss utility, light.

## 1. Visual theme and atmosphere

A clean trading desk printed on off-white paper. Grid, numbers, one acid highlighter. Mood: crisp, trustworthy, slightly playful in one place only.

## 2. Color palette and roles

```
--bg:     #f6f6f1   /* paper */
--panel:  #ffffff
--line:   #e3e3da
--ink:    #101010
--mute:   #6b6b6b
--up:     #0a8f5a   /* data: rate rose over 30 days */
--down:   #d1373a   /* data: rate fell */
--lime:   #d7ff3a   /* the one accent: headline highlighter and the swap icon */
```

Rule: green and red only for direction of change. Lime never appears on more than two elements per screen.

## 3. Typography

- Headings and labels: **IBM Plex Sans** 400–700. Headline 700, `clamp(40px, 7vw, 64px)`, tracking −0.03em.
- Every number: **IBM Plex Mono** 500/600 (rates, amounts, ticker, dates).
- Labels 11px uppercase mono with 0.1em tracking.

## 4. Components

- **Ticker tape:** black strip, mono 13px, pair, rate and a ▲/▼ change in green or red.
- **Banner:** photo with a white fade from the left; a small static square with the rates date; headline with a lime highlighter on one word.
- **Converter:** two soft fields (label, big mono amount, currency select) and a round black swap button with a lime Phosphor arrows icon; the result rolls to its new value.
- **Currency card:** code, name, change badge, mono rate, sparkline with a 16% area fill in the direction color. Tapping a card converts into it; the selected card gets an ink outline.

## 5. Layout

Max width 1080px. Converter is three columns (field, swap, field), one column on phones with the swap rotated. Cards: auto-fill grid with 230px minimum. Radii: 24px banner, 22px converter, 20px cards, 16px fields.

## 6. Depth

Mostly flat: 1px borders and one soft shadow under the converter. Cards lift slightly on hover.

## 7. Motion

- Ticker loops seamlessly (content doubled, −50% translate): rates as a passing stream.
- Converted amount rolls in 500 ms; the swap button turns half a turn.
- Sparklines draw once; cards rise in a short cascade.
- `prefers-reduced-motion`: ticker still, numbers jump, lines drawn.

## 8. Do and don't

Do: mono for every number; say the date of the rates; "Not financial advice" in the footer.
Don't: pulsing "live" dots, a second accent, colored backgrounds for whole cards, rounded pills for numbers.

## 9. Agent prompt guide

Bias: off-white grid, Plex Sans + Plex Mono, green/red only for change, one lime highlight.
Reject: dark crypto-casino look, neon gradients, glowing charts, blinking tickers on every element.

## Data and credits

Frankfurter exchange rates API (blended reference rates, free to use, also commercially, as Frankfurter states). Banner photo from Pixabay, file kept with the page, author credited. Phosphor Icons MIT. Code MIT-0. Not financial advice.