Coinbax visual identity
Radical minimalism, functional design, and precise specification. The brand is deliberately quiet, because the product it fronts moves other people's money.
The wordmark
The wordmark is the whole identity. There is no icon, no logomark, and no stacked lockup. Where a mark is needed at any size, it is this one.
It is monochrome by rule: black on light grounds, white on dark. It is never tinted, never reversed out of an accent colour, and never paired with a symbol.
Files
SVG is vector and scales without limit. Use it everywhere it is supported. PNG is for screen use where SVG is not an option; both PNGs ship at 721 × 120, so they are not print masters.
Using it
Clear space
Keep free space on all four sides equal to half the height of the wordmark. Measured from its own geometry, the rule holds at any scale.
Minimum size
20px tall on screen, which is roughly 120px wide, and 6mm tall in print. Below that the letterforms begin to close up. The site navigation sits at exactly this floor.
20px, actual sizeWhat not to do
Typography
Suisse Intl throughout, in two weights. Headlines are Medium, never bold.
Suisse Intl Regular (400)
Payment controls for programmable money.
Suisse Intl Medium (500)
Approvals, limits, and recourse.
Suisse Intl Mono
Reserved for code samples. Not for labels, not for amounts, not for identifiers, and not for metadata. If it is not code, it is set in Suisse Intl.
POST /api/v1/transactions
Uppercase and tracking
Uppercase with letter spacing is the eyebrow treatment, and nothing else. Metadata labels, table headers, and captions stay in sentence case.
Colour
The palette is monochrome almost everywhere. Accents carry meaning rather than decoration, so colour appearing on a screen should tell the reader something.
Palette
Semantic tokens
Reach for these in code rather than a raw palette value, so a surface stays correct when the theme flips.
--background#FFFFFF#101014Page ground--foreground#101014#FFFFFFBody text--card#F1F3F6#1D1C21Raised surfaces--muted-foreground#56575A#BBC5C7Secondary text--border#F1F3F6#222126Hairlines, dividers--primary#101014#FAFAFAPrimary buttonsDeprecated tokens
These still resolve through the legacy stylesheet, so they fail quietly rather than loudly. Do not use them in new work.
--text-primaryuse--foreground--text-secondaryuse--muted-foreground--text-muteduse--muted-foreground--background-carduse--card
Buttons and forms
Primary actions are a solid Carbon fill. Secondary actions are a hairline border. The full matrix of variants and sizes lives in the style guide.
Form elements
Inputs sit on the card surface with a hairline border and a rounded corner. Labels are sentence case.
Flow diagrams
Payment flows are drawn as plain boxes joined by arrows, left to right. Status is carried by a single coloured indicator, which is a status dot and not a decorative motif.
Principles
Radical minimalism
Remove until it breaks, then put back one thing. Every element on a screen should be answering a question the reader is actually asking.
Functional colour
Monochrome by default. An accent means something specific, so colour is never applied for emphasis alone.
Technical precision
Exact specification and geometric restraint. Numbers are stated, spacing is on the scale, and nothing is approximately aligned.
"Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials."
Dieter Rams, tenth principle of good design