Design System
The visual language behind Zeroramp and Zeno — colors, typography, logos, and components that keep every surface consistent, from the website to Slack and Teams.
01 — Company Brand
Zeroramp
Zeroramp is the parent brand: sovereign, precise, and trustworthy. The identity is anchored by a single deep blue — #0A2098 — set in Geist across every surface.
Logo
Use the full wordmark wherever space allows. The icon stands alone only in constrained contexts — favicons, avatars, and app tiles. Always keep clear space of at least the height of the “Z” around the mark.
Color — Light Mode
Primary
#0A2098
Brand blue — logo, primary CTAs, links
Primary Dark
#071870
CTA hover states
Primary Light
#E8EBFA
Tinted backgrounds, selection
Primary Lighter
#F3F5FD
Subtle tinted surfaces
Accent
#3B5BDB
Secondary brand blue, gradients
Accent Light
#748FFC
Gradient endpoints, highlights
Foreground
#0A1628
Body text on light
Muted
#5C6478
Secondary text
Muted Light
#8B93A7
Tertiary text, captions
Surface
#F8F9FC
Page section backgrounds
Border
#E2E5F0
Card and input borders
Background
#FFFFFF
Page background
Color — Dark Mode
Primary
#6B8AFF
Primary actions on dark
Primary Dark
#5570E0
Hover states on dark
Accent
#748FFC
Accents, gradient text
Accent Light
#9BB0FF
Gradient endpoints
Foreground
#F0F2F5
Body text on dark
Muted
#A1A1AA
Secondary text
Muted Light
#71717A
Tertiary text
Background
#09090B
Page background
Surface
#111114
Section backgrounds
Card
#141417
Card backgrounds
Border
#27272A
Card and input borders
Footer Navy
#060E2F
Footer gradient endpoint
Semantic Colors
Success
#10B981
Positive states, GDPR badge (light)
Success Dark
#34D399
Positive states (dark mode)
Warning
#F59E0B
Warning states (light)
Warning Dark
#FBBF24
Warning states (dark mode)
Gradients
Brand Gradient
135° · #0A2098 → #3B5BDB → #748FFC
Gradient text, hero highlights
Footer Gradient
to-br · #030712 → #060E2F
Footer, deep navy sections
Text Treatment
.text-gradient
Key words in headlines only
Typography
Geist Sans
Primary typeface — all UI and marketing copy
Geist Mono
Code, tokens, and technical values
Display
48–60px / Bold / -2.5% tracking
Sovereign Intelligence
Heading 1
36px / Bold / -2.5% tracking
Answers where you work
Heading 2
24px / Bold / -1.5% tracking
Every deal, product and policy
Heading 3
18px / Semibold
Fixed price. No surprises.
Body
16px / Regular / 1.6 line height
Get instant and dependable answers on every deal, product, customer, policy and procedure right where you work.
Small
14px / Regular / 1.6 line height
Powered by self-hosted EU models at a fixed €45/user/month.
Caption
12px / Medium / Uppercase / +5% tracking
GDPR Native · UK Built
Buttons
Primary buttons lift on hover with a deepened shadow. One primary action per view — everything else is secondary or ghost.
Badges & Pills
Trust badges use a 10% tinted fill with a 20% border of the same hue. Status pills lead with a 6px dot.
Corner Radius
rounded-lg
8px — Icon tiles, small controls
rounded-xl
12px — Buttons, inputs
rounded-2xl
16px — Cards, panels
rounded-full
9999px — Pills, badges, avatars
02 — Product Brand
Zeno
Zeno is Zeroramp's flagship product — the sovereign intelligence living in Slack and Teams. It inherits the Zeroramp blue but adds energy: a brighter shield gradient, live emerald status, and conversational UI patterns.
Mark
The Zeno mark combines a neural outline (knowledge) with a gradient shield and padlock (sovereignty and security). The brain strokes inherit the surrounding text color; the shield always carries the fixed blue gradient.
Color
Zeno Blue
#1E3AE6
Shield gradient start, energy states
Zeno Deep Blue
#0A2098
Shield gradient end — shared brand root
Emerald
#10B981
Online / live status, speed metrics
Emerald Bright
#34D399
Status dots, live indicators on dark
Cyan
#22D3EE
Fixed Price accents, data highlights
Slack Aubergine
#4A154B
Slack surface context only
Teams Purple
#6264A7
Teams surface context only
Signature Gradient
Shield Gradient
180° · #1E3AE6 → #0A2098
The Zeno shield, avatars, and feature icons
Live Status
emerald-500 / emerald-400
Presence, speed, and live-answer signals
Voice & Personality
Instant
Zeno answers in seconds, not tickets. Copy is short, confident, and present tense — never “we'll get back to you.”
Dependable
Every answer is grounded in your own data. Zeno cites sources and never bluffs — precision over flourish.
Sovereign
Self-hosted EU models, GDPR native. Security language is stated plainly as fact, never as marketing fear.
Conversation Pattern
User messages sit right-aligned in primary blue. Zeno replies lead with the gradient avatar, answer first, then cite sources in muted caption text.
Platform Surfaces
Slack
Zeno keeps its blue identity inside Slack — platform colors are context, never brand.
Microsoft Teams
Same rule in Teams: Zeno's shield gradient and emerald status stay constant across hosts.