Compliant by default
FDCPA, CFPB and PIPEDA rules baked into the workflow engine — agents can't dial outside permitted windows.
Learn more
Collect! Design System · v1.0
Build Collect! apps that feel like Collect!
A small, opinionated set of tokens, typography rules, and components — derived from the 2019 Comtech corporate identity and the 2026 web refresh. Drop the CSS in, follow the rules, ship consistent UI.
Logo, wordmark & usage
The primary identity is the C! full-colour icon mark — teal-and-Persian-Blue, square aspect. Use the wordmark when there's room and brand reinforcement matters; use the C! mark for tight contexts (app icons, favicons, avatars, small UI). Always keep clear space, never alter the aspect ratio, and switch to the white/reverse variant on dark or busy backgrounds.
C! icon mark — variants
Switch variant to match the surface — never recolour the mark by hand.
Full colourPrimary · light backgrounds only
TealSingle-tone · light backgrounds
BlackGreyscale & print contexts
White (reverse)For Persian Blue / dark surfaces
Collect! wordmark — variants
Use the wordmark where horizontal space allows and brand recognition is the goal (website headers, sales decks, email signatures).
Full colourIncludes “credit + debt collection software” tagline
Plain (no tagline)Use in tight UI where the tagline would be illegible
BlackSingle-tone for print
White (reverse)For Persian Blue / dark surfaces
Clear space
Reserve a margin of at least ¼ × mark height around the C! mark — no other text, logo, or graphic element may enter this zone.
¼ ×
¼ ×
¼ ×
¼ ×
Minimum size
Don't render the C! mark below 24 px in digital, or 10 mm in print — below those sizes the inner glyph and dot become illegible.
Background usage
Which variant to reach for, depending on the surface beneath it.
✓
Full colour · White
✓
Full colour · Light grey
✓
White · Persian Blue
✕
Full colour · Persian Blue
✓
White · Dark photo
✕
Full colour · Busy photo
✓
Teal · White
✕
Full colour · Money green
Do
- Default to C! full-colour on light surfaces.
- Maintain a clear-space margin of at least ¼ × mark height.
- Switch to the white variant on Persian Blue, photos, or any background under ~60% contrast.
- Pair the mark with Outfit headings + Inter body — never another typeface.
- Export at 2× resolution for retina contexts; otherwise prefer SVG.
Don't
- Don't stretch, skew, rotate, or distort the mark.
- Don't recolour outside the brand palette — use a provided variant instead.
- Don't place the colour version on dark, brand-blue, or busy photo backgrounds.
- Don't render the mark below 24 px digital / 10 mm print.
- Don't add drop shadows, glows, or strokes that change the silhouette.
- Don't crop the mark — the square frame is part of the identity.
Brand palette
Six brand colours, unchanged from the 2019 identity. Teal is primary, Persian Blue carries headings and stability cues, Mid Grey is body copy, Urgent Orange signals action.
Type system
Outfit (display & headings) + Inter (body) — the 2026 refresh. Modular scale with a 1.250 ratio.
display · 60/1.05Receivables, organized.
h1 · 48/1.15
Everything that matters
h2 · 36
Built to integrate
h3 · 24
Reliable, intelligent, successful
h4 · 20
Section heading
h5 · 18
Sub-section
h6 · 14 caps
Eyebrow heading
lead · 20
Ultra-flexible collection software, packed with features and built to grow with your agency.
body · 16
Collect! is installed in 40 countries by over 1,400 companies including collection agencies, debt buyers, credit unions and banks.
small · 14Auxiliary copy and metadata sits at 14 px.
caption · 12CAPTIONS · LABELS · METADATA
Paragraphs and inline elements
This is a standard paragraph. The body face is Inter 400 at 16 px on a 1.6 line height. We italicize for emphasis, bold for weight, and underline sparingly. You may use hyperlinks with a teal underline on hover, mark highlighted phrases, show retired and new text, or refer to keys like ⌘ + K.
Inline code sits in a Persian Blue chip. Acronyms such as API get a dotted underline, and quantities like H2O or E = mc2 use sub/superscript.
Hover this term to see a tooltip: Collect!.
Bulleted, numbered, definition, checked
Unordered
- Trustworthiness
- Reliability
- Flexibility
- Value
Ordered
- Import accounts
- Configure workflows
- Launch contact strategy
Checked list
- Integrated payment processing
- Configurable contact rules
- Compliance reporting
- Multi-currency, multi-language
Definition list
- C!
- Short form of Collect!, used as the icon mark.
- Lite
- The lighter Collect! Lite product line.
Quotations
Not specified in the 2019 brand guide — defined here to fit the system: Persian Blue heading colour, teal accent rule, alt-grey surface, oversized curly-quote glyph in primary teal.
Collect! cut our reconciliation time in half. The workflow engine alone paid for the migration in the first quarter.
Operations Director, Mid-market collection agency
The team adapts the software to how we already work — instead of the other way around.
Code blocks
:root {
--color-primary: #2BA3BB;
--color-secondary: #1A3373;
--color-accent: #F89939;
}Status & tags
Active
Trial
Paid in full
New feature
Archived
Content containers
Visibility, not noise
Operations dashboards that surface what's actually moving the receivables curve — not vanity metrics.
Integrates with what you run
Open API, file-based import, and bidirectional sync with major credit-bureau and payment gateways.
40Countries
1,400+Companies
37Years
99.9%Uptime
Inline messages
Heads upScheduled maintenance on Sunday from 02:00–04:00 UTC.
Payment receivedAccount #44219 marked as paid in full.
Approaching limitYou've used 86% of your contact attempts for this account this month.
Sync failedThe credit bureau returned an authentication error. Re-enter your API key.
Inputs
Radio group
Progress
65% complete — 3 of 5 onboarding steps done.
Data table
| Account | Debtor | Balance | Stage | Status |
|---|---|---|---|---|
| 44219 | J. Carter | $2,841.00 | Pre-collect | Active |
| 44220 | R. Singh | $1,210.55 | Notice 2 | Promised |
| 44221 | M. Park | $0.00 | Closed | Paid |
| 44222 | L. Tremblay | $8,750.00 | Legal | Escalated |
People
JC
RS
MP
LT
JC
Brand icon set
24 × 24, 1.8 stroke, rounded caps and joins. Use as <svg><use href="assets/icons/icons.svg#i-name"/></svg> and inherit colour via currentColor.
i-homei-belli-settingsi-useri-searchi-sharei-clocki-plusi-xi-checki-editi-maili-arrow-righti-downloadi-phonei-shieldi-charti-infoi-alerti-puzzleDownload brand assets
Every brand asset, grouped by logical name with all available file formats. Click a format chip to download. White variants are previewed on a Persian Blue background. AI / EPS / PSD originals are for print & design tools — use SVG / PNG on the web.
| Preview | Asset · variant | Available formats |
|---|---|---|
| C! · icon mark | ||
|
C! mark — Teal Primary brand colour. Use on light backgrounds. |
|
|
C! mark — Full colour Two-tone teal + blue. Use on white only. |
|
 |
C! mark — Black Single-colour. Print & greyscale contexts. SVG is editable. |
|
|
C! mark — White (reverse) For dark backgrounds. Never use the colour version on dark. |
|
| C! Lite · icon mark (Collect! Lite product line) | ||
 |
C! Lite mark — Teal |
|
 |
C! Lite mark — Full colour |
|
 |
C! Lite mark — Black |
|
 |
C! Lite mark — White (reverse) |
|
| Collect! · primary wordmark | ||
|
Wordmark — Full colour With “credit + debt collection software” tagline. |
|
teal vector only |
Wordmark — Teal Single-tone teal wordmark. Vector originals only — export PNG from AI/EPS when needed. |
|
|
Wordmark — Black |
|
 |
Wordmark — White (reverse) For Persian Blue / dark backgrounds. SVG is editable; fonts-broken-to-outlines AI is for print without font dependencies. |
|
| Collect! Lite · wordmark | ||
 |
Lite wordmark — Full colour |
|
teal vector only |
Lite wordmark — Teal Adobe Illustrator source only. |
|
 |
Lite wordmark — Black |
|
 |
Lite wordmark — White (reverse) |
|
| Favicons | ||
 |
Favicon — Full colour For browser tabs. ICO bundles multiple sizes. |
|
 |
Favicon — Teal |
|
| API badge | ||
 |
API badge Use to flag API-enabled features & integrations. |
|
| Other assets | ||
 |
C! mark — Email signature Square PNG sized for email signatures and avatars. |
|
 |
Facebook profile icon Framed and unframed variants for social profiles. |
|
 |
C! process mark Animated process indicator (white-on-dark). |
|
 |
Integration modules diagram Marketing diagram showing the Collect! module ecosystem. |
|
|
Plain wordmark (no tagline) Legacy collect_logo.png — wordmark without “credit + debt collection software”. |
|
| Reference documents | ||
PDF |
Collect! Branding 2019 Official corporate identity guide. Source of truth for everything in this design system. |
|
PDF |
Logos and Icons Color Options Per-variant colour matrix — what to use where. |
|
| Design system assets | ||
Icon sprite 20 line icons, 24 × 24, 1.8 stroke. Reference via <use href="#i-name"/>. |
||
Token + stylesheet bundle Drop tokens.css + base.css + components.css into any Collect! app. |
||
Design tokens reference
Reference the CSS custom properties directly — don't hard-code brand values in feature CSS.
Color
| --color-primary | #2BA3BB |
| --color-secondary | #1A3373 |
| --color-accent | #F89939 |
| --color-neutral | #626464 |
| --color-success | #A1BF2F |
| --color-info | #A94382 |
| --color-text | #626464 |
| --color-heading | #1A3373 |
| --color-bg | #FFFFFF |
| --color-bg-alt | #F7F8FA |
| --color-bg-dark | #0F1A3A |
| --color-border | #E4E7EC |
| --color-teal-50 | #E9F6F9 |
| --color-teal-700 | #1F7F92 |
| --color-blue-50 | #EAEEF7 |
| --color-orange-50 | #FDEEDB |
| --color-money-50 | #F1F6DD |
| --color-berry-50 | #F2E1EC |
Type & space
| --font-heading | Outfit |
| --font-body | Inter |
| --font-mono | JetBrains Mono |
| --fs-12 … --fs-60 | 0.75 → 3.75 rem |
| --space-1 … --space-24 | 0.25 → 6 rem |
| --radius-sm / md / lg / pill | 4 / 8 / 14 / 999 px |
| --shadow-sm / md / lg | 3 elevation levels |
| --duration-1/2/3 | 120 / 200 / 320 ms |