01 Name
The till for crypto payments.
Cryptill joins crypto and till. A till is the drawer of a cash register, where a shop keeps the money it takes. The name says what the product does for a merchant.
Write
Cryptill
One word with one capital letter, in running text.
Do not write
CrypTill, Crypto Till, CRYPTILL
The wordmark is lowercase. Text is not.
02 Mark
A double rule, and the name beside it.
The symbol is a tile with a double rule, the mark a ledger draws under a final total. The lower rule is in carbon blue. The wordmark is the name in lowercase, set in Geist Semibold.
Paper, light
Ink, dark
Sizes
Favicon
Clear space
Keep the height of the letter c clear on every side. The PNG files include this space.
Do not
- Do not colour the wordmark in the accent.
- Do not put a second accent line on the symbol.
- Do not set the wordmark in capital letters.
- Do not place the mark on a status colour.
03 Colour
Ink on paper, one carbon line.
Neutrals cover most of each screen. Carbon blue is the colour of carbon paper, and it marks one action or one line in a view. Green, amber, and red mark statuses only.
Paper, light
ground#F1EFE9Page backgroundsurface#FBFAF7Cards, receipts, and inputsfg#1E1F26Text and linesmuted#5D5F6BSecondary textline#D9D6CEBorders and rulesaccent#2F45A8Carbon blue: links and the primary actionpaid#1A6B3EThe paid statuspending#8A5A00The pending status, and a withdrawal that waitsfailed#B3342BThe underpaid, expired, and failed statusesInk, dark
ground#15161CPage backgroundsurface#1D1E26Cards, receipts, and inputsfg#ECEAE4Text and linesmuted#A3A3AESecondary textline#2E303BBorders and rulesaccent#8FA2F0Carbon blue: links and the primary actionpaid#5FCF8EThe paid statuspending#E2B44CThe pending status, and a withdrawal that waitsfailed#F08A80The underpaid, expired, and failed statusesProportion
Ground, surface, and text fill a screen. The accent is a thin share of it.
Contrast
Every text colour reaches a contrast of 4.5 to 1 on the ground, the surface, and its own tint, in both themes. This meets WCAG AA for body text.
| Text | Light on ground | Light on surface | Light on tint | Dark on ground | Dark on surface | Dark on tint |
|---|---|---|---|---|---|---|
| fg | 14.28 : 1 | 15.73 : 1 | None | 15.00 : 1 | 13.79 : 1 | None |
| muted | 5.51 : 1 | 6.07 : 1 | None | 7.23 : 1 | 6.64 : 1 | None |
| accent | 7.20 : 1 | 7.93 : 1 | 6.65 : 1 | 7.39 : 1 | 6.79 : 1 | 6.03 : 1 |
| paid | 5.68 : 1 | 6.25 : 1 | 5.45 : 1 | 9.28 : 1 | 8.53 : 1 | 7.30 : 1 |
| pending | 5.15 : 1 | 5.68 : 1 | 4.87 : 1 | 9.34 : 1 | 8.58 : 1 | 7.42 : 1 |
| failed | 5.30 : 1 | 5.84 : 1 | 4.76 : 1 | 7.44 : 1 | 6.83 : 1 | 6.36 : 1 |
04 Type
One family for words, one for numbers.
Geist Sans carries headings, text, and buttons. Geist Mono carries every amount, address, hash, and key, so a payer reads each character without error.
Geist Sans
Aa
Pay the way you already know.
Headings, body text, buttons, and labels. Sentence case for headings and buttons.
Geist Mono
0O 1l
25.00 USDT
Amounts, addresses, hashes, and API keys. Amounts use tabular figures.
An address, in groups of four
TXk4m8Rq2LhZp7nVwF3sYbJc9dEa6uGtKP
An example TRON address. A payer always sees the full address at least once.
Amounts in a column
| 1040 | 125.00 | USDT on TRON |
| 1041 | 9.50 | USDT on TON |
| 1042 | 25.00 | USDT on TRON |
| 1043 | 1,200.00 | USDT on BSC |
05 Shape
Flat sheets with one border.
Every surface is a fill and a hairline border. Depth is a second sheet behind the first, like the carbon copy of a receipt. No shape has a blurred shadow, a gradient, a glow, or a glass blur.
Tag, 6 pixels
TXk4 m8Rq 2LhZTags, inputs, chips, and QR frames.
Card, 12 pixels
Cards, panels, and frames.
Full
Talk to usButtons and status pills.
Depth is a sheet
Do not
- Do not use a blurred shadow or a glow.
- Do not use a gradient or a glass blur.
- Do not use a corner radius outside the three above.
06 Space
A 4 pixel unit and a 12 column grid.
Every gap and padding is a multiple of 4 pixels. Text is flush left, and a heading, a text, and a card each start on a column of the grid.
Layout steps
12 columns, 24 pixel gutters, 1152 pixels wide
A phone uses one column.
07 Art
Till tape: drawn by code, like a till prints.
The style is called Till tape. Each scene states one idea of the product with thin lines in the text colour, flat paper fills, and one carbon blue line that marks the subject. Art never appears in a payment flow.
Swiss Style
The layout: a column grid, flush-left text, white space, and numbers as the main visual.
Ligne claire
The line: one stroke weight, flat fills, no shading, no hatching, and no gradient.
Isotype
The counting: one symbol is one unit. A quantity is shown by repetition, never by size.
Network marks
A coin with one glyph that nods to the shape of the network. It never copies the network's own logo or colours.
Not part of the style
- Primary colours. Red and yellow read as statuses.
- Print grain. Noise makes numbers and addresses less exact.
- 3D, shadows, glow, and glass. They are the look of a screen, not of paper.
- Use art on the brand page, the landing page, empty states, and documentation.
- Never put art on the checkout page or beside an amount.
- Draw every line at one weight. Use one carbon blue line at most.
- Show a quantity by repeating one unit at one size.
08 Motion
Motion draws, prints, or counts.
Motion shows what the product does: a line draws, a receipt prints, a count changes, or a status changes. Nothing lifts, zooms, or casts a shadow.
A status changes
A demo may loop. Every other motion runs once.
A total closes
A viewer who asks for reduced motion sees the final state.
- On hover, the border turns to the text colour.
- Never lift a card, scale it, or add a shadow on hover.
09 Voice
Speak like a good cashier.
Plain, exact, calm, and helpful. Short sentences, common words, and no exclamation marks.
Plain
No crypto word that the reader does not need. A network has the name that exchanges use.
UseSend USDT on the TRON network.
AvoidInitiate a TRC-20 transfer to the deposit wallet.
Exact
Every amount has its token and network. Every time has its unit.
UseSend 25.00 USDT on TRON within 30 minutes.
AvoidSend the amount soon.
Calm
State what happened and what to do next. Never blame the reader.
UseThe payment arrived 2.00 USDT short. Send 2.00 USDT to the same address.
AvoidError! You sent the wrong amount.
Helpful
Every problem names one next step.
UseThis payment expired. Ask the shop for a new payment link.
AvoidPayment expired.
10 Statuses
One word and one colour for each status.
A status is the most important line on a payment screen. Each status has one name, one colour, and one sentence that states the next step.
Paper, light
- Waiting for paymentSend 25.00 USDT on TRON to the address below.
- PaidThe shop received your payment. You can return to the shop.
- UnderpaidThe payment arrived 2.00 USDT short. Send 2.00 USDT to the same address.
- ExpiredThis payment expired. Ask the shop for a new payment link.
Ink, dark
- Waiting for paymentSend 25.00 USDT on TRON to the address below.
- PaidThe shop received your payment. You can return to the shop.
- UnderpaidThe payment arrived 2.00 USDT short. Send 2.00 USDT to the same address.
- ExpiredThis payment expired. Ask the shop for a new payment link.
11 Downloads
Take what you need.
Every file comes from the same drawing as this page. Use the light files on light grounds and the dark files on dark grounds.
Symbol
The tile alone, for avatars and small spaces.
App icon and colours
A 512 pixel app icon on paper, and the colours of both themes as JSON and CSS.
The typefaces are Geist and Geist Mono, free under the SIL Open Font License. Get them from the official Geist page.