Amount display
The canonical way to render a ₹ rupee amount. Bricolage Grotesque display font, tabular-nums for column alignment, muted ₹ prefix that recedes behind the number. Used in ledger rows, settle cards, expense summaries, and the balance header.
Variants
₹
1,250
₹
480
₹
760
₹
320
Default — ink value, muted prefix. Used for neutral amounts: expense totals, individual costs.
Positive — teal value and prefix. Used when money flows toward you: "you are owed ₹480".
Negative — coral value and prefix. Used when you owe money: "you owe ₹760".
Pending — fully muted. Used for amounts not yet confirmed, or items awaiting a receipt photo.
Sizes
₹
4,200
₹
4,200
₹
4,200
₹
4,200
| Size | Class | Value font | Prefix font | Use case |
|---|---|---|---|---|
| Extra large | .amount-xl | 48px | 28px | Balance hero, settle confirmation screen |
| Large | .amount-lg | 36px | 20px | Expense detail header, summary card |
| Medium | .amount-md | 24px | 14px | Ledger rows, expense list — default |
| Small | .amount-sm | 16px | 10px | Secondary amounts, split breakdowns |
States
₹
2,800
Default
₹
480
Positive
₹
760
Negative
₹
150
Pending
| State | Value color | Prefix color | When to use |
|---|---|---|---|
| Default | --ink | --ink-mute | Neutral costs, totals, expense amounts |
| Positive | --teal | --teal at 70% | Amounts owed to you |
| Negative | --coral | --coral at 70% | Amounts you owe |
| Pending | --ink-mute | --ink-mute at 60% | Unconfirmed or awaiting receipt |
On dark surfaces
₹
4,200
₹
480
₹
760
₹
320
On dark surfaces, the default value switches to --dark-text. Positive goes to --teal-pale, negative to --coral-pale — the pale variants have enough contrast on dark backgrounds without being harsh. Pending uses --dark-text-2. Add the .on-dark class to the parent.
Anatomy
₹
4,200
Prefix (.amount-prefix)
Value (.amount-value)
| Part | Element | Notes |
|---|---|---|
| Container | .amount | Inline-flex, baseline-aligned. white-space: nowrap — amounts never wrap mid-number. |
| Prefix | .amount-prefix | The ₹ symbol. Muted, slightly smaller than the value. Always present for INR. |
| Value | .amount-value | The number. Tabular-nums ensures decimal alignment in columns. Format with comma separators (1,250 not 1250). |
| Suffix | .amount-suffix (optional) | Use for "/person", "total", or currency qualifiers. Muted, body weight. |
Usage
Do
Always use tabular-nums for column alignment in ledger rows and split lists. Format with Indian comma grouping: ₹1,000 / ₹10,000 / ₹1,00,000. Use state color (teal/coral) consistently to mean "you get / you owe."
Don't
Don't use arbitrary colors for amounts. Don't suppress the ₹ prefix — it's never optional. Don't use body font (Onest) for amounts; Bricolage display is required for this component.
Do
Use
-xl only for the primary balance figure on a screen. One xl amount per screen view at most. Pair amounts with a label ("you owe", "you're owed") so color isn't the only indicator.
Don't
Don't use teal and coral simultaneously on the same screen for the same person — pick the direction (net balance) and show one color. Don't show fractions (₹1,250.00) unless the UI explicitly involves paise.
Accessibility
Screen readers
Wrap the entire amount in an element with
aria-label="₹4,200" (or the localized pronunciation). Screen readers may announce the ₹ symbol as "rupee" or skip it — the aria-label ensures consistent reading. For directional amounts, use aria-label="you owe ₹760" or aria-label="Priya owes you ₹480".
Color independence
Positive and negative states are conveyed by both color (teal / coral) and the surrounding label text. Never rely on color alone. The label "you owe" or "you're owed" must accompany the amount in the UI.
Number formatting
Use
font-feature-settings: "tnum" (tabular-nums) so amounts align vertically in lists. This is set on .amount by default — don't override it.
Code
HTML
<!-- Default, large --> <div class="amount amount-lg" aria-label="₹4,200"> <span class="amount-prefix">₹</span> <span class="amount-value">4,200</span> </div> <!-- Positive (you're owed) --> <div class="amount amount-md amount-positive" aria-label="you are owed ₹480"> <span class="amount-prefix">₹</span> <span class="amount-value">480</span> </div> <!-- Negative (you owe) --> <div class="amount amount-md amount-negative" aria-label="you owe ₹760"> <span class="amount-prefix">₹</span> <span class="amount-value">760</span> </div> <!-- With suffix --> <div class="amount amount-sm" aria-label="₹420 per person"> <span class="amount-prefix">₹</span> <span class="amount-value">420</span> <span class="amount-suffix">/person</span> </div>
CSS classes
| Class | Purpose |
|---|---|
.amount | Base — flex, baseline, tabular-nums, no-wrap |
.amount-xl / -lg / -md / -sm | Size modifiers |
.amount-positive | Teal value — "you are owed" |
.amount-negative | Coral value — "you owe" |
.amount-pending | Muted value — unconfirmed |
.amount-prefix | ₹ symbol — muted, smaller |
.amount-value | Number — primary color, display font |
.amount-suffix | Optional qualifier — muted, normal weight |
Design tokens used
| Token | Value | Role |
|---|---|---|
--font-display | Bricolage Grotesque | All amount text |
--ink | #171513 | Default value color |
--ink-mute | #8A8276 | Prefix and pending state |
--teal | #0E7C66 | Positive amount |
--teal-pale | #D6EAE2 | Positive on dark surface |
--coral | #E76F51 | Negative amount |
--coral-pale | #FADED4 | Negative on dark surface |
--dark-text | #FBF8F0 | Default value on dark |