Brand system
Enrich-CRM Brand GuidelinesTokens, components, and usage rules.
Single source of truth for colors, typography, layout, components, and motion—so every interface feels Enrich-CRM.
Consistency builds trust.
A shared visual system so every interface feels unmistakably Enrich‑CRM.
HubSpot
Clay
API
A shared visual system so every interface feels unmistakably Enrich‑CRM.
Color palette
Keep surfaces light. Use strong accents sparingly (CTA, highlights, state).
Primary
—clay-blue#0e132a
Navigation, headings, key UI anchors.
Success
—clay-green#1a936f
Positive state, verified signals, checkmarks.
CTA
—clay-yellow#ffe36e
Primary action, highlights, emphasis.
Secondary
—clay-purple#c084fc
Secondary accents, subtle emphasis.
Supporting colors
Surface
—clay-gray#f4f5f7
Section backgrounds, muted surfaces.
Error
—accent-red#ef4444
Destructive actions, validation errors.
Confirmation
—accent-green#10b981
Success messages, positive feedback.
Info
—accent-blue#3b82f6
Information states, secondary links.
Typography
Use Space Grotesk for headings and Inter for body.
Headings (display)
H1
Make the data feel effortless
H2
A consistent, modern system
H3
Readable by default
Body (sans)
Enrich-CRM copy should be direct, confident, and practical. Focus on outcomes (“route faster”, “cleaner CRM”, “less research”), then explain the mechanism (“signals”, “standardization”, “automation”).
Use medium weight for lead paragraphs and regular for supporting text.
Layout tokens
Prefer generous whitespace and rounded surfaces.
Spacing
Use 8px increments. Increase spacing for “hero” moments.
Radius
Default to rounded-2xl / rounded-3xl. Reserve sharp corners for tables and inputs.
4px
8px
12–16px
Full
UI components
Reuse the same button styles, bento cards, and form fields across pages.
Buttons
<a class=“btn-primary px-5 py-2.5 rounded-full text-sm”>Primary</a>
<a class=“btn btn-cta hero-cta”>CTA</a>
<a class=“btn bg-white border border-gray-200 …”>Secondary</a>Cards
<div class=“bento-card p-6 shadow-soft-sm”>
…
</div>Forms
Status & badges
Verified
Needs review
Error
Motion
Prefer fade-up on load and subtle blob shapes for depth.
Fade up
Use on hero copy and key cards. Add delay-100 / delay-200 for stagger.
This block uses fade-up.
<div class=“fade-up”>…</div>
<div class=“fade-up delay-100”>…</div>Blob shapes
Decorative only. Keep opacity low and blur high.
<div class=“animate-blob animation-delay-2000”></div>Download the guidelines
Download an HTML copy to share internally or keep as a reference.