Brand Guidelines

This document provides complete brand guidelines for Osmynt, including logo usage, color palette, typography, and design principles.

Brand Overview

Brand Mission

Osmynt is a secure, real-time code sharing extension for VS Code that brings seamless, end-to-end encrypted collaboration directly into your editor. Our brand represents innovation, security, and developer experience.

Brand Values

Security First: End-to-end encryption and zero-knowledge architecture
Developer Experience: Seamless integration with VS Code workflow
Real-time Collaboration: Instant sharing and synchronization
Trust and Reliability: Secure, dependable code sharing

Logo

Primary Logo

The Osmynt logo consists of a stylized "O" with a lightning bolt, representing speed and innovation.

Usage Guidelines:

Always maintain the aspect ratio
Use the full-color version on light backgrounds
Use the white version on dark backgrounds
Maintain clear space around the logo

Logo Variations

Full Color Logo

Use on: Light backgrounds, marketing materials, websites
Colors: Primary brand colors
Format: SVG, PNG, PDF

White Logo

Use on: Dark backgrounds, dark themes
Colors: White
Format: SVG, PNG, PDF

Monochrome Logo

Use on: Single-color applications, fax, stamps
Colors: Black or white
Format: SVG, PNG, PDF

Logo Sizing

Minimum Sizes

Print: 0.5 inches (12.7mm)
Digital: 24px
Web: 32px

Recommended Sizes

Print: 1 inch (25.4mm)
Digital: 48px
Web: 64px

Logo Clear Space

The logo should have clear space equal to the height of the "O" on all sides.

Color Palette

Primary Colors

Charcoal (#1A1A1A)

Usage: Primary text, headers, main content
RGB: 26, 26, 26
HSL: 0, 0%, 10%

Neon Lime (#39FF14)

Usage: Accent color, highlights, CTAs
RGB: 57, 255, 20
HSL: 105, 100%, 54%

Secondary Colors

Very Light Gray (#F5F5F5)

Usage: Backgrounds, subtle elements
RGB: 245, 245, 245
HSL: 0, 0%, 96%

Light Gray (#E0E0E0)

Usage: Borders, dividers, disabled states
RGB: 224, 224, 224
HSL: 0, 0%, 88%

Mid Gray (#555555)

Usage: Secondary text, icons
RGB: 85, 85, 85
HSL: 0, 0%, 33%

Dark Panel Grey (#2E2E2E)

Usage: Cards, panels, dark backgrounds
RGB: 46, 46, 46
HSL: 0, 0%, 18%

Accent Colors

Electric Blue (#0D0EFF)

Usage: Links, highlights, secondary CTAs
RGB: 13, 14, 255
HSL: 240, 100%, 53%

Magenta Accent (#FF1493)

Usage: Hover effects, error states, bold highlights
RGB: 255, 20, 147
HSL: 328, 100%, 54%

Status Colors

Success (#00FF7F)

Usage: Success messages, confirmation badges
RGB: 0, 255, 127
HSL: 150, 100%, 50%

Warning (#FFD700)

Usage: Warning messages, attention-grabbing elements
RGB: 255, 215, 0
HSL: 51, 100%, 50%

Error (#FF3B3B)

Usage: Error messages, destructive actions
RGB: 255, 59, 59
HSL: 0, 100%, 62%

Typography

Primary Font

Inter

Usage: Headers, body text, UI elements
Weights: 300, 400, 500, 600, 700
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Secondary Font

JetBrains Mono

Usage: Code blocks, technical content
Weights: 400, 500, 600, 700
Fallback: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace

Typography Scale

Headers

H1: 32px / 40px line height / 600 weight
H2: 24px / 32px line height / 600 weight
H3: 20px / 28px line height / 500 weight
H4: 18px / 24px line height / 500 weight

Body Text

Large: 18px / 28px line height / 400 weight
Regular: 16px / 24px line height / 400 weight
Small: 14px / 20px line height / 400 weight

Code

Code: 14px / 20px line height / 400 weight
Code Block: 14px / 20px line height / 400 weight

Design Principles

Visual Hierarchy

Clear Information Architecture: Organize content logically
Consistent Spacing: Use consistent spacing throughout
Appropriate Contrast: Ensure sufficient contrast for readability
Focused Content: Highlight important information

Layout Principles

Grid System: Use consistent grid system
Responsive Design: Design for all screen sizes
White Space: Use white space effectively
Alignment: Align elements consistently

Interaction Design

Clear CTAs: Make call-to-action buttons obvious
Consistent Interactions: Use consistent interaction patterns
Feedback: Provide clear feedback for user actions
Accessibility: Ensure accessibility for all users

Usage Guidelines

Logo Usage

Do's

Use the logo at appropriate sizes
Maintain clear space around the logo
Use the correct color version for the background
Keep the logo intact and unmodified

Don'ts

Don't stretch or distort the logo
Don't change the colors
Don't add effects or filters
Don't place on busy backgrounds

Color Usage

Do's

Use the primary color palette
Maintain sufficient contrast
Use colors consistently
Test colors for accessibility

Don'ts

Don't use colors not in the palette
Don't use colors with insufficient contrast
Don't use too many colors at once
Don't ignore accessibility guidelines

Typography Usage

Do's

Use the specified font families
Maintain consistent sizing
Use appropriate weights
Ensure readability

Don'ts

Don't use fonts not in the guidelines
Don't use inconsistent sizing
Don't use inappropriate weights
Don't sacrifice readability for style

Brand Assets

Logo Files

Vector Formats

SVG: Scalable vector format
PDF: Print-ready format
EPS: Professional print format

Raster Formats

PNG: Web and digital use
JPG: Photographic content
ICO: Favicon format

Color Files

Design Files

Adobe Swatch Exchange (ASE): Adobe Creative Suite
Sketch Palette: Sketch app
Figma Styles: Figma design tool

Code Files

CSS Variables: Web development
SCSS Variables: Sass development
JSON: API and configuration

Typography Files

Font Files

WOFF2: Modern web format
WOFF: Web format
TTF: TrueType format
OTF: OpenType format

Brand Applications

Website

Header: Use primary logo with navigation
Hero Section: Use full-color logo with tagline
Footer: Use monochrome logo with contact info
Favicon: Use simplified logo icon

Marketing Materials

Business Cards: Use primary logo with contact info
Brochures: Use full-color logo with brand colors
Posters: Use high-contrast logo with brand colors
Banners: Use appropriate logo size for visibility

Digital Applications

VS Code Extension: Use icon version of logo
Mobile Apps: Use appropriate logo size
Social Media: Use square logo version
Email Signatures: Use small logo with contact info

Brand Voice

Tone

Professional: Serious about security and reliability
Friendly: Approachable and developer-focused
Technical: Accurate and precise
Innovative: Forward-thinking and cutting-edge

Messaging

Security First: Emphasize security and encryption
Developer Experience: Focus on seamless integration
Real-time: Highlight instant collaboration
Trust: Build confidence in the product

Content Guidelines

Clear and Concise: Use simple, direct language
Technical Accuracy: Ensure technical content is correct
Consistent Terminology: Use consistent terms throughout
Accessible: Write for all skill levels

Brand Compliance

Review Process

Brand Review: All materials must be reviewed for brand compliance
Approval Process: Get approval before using brand assets
Guidelines Updates: Keep guidelines updated
Training: Train team members on brand guidelines

Enforcement

Brand Standards: Enforce brand standards consistently
Quality Control: Regular quality control checks
Feedback: Provide feedback on brand usage
Improvement: Continuously improve brand guidelines

Contact

Brand Questions

Email: brand@osmynt.dev
Design Requests: design@osmynt.dev
Asset Requests: assets@osmynt.dev

Brand Resources

Brand Kit: Download brand kit
Logo Files: Download logos
Color Palette: Download colors
Typography: Download fonts

Next Steps

Now that you understand Osmynt's brand guidelines:

Learn about the development roadmap - Upcoming features and improvements
Get support - Get help and support
Learn about security - Security and encryption details
Start using Osmynt - Get started with Osmynt