Financial Apps · Everyday Money
A calm violet-and-cream envelope-budgeting home screen: one honest number, a friendly “safe today” answer, and 7px usage bars that never shout.
| Color | Hex | Use |
|---|---|---|
| canvas | #f7f7fb | page background |
| ink | #17151f | primary text |
| brand | #6d52ff | hero fill · links |
| accent | #ffe85d | “safe today” pill |
| positive | #18805b | incoming money |
| border | #e7e5ee | 1px card hairlines |
| Type | Face | Spec |
| face | Manrope | 400 / 500 / 700 / 800 |
| hero amount | 44 / 800 | tracking −2.6 |
| page title | 20 / 800 | tracking −0.8 |
| safe amount | 23 / 800 | tracking −0.9 |
| eyebrow | 10 / 800 | +1.2 · uppercase |
| Shape | Value | Use |
| radii | 23 / 16 / 13 / 999 | hero / card / avatar / pill |
| bar | 7px · r4 | usage bars |
| gaps | 10px grid | envelope grid |
| padding | 19px page | screen edges |
MISSION Calm envelope-budgeting home screen. One honest number,
a friendly "safe today" answer. Flat violet hero on cream.
TYPE Manrope 400/500/700/800 · hero amount 44/800, −2.6 tracking
COLOR canvas #f7f7fb · ink #17151f · brand #6d52ff · accent #ffe85d
positive #18805b · hairline #e7e5ee
SHAPE hero r23 · cards r16 · pill 999 · 7px usage bars · 10px grid
LAYOUT greeting → hero ($2,146 + SAFE TODAY $86.40) → envelopes
(2/3/4 col) → latest txn → pinned bottom tabs
COPY "Left this month" · "— $4,062 of $6,208 assigned"
"Home $1,240 · Groceries $318 · Transport $96 · Fun $184"
"Payroll deposit · Payday just now · +$2,880"
FULL colors, weights, tracking, do/don'ts & checklist →
ai-guide.md (copy button fetches the whole file)
<!-- excerpt — full file: reference.html (self-contained) -->
<body>
<main class="screen">
<header class="header">
<div>
<div class="greeting">Good morning, Alex</div>
<div class="page-title">June money plan</div>
</div>
<div class="avatar">AX</div>
</header>
<section class="hero">
<div class="ring"></div>
<div class="eyebrow">LEFT THIS MONTH</div>
<div class="amount">$2,146</div>
<div class="sub">— $4,062 of $6,208 assigned</div>
<div class="safe-today">
<span class="lbl">SAFE TODAY</span>
<span class="amt">$86.40</span>
</div>
</section>