Skip to content

Brand restyle: raafetchoukri.com (light/dark, theme toggle, mobile nav) #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Raafet57 merged 2 commits into from
Jun 30, 2026
Merged

Brand restyle: raafetchoukri.com (light/dark, theme toggle, mobile nav) #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3fe5f1
feat: port raafetchoukri.com brand restyle (light/dark, theme toggle,…
Raafet57 Jun 30, 2026
1cc02c0
fix: drop Google Fonts CDN to preserve the no-external-requests priva…
Raafet57 Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 276 additions & 0 deletions design_handoff_payment_intelligence_brand/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,276 @@
# Handoff: Payment Intelligence Modules — Brand Restyle (raafetchoukri.com)

## Overview

This is a full visual + UX restyle of the **Payment Intelligence Modules** suite
(`Raafet57/payment-intelligence-modules`, branch `main`). It rebrands the entire
browser-only suite to the **raafetchoukri.com** design language, adds a working
**light/dark theme**, adds a **mobile navigation menu**, removes all **em dashes**
from copy, and unifies the **sample data** so every tool reflects one coherent
synthetic payment.

The task for Claude Code is to **port these design changes into the existing
React/TypeScript app** (Vite + React + TS, pages under `src/pages/`, layout under
`src/components/layout/`) — using the repo's established patterns — then commit and
push. Do **not** add the HTML files to the repo as production code.

## About the Design Files

The files in `design/` are **design references created as standalone HTML**
("Design Components", `*.dc.html`). They are prototypes that show the intended
look, layout, copy, and behavior. They are **not** to be shipped as-is. Recreate
them in the repo's existing React/TSX environment and styling system (the repo
already has `src/index.css` and component/page structure — follow it).

Each `.dc.html` is self-contained: an inline `<style>` block defines the brand
CSS variables (light + dark), the markup uses inline styles, and a small
`<script>` class holds interaction logic (theme toggle, mobile menu, tab state).
Read them as a spec, not as code to copy.

## Fidelity

**High-fidelity (hifi).** Final colors, typography, spacing, radii, and
interactions. Recreate pixel-faithfully using the repo's libraries/patterns. All
exact values are documented below and in the inline styles of each file.

---

## Design Tokens

Implement these as CSS custom properties (the prototypes define them on `:root`
and override on `html.dark`). Map into the repo's `src/index.css` (or its Tailwind
theme if preferred). Dark mode is toggled by adding/removing the `dark` class on
`<html>`.

### Light (`:root`)

| Token | Value | Use |
| -------------------- | --------- | ------------------------------------- |
| `--background` | `#f8f9fc` | Page background |
| `--foreground` | `#0f1629` | Primary text |
| `--card` | `#ffffff` | Card / panel surface |
| `--card-hover` | `#f4f6fb` | Card hover surface |
| `--card-border` | `#e4e8f0` | Card border |
| `--border` | `#e0e5ee` | Hairlines, dividers, inputs |
| `--primary` | `#0ba8e0` | Brand sky blue (CTAs, links, accents) |
| `--primary-hover` | `#0a96c8` | Primary hover |
| `--secondary` | `#edf0f6` | Subtle fills, active nav pill |
| `--muted` | `#e4e8f0` | Track / chip fills |
| `--muted-foreground` | `#6b7a96` | Secondary text |
| `--accent` | `#2dcfb3` | Teal (privacy/"pass" accents) |
| `--destructive` | `#f03e3e` | Errors / critical |

Derived helpers used throughout:
`--p10 = rgba(11,168,224,0.10)`, `--p20 = rgba(11,168,224,0.22)`,
`--a10 = rgba(45,207,179,0.12)`, `--a20 = rgba(45,207,179,0.24)`.

### Dark (`html.dark`)

| Token | Value |
| ------------------------------------------ | -------------------- |
| `--background` | `#090e1a` |
| `--foreground` | `#f8f9fc` |
| `--card` | `#0f1629` |
| `--card-hover` | `#14203a` |
| `--card-border` | `#192540` |
| `--border` | `#1d2c4a` |
| `--secondary` | `#1d2c4a` |
| `--muted` | `#192540` |
| `--muted-foreground` | `#8899b8` |
| `--primary` / `--accent` / `--destructive` | unchanged from light |

### Capability badge colors (text color flips by theme)

| Capability | Light | Dark |
| ----------------------- | --------- | --------- |
| sky (Available) | `#0784b0` | `#38bdf8` |
| amber (Demo) | `#92660a` | `#fbbf24` |
| teal (Local) | `#0c7d6e` | `#2dd4bf` |
| indigo (Scaffold/Pilot) | `#4f46e5` | `#a5b4fc` |
| slate (Gated/disabled) | `#52607a` | `#cbd5e1` |

### Typography

- **UI font:** `Inter` (weights 400/500/600/700/800).
- **Data / mono:** `JetBrains Mono` (500/600/700) — used for numbers, amounts,
IDs, BICs, IBANs, code, version strings, maturity-tier labels.
- Scale: hero h1 `60px / 700 / -0.035em`; page h1 `32px / 700 / -0.025em`;
section h2 `24–30px / 700`; card title h3 `18px / 700`; body `16px / 1.6`;
small `13–14px`; eyebrow labels `11px / 700 / uppercase / 0.16em tracking`.

### Radii & depth

- Radii: buttons & inputs `8px`; cards `12–16px`; pills `999px`; icon tiles `10px`.
- **Depth via borders + hover background shifts only — NO drop shadows** (brand
rule). The only `box-shadow` allowed is a 1px ring on the circular "RC" avatar
mark (`box-shadow: 0 0 0 1px var(--p20)`), which reads as a border, not elevation.
- Card hover: background → `--card-hover`, border-color → `--a20` (no translate/shadow).

---

## Layout & Components

### SuiteHeader (`design/SuiteHeader.dc.html` → `src/components/layout/SuiteHeader.tsx`)

- Sticky top bar, 64px tall, `border-bottom: 1px var(--border)`, translucent
background (`color-mix(... 82%, transparent)`) + `backdrop-filter: blur(12px)`.
- Left: circular **RC** avatar mark (32px, `--p10` bg, `--primary` text, 1px ring)
- wordmark "Payment Intelligence" with a muted "/ Modules" suffix.
- Center (desktop ≥900px): horizontal nav, 9 items — Overview, Workbench,
Scrubber, Storyteller, IBAN, BIC, CBPR+, Insights, Docs. Active item uses
`--secondary` background + `--foreground` text; others `--muted-foreground`.
- Right: LinkedIn icon (inline SVG), **theme toggle** (sun/moon), and a
**hamburger** (mobile only).
- **Responsive:** below 900px the desktop nav hides and the hamburger appears;
it opens a full-width drawer (absolute, below the bar) listing all 9 links with
the active one highlighted and a `›` affordance. The burger icon swaps to an ×
while open. On resize back to desktop the drawer auto-closes. To save space on
mobile, the "/ Modules" suffix and the header LinkedIn icon are hidden.
- The prototype manages responsive show/hide via `matchMedia('(min-width:900px)')`
in JS. In React, prefer a CSS media query / the repo's breakpoint utilities.

### SuiteFooter (`design/SuiteFooter.dc.html` → `src/components/layout/SuiteFooter.tsx`)

- `border-top`, `--card` background. Three blocks: brand + tagline; a link column
(Workbench, Scenarios, Review, Analytics, Vault, Health, Docs, Connectors,
Pilot); social icons. Bottom strip: mono version string `… · v0.1.0` and a
"Browser-only · No data leaves your device" note with a teal shield icon.

### Pages (each `design/<Name>.dc.html` → matching `src/pages/*.tsx`)

| Design file | Repo page |
| --------------------- | ---------------------------------- |
| `Overview.dc.html` | `HomePage.tsx` |
| `Workbench.dc.html` | `WorkbenchPage.tsx` |
| `Scrubber.dc.html` | `ScrubberPage.tsx` |
| `Storyteller.dc.html` | `StorytellerPage.tsx` |
| `IBAN.dc.html` | IBAN page (`IbanPage.tsx`) |
| `BIC.dc.html` | `BicPage.tsx` |
| `CBPR.dc.html` | CBPR page (`CbprPage.tsx`) |
| `Insights.dc.html` | Insights page (`InsightsPage.tsx`) |
| `Scenarios.dc.html` | `ScenariosPage.tsx` |
| `Review.dc.html` | `ReviewQueuePage.tsx` |
| `Analytics.dc.html` | `AnalyticsPage.tsx` |
| `Vault.dc.html` | `VaultPage.tsx` |
| `Health.dc.html` | `HealthPage.tsx` |
| `Docs.dc.html` | `DocsPage.tsx` |
| `Connectors.dc.html` | `ConnectorsPage.tsx` |
| `Pilot.dc.html` | `PilotPage.tsx` |
| `SSI.dc.html` | `SsiPage.tsx` |
| `NotFound.dc.html` | `NotFoundPage.tsx` |

Confirm exact page filenames in `src/pages/`; match by purpose where a name differs.

Shared page anatomy to reuse:

- **Module/tool pages** (Scrubber, Storyteller, CBPR): eyebrow label + h1 + lead
paragraph header row (often with a mono status chip on the right), then a
responsive two-column workspace (`minmax(380px,1fr)` auto-fit): left = input
panel (sample selector, monospace textarea, action button), right = results
panel (summary callout, findings list with severity pills, key-field
projection table). Mapping/҂stats tables sit full-width below.
- **Cards** (Overview, Docs): icon tile (`--p10`/`--primary`, 10px radius) +
capability pill + maturity pill (`P0`–`P3`), title, summary, "Open →" affordance.
- **Findings/severity pills:** Pass (teal `--accent`), Info (sky `--primary`),
Needs review (amber), Critical (red `--destructive`) — each as a soft-tinted
pill with matching border.

---

## Interactions & Behavior

### Theme toggle (global)

- Toggles the `dark` class on `<html>`; persists to `localStorage` key `theme`
(`"dark"` / `"light"`).
- On first load (before paint, to avoid a flash) an inline `<head>` script reads
`localStorage.theme`, falling back to `prefers-color-scheme`. Replicate this in
the app shell (e.g. `index.html` inline script or an early effect).
- Sun icon shows in dark mode, moon in light.

### Mobile nav

- See SuiteHeader above. Drawer open/close state; icon swap; auto-close on
breakpoint change; active-route highlight.

### Tabs / selection state

- `IBAN.dc.html`: 4 tabs (Validate / Build / Catalogue / Provenance) switch the
left panel.
- `Scenarios.dc.html`: clicking a scenario in the left list updates the right
preview + handoff target.

### Privacy posture (keep intact — it's core to the product's honesty)

- Copy repeatedly states browser-only, nothing uploaded, no storage/telemetry.
- Gated/disabled connectors (Connectors page) must stay visibly disabled.

---

## Sample Data (canonical synthetic payment)

Every tool now reflects **one** synthetic transaction so the suite reads as a
single connected session. Reuse these exact values when porting:

- **Type:** `pacs.008.001.08` cross-border customer credit transfer (CBPR+, serial)
- **Debtor:** Okonkwo Logistics GmbH — Frankfurt am Main, DE
- Debtor agent: Deutsche Bank AG — BIC `DEUTDEFF`
- Debtor IBAN: `DE89 3704 0044 0532 0130 00`
- **Creditor:** Meridian Trading Ltd — London, GB
- Creditor agent: NatWest — BIC `NWBKGB2L`
- Creditor IBAN: `GB29 NWBK 6016 1331 9268 19`
- **Amount:** `EUR 18,720.00`
- **Value date (IntrBkSttlmDt):** `2026-06-12`
- **Settlement method:** `INDA` (serial)
- **Charge bearer:** `SHAR`
- **Remittance (unstructured):** `Invoice 7741 freight services May 2026`
- **MsgId:** `TX-20260612-7741` · **End-to-end ID:** `INV-7741-2026`
- **AppHdr (head.001.001.02):** Fr `DEUTDEFF`, To `NWBKGB2L`,
BizMsgIdr `DEUTDEFF-20260612-7741-XB`, CreDt `2026-06-12T09:14:22Z`
- **CBPR+ advisories (intentional):** BizMsgIdr is 25 chars (guidance ≤16);
structured remittance (`RmtInf/Strd`) recommended.
- **Lifecycle thread (Insights):** `pacs.008` → `pacs.002` (ACSP, accepted) →
`pacs.002` (ACSC, settled) → `camt.054` (credit notification).

The IBAN (`DE89 …`) and BIC (`DEUTDEFF`) example values on those two tool pages
were deliberately kept consistent with the debtor above.

The Scenarios page additionally offers a small library of other archetypes
(returned payment AC04, statement camt.053, rejected pacs.002 RC01, credit
notification camt.054) using clearly-synthetic `TEST*` BICs.

---

## Copy Rule (explicit brand requirement)

**No em dashes (—) anywhere in visible copy.** Use periods, colons, or commas.
This was a specific user requirement; verify after porting (grep for `—`).

## Assets

- Icons: **Lucide** (the prototypes load it via CDN; the repo already uses an
icon system — use that instead of the CDN).
- LinkedIn glyph: inline SVG (in SuiteHeader/SuiteFooter) to avoid a Lucide
brand-icon dependency.
- Fonts: Google Fonts `Inter` + `JetBrains Mono`.
- No raster image assets; no logos beyond the "RC" text avatar.

## Files

All design references are in `design/` next to this README:

- `SuiteHeader.dc.html`, `SuiteFooter.dc.html` (shared chrome)
- `Overview.dc.html` and the 17 page files listed in the mapping table
- `support.js` is the prototype runtime; **ignore it** for the port (it only
powers the standalone HTML preview, it is not part of the design).

## Suggested Claude Code prompt

> Open this repo and the `design_handoff_payment_intelligence_brand/` folder.
> Read the README, then port the brand restyle into the React/TS app: add the
> light/dark CSS tokens to `src/index.css`, wire a persisted theme toggle + mobile
> nav into `src/components/layout/SuiteHeader.tsx`, restyle each page in
> `src/pages/` to match its `design/*.dc.html` reference, unify the sample data to
> the canonical payment in the README, and remove every em dash from visible copy.
> Keep the existing routing, privacy posture, and gated-connector behavior. Run
> `pnpm verify`, then commit on a new branch and open a PR.
Loading
Loading