The WaveWage design system
A numbers-first brand for a product that turns sales into bonuses. Dark-first, purple-primary, amber-accented. Every token, chart style and logo lockup lives here, and every one of them downloads.
Take the kit
Every asset on this page downloads one at a time, or as a zip. Each item also has a Link button, so a brief can point at the file instead of attaching it.
The whole brand kit
50 files: marks and lockups, gradients and wave sheets, the tokens in four formats, the photography, the partner marks, and the brand notes.
Logo system
The mark as vector, in four approved fills, plus four lockups. Every file downloads as the SVG or as a PNG at the size you pick, and the lockup wordmark is carried as outlines, so it needs no font installed.
Files
Mark, purple
The default. Anywhere the background is neutral.
Mark, white
On brand purple, on photography, on video.
Mark, black
Print, embossing, single colour placements.
Mark, amber
Money moments only. One per surface.
Alt mark, purple
The previous chunkier W, kept as option 02.
Lockup on dark
Mark and wordmark on the dark plate.
Lockup on light
Mark and wordmark on the light plate.
Lockup reversed
All white, on brand purple.
Lockup mono
One colour, no plate.
Raster exports
Drawn on this page from the same paths the SVG files carry, at any width you ask for. Pick one and the file saves straight away.
Usage rules
- Minimum clear-space = height of the mark on all sides.
- Minimum mark size: 16px digital, 8mm print.
- Scale the mark and leave the rest alone: no stretching, no fills outside the four above, no effects.
- On photos and video: use the reverse (white) lockup with a 60% scrim.
Color system
Purple is brand and action. Amber is money earned. Neutrals carry 90% of the UI, use them confidently. Click any swatch to copy its hex.
Purple · brand and action
Amber · money earned
Semantic
Surfaces · dark first
Data viz · categorical order
Use in the listed order for multi-series charts. Where a series is money, lead with amber.
Type system
Geist for everything human-readable. JetBrains Mono for numbers, codes, and IDs: anything tabular.
abcdefghijklm nopqrstuvwxyz
0123456789 $ % . , : / -
Geist
Everything a person reads. Headlines, body, labels, buttons.
- Weights
- 400, 500, 600, 700
- Licence
- SIL Open Font License 1.1
abcdefghijklm nopqrstuvwxyz
0123456789 $ % . , : / -
JetBrains Mono
Numbers, codes, IDs, time windows. Anything that lines up in a column.
- Weights
- 400, 500, 600
- Licence
- SIL Open Font License 1.1
Load the fonts
Both families are open licenced and free to embed. On the web, paste the tag into the head. In a design tool, install the family from the link on its card above.
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
Spacing, radius, elevation
A 4pt base. Keep it boring; the hierarchy comes from type and color.
Spacing
Radius
Elevation
Gradients and wave sheets
Six gradients and five wave sheets, each as a 1600 by 900 vector, a PNG at three widths, and a line of CSS. One gradient per surface.
Signal
The default brand wash. Hero backgrounds, ad plates, slide covers.
linear-gradient(135deg, #6a45f5 0%, #a68cf8 100%)Earned
Money moments. Bonus figures, payout cards, anything that pays out.
linear-gradient(135deg, #f58f00 0%, #ffc14d 100%)Dusk
The full brand arc, purple into amber. Use once per surface, never twice.
linear-gradient(135deg, #6a45f5 0%, #a4519a 55%, #f58f00 100%)Deep
Quiet dark surfaces. Section backgrounds, card fills, email headers.
linear-gradient(160deg, #16151b 0%, #0e0d12 100%)Halo
A purple bloom on dark. Sits behind a logo, a number, or a single line of copy.
radial-gradient(circle at 30% 30%, rgba(106, 69, 245, 0.55) 0%, #0e0d12 100%)Payday
Amber into green. Reserved for a settled run, never for a projection.
linear-gradient(120deg, #ffa91f 0%, #2fd97a 100%)Wave sheets
Stacked sine runs in brand colour. These sit behind a headline, a number, or an empty state. Keep them quiet; the wave never competes with the words on top of it.
Waves, purple on dark
The default hero and section backdrop.
Waves, amber on dark
Money surfaces, payout announcements.
Waves, purple and amber
The full brand arc in one sheet.
Waves on light
Print, light decks, email bodies.
Waves, no background
Drop over any plate or photograph.
Charts & number styles
This product is numbers-first. These patterns are the ONLY chart styles allowed in-app.
| Currency | $1,284.60 |
| Currency · hero | $42,180 |
| Percentage | 11.4% |
| Duration | 6h 42m |
| Time range | 09:00 – 11:00 |
| Rate | $3.00/hr |
| Zero state | — |
| Negative (rare) | -$12.40 |
Rules of thumb
- Money earned → amber-400 or success-500. Never purple.
- Money at risk / due → ink-100 (neutral). Only red for destructive.
- All numbers use JetBrains Mono with tabular figures (font-feature-settings: “tnum”).
- Never show more than 3 significant digits after decimal, round aggressively.
- Threshold progress uses the purple → amber gradient. It's the ONE gradient in the system.
Photography and partner marks
Every image the site ships, downloadable and linkable. The abstract half of our imagery lives in the gradient and wave sheets above.
Photography
Real rooms and real service, cropped tight. Pair a photograph with one line of copy or one number, never with both.
Busy counter
Service at pace. The moment a rule is earned.
Back office
The Client side of the product.
Manager on a phone
Same day payout, checked on the floor.
Dana Whitfield
Testimonial portrait. Use beside her own words.
Marcus Lee
Testimonial portrait. Use beside his own words.
Partner marks
These marks belong to those companies. Place them as supplied, at their own proportions, and recolour nothing. Each one is shown here on the plate it was drawn for.
Direction
Abstract waves
Stacked sine waves in brand colour, behind a hero, an empty state or a loading shimmer. Always quiet. The sheets are in section 05.
Product vignettes
Cropped, stylised fragments of real UI, to show the product is tangible. Always at 1:1 or 4:3, never rotated.
Numbers as art
A large monospace number as the hero. The product is the number. Pair it with one line of label in muted colour.
Leave out
- Stock photography of restaurant workers smiling
- 3D illustrations, isometric scenes, or blob shapes
- Emoji in UI, and sparingly at most in marketing copy
- Photos of dashboards on laptops
This location runs on WaveWage
The door sticker, the strip along the glass, and the mark on its own. Every one comes as a screen file and a press file that already carries its bleed, its cut line and its safe area, so a sticker printer can run it as it arrives.
Badge, 3 inch circle · 3in circle
The door and window sticker. Reads across a car park.
Brand purple
3in circle
On dark
3in circle
On light
3in circle
One colour
3in circle
Door strip, 6 x 2 inch · 6 x 2in
The long bar for the bottom of a glass door, beside the POS decals.
Brand purple
6 x 2in
On dark
6 x 2in
On light
6 x 2in
One colour
6 x 2in
Mark, 1.5 inch circle · 1.5in circle
The mark on its own, for a laptop, a clipboard, a name tag.
Brand purple
1.5in circle
On dark
1.5in circle
On light
1.5in circle
One colour
1.5in circle
Sending one to print
- Send the Press file. It opens at true size, carries an eighth of an inch of bleed on every edge, and marks the cut in magenta and the safe area in blue.
- Delete the print-marks layer once the shop has set the cut path.
- One colour is the cheapest to print and the one to use for a vinyl cut or an etch: it has no plate, so the sticker is cut to the shape.
- On glass, the purple sticker faces out and the one colour faces in.