MonerMoner, taken apart.
Copied from the Android app's own resources, not measured off screenshots. One file holds every value, src/styles/tokens.css, and this whole site, phone previews included, is built from it. Switch light and dark with the button in the top bar.
Colour
Names and values are the app's: core/src/main/res/values/colors.xml for light, values-night/colors.xml for dark. Ink is the only strong colour; green is the only filled control colour.
- color_page
--page#F4F4F5 · #0E0E10 - color_card
--card#FFFFFF · #18181B - color_day
--day#FAFAFB · #141416 - color_inset
--inset#F7F7F9 · #1F1F23 - color_sunken
--sunken#ECECEF · #1F1F23 - color_edge
--edge#EBEBEF · #27272A - color_edge_strong
--edge-strong#E4E4E7 · #3F3F46 - color_ink
--ink#18181B · #F4F4F5 - color_text_secondary
--text-2#5F5F6B · #A1A1AA - color_text_muted
--muted#6E6E7A · #8B8B95 - color_text_faint
--faint#A1A1AA · #5C5C66 - color_positive
--positive#17B26A · #22C55E - color_nav_bg
--nav-bg#18181B · #1C1C1F - color_toast
--toast#18181B · #F4F4F5 - color_dotted_end
--dotted-end#2E2E33 · #2E2E33
Tints come in threes: content, container and stroke. Categories, status badges, people and notices each pick one.
- orange
tint_orange_*Food · avatar - blue
tint_blue_*Transport - pink
tint_pink_*Shopping · Person 2 - sky
tint_sky_*Vehicle - purple
tint_purple_*Settings - teal
tint_teal_*Privacy - amber
tint_amber_*Quick actions · Person 1 - slate
tint_slate_*Others - neutral
tint_neutral_*Not chosen yet - green
tint_green_*Under limit · done - warning
tint_warning_*Waiting - danger
tint_danger_*Over limit · delete - ink
tint_ink_*On a dotted card
Type
Space Grotesk for everything you read, Space Mono for times, references and small caps labels. The roles below are TextAppearance.Moner.* in styles.xml, at the app's real sizes.
Rp 499.000
Rp 7.000.000
Insights
Where it went
Hey, Punk
Nasi Padang
Waiting to be recorded
November
Food · QRIS · Mandiri
22:32
Paid with
Shape and texture
- 8badges
--r-badge - 10tiles, keys
--r-tile - 12buttons, chips
--r-control - 14keypad tray
--r-field - 16day groups, stubs, banners
--r-container - 18Spend, Split bill, slide
--r-action - 20cards, sheets
--r-card - 999navbar, segmented
--r-pill
A dashed tear with two notches splits a form like a receipt.
Components
Rp 492.000 spent
7% limit usedMotion
On the website, things settle rather than bounce: one easing, cubic-bezier(.2, .8, .2, 1). Sheets rise in 550ms, rows and chips in 450–500ms, numbers count for 900ms. Only confirmation chips overshoot a little. Everything stops for people who ask for reduced motion.