Repository navigation
Conversation
Running the app on a simulator showed every large amount rendering with the currency symbol touching the first digit — "₦10" came out as one blob. It is not a missing glyph. Both Inter and Space Grotesk contain U+20A6; I checked the cmap of all 23 font files before concluding anything. The cause is that Space Grotesk draws ₦ with crossbars nearly as heavy as its counters, so at Bold display weight the glyph fills in and then kerns straight into the digit after it. Inter's ₦ at the same size is clean. So the symbol is now set in Inter at 0.72x with a thin space, while the digits stay in Space Grotesk. Mixing a face for the currency mark is ordinary typographic practice and it was the smallest change that fixes every large amount at once. The component carries an accessibilityLabel so the two faces are still announced as a single amount. Applied to the rewards balance, transaction detail, payment success, merchant revenue and source balance. Body-copy amounts are untouched: Inter already sets both symbol and number there, and there is nothing to correct. Verified on an iPhone 17 simulator before and after.
Design kickoff brief covering scope, product context, accessibility targets and deliverables for the mobile redesign. Keeps mint #34FEA0 as the primary brand colour, consistent with ADR-008.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Every large amount in the app rendered with the currency symbol touching the first digit —
₦10came out as a single blob. Found by running the app on a simulator; it is invisible to typecheck, tests and the bundle step.Not a missing glyph
My first assumption was a font fallback, so I parsed the
cmaptable of all 23 Inter and Space Grotesk files. Both faces contain U+20A6.The real cause only showed up at native resolution: Space Grotesk draws ₦ with crossbars nearly as heavy as its counters. At Bold display weight the glyph fills in, and its tracking pulls it straight into the next digit. Inter's ₦ at the same size is clean — visible in the same screenshot, one line below.
Fix
A
<Money>component that sets the symbol in Inter at 0.72× followed by a thin space, with the digits staying in Space Grotesk. Mixing a face for the currency mark is ordinary typographic practice, and it was the smallest change that fixes every large amount at once.It carries an
accessibilityLabelso the two faces are still announced as one amount.Applied to the five display-size amounts:
Body copy is deliberately untouched — Inter already sets both the symbol and the number there, so there is nothing to correct.
Verification
Before and after on an iPhone 17 simulator, plus:
Also in this branch
docs/UI-REDESIGN-PRD.md— the design kickoff brief, previously untracked in the working tree. Committed separately so it can be dropped independently if you would rather it lived elsewhere.Follow-up
Four display-size amounts still render the symbol inline and should move to
<Money>too:AmountInput,scan/confirm,scan/failed, and thehistory/indexsummary. Left out to keep this diff reviewable — happy to do them next.