VirtualMarriage™ Brand Style Guide

1. Brand Mission & Tone

Our Mission

VirtualMarriage™ makes it simple, secure, and joyful for couples to get legally married online — no matter where they are in the world. We blend legal precision with human warmth, creating a process that feels modern, safe, and stress-free.

Our Brand Personality

• Trustworthy & Legitimate — Legal-first, accurate, reliable.
• Warm & Human — Marriage is emotional, not transactional.
• Modern & Innovative — Technology makes things easier, not confusing.
• Clear & Calm — No jargon, no clutter, no stress.
• Approachable Expertise — Confident, but never cold or bureaucratic.

2. Logo Usage

The VirtualMarriage™ logo should always appear clean, clear, and legible. Use the primary logo on light or white backgrounds and maintain spacing around the logo equal to the height of the "V".

Do not:

• Alter the logo colors.
• Add shadows, bevels, or effects.
• Stretch, squeeze, or distort the logo.
• Place the logo on busy images without a neutral overlay.

3. Color System

Our color palette balances legal seriousness with fresh, modern innovation. Use these colors consistently across all pages, components, and assets.

4. Typography

VirtualMarriage uses a clean, modern sans-serif font for all interfaces and marketing materials. We prioritize legibility and a calm, confident tone.

• Primary font: Inter (or similar modern sans-serif)
• Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)

Usage guidelines:

• Headings: Semibold or Bold, in dark gray (#2B2F36).
• Body text: Regular or Medium, minimum 16px for readability.
• Buttons: Semibold for clarity and emphasis.
• Legal disclaimers: Medium, dark gray, smaller but still legible.

5. Buttons & CTAs

Buttons should be clear, consistent, and easy to understand. Primary actions use the brand purple. Secondary actions use white with colored borders.

6. Forms & Legal Clarity

Forms are often the most "legal" and sensitive part of the experience. They should feel calm, clear, and trustworthy.

• Labels: dark gray (#2B2F36), always visible.
• Inputs: white background, light gray border (#E0E1E4).
• Error text: red (e.g., #D32F2F) with a clear explanation.
• Success states: light green background (#DFF7E3) with dark green text.

Prefer single-column forms with clear step indicators. Reduce clutter, group related fields, and provide help text when legal terms appear.

7. Tone of Voice

VirtualMarriage speaks like a calm expert who cares. We are clear, warm, and respectful in every interaction.

8. Accessibility

Accessibility is both a legal requirement and a core part of our experience. We aim to follow WCAG 2.1 AA guidelines across all VirtualMarriage surfaces.

• Maintain at least 4.5:1 contrast for text.
• Use 16px minimum font size for body copy.
• Ensure focus states are clearly visible for keyboard navigation.
• Provide descriptive labels for all form inputs.
• Use both color and text for error and success states.

9. CSS Variables

Use these CSS variables to keep colors consistent across the codebase:

:root {
  --color-primary: #6853AF;
  --color-primary-dark: #564091;
  --color-primary-light: #8D7DCD;

  --color-white: #FFFFFF;
  --color-gray-900: #2B2F36;
  --color-gray-600: #6F7580;
  --color-gray-100: #F5F6F8;

  --color-blue: #0078C4;
  --color-blue-light: #E5F4FB;

  --color-success: #4CAF50;
  --color-success-light: #DFF7E3;

  --color-cream: #FFFDE7;
  --color-burgundy: #491B34;
  --color-rose: #AF536C;
  --color-rose-light: #F1D1D8;
}