Skip to content

Design Identity Guide

EncoSoft Founder edited this page Jun 17, 2025 · 4 revisions

This document will define the visual identity and design principles that govern how EncoSoft presents itself across all media, interfaces, and brand assets.

It complements the Brand Identity Guide by focusing on geometry, layout, visual consistency, and iconography.


🎯 Purpose

To ensure visual consistency, brand recognizability, and aesthetic clarity in all visual representations of EncoSoft.


🖼️ Logo System



  • Primary Logo Composition

    • Icon-only version: The standalone geometric symbol. Ideal for small spaces, favicons, or as a secondary identifier when the brand name is already established.
      • Example Usage: App icons, social media profiles.
    • Icon + logotype horizontal version: The symbol positioned to the left of the "EncoSoft" wordmark. This is the most common and versatile version for general use.
      • Example Usage: Website headers, business cards, document footers.
    • Icon + logotype stacked version: The symbol positioned above the "EncoSoft" wordmark. Used when horizontal space is limited but vertical space is ample.
      • Example Usage: Presentation title slides, vertical banners.
  • Grid and Spacing Rules

    • Minimum clear space: A clear area around the logo, free from any other elements, must be maintained. This space is defined by 'x' units (e.g., the height of the 'E' in EncoSoft).
      • Alignment zones: Specific guidelines for aligning the logo within layouts (e.g., always align to grid, specific margins for print/digital).
  • Geometry Principles

    • Abstract form or symbolic metaphor: The geometric symbol represents structured intelligence and interconnectedness, reflecting the "Engineer thought. Deliver intelligence." philosophy.
      • Circular grid / modular shapes: The symbol is constructed using a precise geometric grid to ensure balance and harmony.
  • Color Application

    • Full-color: The standard version using Engineering Blue and Signal Orange.
      • Monochrome: Single-color versions (e.g., white on dark background, black on light background) for situations where full color is not feasible or desired.
      • Inverted versions: For use on dark or photographic backgrounds, ensuring sufficient contrast.

📐 Layout & Interface Design

  • Corner Radius and UI Tokens

    • Rounded tokens, padding rules
  • Shadow and Depth

    • Consistency in elevation usage
  • Typography Integration

    • Font/weight pairing with logo and interface

🛑 Don’ts

  • Do not modify proportions or spacing arbitrarily
  • Do not recolor brand icons beyond defined palette
  • Avoid unapproved combinations (e.g. logotype without icon)

🔗 Related Documents


* Last updated: 2025-06-17

Clone this wiki locally