A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
0radius steps
15pxspacing base
Acorns, in one page
Acorns' iOS app is a friendly, optimistic micro-investing app built on one idea: investing should feel approachable, automatic, and rewarding — not like a Bloomberg terminal. The brand is anchored by two colors working in tandem: Acorns Oak (#5A2B82), a deep, trustworthy purple used for brand surfaces, the Round-Ups card, and structural moments; and Acorn Green (#6FBF4E), a bright, leafy green that is both the primary action color and the universal "your money is growing" signal. The acorn-to-oak-tree metaphor ("from little acorns mighty oaks grow") runs through everything — growth, patience, small things compounding.
The signature screen is the Invest dashboard. At the top, the portfolio total is the headline — a large, confident dollar figure with an all-time gain shown beneath it in green with a triangle. Below it sits the allocation donut — a multi-segment ring (large company, small company, international, real estate, bonds) in a warm palette, with a center label naming the portfolio style (Conservative → Aggressive). A legend lists each holding with its percentage and dollar value. Then the Round-Ups card — a purple gradient card showing accumulated spare change ("$4.62 · invests at $5.00"), the feature that made Acorns famous: every card purchase rounds up to the next dollar and the difference is invested. Below that, Found Money (now "Acorns Earn") — cashback from partner brands that gets invested automatically, shown as a feed of brand rows with green "+$" amounts.
The atmosphere is warm, encouraging, and lightly playful. Copy is motivational and plain-English ("Your money is hard at work", "Small amounts add up"). Numbers are big and friendly. Illustrations are rounded, organic, often featuring acorns, oak leaves, and growth motifs. The type is a rounded humanist sans (Acorns uses a rounded geometric face in brand/product; Nunito Sans is the closest free fallback), which reads as friendly and trustworthy rather than corporate. Surfaces are clean and flat with generous padding; only the Round-Ups card and the donut carry color and gradient — everything else is calm.
Key Characteristics:
- Acorns Oak purple (
#5A2B82) + Acorn Green (#6FBF4E) — the dual brand: trust + growth - Invest dashboard as the signature screen — portfolio total, allocation donut, Round-Ups, Found Money
- Allocation donut — multi-segment ring with center portfolio-style label + legend
- Round-Ups card — purple gradient card with accumulated spare change and the $5 invest threshold
- Found Money / Earn — partner-cashback feed with green "+$" amounts that auto-invest
- Big friendly numbers — the portfolio total is the largest type; gains in green with a ▲
- Rounded humanist type (Nunito Sans fallback) — friendly, trustworthy, approachable
- Motivational plain-English copy — "Your money is hard at work", "Small amounts add up"
- Green = action + growth; Oak purple = brand + structure
- Acorn / oak / leaf growth motifs in illustration
- Flat, calm surfaces — only the Round-Ups card and donut carry color
- Bottom tab bar: Invest, Later, Spend, Earn, Profile — green active state
Do's and don'ts
Do
- Pair Acorns Oak (
#5A2B82) and Acorn Green (#6FBF4E) — purple for brand/structure, green for action and growth - Make the Invest dashboard the signature screen — portfolio total, allocation donut, Round-Ups, Found Money
- Render the allocation donut with the fixed warm palette + a center portfolio-style label + a legend
- Make the portfolio total the headline number — big, w900, tabular, with an all-time gain in green and a ▲
- Render Round-Ups as a purple gradient card with accumulated spare change and the $5 invest threshold
- Show Found Money / Earn as a partner-cashback feed with green "+$" amounts
- Use heavy rounded type (Nunito Sans 800–900) for headline numbers — friendly and confident
- Keep copy motivational and plain-English ("Your money is hard at work", "Small amounts add up")
- Use full pill buttons; green = primary action, Oak purple = secondary/brand
- Animate the donut sweep and the number ticker — growth should feel alive
Don't
- Don't use green and purple interchangeably — green is action/growth, Oak is brand/structure
- Don't use pure black for dark mode — deep aubergine
#14121Ais correct - Don't use pure white for the light canvas — warm lilac-white
#F5F3F8, white only for cards - Don't make the dashboard look like a trading terminal — it is calm, friendly, and motivational
- Don't desaturate the donut or Round-Ups card in dark mode — the data viz stays full-color
- Don't put heavy shadows on the donut or rows — cards lift softly; rows use dividers
- Don't use thin or condensed type — the system lives at 400–900 with a rounded warm face
- Don't put white text directly on bright green — use dark forest
#14302Afor AA contrast - Don't use a tint pill on the active tab — active is green icon + green label only
- Don't bury the portfolio total — it is the hero of the Invest screen
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Acorns design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Acorns Oak: #5a2b82
- Acorn Green: #6fbf4e
- Green Bright: #84d962
- Green Pressed: #5aa53d
- Green Wash: #e9f6e3
- Oak Bright: #7b43a8
- Oak Pressed: #47206a
- Oak Soft: #c8aedf
- Canvas: #f5f3f8
- Surface: #ffffff
Type:
- families: Nunito Sans, Implementation Fallback, Numerals, Fallback Stack
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 28
- weights: 400, 600, 700, 800, 900
Shape:
Spacing: 15, 16, 18
Rules:
- Pair Acorns Oak (`#5A2B82`) and Acorn Green (`#6FBF4E`) — purple for brand/structure, green for action and growth
- Make the Invest dashboard the signature screen — portfolio total, allocation donut, Round-Ups, Found Money
- Render the allocation donut with the fixed warm palette + a center portfolio-style label + a legend
- Make the portfolio total the headline number — big, w900, tabular, with an all-time gain in green and a ▲
- Render Round-Ups as a purple gradient card with accumulated spare change and the $5 invest threshold
- Show Found Money / Earn as a partner-cashback feed with green "+$" amounts
Avoid:
- Don't use green and purple interchangeably — green is action/growth, Oak is brand/structure
- Don't use pure black for dark mode — deep aubergine `#14121A` is correct
- Don't use pure white for the light canvas — warm lilac-white `#F5F3F8`, white only for cards
- Don't make the dashboard look like a trading terminal — it is calm, friendly, and motivational
- Don't desaturate the donut or Round-Ups card in dark mode — the data viz stays full-color
- Don't put heavy shadows on the donut or rows — cards lift softly; rows use dividers
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive / Growth)
- Acorn Green (
#6FBF4E): The primary action color AND the growth/positive signal — primary CTAs, gains, "+$" amounts, active tab. Identical across themes. - Green Bright (
#84D962): Dark-mode interactive/positive tint (lifts for contrast on dark). - Green Pressed (
#5AA53D): Pressed state on green buttons. - Green Wash (
#E9F6E3light /#1E2C18dark): 8–12% green fill behind positive chips/highlights.
Brand Anchor
- Acorns Oak (
#5A2B82): The trust/brand purple — Round-Ups card, brand surfaces, secondary CTA, structural headers, the first donut slice. - Oak Bright (
#7B43A8): Round-Ups gradient top / hover. - Oak Pressed (
#47206A): Pressed state on purple buttons. - Oak Soft (
#C8AEDF): Dark-mode purple tint — icon glyphs, outline-button border/text on dark.
Canvas & Surfaces (Light Mode)
- Canvas (
#F5F3F8): Primary light canvas — a faint warm lilac-white, never pure white. - Surface (
#FFFFFF): Cards, list sections, sheets — pure white lifts above the canvas. - Surface Pressed (
#EDE9F2): Pressed/selected row state. - Divider (
#E5E1EC): Hairline dividers in legends and lists.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#14121A): Primary dark canvas — deep aubergine tinted from Oak, NOT pure black. - Dark Surface 1 (
#1E1B27): Cards, list sections, sheets. - Dark Surface 2 (
#292533): Elevated surfaces, icon chips, pressed rows. - Dark Divider (
#383143): Hairline dividers on dark.
Text
- Text Primary Light (
#1F1A2B): Primary text — a near-black aubergine, NOT pure black. - Text Secondary Light (
#6E6480): Metadata, captions, percentages. - Text Tertiary Light (
#9C92AD): Disabled, placeholders. - Text Primary Dark (
#F2EFF6): Primary text on dark. - Text Secondary Dark (
#ADA4BC): Metadata on dark. - Text Tertiary Dark (
#756B85): Disabled / placeholder on dark.
Allocation / Chart Palette
The donut and any portfolio chart use a fixed warm allocation palette (consistent slice → asset-class mapping).
| Slice / Role | Color |
|---|---|
| Large Company | #5A2B82 (Oak) |
| Small Company | #6FBF4E (Green) |
| International | #45C2B0 (Teal) |
| Real Estate / REIT | #F2C84B (Gold) |
| Bonds | #F2785C (Coral) |
| Emerging Mkts | #9B6FD4 (Lilac) |
Semantic
- Positive / Gain (
#6FBF4Elight /#84D962dark): All-time gain, daily up, "+$" cashback. - Negative / Loss (
#E0584Flight /#FF6B6Bdark): Daily down, negative delta. - Warning Amber (
#E0A52Alight /#F2C84Bdark): Funding/verification warnings. - Pending Grey (
#9C92AD): Pending Round-Ups / processing transfers (slightly faded).
Type scaleRead the full spec
Font Family
- Brand & Product: a rounded geometric humanist sans (Acorns uses a friendly rounded face across brand and product for an approachable, trustworthy tone).
- Implementation Fallback:
Nunito Sans(by Vernon Adams / Jacques Le Bailly, SIL OFL) — a well-balanced rounded humanist sans, the closest freely-licensable substitute; ships an optical-size axis. - Numerals: tabular figures (
font-feature-settings: "tnum") for the portfolio total, allocation values, and any aligned currency column. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Portfolio Total | Nunito Sans | 38pt | 900 | 1.05 | -1pt | The headline dollar figure — tabular |
| Hero Number | Nunito Sans | 28pt | 900 | 1.1 | -0.5pt | Round-Ups total, sub-balances — tabular |
| Section Title | Nunito Sans | 22pt | 800 | 1.2 | -0.3pt | "Invest", screen titles |
| Subsection | Nunito Sans | 18pt | 800 | 1.25 | -0.2pt | "Round-Ups", card titles |
| Body | Nunito Sans | 16pt | 400 | 1.45 | 0pt | Motivational copy, sheet body |
| Row Title | Nunito Sans | 15pt | 700 | 1.3 | -0.1pt | Legend item, Found Money brand |
| Amount | Nunito Sans | 15pt | 800 | 1.3 | -0.1pt | Legend value, "+$" cashback (tabular) |
| Meta | Nunito Sans | 13pt | 600 | 1.35 | 0pt | "1% back · 3 days ago", percentages |
| Label / Caption | Nunito Sans | 12pt | 700 | 1.3 | 0.4pt | "ALL TIME", "ROUND-UPS" (uppercased) |
| Button | Nunito Sans | 16pt | 800 | 1.0 | 0pt | Pill-button label |
| Tab Label | Nunito Sans | 10pt | 700 | 1.0 | 0.1pt | Bottom tab labels |
| Delta | Nunito Sans | 14pt | 700 | 1.2 | 0pt | "▲ $214.38 (2.7%)" |
Principles
- Portfolio total leads: the largest, heaviest element on the Invest screen — the number you watch grow.
- Heavy weights for friendliness: Acorns leans on 800–900 for headline numbers and titles; the rounded face at heavy weight reads warm and confident, not aggressive.
- Tabular figures wherever money appears: portfolio total, allocation values, deltas align with
tnum. - Uppercase labels with tracking: section/eyebrow labels ("ALL TIME", "ROUND-UPS") are 12pt w700 uppercased with +0.4pt tracking.
- Dynamic Type first-class: portfolio total, section, body, row title, meta scale; tab labels and eyebrow labels stay fixed (layout-sensitive).
Components and layoutRead the full spec
Buttons
Primary Button (Invest now / Confirm / Continue)
- Shape: Full pill, 500pt corner radius
- Background:
#6FBF4E(Acorn Green) - Text:
#14302A(dark forest, for AA contrast on the bright green), Nunito Sans 16pt weight 800 - Padding: 15pt vertical, 30pt horizontal; full-width on sheets (18pt side insets)
- Pressed: background
#5AA53D+ scale 0.98 - Disabled:
#6FBF4Eat 35% opacity, text at 60%
Secondary Button (One-time invest / brand action)
- Background:
#5A2B82(Acorns Oak) - Text:
#FFFFFF, Nunito Sans 15pt weight 800 - Corner radius: 500pt
- Pressed: background
#47206A+ scale 0.98
Outline Button (Adjust portfolio / Edit)
- Background: transparent
- Text + border:
#5A2B82light /#C8AEDFdark, Nunito Sans 15pt weight 800 - Border: 1.5pt same as text
- Corner radius: 500pt
- Pressed: oak-wash fill
#F1ECF7light /#2A1E3Adark
Text Button (See history)
- Font: Nunito Sans 14pt weight 800
- Color:
#6FBF4Elight /#84D962dark - No underline, no background
- Pressed: 60% opacity
Core Atoms
Allocation Donut (the signature atom)
- Multi-segment conic ring, ~168pt outer diameter, ~110pt inner hole (canvas-colored center)
- Segments use the fixed allocation palette (Oak / Green / Teal / Gold / Coral / Lilac), gaps 0–2°
- Center stack: portfolio-style label ("Aggressive") 11pt w700 uppercased secondary + "100% invested" 18pt w800 primary
- Animated on load: each segment sweeps in clockwise over ~600ms ease-out
- Tap a segment: highlights it + scrolls the legend to that holding
Legend Row
- 9pt vertical padding, hairline divider between rows
- Leading: 12pt rounded-square color chip matching the slice
- Name: Nunito Sans 14pt w700 primary; trailing percentage 13pt w600 secondary
- Far-trailing: dollar value Nunito Sans 14pt w800 primary, right-aligned (tabular), fixed ~78pt column
Found Money / Earn Row
- Height: ~62pt, 22pt horizontal inset
- Leading: 40pt rounded-square (12pt radius) brand chip — brand color + monogram/logo
- Title: brand name Nunito Sans 15pt w700; subtitle "1% back · 3 days ago" 13pt w600 secondary
- Trailing: "+$3.20" Nunito Sans 15pt w800 in green (gain)
- Tap: pushes the offer / cashback detail
Stat / Sub-balance Tile
- Surface card, 16pt radius, 16pt padding
- Eyebrow label uppercased 12pt w700 secondary
- Value Nunito Sans 28pt w900 tabular primary
- Optional delta line in green/red with ▲/▼
Navigation
Invest Header
- Screen title "Invest" Nunito Sans 22pt w800 left-aligned
- Trailing: 34pt circular notification bell (surface-2 fill, Oak-soft glyph)
- Canvas-colored; 0.5pt divider appears when content scrolls under
Bottom Tab Bar
- Height: 52pt + safe area; background
#FFFFFFlight /#14121Adark with 0.5pt top divider, 20px blur - Tabs (5): Invest, Later, Spend, Earn, Profile
- Icon size: 22pt; active = filled glyph in Acorn Green
#6FBF4E(light) / Green Bright#84D962(dark); inactive = stroke glyph in tertiary text - Labels: Nunito Sans 10pt w700, always shown
- No tint pill — active is icon fill + label color change to green
Large Title (inner screens)
- Title Nunito Sans 22–28pt w800/900 left-aligned, collapses to 17pt centered on scroll
- Leading back chevron; trailing contextual action
Input Fields
Amount Entry (one-time invest / recurring)
- Large centered amount, Nunito Sans 28–38pt w900, green caret, no input box, system number pad
- "$" prefix in same style at ~70% size
- Helper text below in 13pt w600 secondary
Text Field
- Height: 52pt, surface fill, 12pt radius, no border at rest
- Focus: 1.5pt
#6FBF4Eborder - Label floats above on focus in 12pt w700 secondary
- Placeholder: tertiary text, Nunito Sans 16pt w400
Toggle / Switch (Round-Ups Auto, recurring)
- iOS-style switch, ON track =
#6FBF4E, knob white - Used heavily for automation settings
Distinctive Components
Allocation Donut + Legend — see Core Atoms; the brand's signature data visualization, full-color in both themes.
Round-Ups Card
- Full-width minus 18pt insets, 18pt corner radius
- Background: Oak gradient
#5A2B82 → #7B43A8(150°) - Eyebrow "ROUND-UPS" 13pt w700 white@85% + "Auto" pill (white@16% fill)
- Accumulated amount 28pt w900 white, "Pending · invests at $5.00" 13pt w600 white@80%
- Tap → Round-Ups detail (multiplier, linked accounts, history)
Portfolio Total + All-Time Gain
- Centered: total 38pt w900 tabular; below it "▲ $214.38 (2.7%) all-time" — ▲ + amount + % in green, "all time" in secondary
- Tappable to switch range (1D / 1W / 1M / 1Y / All / Max)
Found Money / Earn Feed — partner-cashback rows with green "+$"; see Core Atoms.
Growth Illustration / Tree Moment
- Milestone screens use an acorn → sprout → oak illustration in Oak + Green
- Celebratory confetti-leaf animation on first invest / round-number milestones
Goal / Potential Projection
- A gentle upward-curve chart (green line, soft green area fill) projecting growth over years
- "If you invest $X/week, you could have $Y by {year}" motivational framing
Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 18, 22, 24, 32, 40, 48, 64
- Screen horizontal inset: 18–22pt (cards 18pt; rows/legend/headers 22pt)
- Card internal padding: 16–18pt; section vertical gap 16–22pt
- Donut to legend gap: 18pt
Grid & Container
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Portfolio total 32pt; donut ~144pt; tighter card insets |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above the Invest header |
| iPhone 15/16 Pro Max | 430pt | Portfolio total 42pt; donut ~184pt; larger cards |
| iPad (portrait) | 768pt | Content max-width 640pt centered; donut + legend stacked |
| iPad (landscape) | 1024pt+ | Donut left / legend right side-by-side; detail as secondary pane |
Dynamic Type
- Portfolio total, section, body, row title, meta, delta: full scale
- Tab labels, eyebrow labels ("ALL TIME"): FIXED (layout-sensitive)
- Donut center label scales modestly; legend values stay tabular-aligned
Orientation
- iPhone: portrait-primary; rotation supported with card reflow
- iPad: split-view; the donut + legend become the primary pane, holdings detail secondary
Touch Targets
- Donut segment: tappable arc, ≥44pt effective along the ring thickness
- Legend / Found Money row: full-row tap, ≥56pt effective
- Tab bar icons: 22pt glyph, 44pt hit
- Notification bell: 34pt, ≥44pt hit
- Primary buttons: ≥48pt tall
Safe Area Handling
- Top: Invest header respects safe area and Dynamic Island
- Bottom: tab bar + home indicator respected; sheets respect bottom inset
- Keyboard: amount entry scrolls above the number pad; the running value never hides
- Sides: 18–22pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-acorns {--page-bg: #f5f3f8;
--page-bg-gradient: none;
--text-color: #14121a;
--heading-color: #14121a;
--link-color: #8e6714;
--link-hover-color: #61470e;
--border-color: #cdcbd0;
--card-bg: #f5f3f8;
--card-shadow: 0 1px 2px rgba(20,18,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(20,18,26,0.12);
--header-bg: #14121a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #f5f3f8;
--footer-text-color: #636168;
--button-bg: #e0a52a;
--button-text-color: #000000;
--button-hover-bg: #bc881b;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #e8e6eb;
--button-secondary-text-color: #14121a;
--button-secondary-hover-bg: #dad8dd;
--button-secondary-border: 1px solid #cdcbd0;
--prompt-bg: #eae8ed;
--prompt-text-color: #14121a;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/finance/acorns/DESIGN.md· 24.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.