Brand/Free to use, within reason
Everything here is the same code the site runs on, so it cannot go stale. Take what you need. If you are writing about Stonkpile, you do not need to ask.
Four columns, the third one graded. It is a market with one thing in it rated, which is the whole product in four shapes. The graded column is always the third and always the tallest; it is the only part that carries the accent colour.
On paper
On ink
Locked up with the name
Smallest it goes: 24px
Rules, and there are only fourKeep clear space around it equal to the width of one column. Never redraw it, restretch it, or rotate it. Never recolour the three plain columns to anything but the ink or the paper tone. Never put the mark on a background that leaves the graded column with less than 3:1 contrast.
Two grounds and one accent. Brass is the only colour that ever means anything: it marks the thing being rated, the live indicator, and a link. Green and red appear only on numbers that moved, never as decoration.
| Name | Token | Light | Dark | What it is for |
|---|---|---|---|---|
| Paper | --bg | #ECEEE8 | #0F1218 | The page |
| Ink | --ink | #161A21 | #E7EAE8 | Body and headings |
| Brass | --brass | #8D6414 | #D9AE51 | The one accent |
| Muted | --muted | #5D6672 | #929BA7 | Secondary text |
| Line | --line | #D4D7CE | #262C36 | Borders and rules |
| Up | --up | #146B48 | #41CB8B | Gains, passes |
| Down | --down | #A8352E | #EF6D62 | Falls, failures |
Three faces, one job each. All three are on Google Fonts and free to use.
Bodoni Moda · 600, 800
Every tokenized stock
Headlines and any number worth looking at. Weight 600 everywhere except the one headline on a page. Negative tracking, always: −0.015em on display, −0.01em on section headings.
Archivo · 400, 500, 600
Prose, and anything somebody has to read a paragraph of.
The body face. It never appears above 40px and never carries an accent colour.
IBM Plex Mono · 400, 500, 600
LABELS, TICKERS, ADDRESSES
Everything a machine produced: tickers, contract addresses, column headers, the eyebrow. Uppercase with 0.13em tracking when it is a label.
Pick by what the background is doing, not by what looks nicest in the list. Vector wherever vector is allowed.
| File | What it is | When to use it |
|---|---|---|
| mark.svg | Mark on its own dark tile, rounded | App icons, anywhere the background is not ours |
| mark-square.svg | Same, full bleed, no rounding | Avatars, where the platform does its own cropping |
| mark-white.svg | Bare mark, light columns | On a dark background we control |
| mark-ink.svg | Bare mark, dark columns | On a light background we control |
| mark-maskable.svg | Mark inset to 62 percent | Android home screens, which crop to a circle |
| avatar-1000.png | 1000 × 1000 PNG | Profile pictures, and any form asking for a logo image |
| x-header-1500x500.png | 1500 × 500 PNG | The X header |
| icon-512.png | 512 × 512 PNG | Web app manifests |
| favicon.ico | 16, 32 and 48 in one file | Browser tabs on older browsers |
All of itDownload the kit
Stonkpile, one word, capital S, no space and no camel case. Not StonkPile, not Stonk Pile. The site is stonkpile.xyz. If you are describing it in a sentence: an index of every tokenized stock on Solana, with a rating for the ones that have a market.
