Visual Identity
Official Verana brand assets, guidelines, and developer tokens
Brand Overview
Verana’s visual identity communicates trust, openness, and sovereignty — the core values behind the Open Trust Layer for the Internet.
Name
Verana
Descriptor
The Open Trust Layer for the Internet
Purpose
Empower ecosystems to build sovereign, verifiable trust networks they fully control
For press or media inquiries, send email to press at verana dot io or reach our LinkedIn
Logos
The “V” can be seen as the horns of a bull: two strong, symmetrical lines rising upward from a shared base, embodying power, balance, and determination.
Usage Rules
Clear Space
Maintain clear space equal to the height of the “V” mark
Minimum Size
24px (digital), 8mm (print)
Restrictions
Do not recolor, skew, or apply effects
Colors
Verana’s color system blends innovation and credibility — purple anchors the palette, supported by neutral and accent tones used across the product and brand.
Primary
Verana Purple
Primary Light
Verana Light
Primary Dark
Verana Dark
Background
Ink Black
Surface
Graphite
Accent
Electric Blue
Success
Signal Green
Neutral
Slate 70
Neutral
Slate 20
Base
White
Color Usage
| Role | Name | HEX | Usage |
|---|---|---|---|
| Primary | Verana Purple | #6B4EFF | Buttons, key highlights, active states |
| Primary Light | Verana Light | #9F7AEA | Gradients, hover states, backgrounds |
| Primary Dark | Verana Dark | #553C9A | Outline accents, gradients, typography emphasis |
| Background | Ink Black | #0B0B12 | Page backgrounds |
| Surface | Graphite | #151824 | Cards, panels, overlays |
| Accent | Electric Blue | #2E6BE6 | Secondary CTAs, links |
| Success | Signal Green | #29C68C | Verification states, positive alerts |
| Neutral | Slate 70 | #8B94A5 | Secondary text, dividers |
| Neutral | Slate 20 | #D7DBE2 | Borders, subtle surfaces |
| Base | White | #FFFFFF | Text on dark backgrounds, highlights |
These colors are tokenized in CSS variables used across verana.io and documentation.
Typography
Inter powers our headlines, UI, and body copy, while IBM Plex Mono supports code and structured data.
Aa
Inter
Headlines & interface copy
Weights: 500, 600, 700
Aa
Inter
Body text & long-form content
Weights: 400
Aa
IBM Plex Mono
Code snippets & tabular data
Weights: 400, 500
Usage Guidelines
Headings & Body
Code & Data
Iconography
Verana’s icons are minimal, outlined, and geometric, symbolizing trust and transparency.
Trust & Security
Networks
Credentials
Active State
Style
Rounded corners and consistent stroke weight
Colors
Neutral by default; Verana Purple for active states
Avoid
Gradients, drop shadows, or dense fills
Developer Tokens
CSS variables for consistent implementation across Verana projects and partner integrations.
CSS Custom Properties
:root {
--color-primary: #6B4EFF;
--color-primary-light: #9F7AEA;
--color-primary-dark: #553C9A;
--color-accent: #2E6BE6;
--color-success: #29C68C;
--color-bg: #0B0B12;
--color-surface: #151824;
--color-surface-muted: #1F2331;
--color-neutral-70: #8B94A5;
--color-neutral-20: #D7DBE2;
--color-text: #FFFFFF;
--color-text-muted: #8B94A5;
--color-border: #D7DBE2;
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 8px;
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
Download Press Kit
Get the complete Verana brand package including logos, colors, typography specimens, and usage guidelines.