Free UI Style Guide

I. Introduction

This User Interface (UI) Style Guide is designed to provide a comprehensive framework for creating and maintaining consistent and user-friendly interfaces across digital platforms. The guide outlines standards and best practices for visual and interactive elements, ensuring a cohesive experience for users.

II. Branding

Logo Usage

• Primary Logo: Use the full-color version of the [Your Company Name] logo on light backgrounds.

• Secondary Logo: Use the monochrome version on dark backgrounds or for specific design contexts where color might distract from the content.

• Clear Space: Maintain a clear space around the logo equal to the height of the 'X' in the logo to ensure visibility and impact.

Color Palette

Typography

• Headings: Use Helvetica Neue Bold for headings, size 24px.

• Body Text: Use Arial Regular for body text, size 16px.

• Buttons: Use Verdana Bold for button text, size 14px.

III. Layout and Spacing

Grid System

• Container Width: 1200px fixed for large screens, 100% for mobile.

• Column Layout: 12-column grid system with 20px gutters between columns.

Spacing

• Margins: Use a standard margin of 20px around all content areas.

• Padding: Apply 15px padding inside containers for a consistent inner space.

IV. Buttons

Button Types

• Primary Button:

  • Color: Primary Blue

  • Border Radius: 5px

  • Text Color: White

• Secondary Button:

  • Color: Neutral Gray

  • Border Radius: 5px

  • Text Color: Primary Blue

Button States

V. Forms

Form Elements

• Text Fields: Use a border radius of 4px, with a 1px solid Neutral Gray border.

• Dropdowns: Apply a 2px solid Primary Blue border with a dropdown arrow icon.

• Checkboxes: Use a 16x16px box with a Primary Blue checkmark icon inside.

Form Layout

• Alignment: Align labels to the left of input fields.

• Spacing: Provide 10px vertical spacing between form elements.

VI. Icons

Icon Style

• Type: Use flat icons with a consistent stroke width of 2px.

• Size: Standard icon size of 24x24px.

Icon Usage

VII. Accessibility

Color Contrast

• Text Contrast: Ensure text color contrasts at least 4.5:1 against background colors for readability.

• Interactive Elements: Maintain a contrast ratio of at least 3:1 for all interactive elements.

Keyboard Navigation

• Ensure all interactive elements are accessible via keyboard navigation. Implement focus states clearly visible.

VIII. Interaction Design

Animations

• Duration: Limit animation durations to 300ms to avoid distractions.

• Types: Use subtle transitions for hover effects and loading indicators.

Feedback

• Success: Display success messages with a Secondary Green and a checkmark icon.

• Error: Display error messages with Accent Red and an error icon.

IX. Contact Information

For any questions or additional support regarding the UI Style Guide, please contact:

• Name: [Your Name]

• Email: [Your Email]

• Company Name: [Your Company Name]

• Company Address: [Your Company Address]

• Company Number: [Your Company Number]

This guide is intended to be a living document and may be updated as new standards and practices evolve. For the latest version, please refer to the official documentation or contact [Your Company Email].

Guide Templates @ Template.net