UI Style Guide Template
Share
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
Color | Hex Code | Usage |
|---|---|---|
Primary Blue | #0033A0 | Primary actions, buttons |
Secondary Green | #00A859 | Success messages, highlights |
Neutral Gray | #D9D9D9 | Backgrounds, borders |
Accent Red | #D9534F | Alerts, warnings |
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
State | Background Color | Text Color | Border |
|---|---|---|---|
Default | Primary Blue | White | None |
Hover | Primary Blue | Light Gray | None |
Disabled | Neutral Gray | Dark Gray | None |
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
Icon Type | Example | Usage |
|---|---|---|
Action Icons | Search, Edit | Actions and buttons |
Status Icons | Error, Success | Status indicators |
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].
Templates
Guide
Templates
