Avatars and achievements
What a person looks like in JAM when they have not uploaded a photo, and the first achievement they can earn and show off. Agree these first; they go into the app afterwards. The avatars are 32×32 and the achievement icons 16×16 pixel art in the mascot's style, so the files double as the assets jam-web will ship.
- Fruit theme ("JAM"), each fruit with a face and one sports accessory.
- Twelve presets, public to everyone. The strawberry and the raspberry also lead the two achievement trees, drawn as plain fruit with no face (on a shield from platinum up), so they do not get confused with the avatars.
- The letter default gets six tints picked from the user id, not one pink for everybody.
- A JAM is a session. Two trees: JAMs joined (strawberry, tiers at 1 / 5 / 10 / 25 / 50 / 100) and JAMs created (raspberry, 1 / 3 / 5 / 10 / 25 / 50). The thresholds are placeholders.
- An achievement is shown off as a 16px icon next to the name: the same
jams-joined-<n>.svgas the 64px badge, so there is one drawing per tier to keep up to date. The icons are drawn on a 16-pixel grid, so at 16px every art pixel is a whole screen pixel, even on a 1x desktop screen, and the 64px badge is the same drawing at 4x. Using one as the avatar is still open.
No photo and no preset: the person's initial on a tint. The tint is one of six jam flavours, picked from the user id so a list of people is no longer a wall of identical pink, and the same person always gets the same one.
- Shape
- Circle. A group keeps its 40px squircle; that is not a person.
- Sizes
- 34 (compact rows) · 38 (lists) · 40 · 64 · 96 (profile header)
- Letter
- First letter of the display name, uppercase, weight 700, at 0.37 of the size (14px at 38)
- Tint
tints[hash(userId) % 6], any stable hash, e.g. the sum of the id's char codes- Contrast
- Every pair at least 4.5:1, computed below from the colours as rendered
- Template
- avatars/letter.svg
#fae1e4 / #610117today's, for everyone#fde6cf / #6b2c05#fbf0c4 / #5c4300#dcf2d6 / #1f4d14#dde6fb / #1d3270#ece0f7 / #4b1d6bTwelve fruits anyone can pick instead of a photo, like a streaming service's profile icons. Head and shoulders only, because a whole body is unreadable at list size. Each sits on its own round backdrop so it still reads when the app crops it to a circle or a squircle.
The honest test: 38px and 34px, the sizes the People list uses
The same rows the boards draw today, with letters and presets mixed the way a real list would be.
People
12 connections · 2 requests
Connected
EmmaGhent · running›LucasAntwerp · cycling›SofieLeuven · swimming›Tuesday runners
8 members · Ghent
SL+3
Members
StijnOrganiserAdminKobeJoined in JuneLotteJoined in July
Julian 
Ghent · running · 14 JAMs
Change avatarOr, with no avatar chosen
Opened from "Change avatar". The initial comes first, so nobody is pushed into a fruit; photos come in a later item, drawn here so the layout leaves room for them.
Your avatar
Everyone can see the one you pick.
Default
Pick a fruit
strawberryraspberrycherryblueberryblackberryorangelemonbananaapplepearpeachkiwiThe first tree: how many JAMs (sessions) you joined. One fruit per tree, and this one is the strawberry, the JAM fruit; up to gold there is no shield around it, so the fruit stays recognisable at 16px next to a name; only the strawberry's colour changes. Platinum and diamond put it back on a shield, so the top two tiers stand apart, the way prestige emblems do. Thresholds are placeholders.
Stone1 JAM
Bronze5 JAMsSilver10 JAMs
Gold25 JAMs
Platinum50 JAMs
Diamond100 JAMsAt 16px, next to a name
The same icons as above, at 16px: pixel-exact on every screen
What changes per tier
- Stone
- A plain strawberry, all grey, leaves too
- Bronze
- All bronze, leaves too
- Silver
- Silver fruit, green leaves
- Gold
- Gold fruit, green leaves
- Platinum
- The strawberry turns red, on a platinum shield
- Diamond
- An ice-blue strawberry in the shield's own blues, on a white field inside the diamond-blue shield
JAMs joinedJoin your first JAM to earn Stone
Emma Ghent · running · 31 JAMs›Ghent · padel · 2 JAMs›Lucas Antwerp · cycling · 112 JAMs›The second tree: how many JAMs you organised. It wears the raspberry, drawn the same way as the strawberry: one 16-pixel drawing per tier, the same metals, no shield until platinum. The raspberry is a round dome of bumps with a small leaf cap, so it stays a different fruit from the pointed strawberry even when both are grey or gold. Creating a JAM is rarer than joining one, so the thresholds are lower; they are placeholders.
Stone1 JAM created
Bronze3 JAMs created
Silver5 JAMs created
Gold10 JAMs created
Platinum25 JAMs created
Diamond50 JAMs createdAt 16px, next to a name
The same icons as above, at 16px
Side by side with JAMs joined, tier by tier
JAMs createdCreate your first JAM to earn Stone
Sofia Ghent · running · 58 JAMs, 12 created›Lucas Antwerp · cycling · 112 JAMs, 54 created›Ghent · padel · 1 JAM created›Whether a name shows every tree or one picked by the person is still open.