Brand Guidelines
Official brand standards for SPNT / Serpentine Security. These guidelines ensure consistent representation across all touchpoints.
Primary logo on light and dark backgrounds
Overview
Brand identity
Serpentine (SPNT) is a unified security platform. Our brand reflects precision, trust, and technical excellence.
Brand Name
SPNT
Short form, used in logos and headers
Serpentine
Full name, used in body copy and legal
Tagline
"The Unified Security Platform"
Primary tagline for marketing
"Serpentine Security Platform"
Descriptive subtitle
Brand Voice
- Technical but accessible
- Confident, not arrogant
- Direct and precise
- Enterprise-appropriate
- Never casual or playful
Logo
Logo usage
Our logo is the primary visual identifier for SPNT. Use it consistently and with adequate clear space.
Primary Logo
Use the primary logo on light backgrounds. Minimum height: 32px.
Inverted Logo
Use the inverted logo on dark backgrounds.
Symbol / Favicon
Use the symbol for favicons, app icons, and square formats.
Do
- Use adequate clear space around the logo (minimum 1x logo height)
- Use the logo on solid backgrounds (white, black, or brand colors)
- Maintain the logo's aspect ratio when scaling
- Use SVG format for web, PNG for print
Don't
- Stretch, skew, or distort the logo
- Change the logo colors (except for inversion)
- Place the logo on busy or low-contrast backgrounds
- Add effects like shadows, gradients, or outlines
- Use the logo smaller than 32px height
Color System
Primary palette
Our primary color is a warm bronze that conveys trust, stability, and sophistication. Use sparingly for maximum impact.
Primary Bronze
Token: --primary
HEX: #8B7355
OKLCH: oklch(0.55 0.08 55)
Primary brand color. Use for CTAs, links, accents, and interactive elements.
Primary Foreground
Token: --primary-foreground
HEX: #FDFCFB
OKLCH: oklch(0.99 0.001 90)
Text on primary backgrounds.
Neutral Colors
Our neutral palette is warm-tinted, not pure gray. This creates a more approachable, less clinical feel.
Background
Token: --background
HEX: #FCFBFA
OKLCH: oklch(0.985 0.002 90)
Page background.
Foreground
Token: --foreground
HEX: #1C1B1A
OKLCH: oklch(0.145 0.005 60)
Primary text color.
Card
Token: --card
HEX: #FEFEFE
OKLCH: oklch(0.99 0.001 90)
Card and elevated surface backgrounds.
Muted
Token: --muted
HEX: #F3F2F1
OKLCH: oklch(0.95 0.005 60)
Subtle backgrounds, disabled states.
Muted Foreground
Token: --muted-foreground
HEX: #6B6966
OKLCH: oklch(0.45 0.01 60)
Secondary text, captions, placeholders.
Border
Token: --border
HEX: #E3E1DE
OKLCH: oklch(0.88 0.01 60)
Borders, dividers, separators.
Semantic Colors
These colors communicate status and meaning. Use consistently across the platform.
Destructive / Risk
Token: --destructive
HEX: #DC2626
OKLCH: oklch(0.577 0.245 27.325)
Errors, critical findings, high-risk indicators.
Validated
Token: --status-validated
HEX: #16A34A
OKLCH: oklch(0.65 0.16 145)
Success states, validated findings, secure status.
Info
Token: --status-info
HEX: #2563EB
OKLCH: oklch(0.60 0.12 240)
Informational states, neutral indicators.
Surface Colors
Surface colors create visual hierarchy and section separation.
Surface Subtle
Token: --surface-subtle
HEX: #F9F8F7
OKLCH: oklch(0.975 0.003 60)
Alternate section backgrounds.
Surface Warm
Token: --surface-warm
HEX: #F7F3EE
OKLCH: oklch(0.96 0.015 55)
CTA sections, warm emphasis areas.
Color Usage
Color rules
Follow these rules to maintain visual consistency across all touchpoints.
Maximum 3-5 colors per design
Use 1 primary brand color, 2-3 neutrals, and 1-2 semantic colors maximum. Never exceed 5 total colors.
No purple or violet
Never use purple or violet prominently in designs unless explicitly approved. These colors conflict with our warm bronze palette.
Avoid gradients
Use solid colors. Gradients are only permitted as subtle accents when absolutely necessary, and must use analogous colors (e.g., bronze to tan).
Always ensure contrast
When changing background colors, always override text colors to ensure proper contrast. Minimum contrast ratio: 4.5:1 for body text, 3:1 for large text.
Typography
Type system
We use the Geist font family for all text. Maximum 2 font families in any design.
Primary Font: Geist
Used for all body text, headings, and UI elements.
Display / Hero
Security at scale
Heading 1
Section heading
Heading 2
Subsection heading
Heading 3
Card heading
Body
Body text with comfortable line height for readability. Line height should be between 1.4-1.6 for body text.
Small / Caption
Secondary text, captions, and metadata.
Monospace Font: Geist Mono
Used for code, technical values, and data.
CVE-2024-1234 | Critical | CVSS 9.8 | ExploitableTypography Rules
- Use line-height between 1.4-1.6 for body text (leading-relaxed)
- Use tracking-tight for display and heading text
- Never use decorative fonts for body text
- Never use fonts smaller than 14px (0.875rem) for body text
- Maximum 2 font families in any design
Products
Product naming
Each SPNT module has a distinct name and tagline. Use consistently.
Odbrana
/ Continuous security audit
Shield icon with primary bronze
Napad
/ Offensive validation
Sword icon with primary bronze
Postava
/ Infrastructure hardening
Terminal icon with primary bronze
Regulativa
/ Compliance operating system
FileCheck icon with primary bronze
Voice & Tone
Writing guidelines
How we communicate reflects who we are. Follow these principles for all written content.
Do
- Be technical but accessible
- Be confident, not arrogant
- Be direct and precise
- Use active voice
- Use enterprise-appropriate language
- Use specific numbers and data when available
- Address pain points directly
Don't
- Use casual or playful language
- Use jargon without explanation
- Make vague claims ("best in class", "industry leading")
- Use emojis in professional content
- Name competitors directly in marketing
- Use phrases like "no pricing games" or casual dismissals
- Make claims we cannot substantiate
Competitor References
Never name specific competitors (e.g., "Tenable", "Qualys", "Snyk"). Instead, use generic categories:
Instead of...
"Unlike Tenable or Qualys..."
Write...
"Unlike traditional vulnerability scanners..."
Trust & Legal
Compliance claims
Be precise and accurate when making trust and compliance claims.
Data Residency
Don't say...
"All data is stored exclusively in the EU"
"No data leaves EU jurisdiction"
Do say...
"EU-hosted by default"
"Designed for EU data residency"
Certifications
Don't say...
"ISO 27001 and SOC 2 certified"
Do say...
"Infrastructure provided by datacenter partners that maintain ISO 27001 and SOC 2 certifications"
Product Status
Always be accurate about product availability:
- Odbrana — Production
- Postava — Production (Free + Pro)
- Napad — Beta
- Regulativa — Q4 2026 (use this exact format)
Patterns
Design patterns
Common UI patterns and their usage across the platform.
Buttons
Use primary for main CTAs, outline for secondary actions, ghost for tertiary.
Cards
Card Title
Card description text
Use border-border, rounded-lg or rounded-xl, consistent padding.
Status Badges
Use semantic colors for status indicators.
Need brand assets?
For additional brand assets, co-marketing requests, or questions about brand usage, contact our team.