UI Designing Style Guide in Web or App
28 February 2025 12:20
UI Design Style Guide: A Comprehensive Guide for Web
& App Projects
What is a UI Design Style Guide?
A UI Design Style Guide is a document that defines the visual and interaction design rules for a
product. It ensures consistency, usability, and branding across all screens of a website or mobile
app.
✅ It helps UI/UX designers, developers, and product teams maintain a uniform design system.
✅ It speeds up development by providing a reference for typography, colors, components, and
layouts.
✅ It improves the user experience (UX) by ensuring familiarity across the app.
Sections of a UI Design Style Guide
A complete UI Style Guide contains these essential elements:
Accessibility & Dark Mode Guidelines
W ’ ?
• Defines how the brand should look and feel.
• Ensures a consistent brand identity across all platforms.
What to Include?
✅ Logo Usage: Variations, minimum size, spacing rules
✅ Brand Colors: Primary, secondary, accent colors
✅ Typography: Fonts for headings, body text, buttons
Example:
• Primary Font: Montserrat (Headings)
• Secondary Font: Lato (Body Text)
• Primary Color: #206699
• Secondary Color: #FFFFFF
W ’ ?
• Helps maintain consistent alignment & spacing
• Ensures a responsive design across devices
Common Grids:
✅ Web Layouts: 12-column grid (Bootstrap, Figma)
✅ Mobile Layouts: 4-column or 8-column grid
✅ Spacing System: Based on 4px or 8px increments
New Section 1 Page 1
✅ Spacing System: Based on 4px or 8px increments
Example Grid System:
• Container Width: 1200px
• Column Width: Flexible
• Gutter Size: 16px
• Margin: 24px
W ’ ?
• Ensures readability & hierarchy in UI design
• Keeps font sizes and styles uniform across pages
What to Define?
✅ Heading Sizes: H1, H2, H3, H4, H5, H6
✅ Body Text Size & Line Height: 16px / 1.5 line height
✅ Font Weight: Light, Regular, Bold
✅ Letter Spacing & Alignment: Normal or tight spacing
Example:
Text Style Font Size (px) Weight
H1 (Main Title) Montserrat 32px Bold
H2 (Subheading) Montserrat 24px Semi-Bold
Body Text Lato 16px Regular
Button Text Lato 14px Bold
Tools to Use:
• Google Fonts, Adobe Fonts, Figma Typography Plugin
W ’ ?
• Creates a visually appealing brand identity
• Defines how colors should be used in different contexts
Types of Colors:
✅ Primary Colors: Brand’s main color (e.g., #206699)
✅ Secondary Colors: Supporting colors (e.g., #FF8F4C)
✅ Accent Colors: Used for CTA buttons, links (e.g., #FCD34D)
✅ Background Colors: Light/Dark mode variations
Example Color Palette:
Color Name Hex Code Usage
Primary #206699 Headings, Main UI
Secondary #FF8F4C Buttons, Highlights
Accent #FCD34D Links, Hover Effects
Background #F9F9F9 Page Background
Color Usage Example:
• Primary Color: Used for buttons & headers
• Secondary Color: Used for hover states
• Accent Color: Used for CTAs & notifications
W ’ ?
• Defines reusable UI elements to maintain consistency
• Helps developers implement design faster
New Section 1 Page 2
• Helps developers implement design faster
Components to Include:
✅ Buttons (Primary, Secondary, Disabled, Hover)
✅ Cards (Product Cards, Profile Cards, etc.)
✅ Dropdowns, Checkboxes, Switches
✅ Modals & Dialog Boxes
Example Button States:
State Background Color Text Color
Default #206699 #FFFFFF
Hover #185585 #FFFFFF
Disabled #B0C4DE #FFFFFF
Tools to Use:
• Figma Components, Adobe XD Libraries
W ’ ?
• Enhances visual appeal & usability
• Helps users navigate easily
What to Define?
✅ Icon Style: Outlined vs. Filled
✅ Size & Spacing: 24px for standard icons
✅ Illustration Style: Flat, 3D, Isometric
Example Icon Guidelines:
• Navigation Icons: 24px × 24px
• Button Icons: 16px × 16px
• Illustrations: SVG or PNG format
Where to Get Icons?
• Material Icons, Feather Icons, FontAwesome
W ’ ?
• Helps users interact with the UI efficiently
• Defines button sizes, shapes, and states
What to Include?
✅ Primary vs. Secondary Buttons
✅ Button Hover & Click Effects
✅ CTA Button Design
Example Button Styles:
Button Type Size Border Radius
Primary Button 48px 8px
Secondary Button 40px 6px
Outline Button 40px 6px
W ’ ?
• Defines how users enter information
• Ensures consistent input field styling
What to Include?
✅ Text Fields (Default, Active, Error, Success)
✅ Dropdowns & Selection Menus
New Section 1 Page 3
✅ Dropdowns & Selection Menus
✅ Radio Buttons & Checkboxes
Example Input Field States:
State Border Color Placeholder Text Color
Default #CCCCCC #A0A0A0
Focus #206699 #000000
Error #FF4C4C #FF0000
W ’ ?
• Defines padding, margins, and spacing for consistent alignment
Common Spacing System:
✅ 4px / 8px Grid System
✅ Component Padding: 16px–24px
✅ Button Height: 48px
Example Spacing:
• Small Margin: 8px
• Medium Margin: 16px
• Large Margin: 24px
Accessibility & Dark Mode Guidelines
W ’ ?
• Ensures UI is usable for all users
• Supports color contrast & dark mode adaptations
Accessibility Standards:
✅ Contrast Ratio: 4.5:1 for text
✅ Keyboard Navigation Support
✅ Dark Mode Color Adjustments
Example Dark Mode Palette:
Element Light Mode Dark Mode
Background #FFFFFF #121212
Text #000000 #E0E0E0
New Section 1 Page 4
