Compaytence
Brand Basics
What you need to build a landing page that looks like ours: one accent, one ground, two typefaces. Click any color to copy it. Where this sheet does not cover a decision, take the plainer option.
One blue, four jobs
Compaytence has a single accent color. It is the blue in the wordmark, and everything else on the page is a neutral.
The blue appears at four strengths, and which one you use depends on the job, not on taste. The reason is contrast: the brand blue is bright, so it reads beautifully as a filled button and badly as a line of text.
Do not set text in #33A9FF on a light background. It measures 2.24:1 there, well under the 4.5:1 minimum, and it is the single most common mistake we see on partner pages. On light, that blue is a fill: button backgrounds, icon shapes, the logo. When you need a blue word, use #106AA6. On the dark ground the same blue is fine as text, because there it measures 6.37:1.
The full ladder is below if you need a tint for a hover state or a quiet background. Every step is the same hue at a different lightness, which is why they never clash. Never introduce a second accent color: no purple, no teal, no amber. If something needs to stand apart, change its weight or its size, not its hue.
A warm ground
Our grays are not gray. They carry a small amount of warmth, which is what keeps the blue looking cool next to them.
Use these exactly. A stock gray, a pure #FFFFFF page or a pure black heading will read as a different brand sitting beside our site, even though the difference is a few points of saturation.
For borders and dividers, do not reach for a gray. Use the ink color at low opacity, which
keeps edges in the same family as the text above them:
rgba(31, 27, 22, 0.12) on light, rgba(233, 230, 225, 0.12) on dark.
Shadows follow the same logic and are warm, never neutral black.
Two faces, fixed roles
Instrument Serif for display and for every number. Archivo for everything you read. Both are free on Google Fonts.
Numbers are the part worth getting right, because they are the most recognizable thing we do. Every figure goes in the serif, in the blue, with tabular numerals so columns line up:
Set with font-variant-numeric: tabular-nums
lining-nums. In running text a figure like 2.4x sits
slightly larger than the words around it, so it catches the eye without going bold.
Load them like this:
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
- Body copy around 17px, generous line height.
- Headlines in the serif, at 400 weight.
- The second line of a title in the blue, roman. Serif italic never goes in a headline.
- Inter, Geist, Roboto, Arial or a system font stack.
- A mono face for labels or headings.
- A gradient filling any piece of type.
The wordmark
Two variants, one for each ground. They are not interchangeable.
- Keep clear space around the mark of at least the height of the C on every side.
- Minimum height 24px on screen. Below that the wordmark stops being legible.
- Do not recolor it, outline it, add a shadow, rotate it, or set it on a busy photograph.
- Do not rebuild it as live text, and do not letterspace or condense it to fit a space.
Email trevor@compaytence.com for SVG and PNG at full resolution. The two images above are embedded in this file, so you can right click and save either one for a quick mockup, but use the real files for anything you ship.
Shape, space and motion
Two corner radii, one spacing rhythm, and restraint on movement.
- 14px on containers: cards, panels, images, modals.
- 8px on controls: buttons, inputs, tags, small chips.
- Nothing else. No pills, no square corners, no third value.
- A hairline border at rest, no shadow.
- Lift and shadow on hover only.
- Not everything is a card. A page of nothing but cards reads as noise.
Spacing comes off a 30px baseline. Use whole steps between blocks and the smaller steps inside a component. Anything that is not on this scale will look slightly off next to our pages, in a way that is hard to name and easy to see.
On motion: fades and short rises as a section enters, around half a second, and nothing
else. No parallax, no counters spinning up, no carousel that moves on its own. Honor
prefers-reduced-motion, and never let content depend on an animation running:
if the script fails, everything must still be on the page.