Vitni brand and design system

Built to be recognized.

A precise geometric mark, high signal color, and a strong reading voice identify the Vitni platform. Each customer organization remains the issuer and owns the identity shown on its credentials.

Logo

The symbol is a geometric V set in a square tile. Its sharp diagonal gives it a clear silhouette at small sizes, while the tile keeps the mark anchored in an app icon or navigation bar. Use the lockup when there is room for the wordmark; use the symbol alone for compact placements.

Light surfacesDownload SVG

Dark surfacesDownload SVG

• Light-surface symbol SVG
• Dark-surface symbol SVG

Keep the issuer clear

Use the Vitni logo to identify the software platform. On credential artwork, issuer profiles, and public credential pages, the organization’s name and issuer identity take precedence. The Vitni mark must not replace or imply the organization’s issuer identity.

Color

The palette pairs saturated signal blue with electric lime, grounded by deep graphite and a cool off-white. Blue carries actions and navigation; lime is the signature mark and a sparing highlight. Keep long reading surfaces quiet so high-signal details stay legible.

—vitni-color-signal-blue

#2948f5Primary actions, links, and active navigation

—vitni-color-signal

#d7f43eSignature mark and small emphasis areas; not small text

—vitni-color-blue-soft

#e8ecffSelection and quiet branded surfaces

—vitni-color-paper

#f3f5f2Main light canvas

—vitni-color-surface

#ffffffRaised content and form surfaces

—vitni-color-ink

#111827Main text and dark surfaces

—vitni-color-muted

#526072Secondary text on light surfaces

—vitni-color-line

#d8dee6Controls, separators, and card borders

Keep text contrast at WCAG AA: 4.5:1 for body text and 3:1 for large text and non-text controls. Use signal blue or graphite on pale surfaces; use white on signal blue or graphite. Lime is a highlight, never a text color on its own.

Status colors have separate semantic tokens: success uses --vitni-color-success, warning uses --vitni-color-warning, and errors use --vitni-color-danger, each with a matching pale background token. Do not use these colors for general brand decoration.

Typography

Vitni uses Space Grotesk Variable for headings and interface text, with a system sans-serif fallback. Its compact shapes and distinctive terminals give headings a technical character without making body copy difficult to scan. The variable font is bundled locally in the shared brand package under the SIL Open Font License. Reserve the monospace stack for code and identifiers.

Recognition

Use a compact scale for controls and body copy, then a deliberate jump for page titles. Use heavier weights for short labels and titles, regular weights for long reading. Keep headings short and comfortably line-spaced; display text should not exceed 6rem.

Small label —vitni-text-xs

0.75rem

Supporting text —vitni-text-sm

0.875rem

Body —vitni-text-base

1rem

Emphasized body —vitni-text-lg

1.125rem

Section title —vitni-text-2xl

1.5rem

Page title —vitni-text-display

clamp(3rem, 7vw, 6rem)

Spacing and shape

Build layouts from the 4px spacing base: 4, 8, 12, 16, 24, 32, 48, 64, and 96px. Keep related controls close and leave clear separation between groups. Standard controls use 8–12px corners; larger containers may use 16px. Reserve pill shapes for compact status labels. Favor crisp edges and clean alignment; avoid decorative bevels or ornamental grids.

Components

Buttons use signal blue for the primary action, white for the label, and a small radius. On hover, deepen the blue and lift the button by one pixel. Inputs use a white surface, a neutral border, and the same blue focus ring used across the platform. Cards stay flat with a clear border; reserve the soft graphite shadow for print-preview or certificate presentation surfaces.

Interface use

• Signal blue identifies the main action and current navigation state. Keep muted text and inactive controls neutral.
• Use a visible focus ring on keyboard navigation. Do not rely on color alone to communicate status.
• Reserve green, amber, and red semantic tokens for success, warning, and error states respectively.
• Keep control shapes and spacing consistent between the organization workspace and recipient flows.
• On narrow screens, stack columns and keep actions reachable without horizontal scrolling.

Shared tokens

The reusable CSS variables live in @vitni/brand/tokens.css. Nuxt and Starlight consume the same package so color, typography, spacing, focus, and shape values stay aligned.

@import '@vitni/brand/tokens.css';

.primary-action {
  min-height: 3.375rem;
  padding-inline: var(--vitni-space-6);
  border: 0;
  border-radius: var(--vitni-radius-md);
  background: var(--vitni-color-signal-blue);
  color: #fff;
}