Brand Guidelines
NetValve Style Guide
Everything designers need to create on-brand social media content, brochures, pitch decks, banners, and digital collateral for NetValve.
01
Logo Suite
Use the correct variant for each background. Never modify, recolor, or distort the logo.
Clear Space & Minimum Size
Clear space
Maintain padding equal to the height of the "V" logomark on all sides of the logo.
Minimum size
Print: 25 mm wide · Screen: 90 px wide
1x 1x 1x 1x 02
Color Palette
Our primary brand color is #4CC2FF. The full palette is built in OKLCh color space for perceptual uniformity.
#4CC2FF
Primary Brand Color — brand-400
brand-50
oklch(0.97 0.015 230)
brand-100
oklch(0.94 0.035 230)
brand-200
oklch(0.89 0.065 230)
brand-300
oklch(0.84 0.095 230)
brand-400
oklch(0.79 0.125 230)
brand-500
oklch(0.70 0.135 230)
brand-600
oklch(0.60 0.130 230)
brand-700
oklch(0.50 0.115 230)
brand-800
oklch(0.40 0.090 230)
brand-900
oklch(0.32 0.070 230)
brand-950
oklch(0.23 0.050 230)
Semantic Tokens
These adapt automatically between light and dark mode.
Background
Foreground
Muted
Muted Text
Border
Destructive
03
Typography
We use Geist, a variable sans-serif font with weights from 100 to 900.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Payment orchestration, simplified.
Recommended Usage
| Weight | Name | Usage |
|---|---|---|
| 400 | Regular | Body text, descriptions, paragraphs |
| 500 | Medium | Links, labels, subtle emphasis |
| 600 | Semibold | Subheadings (h3, h4), eyebrows, buttons |
| 700 | Bold | Page headings (h1, h2), navigation |
Type Scale
h1 — 2.25rem / 700
Payment orchestration
h2 — 1.5rem / 700
Intelligent routing
h3 — 1.25rem / 600
Multi-provider failover
Body — 1rem / 400
Route, optimize, and manage every transaction through a single integration. NetValve connects you to 300+ payment providers worldwide.
04
Gradients
Two brand gradients for text emphasis and decorative backgrounds.
Text Highlight Gradient
Use this gradient on key words or headlines for emphasis. Direction: 135°.
NetValve
0%
33%
66%
100%
Background Gradient
Use for dark decorative backgrounds, hero sections, or banner fills. Direction: 135°.
Background Gradient
0%
33%
66%
100%
05
Do's & Don'ts
Follow these guidelines to keep the brand consistent across all materials.
Use the logo on clean, solid backgrounds with sufficient contrast.
Don't place the logo on busy, patterned, or clashing backgrounds.
Maintain generous clear space around the logo. Let it breathe.
Don't stretch, rotate, skew, or modify the logo proportions.
Built for growth
Use the brand gradient for emphasis on key words or headlines only.
Low contrast text
Don't use light brand tones (brand-300 and lighter) as text on white backgrounds.
06
Dark Mode
NetValve ships with a full dark theme. All semantic tokens automatically invert. Always use the correct logo variant for the background.
Light Mode
Payment orchestration
Dark Mode
Payment orchestration
logo-dark.svg on light backgrounds and logo-light.svg on dark backgrounds.
The contextual brand color shifts from brand-500 (light) to brand-400 (dark) for better readability.
07
Downloads
Grab the brand assets you need. All logos are vector SVGs for crisp rendering at any size.