Brand Guidelines Version 1.0
A comprehensive guide to the Softylus brand identity. These guidelines ensure consistency and clarity across all our digital touchpoints.
Contents
Logo
Primary Logo
Logo Variations
Light Version
Dark Version
Usage Guidelines
Clear Space
Always maintain minimum clear space around the logo. This space should be equal to the height of the logo symbol (X).
Minimum Size
To maintain legibility, never use the logo smaller than the specified minimum sizes.
Print Minimum: 25mm wide
Digital Minimum: 120px wide
Do's and Don'ts
Do
Use the logo in its original proportions
Maintain adequate clear space around the logo
Use approved color variations
Scale the logo proportionally
Don't
Distort or stretch the logo
Add effects like shadows or outlines
Use unapproved colors
Place the logo on busy backgrounds that reduce visibility
Color Palette
Primary Colors
Black
White
Gray Scale
Gray 50
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Color Usage
Primary Text
Black (#000000) for maximum readability
Inverted Text
White (#FFFFFF) on dark backgrounds
Secondary Text
Gray 600 (#757575) for supporting content
Accessibility Guidelines
Contrast Ratios
- • Black on White: 21:1 (Exceeds WCAG AAA)
- • White on Black: 21:1 (Exceeds WCAG AAA)
- • Gray 600 on White: 5.6:1 (Meets WCAG AA)
Best Practices
- • Use high contrast for important text
- • Ensure readability in all sizes
- • Test colors in different lighting conditions
Typography
Font Families
Display
Playfair Display - Headlines, Display Text
AaBbCcDdEeFf 123
AaBbCcDdEeFf 123
AaBbCcDdEeFf 123
AaBbCcDdEeFf 123
Primary
Montserrat - Body Text, UI Elements
AaBbCcDdEeFf 123
AaBbCcDdEeFf 123
AaBbCcDdEeFf 123
AaBbCcDdEeFf 123
Type Scale
Display Text
Heading 1
Heading 2
Heading 3
Heading 4
Large Text
Body Text
Small Text
Best Practices
Hierarchy
Maintain clear visual hierarchy using size, weight, and spacing.
Line Length
Keep line length between 45-75 characters for optimal readability.
Contrast
Ensure sufficient contrast between text and background colors.
Usage Examples
Main Headline
Section Title
Body text with good readability and proper line height. This demonstrates how different type styles work together in a layout.
Call to Action →Imagery
Image Styles
Product Photography
Clean, minimalist product shots on neutral backgrounds
Team & Culture
Natural, candid moments showcasing our collaborative environment
Abstract Tech
Modern, abstract visuals representing digital concepts
Composition
- Use the rule of thirds for balanced layouts
- Create clear focal points
- Maintain consistent aspect ratios
- Leave space for text overlays when needed
Color Treatment
- Subtle, natural color grading
- Avoid heavy filters or effects
- Maintain consistent white balance
- Ensure proper contrast levels
Technical Requirements
- Minimum resolution: 2000px on longest side
- Format: JPG for web, TIFF for print
- Color space: sRGB for digital, CMYK for print
- Maximum file size: 2MB for web use
Do's and Don'ts
Do
Use high-quality, professional photography
Maintain consistent lighting and color treatment
Consider image context and composition
Optimize images for web performance
Don't
Use low-resolution or pixelated images
Apply heavy filters or effects
Use generic stock photos without purpose
Stretch or distort images
Tone of Voice
Voice Principles
Clear & Direct
We communicate with precision and purpose, avoiding unnecessary complexity.
Our solution improves performance by 50%.
Our cutting-edge solution might be able to help you achieve somewhat better performance metrics.
Professional & Approachable
We balance expertise with accessibility, making complex topics understandable.
Let's explore how advanced algorithms can enhance your workflow.
Our advanced deep learning algorithms leverage sophisticated advanced architectures.
Confident & Humble
We're confident in our capabilities while remaining open to learning and growth.
We bring 8 years of experience to every project.
We're the absolute best in the industry with unmatched expertise.
Writing Guidelines
Headlines
- Keep headlines clear and concise
- Use active voice
- Avoid unnecessary punctuation
- Focus on benefits, not features
Body Copy
- Use short, clear sentences
- Break text into digestible paragraphs
- Include only one main idea per paragraph
- Use transition words for flow
CTAs
- Be specific and action-oriented
- Keep it short (2-4 words)
- Create urgency without pressure
- Use strong verbs
Voice in Action
Headlines
We Provide Advanced Solutions for Business Growth
Transform Your Digital Reality
Body Copy
We utilize cutting-edge technology to deliver optimal solutions for businesses seeking digital transformation initiatives.
We synthesize the imagined into the tangible, where form embraces function in the poetry of computational elegance.
UI Components
Buttons
Button Guidelines
Sizing
- • Height: 48px (touch-friendly)
- • Padding: 24px horizontal
- • Text: 16px with medium weight
States
- • Default: Solid fill
- • Hover: Slight color change
- • Active: Scale down slightly
- • Disabled: 50% opacity
Cards
Card Title
Card description text goes here, demonstrating the typical content layout.
Specifications
- • Padding: 24px
- • Border: 1px solid rgba(0,0,0,0.1)
- • Border Radius: 0px
- • Shadow on hover
Forms
Input Fields
Form Guidelines
Layout
- • Single column for better scanning
- • Group related fields
- • Clear error states
- • Required field indicators
Validation
- • Immediate feedback
- • Clear error messages
- • Success confirmation
Design Patterns
Navigation
Consistent header navigation with hover states and mobile menu
Grid System
Responsive 12-column grid for layout consistency
Spacing
Standardized spacing units for consistent layout rhythm