Brand guidelines
The colors, logo, and type that make ClicksAndBits feel like ClicksAndBits.
Logo
Our mark is a phone launching a green arrow upward, trailed by colorful “bits” and anchored by a click cursor. It captures the whole idea in one image: a tap sets things in motion, and data flies.
Full logo — use on light backgrounds, marketing, and app-store assets.
Icon mark — use for favicons, avatars, and the nav. Reads on light or dark.
✅ Do
- Give the logo clear space on all sides.
- Use the icon mark when space is tight.
- Place it on white, very light, or deep-indigo backgrounds.
- Scale it proportionally.
🚫 Don't
- Recolor, rotate, or add effects to the mark.
- Place it on busy or low-contrast backgrounds.
- Stretch or squash it.
- Rebuild the wordmark in a different font.
Core palette
Pulled directly from the logo. Indigo and sky blue lead; green, yellow, and orange are the playful “bits.”
Primary
Accent “bits”
Neutrals
Signature gradients
The logo is built from gradients — use them for heroes, buttons, and feature icons.
Typography
A friendly geometric display face paired with a highly readable body face.
Apps that click
Headings, buttons, labels · 500 / 600 / 700
The quick brown fox jumps over the lazy dog. Body copy is set in Nunito Sans for warmth and easy reading at any size.
Paragraphs, lists, captions · 400 / 600 / 700
Components & voice
UI accents
Rounded corners, soft shadows, and pill-shaped buttons keep things approachable. The four “bits” colors appear as small squares and dots — a signature motif.
Voice & tone
We're clear, warm, and a little playful — never stiff or salesy. We explain things plainly, respect the reader, and keep a light touch.
- Say “we” and “you.”
- Prefer short sentences over jargon.
- Be upfront about data and pricing.
- Add a wink of personality, not noise.