Colors
The palette is anchored by the Clickbringer primary blue and accent pink. Use semantic colors by purpose (background, text, border, status) to avoid drift.
Core Brand
Primary CTA fills, highlights, and the signature Clickbringer blue.
Accent emphasis, underline highlights, and hover state for primary CTAs. Use as a “spark,” not a base.
Supporting Blues
Deep premium navy used for high-contrast headlines and dark blue sections.
Navbar blue (fixed header).
Strong action/link blue; use for “operator” interactions and emphasis in report modules.
Hover/active state for action blue.
Light sky wash used in subtle section gradients.
Secondary sky wash variant (pricing fade).
Foundations (Backgrounds & Surfaces)
Default page background.
Light section background behind cards.
Cool-tinted panel background for CTAs and callouts.
Premium matte near-black used for dark sections (footer-style).
Raised dark surface for dark cards/panels.
Text
Primary text (headlines and main copy).
Secondary text (supporting paragraphs).
Muted text (captions, metadata, helper text).
Text on dark backgrounds.
Muted text on dark backgrounds.
Borders & Dividers
Subtle dividers and form borders.
Default border for cards/panels.
Emphasized borders (use sparingly).
Status
Success / positive outcome states.
Success background tint for badges/alerts.
Warning / needs-attention states.
Warning background tint for badges/alerts.
Error / destructive states.
Error background tint for badges/alerts.
Informational states (progress, notices).
Info background tint for badges/alerts.
Soft Tints & Optional Accent
Soft primary tint used for glow/wash areas.
Soft accent tint used for subtle emphasis.
Optional strategic accent for “automation/systems” cues. Use sparingly.
Teal background tint for subtle badges/callouts.
Typography
Clickbringer uses a single modern sans tone (Poppins). Keep hierarchy strong, avoid decorative treatments, and let spacing + weight communicate confidence.
Clear insights, consistent performance, and decision-grade reporting. Write like an operator: direct, specific, and measurable.
Body text should sit around 16–18px with comfortable line height.
Type scale (practical)
| Token | Value | Notes |
|---|---|---|
| display | 48–60px / 700 | Hero and page headers |
| headline | 32–40px / 700 | Section headings |
| title | 24px / 600 | Card titles, module headers |
| body | 16–18px / 400 | Main copy |
| label | 14–20px / 500–600 | Buttons, nav, UI labels |
| caption | 12px / 500 | Metadata, helper text |
Metric modules should feel like a clean dashboard: calm neutrals + brand blue for key numbers.
Spacing
Use an 8px rhythm with a 4px micro-step. Keep section spacing generous and consistent.
Spacing scale
| Token | Value | Notes |
|---|---|---|
| xxs | 4px | Micro adjustments |
| xs | 8px | Small gaps |
| sm | 12px | Tight UI spacing |
| md | 16px | Default padding |
| lg | 24px | Card padding / gutters |
| xl | 32px | Section inner spacing |
| 2xl | 48px | Large separation |
| 3xl | 64px | Section spacing |
| 4xl | 80px | Hero / major section spacing |
Visual rhythm
Prefer fewer, stronger spacing rules rather than one-off tweaks.
Shapes
Clickbringer mixes rounded cards with pill CTAs. Keep shapes consistent: pills for primary actions, rounded cards for content, and rounded inputs for forms.
Corner radii
| Token | Value | Notes |
|---|---|---|
| sm | 6px | Small UI elements |
| md | 8px | Default radius |
| lg | 12px | Inputs, secondary cards |
| xl | 16px | Primary cards |
| 3xl | 24px | Large panels (pricing) |
| full | 9999px | Pill CTAs, badges |
Examples
Use generous padding and calm borders/shadows.
Elevation
Depth comes from soft shadows and tonal layering (light background → white cards). Avoid harsh outlines.
Shadow presets
| Token | Value | Notes |
|---|---|---|
| sm | 0 4px 12px rgba(0,0,0,0.08) | Small UI separation |
| md | 0 10px 25px rgba(0,0,0,0.12) | Cards |
| lg | 0 20px 45px rgba(0,0,0,0.14) | Floating panels/modals |
| feature | 0 72px 129px rgba(0,0,0,0.10) | Hero/feature cards (rare) |
Visual examples
Motion
Motion is polish, not entertainment. Use short transitions for hover/press states, and respect reduced-motion preferences for marquee/headline patterns.
Durations
| Token | Value | Notes |
|---|---|---|
| fast | 150ms | Hover/press transitions |
| medium | 300ms | Panels, dialogs, drawers |
| slow | 600ms | Occasional emphasis animations |
| headline.rotate | 1500ms + 2500ms pause | Rotating hero headline |
| marquee.desktop | 50s linear infinite | Client logo strip |
| marquee.mobile | 12s linear infinite | Mobile logo strip |
Gradients (common)
Subtle brand wash for hero + premium sections. Keep it quiet.
Matte dark sections with brand links and strong CTAs.
