Clever
Design
System
A living reference for all colors, typography, spacing, and UI components that make up the Clever brand experience.
Logo System
The Clever logo may only appear in Clever Navy or White. The combination mark (wordmark + logomark) must be used in all client-facing digital applications.
Bubbles & Organic Shapes
Clever's circle motif makes finance feel approachable and human. Use organic, round shapes — not rigid grids — to reduce friction and build comfort in financial interfaces.
Round, organic shapes lower psychological barriers. The human eye reads curves as safe and approachable — angular shapes read as complex or intimidating. Clever's circle is not just a logo device: it's the design language that says "we've got you."
Circles have no corners — no sharp edges signal danger. In neuroaesthetics, rounded shapes consistently score higher for trustworthiness and warmth. For a fintech brand, these signals counteract the anxiety many people feel around money.
The logomark circle is not just for the logo. Used as an oversized background element, a clipping mask, a hover state, or a data-viz shape, it reinforces brand identity throughout the experience.
- →Use full circles (border-radius: 9999px) for icon containers, avatars, status indicators, and data bubbles.
- →Use oversized background circles that bleed off-screen for hero sections and stat cards — creates depth without noise.
- →Use the logomark circle as a background element at 120–300% scale with low opacity (6–18%).
- →Vary circle sizes deliberately — size encodes hierarchy (bigger = more important).
- →Use large border-radius on cards (16–24px) to echo the circle language throughout.
- →Use square or rectangular icon containers — they interrupt the brand's roundness signal.
- →Place too many equal-sized circles in the same space — it reads as dots, not a hierarchy.
- →Use sharp rectangular cards alongside circle elements — mismatched shape language breaks coherence.
- →Animate circles with bounce easing — it reads as playful/childish. Use ease-out or spring with low overshoot.
- →Use bubbles as pure decoration with no semantic or compositional purpose — every circle should mean something.
--radius-full: 9999px; /* perfect circle / pill */
--radius-2xl: 24px; /* large cards, modals */
--radius-xl: 16px; /* cards, panels */
/* Background bubble — bleed off container edge */
.bubble-bg {
border-radius: 50%;
background: var(--color-electric-blue);
opacity: 0.12;
position: absolute;
/* size: 2–3× the container width */
}
/* Icon container */
.icon-bubble {
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
/* recommended sizes: 40px / 48px / 64px / 80px */
}
/* Data bubble (proportional) */
.data-bubble {
border-radius: 50%;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* size: driven by data value, not fixed */
}
Voice & Tone
Clever speaks with the confidence of an expert and the warmth of a trusted advisor. Every word should make finance feel clear, not overwhelming.
We know our stuff. No hedging, no jargon fences. State facts plainly and own recommendations.
Behind every number is a person's future. Write like you're talking to a smart friend, not filling out a form.
Finance is already complex. Our job is to make it simple. One idea per sentence. Short paragraphs. Plain English.
We don't talk down. We give people the tools and knowledge to act. The tone should leave readers feeling capable.
- Always use $ sign for dollar amounts
- Use commas: $12,400 not $12400
- Abbreviate millions: $1.2M not $1,200,000
- Show % changes with sign: +8.3% / -2.1%
- Em dash (—) not hyphen (-) for pauses
- No exclamation marks — calm confidence
- Sentence case for headings, not Title Case
- Oxford comma always
- synergy, leverage, robust
- utilize (use "use")
- paradigm, holistic, scalable
- very, really, actually
Color System
The Clever palette is built around a bold navy and electric blue core — authoritative and energetic. The logo may only appear in Clever Navy or White.
Typography
Inter powers all headlines; DM Sans handles body copy and sub-headlines across internal and client-facing communications.
Spacing Scale
A consistent 4px base unit system. All layout values are multiples of 4, ensuring rhythmic, predictable spacing.
Service Icons
Thin, linear icons representing Clever's service spectrum — from Strategy to Advisory. Stroke-based, 1.5pt weight.
Buttons
Bold and direct. Buttons are always lowercase-weight text — never ALL CAPS — mirroring the wordmark's personality.
Badges & Chips
Small, punchy labels for statuses and categories. Chips are interactive; badges are display-only.
Form Inputs
Clean and focused. Fields use Electric Blue as the active/focus accent — direct and clear.
Form Controls
Checkboxes, radios, and selects extend the input system. All controls use the same focus ring, error state, and disabled treatment as text inputs.
Cards
Cards group related content. Default to white with subtle shadow; use dark variant for featured content or CTAs.
A comprehensive analysis of your business's exit potential, identifying value levers and positioning your company to attract the right buyers.
"Through financial clarity we help elevate your decision-making, instilling confidence and empowering you to focus on what matters most."
Tabs
Tabs switch between related views without navigation. Use for dashboard panels, report periods, and categorized content.
Alerts
Sincere, simple, and direct — exactly how Clever communicates. Alerts use the brand's left-border rule for clear visual hierarchy.
Data Display
Tables and progress indicators for financial data. Navy header rows ground the authority of the information.
| Client | Service | Status | Revenue | Next Action |
|---|---|---|---|---|
|
TK
TechKore Inc.
SaaS · Series A
|
Advisory + CFO | Active | $8,500/mo | Q2 Board Deck |
|
GH
Growth Harbor
E-commerce · Bootstrapped
|
Accounting + Taxes | Active | $3,200/mo | Tax Filing Due |
|
BL
Blueprint Labs
HealthTech · Pre-revenue
|
M&A Advisory | Onboarding | $12,000/mo | Send Agreement |
|
FA
Forte Analytics
Fintech · Seed
|
Forecasting + Strategy | At Risk | $5,700/mo | Urgent Call |
Feedback & Loading
Toggles, tooltips, dividers, and skeleton loaders keep interactions transparent and trustworthy.
Modals
Modals interrupt the flow to get a decision or display critical information. Use sparingly — only when the action requires the user's full focus.
- →Overlay:
rgba(4,11,77,0.5)with 4px backdrop-blur - →Container:
border-radius: 24px, max-width 480px - →Entry: fade in overlay + translateY(12px)→0 on modal
- →Close on: ✕ button, overlay click, or Escape key
- →Primary CTA always on the right; destructive = error red
- →Cancel / dismiss always on the left
- →Focus trap: Tab cycles only within modal while open
- →z-index:
var(--z-modal)= 1000
Motion & Animation
Motion at Clever is purposeful and calm — it guides attention and confirms actions without competing with the content. Finance should feel steady, not energetic.
- →Use ease-out for entries, ease-in for exits — elements decelerate arriving, accelerate leaving.
- →Use translateY + opacity for entrances. Never scale from 0 (cartoonish).
- →Stagger list items 50–80ms per item for a sense of order, not explosion.
- →Always respect prefers-reduced-motion — already in this system.
- →No bounce easing — overshoot reads playful/childish for a finance brand.
- →No looping animations in content areas — constant motion competes with financial data.
- →No animating layout properties — width, height, top, left. Only transform + opacity.
- →No durations over 500ms — anything longer feels broken to users waiting.
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
--transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Entrance pattern */
.enter { opacity: 0; transform: translateY(12px); }
.enter.visible {
opacity: 1; transform: translateY(0);
transition: opacity 400ms ease-out, transform 400ms ease-out;
}
/* Stagger per child */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 70ms; }
.item:nth-child(3) { transition-delay: 140ms; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Browser & App Icons
How the Clever mark appears in browser tabs, bookmarks, home screens, and PWA contexts. Always use the logomark — never the full wordmark — at small sizes.
×
- Use the logomark (C circle) as the favicon
- Provide 16×16, 32×32, and 180×180 sizes
- Set
theme-colorto#040b4d - Use PNG for broad compatibility
- Use the full wordmark as a favicon
- Leave pages without a favicon
- Use a white icon on a white background
- Scale below 16×16