Vyges Brand Guidelines

Version: 1.0
Last Updated: August 2025

Brand Overview

Vyges sells fab-ready SoC IP and operates the first open registry for silicon IP. We replace months of outsourced integration with weeks-not-months delivery, anchored on the Vyges Metadata Standard.

Brand Values

  • Open Source First: We believe in transparency, collaboration, and community-driven development
  • Developer Focused: Every tool and feature is designed with developers in mind
  • Innovation: We push the boundaries of what's possible in silicon design
  • Quality: We maintain the highest standards in everything we create

Color Palette

Primary palette

Color Hex Tailwind / CSS token Primary role Secondary role
Vyges Dark #132534 vyges-dark Primary text colour (body copy, H1/H2/H3); dark surfaces (footer, dark callouts, dark CTAs) Hero-gradient anchor (second stop)
Vyges Light #18A7C4 vyges-light Link colour, interactive accent text, primary CTA background Active-state borders (tier-1 product cards), canonical Vyges gradient anchor
Vyges Purple #7B6CB1 vyges-purple Icon-tile backgrounds, canonical Vyges gradient terminal Hero-gradient anchor (third stop), feature-section accents
Vyges Pink #E81A89 vyges-pink VyCatalog brand colour — concentrated on /products/vycatalog/ surfaces (icon tiles, nutrition-label interrupt chip, registry accents) Hero-gradient terminal anchor (fourth stop). Do not introduce in unrelated contexts.
Vyges Green #00B050 vyges-green The "Push on Green" brand phrase; shipped / green-light signaling (reserved — do not use for generic accents)

These hex values are canonical and must stay in sync across:

  • the Tailwind config in src/public_web/src/templates/base.html,
  • the CSS variables in src/public_web/src/assets/css/vyges-styles.css, and
  • this brand-guidelines document.

If any value changes, update all three together.

Canonical gradient

The Vyges gradient runs from-vyges-light → to-vyges-purple (cyan to purple). Use it for hero CTAs, footer accents, and any large surface that needs brand recognition without dark contrast. Other gradient combinations (vyges-purple → vyges-pink, vyges-dark → vyges-light) appear sparingly and should not propagate.

The full hero gradient (in src/assets/css/vyges-styles.css .hero-gradient) uses four stops: vyges-dark (deep anchor), vyges-dark (transition hold), vyges-purple (mid), vyges-pink (terminal). All stops are inside the primary palette.

Status colours (deliberate non-branding)

Status badges across the site (shipped, submitted, verified, hardened, taped out, etc.) use Tailwind default colour scales (bg-green-100 text-green-800, bg-blue-100 text-blue-800, bg-purple-100 text-purple-800, bg-amber-100 text-amber-800, bg-red-100 text-red-800). This is intentional — status semantics are universal (green = pass, red = fail) and forcing them through the Vyges palette would couple brand colour to status meaning. Do not migrate status badges to vyges-* tokens.

Resolved palette decisions (2026-04-30)

  • #000080 navy in .hero-gradient removed. Replaced with vyges-dark so the hero gradient stays inside the primary palette. The deep-anchor effect comes from vyges-dark extending across the first 30% of the gradient.
  • Vyges Pink role locked as VyCatalog brand colour. Pink usage is intentionally concentrated on /products/vycatalog/ surfaces (icon tiles, nutrition-label interrupt chip, registry accents) and the hero-gradient terminal anchor. Do not introduce Pink in unrelated contexts; if a non-VyCatalog surface needs an accent, use Vyges Light or Vyges Purple instead.

Stale-hex audit (2026-04-30)

The previous version of this document listed three Vyges palette colours with hex values that did not match the actual implementation (#6366F1 for Purple, #EC4899 for Pink, #10B981 for Light). Those wrong hex values had propagated into the press-kit stylesheet and the VyCatalog nutrition-label CSS. All occurrences have been corrected to the canonical palette values:

  • #6366F1 → #7B6CB1 (Vyges Purple) for accent surfaces; #18A7C4 (Vyges Light) for link colour
  • #EC4899 → #E81A89 (Vyges Pink)
  • #10B981 → #00B050 (Vyges Green) for green-light signaling

Going forward, brand-guidelines is the canonical source; the Tailwind config in src/templates/base.html and the CSS variables in src/assets/css/vyges-styles.css mirror it. Any new colour must be added to all three together.

Typography

Primary Font: Lato

Lato is our primary typeface, chosen for its excellent readability and modern appearance.

Font Weights: - Regular (400): Body text and general content - Bold (700): Headings and emphasis - Italic: Used for product names in logos

Font Sizes: - H1: 2.5rem (40px) - H2: 2rem (32px) - H3: 1.5rem (24px) - Body: 1rem (16px) - Small: 0.875rem (14px)

Logo Usage

Vyges Primary Logo

Primary logo with full company name

Vyges Horizontal Logo

Horizontal version for wide spaces

Icon

Vyges Icon

Icon version for small spaces and favicons

Clear Space

Maintain clear space around the logo equal to the height of the "V" in the logo mark.

Minimum Size

  • Print: 1 inch minimum height
  • Digital: 32px minimum height

Product Logos

Product logos follow the same design principles as the main logo, with product names in Lato Italic.

VyBox Logo VyBox - IP Development Platform

VyCatalog Logo VyCatalog - IP Catalog

Vyges CLI Logo Vyges CLI - Command Line Interface

VyShuttle Logo VyShuttle - IP Integration Tool

Voice and Tone

Professional but Approachable

  • Use clear, concise language
  • Avoid jargon when possible
  • Be helpful and supportive
  • Maintain technical accuracy

Writing Style

  • Use active voice
  • Keep sentences short and direct
  • Use bullet points for lists
  • Include code examples when relevant

Imagery

Photography Style

  • Clean and modern
  • High contrast and sharp focus
  • Professional but not corporate
  • Show real people and real work

Illustrations

  • Simple, geometric shapes
  • Consistent with brand colors
  • Technical but accessible
  • Supportive of content, not decorative

Digital Applications

Website

  • Responsive design principles
  • Consistent navigation
  • Clear call-to-action buttons
  • Accessible color contrast ratios

Social Media

  • Use brand colors consistently
  • Include logo when appropriate
  • Maintain professional tone
  • Engage with community respectfully

Do's and Don'ts

Do

  • Use the official logo files
  • Maintain proper clear space
  • Use brand colors consistently
  • Follow typography guidelines
  • Keep designs clean and simple

Don't

  • Modify or recreate the logo
  • Use outdated logo versions
  • Place logo on busy backgrounds
  • Use incorrect colors
  • Stretch or distort the logo

Contact

For questions about brand usage or to request logo files, please contact us at press@vyges.com