Brand Guide

Identity system, color palette, and assets for Counter Insight.

Wordmark

Counter Insight
Counter Insight
Manrope 800/400 · Navy #1e293b · No period Download SVG

Logomark

CI
CI
CI
CI
CI
CI
CI
CI
Manrope 800 · 65% ratio · 22% radius · -1.5px tracking Default SVG · Inverted SVG
DoUse default (navy) on light backgrounds. Use inverted (white) on dark backgrounds.
Don'tStretch, rotate, add effects, or change the corner radius.
DoGive the mark clear space equal to at least 25% of its width on all sides.
Don'tPlace on busy backgrounds or low-contrast surfaces.

Color System

All UI colors come from these scales. The logomark uses slate-800 (#1e293b) as its background.

Primary Palette
Cobalt Blue
#2563eb
Primary action
Jade Green
#059669
Secondary / Charts
Slate 50
#f8fafc
Surface / Page bg
Slate 800
#1e293b
Sidebar / Dark
Green 600
#16a34a
Success
Yellow 500
#eab308
Warning
Red 600
#dc2626
Error
Tonal Scales

Full 50–950 scales for each color. Use lighter tones for backgrounds/borders, mid-tones for interactive elements, darker tones for text.

Cobalt Blue — Accent Buttons, links, focus rings, active states
50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554
Jade Green — Secondary Chart second series, data highlights, featured badges
50
#ecfdf5
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
500
#10b981
600
#059669
700
#047857
800
#065f46
900
#064e3b
950
#022c22
Graphite — Neutral Borders, muted text, backgrounds, dividers, headings, sidebar
50
#f8fafc
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
900
#0f172a
950
#020617
Clover Green — Success Positive deltas, on-track, profit
50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d
950
#052e16
Saffron Yellow — Warning Settling, caution, pending
50
#fefce8
100
#fef9c3
200
#fef08a
300
#fde047
400
#facc15
500
#eab308
600
#ca8a04
700
#a16207
800
#854d0e
900
#713f12
950
#422006
Crimson Red — Error Negative deltas, stockout risk, below-expected
50
#fef2f2
100
#fee2e2
200
#fecaca
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
700
#b91c1c
800
#991b1b
900
#7f1d1d
950
#450a0a

Typography

Page Heading
Manrope 800 / 32px / -1px tracking
Section Title
Manrope 700 / 20px
Body text with regular weight for readability at smaller sizes.
Manrope 400-600 / 14px / slate-500
Label Text
Manrope 700 / 11px / uppercase / 1px tracking / slate-400
#1e293b · 73,588,602 kr.
Monospace for hex values and tabular numbers

Assets

Counter Insight
Wordmark
SVG
CI
Logomark (Default)
SVG
CI
Logomark (Inverted)
SVG