# Peasy Design — Full Catalog > Design tools made easy. Peasy Design provides free browser-based tools at https://peasydesign.com/. All processing happens client-side — files never leave your device. ## Tools (15) ### Color Palette Generator Generate harmonious color palettes using color theory. Choose from analogous, complementary, triadic, split-complementary, tetradic, and monochromatic harmonies. - URL: https://peasydesign.com/design/design-palette/ - Category: Design Tools - Processing: client ### Type Scale Generator Generate modular typographic scales using mathematical ratios. Creates consistent heading and body text sizes for harmonious typography. - URL: https://peasydesign.com/design/design-typography/ - Category: Design Tools - Processing: client ### Spacing Scale Generator Generate consistent spacing systems for layouts. Choose from Tailwind, linear, Fibonacci, or power-of-2 scales with visual previews. - URL: https://peasydesign.com/design/design-spacing/ - Category: Design Tools - Processing: client ### Responsive Breakpoints Generate responsive breakpoint systems for CSS media queries. Includes Tailwind, Bootstrap, and Material Design presets with container query support. - URL: https://peasydesign.com/design/design-breakpoints/ - Category: Design Tools - Processing: client ### Aspect Ratio Calculator Calculate aspect ratios from dimensions. Shows the simplified ratio, decimal value, CSS property, and common sizes at the same ratio. - URL: https://peasydesign.com/design/design-aspect-ratio/ - Category: Design Tools - Processing: client ### Color Shade Generator Generate a complete shade scale (50-950) from any base color. Creates Tailwind-compatible scales with WCAG contrast ratios for each shade. - URL: https://peasydesign.com/design/design-color-shades/ - Category: Design Tools - Processing: client ### Font Pairing Suggestions Discover harmonious font combinations for headings and body text. Get 15 curated Google Fonts pairings with CSS import code and Tailwind config. - URL: https://peasydesign.com/design/design-font-pair/ - Category: Design Tools - Processing: client ### Contrast Checker Check WCAG 2.1 contrast ratios between foreground and background colors. Validates AA and AAA compliance for both normal and large text. - URL: https://peasydesign.com/design/design-contrast/ - Category: Design Tools - Processing: client ### Design Tokens Generator Generate complete design token sets with colors, spacing, font sizes, and border radius. Choose from minimal, corporate, or playful presets. - URL: https://peasydesign.com/design/design-tokens/ - Category: Design Tools - Processing: client ### Social Media Size Guide Quick reference for image dimensions across Instagram, Twitter/X, Facebook, YouTube, LinkedIn, and Open Graph. All sizes updated for 2026. - URL: https://peasydesign.com/design/design-media-sizes/ - Category: Design Tools - Processing: client ### Golden Ratio Calculator Calculate golden ratio proportions for layouts, typography, and spacing Apply the golden ratio (1.618) to any dimension for harmonious design. Generates Fibonacci sizing scales, layout splits, and typography hierarchies. - URL: https://peasydesign.com/design/design-golden-ratio-calculator/ - Category: Design Tools - Processing: client - Steps: 1. Enter a base dimension (e.g., 1200 for a container width) 2. Choose a unit and scaling mode 3. Review the golden ratio proportions and Fibonacci scale 4. Apply the suggested splits to your layout and typography ### App Icon Size Guide Complete icon size requirements for iOS, Android, Web, Windows, and macOS Reference guide for all required app icon and favicon sizes across platforms. Includes filename conventions, density labels, and export checklist. - URL: https://peasydesign.com/design/design-icon-size-guide/ - Category: Design Tools - Processing: client - Steps: 1. Enter your project name (optional) 2. Select a platform or view all platforms 3. Review the required sizes, filenames, and contexts 4. Use the checklist to ensure you have all required assets ### Shadow System Generator Generate elevation shadow systems in Material, Tailwind, or custom style Create consistent shadow/elevation scales for your design system. Material Design, Tailwind, or custom progressive shadows with CSS output. - URL: https://peasydesign.com/design/design-shadow-generator/ - Category: Design Tools - Processing: client - Steps: 1. Choose a shadow style: Material, Tailwind, or custom 2. Set the number of elevation levels (1-10) 3. Customize shadow color and maximum blur (for custom style) 4. Copy the CSS custom properties or individual shadow values ### Multi-Stop Gradient Generator Generate complex CSS gradients with multiple color stops. 12 beautiful presets including sunset, ocean, aurora, and neon. Linear, radial, and conic gradient types. - URL: https://peasydesign.com/design/gradient-generator/ - Category: Design Tools - Processing: client ### CSS Pattern Generator Generate repeating CSS background patterns using pure gradients. 12 patterns including stripes, dots, grid, checkerboard, zigzag, diamonds, and waves. - URL: https://peasydesign.com/design/css-pattern-generator/ - Category: Design Tools - Processing: client ## Guides (87) ### QR Code Generation: Best Practices for Print and Digital QR codes bridge physical and digital experiences, but poorly generated codes fail to scan. This guide covers sizing, error correction, design customization, and testing best practices for reliable QR codes. - URL: https://peasydesign.com/guides/qr-code-generation-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 262 Key takeaways: - QR (Quick Response) codes store data in a two-dimensional barcode pattern. - The minimum QR code size depends on the scanning distance: - QR codes have four error correction levels that determine how much damage the code can sustain while remaining scannable: - You can customize QR codes while maintaining scannability: - Always test QR codes on multiple devices and under various lighting conditions before printing. ## QR Code Fundamentals QR (Quick Response) codes store data in a two-dimensional barcode pattern. They can encode URLs, text, phone numbers, Wi-Fi credentials, calendar events, and other structured data. ## Size Guidelines The minimum QR code size depends on the scanning distance: | Scanning Distance | Minimum QR Size | |-------------------|----------------| | 10 cm (phone held close) | 2 cm x 2 cm | | 30 cm (business card) | 2.5 cm x 2.5 cm | | 1 m (poster) | 10 cm x 10 cm | | 3 m (sign) | 30 cm x 30 cm | General rule: QR code width should be 1/10th of the scanning distance. ## Error Correction Levels QR codes have four error correction levels that determine how much damage the code can sustain while remaining scannable: - **L (Low, 7%)**: Smallest QR code, least redundancy. - **M (Medium, 15%)**: Good balance for most uses. - **Q (Quartile, 25%)**: Good for printed materials that may get worn. - **H (High, 30%)**: Best for codes with logo overlays. ## Design Customization You can customize QR codes while maintaining scannability: - **Colors**: Use dark modules on light backgrounds. Maintain at least 40% contrast. - **Logo overlay**: Place in the center over the error correction area. Use Level H. - **Rounded corners**: Slight rounding is fine; extreme rounding reduces scan reliability. - **Quiet zone**: Keep the white border (at least 4 modules wide). ## Testing Always test QR codes on multiple devices and under various lighting conditions before printing. Test with at least 3 different QR scanner apps. ### Color Theory for Digital Design: A Practical Guide Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility requirements, and practical palette-building techniques. - URL: https://peasydesign.com/guides/color-theory-digital-design/ - Category: How-To - Reading time: 1 min - Words: 225 Key takeaways: - Color influences emotion, readability, and user behavior. - Screens display color by mixing Red, Green, and Blue light. - Colors opposite each other on the color wheel (e.g., blue and orange). - WCAG 2.1 requires minimum contrast ratios: ## Why Color Theory Matters Color influences emotion, readability, and user behavior. Studies show that color can increase brand recognition by up to 80% and that 85% of consumers cite color as the primary reason for choosing a product. ## Color Models ### RGB and Hex Screens display color by mixing Red, Green, and Blue light. Hex codes (#FF6B35) are a compact way to write RGB values. This additive model produces white when all channels are at maximum. ### HSL HSL (Hue, Saturation, Lightness) is more intuitive for designers. Adjusting saturation and lightness independently makes it easy to create consistent color palettes and accessible color pairs. ## Color Harmonies ### Complementary Colors opposite each other on the color wheel (e.g., blue and orange). Creates high contrast and visual tension. Best used for accent colors, not large areas. ### Analogous Colors adjacent on the wheel (e.g., blue, blue-green, green). Creates calm, cohesive palettes. Common in nature photography and brand identities. ### Triadic Three colors equally spaced on the wheel. Provides vibrant variety while maintaining balance. Often one color dominates while the others accent. ## Accessibility WCAG 2.1 requires minimum contrast ratios: - **Normal text**: 4.5:1 contrast ratio (AA), 7:1 (AAA) - **Large text**: 3:1 (AA), 4.5:1 (AAA) - **UI components**: 3:1 against adjacent colors Always test your color combinations with a contrast checker before finalizing designs. ### JPEG vs PNG — Which Image Format Should You Use? A detailed comparison of JPEG and PNG image formats covering compression methods, quality characteristics, transparency, and ideal use cases. Learn when to choose each format for web, print, and design projects. - URL: https://peasydesign.com/guides/jpg-vs-png-which-format-to-use/ - Category: Comparison - Reading time: 1 min - Words: 206 Key takeaways: - JPEG excels for photographs and images with smooth gradients where lossy compression artifacts are not noticeable. - PNG is the right choice when you need transparency, pixel-perfect quality for screenshots and text, or lossless storage for graphics and logos. - WebP offers both lossy and lossless compression with transparency support, often producing files 25-35% smaller than either JPEG or PNG. ## JPEG vs PNG at a Glance | Feature | JPEG | PNG | |---------|------|-----| | Compression | Lossy | Lossless | | Transparency | No | Yes (alpha) | | Colors | 16.7M | 16.7M + alpha | | Best for | Photos | Graphics, text | | Typical size | Smaller | Larger | ## When to Use JPEG JPEG excels for photographs and images with smooth gradients where lossy compression artifacts are not noticeable. At quality 80-85, JPEG files are typically 5-10x smaller than equivalent PNGs for photographic content. ## When to Use PNG PNG is the right choice when you need transparency, pixel-perfect quality for screenshots and text, or lossless storage for graphics and logos. PNG files can be smaller than JPEG for images with large areas of solid color. ## The Modern Alternative: WebP WebP offers both lossy and lossless compression with transparency support, often producing files 25-35% smaller than either JPEG or PNG. Consider WebP when browser compatibility is not a concern. ## Decision Flowchart 1. Need transparency? &rarr; **PNG** (or WebP) 2. Photograph or complex image? &rarr; **JPEG** (or WebP) 3. Screenshot, logo, or text? &rarr; **PNG** (or WebP lossless) 4. Will be edited further? &rarr; **PNG** (lossless master) ### Accessibility Guide for Online Tool Design Online tools must be usable by everyone, including people with visual, motor, and cognitive disabilities. Learn the key accessibility patterns for interactive web applications. - URL: https://peasydesign.com/guides/accessibility-guide-online-tool-design/ - Category: Best Practice - Reading time: 1 min - Words: 290 Key takeaways: - Online tools are interactive by nature — they require input, display output, and involve multi-step workflows. - This complexity makes accessibility both more challenging and more important than for static content. - ### Keyboard Navigation Every function must be operable with a keyboard alone. - Focus indicators must be visible (see CSS focus styles guide). ## Why Tool Accessibility Matters Online tools are interactive by nature — they require input, display output, and involve multi-step workflows. This complexity makes accessibility both more challenging and more important than for static content. An inaccessible tool excludes a significant portion of potential users and may violate legal requirements (ADA, EAA, Section 508). ### Keyboard Navigation Every function must be operable with a keyboard alone. Tab order must follow a logical sequence through the interface. Focus indicators must be visible (see CSS focus styles guide). Custom controls (drag-and-drop, sliders) must have keyboard alternatives. Trap focus inside modal dialogs to prevent keyboard users from getting lost behind the dialog. ### Screen Reader Compatibility Label all form inputs with visible `<label>` elements. Use ARIA roles and states for custom components: `role="tabpanel"` for tabs, `aria-expanded` for collapsible sections, `aria-live="polite"` for dynamically updated content (like processing results). Announce errors immediately using `role="alert"`. Provide text alternatives for all visual output. ### Color and Contrast Don't convey information through color alone — add text labels, patterns, or icons. Ensure all text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text). UI controls and focus indicators need 3:1 contrast against adjacent colors. ### Error Handling Identify errors clearly with both text and visual indicators (not just red borders). Describe what went wrong and how to fix it. Don't clear the user's input on error — let them correct it. Place error messages near the relevant input field and announce them to screen readers. ### Cognitive Accessibility Use clear, simple language in instructions and labels. Break complex processes into discrete steps with progress indicators. Provide examples of expected input format. Don't auto-submit — let users review before processing. Offer undo functionality where possible. ### QR Code Design Best Practices: Balancing Aesthetics and Scannability A QR code that looks great but fails to scan is worse than useless. Understanding the relationship between visual customization and error correction ensures reliable scanning across all devices and environments. - URL: https://peasydesign.com/guides/qr-code-design-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 296 Key takeaways: - QR scanners rely on three finder patterns (the large squares in three corners) to locate and orient the code. - The center of a QR code is the safest area for logos or graphics. - Minimum contrast ratio:** 4:1 between foreground and background - The quiet zone (blank border around the code) must be at least 4 modules wide. - Test every custom QR code with at least three different scanning apps on both iOS and Android. ## How QR Scanners Read Codes QR scanners rely on three finder patterns (the large squares in three corners) to locate and orient the code. They then read the timing patterns (alternating modules between finders) to establish the grid, and finally decode the data modules. Any design modification that disrupts these structural elements will cause scan failures. ## Safe Customization Zones The center of a QR code is the safest area for logos or graphics. With error correction level H (30% redundancy), up to 25-30% of the data area can be obscured while maintaining scannability. This does not mean 30% of the entire code — the finder patterns, timing patterns, and format information must remain untouched. ## Color Rules - **Minimum contrast ratio:** 4:1 between foreground and background - **Dark on light only:** QR scanners expect dark modules on a light background. Inverted (light on dark) codes fail on many older scanner apps. - **Avoid gradients on modules:** Individual modules must have uniform color - **Background must be truly light:** Off-white, light pastels work. Medium gray reduces contrast below the scanning threshold. ## Size and Quiet Zone The quiet zone (blank border around the code) must be at least 4 modules wide. Many design failures happen when the QR code is placed on a busy background without sufficient quiet zone. The minimum printable size depends on scanning distance — a general rule is 10:1 ratio (10 cm code scans reliably at 1 meter). ## Testing Protocol Test every custom QR code with at least three different scanning apps on both iOS and Android. Test at the intended viewing distance, in the intended lighting conditions, and on the intended material (screen, paper, fabric). What scans perfectly on a high-resolution screen may fail when printed on textured cardstock. ### CSS Grid vs Flexbox: When to Use Each Layout System End the Grid vs Flexbox debate with clear guidelines. Understand the conceptual differences, when each layout system excels, and how to combine them effectively for complex layouts. - URL: https://peasydesign.com/guides/css-grid-vs-flexbox-when-to-use-each/ - Category: Comparison - Reading time: 1 min - Words: 276 Key takeaways: - Flexbox is a one-dimensional layout system — it arranges items along a single axis (row or column). - Navigation bars (items in a row) - Page-level layouts (header, sidebar, main, footer) - The most effective approach uses Grid for the overall page layout and Flexbox for component-level arrangement within grid cells. ## The Fundamental Difference Flexbox is a one-dimensional layout system — it arranges items along a single axis (row or column). Grid is a two-dimensional layout system — it controls both rows and columns simultaneously. This is not a matter of capability overlap; they solve fundamentally different layout problems. ## When to Use Flexbox - Navigation bars (items in a row) - Card footers (push content to bottom) - Centering content (both axes) - Distributing space between items - Wrapping items to the next line - Any layout that flows in one direction ## When to Use Grid - Page-level layouts (header, sidebar, main, footer) - Image galleries with consistent sizing - Form layouts (labels aligned with inputs) - Any layout requiring precise row AND column control - Overlapping elements (grid areas can overlap) ## Comparison Table | Feature | Flexbox | Grid | | --- | --- | --- | | Dimensions | 1D (row or column) | 2D (rows and columns) | | Content-driven | Yes (items size to content) | Optional (can be track-driven) | | Gap property | Yes | Yes | | Item overlap | No | Yes (grid areas) | | Named areas | No | Yes (`grid-template-areas`) | | Implicit tracks | N/A | Yes (auto-generated rows/columns) | ## Combining Both The most effective approach uses Grid for the overall page layout and Flexbox for component-level arrangement within grid cells. A grid cell containing a card can use flexbox internally to align its content. These systems are complementary, not competing. Experiment with Grid and Flexbox layouts using the Peasy CSS layout generator — visual builder with instant code output. ### CSS Custom Properties (Variables): A Complete Guide Master CSS custom properties — from basic variable usage to advanced patterns like theming, component APIs, and responsive design tokens. Understand how they differ from preprocessor variables and when to use each. - URL: https://peasydesign.com/guides/css-custom-properties-variables-complete-guide/ - Category: How-To - Reading time: 1 min - Words: 204 Key takeaways: - CSS custom properties (declared with `--`) are fundamentally different from Sass/Less variables. - background: var(--color-primary); - Define theme tokens as custom properties and swap them for different themes: - Custom properties create clean component interfaces. - Custom properties trigger style recalculation when changed. ## Custom Properties vs Preprocessor Variables CSS custom properties (declared with `--`) are fundamentally different from Sass/Less variables. Custom properties exist at runtime — they cascade, inherit, and can be changed dynamically with JavaScript. Preprocessor variables are compile-time constants that disappear in the output CSS. ## Basic Usage ```css :root { --color-primary: #3b82f6; --spacing-md: 1rem; --radius-lg: 0.75rem; } .button { background: var(--color-primary); padding: var(--spacing-md); border-radius: var(--radius-lg); } ``` ## Theming with Custom Properties Define theme tokens as custom properties and swap them for different themes: ```css :root { --bg: #ffffff; --text: #1a1a1a; } .dark { --bg: #1a1a1a; --text: #ffffff; } ``` Every element using `var(--bg)` automatically updates when the `.dark` class is toggled — no JavaScript per-element manipulation needed. ## Component APIs Custom properties create clean component interfaces. The component defines defaults, and consumers override only what they need: ```css .card { padding: var(--card-padding, 1.5rem); background: var(--card-bg, white); } ``` ## Performance Considerations Custom properties trigger style recalculation when changed. Avoid changing properties on `:root` during animations — scope them to the animated element to limit the recalculation scope. For static design tokens, preprocessor variables perform slightly better since they compile away. Generate and preview CSS custom property themes with the Peasy CSS tools. ### Color Palette Generation Techniques for Web Design Building a cohesive color palette is the foundation of every design project. This guide covers algorithmic and artistic approaches to generating palettes that work across interfaces, illustrations, and brand assets. - URL: https://peasydesign.com/guides/color-palette-generation-techniques/ - Category: How-To - Reading time: 2 min - Words: 305 Key takeaways: - A well-chosen palette creates visual harmony, guides user attention, and reinforces brand identity. - Select a base hue and pick the color directly opposite on the color wheel (180 degrees apart). - HSL (Hue, Saturation, Lightness) is the most intuitive model for palette generation. - Extracting dominant colors from a photograph produces naturally harmonious palettes. - Always test palette accessibility with a contrast checker (WCAG AA requires at least 4.5:1 for text) ## Why Color Palettes Matter A well-chosen palette creates visual harmony, guides user attention, and reinforces brand identity. Random color picks lead to clashing interfaces and inconsistent experiences across pages. ## Algorithmic Approaches ### Complementary Colors Select a base hue and pick the color directly opposite on the color wheel (180 degrees apart). This produces high-contrast pairs ideal for call-to-action buttons against neutral backgrounds. ### Analogous Harmony Choose three to five colors adjacent on the wheel (within 30-60 degrees). The result feels cohesive and calm — perfect for editorial layouts and dashboards where you want subtle differentiation without visual noise. ### Triadic and Tetradic Schemes Triadic schemes use three colors evenly spaced at 120 degrees. Tetradic (rectangular) schemes use four colors forming two complementary pairs. Both offer rich variety but require careful saturation balancing to avoid overwhelming the viewer. ## Working in HSL Space HSL (Hue, Saturation, Lightness) is the most intuitive model for palette generation. Lock the hue and vary saturation and lightness to create tints and shades: | Variant | Saturation | Lightness | |---------|------------|----------| | Vivid | 80-100% | 45-55% | | Muted | 30-50% | 50-60% | | Pastel | 40-60% | 80-90% | | Dark | 60-80% | 20-35% | ## Palette Extraction from Images Extracting dominant colors from a photograph produces naturally harmonious palettes. The k-means clustering algorithm groups pixel values and returns the centroids as representative colors. Median-cut and octree quantization are faster alternatives that trade precision for speed. ## Practical Tips - Always test palette accessibility with a contrast checker (WCAG AA requires at least 4.5:1 for text) - Include a neutral gray scale alongside accent colors - Limit primary palette to five to seven colors and derive extended shades from those - Export palettes as CSS custom properties or design tokens … ### Lorem Ipsum and Placeholder Text: When and How to Use It Placeholder text fills layouts during design before real content arrives. This guide covers the history of Lorem Ipsum, when to use it, and better alternatives for different contexts. - URL: https://peasydesign.com/guides/lorem-ipsum-placeholder-text-guide/ - Category: How-To - Reading time: 1 min - Words: 295 Key takeaways: - Lorem Ipsum is scrambled Latin derived from Cicero's 'De Finibus Bonorum et Malorum' (45 BC). - For a medical site, use placeholder text about health topics. - Paragraph count**: Generate 1-50 paragraphs - Many designers now advocate for content-first design, where real content shapes the design rather than the other way around. ## What Is Lorem Ipsum Lorem Ipsum is scrambled Latin derived from Cicero's 'De Finibus Bonorum et Malorum' (45 BC). It has been the printing industry's standard placeholder text since the 1500s. Its letter distribution roughly mimics English, making layouts look realistic. ## When to Use Placeholder Text | Scenario | Use Placeholder? | Why | |----------|-----------------|-----| | Wireframing | Yes | Focus on structure, not content | | Client presentations | Sometimes | Real content is better if available | | Development testing | Yes | Need text to test layouts | | Production deployment | Never | Replace before launch | ## Alternatives to Lorem Ipsum ### Topic-Relevant Placeholder For a medical site, use placeholder text about health topics. For a legal site, use legal-sounding text. This helps stakeholders visualize the final product more accurately. ### Real Draft Content The best placeholder is actual draft content. Even rough drafts reveal layout issues that Lorem Ipsum hides — overly long titles, insufficient paragraph variety, and missing images. ### Different Languages If your site supports multiple languages, test layouts with text in each target language. German words are 30% longer than English on average; Chinese characters are much more compact. These differences affect layouts significantly. ## Generator Features to Look For - **Paragraph count**: Generate 1-50 paragraphs - **Word count**: Fixed or variable-length output - **HTML output**: Wrapped in `<p>` tags for direct paste into HTML - **Lists and headings**: Generate structured content, not just paragraphs - **Character set**: Support for different scripts and languages ## The 'Content-First' Movement Many designers now advocate for content-first design, where real content shapes the design rather than the other way around. When real content is available early in the process, layouts naturally accommodate actual content lengths and structures. ### Typography Pairing Principles: Choosing Fonts That Work Together Combining typefaces is both an art and a science. Learn the structural rules behind successful font pairings and avoid the most common pitfalls that make designs look amateurish. - URL: https://peasydesign.com/guides/typography-pairing-principles/ - Category: Best Practice - Reading time: 1 min - Words: 258 Key takeaways: - A good pairing creates contrast without conflict. - The golden rule: pair fonts that are different enough to be distinguishable but share an underlying structural quality. - Fonts pair more naturally when they share similar x-heights, cap heights, and stroke weights at the same font size. - A single typeface family with multiple weights can replace a two-font pairing entirely. - Every additional font file adds latency. ## The Goal of Font Pairing A good pairing creates contrast without conflict. The heading font grabs attention, the body font delivers readability, and together they establish a visual hierarchy that guides the reader. ## Contrast, Not Conflict The golden rule: pair fonts that are different enough to be distinguishable but share an underlying structural quality. A geometric sans-serif like Inter pairs well with a humanist serif like Lora because both have open apertures and balanced proportions despite different letterform styles. ## Classification-Based Pairing | Heading Class | Body Class | Example | |---------------|------------|--------| | Slab Serif | Sans-Serif | Roboto Slab + Open Sans | | Geometric Sans | Transitional Serif | Poppins + Merriweather | | Display Script | Neutral Sans | Playfair Display + Source Sans Pro | | Monospace | Humanist Sans | JetBrains Mono + Inter | ## Shared Metrics Fonts pair more naturally when they share similar x-heights, cap heights, and stroke weights at the same font size. Check these measurements side by side before committing to a combination. ## Weight and Scale Hierarchy A single typeface family with multiple weights can replace a two-font pairing entirely. Use bold or extra-bold for headings and regular or light for body text. This approach guarantees structural harmony and simplifies font loading. ## Performance Considerations Every additional font file adds latency. Limit yourself to two families and three to four weights total. Use `font-display: swap` in CSS to prevent invisible text during loading, and subset fonts to include only the character ranges you actually need. ### Icon Design Best Practices for UI Consistency Icons communicate faster than words, but only when they follow consistent rules. This guide covers sizing, stroke weight, grid alignment, and semantic clarity for icon sets. - URL: https://peasydesign.com/guides/icon-design-best-practices/ - Category: Best Practice - Reading time: 2 min - Words: 311 Key takeaways: - Icons serve as visual shorthand: a magnifying glass means search, a trash can means delete. - Every icon in a set should be drawn on the same base grid — typically 24x24px with 2px padding (20x20 live area). - Choose one primary style for your set and stick with it. - If you choose outlined icons, lock the stroke weight across the entire set. - An icon fails if users cannot guess its meaning. ## The Role of Icons in UI Icons serve as visual shorthand: a magnifying glass means search, a trash can means delete. They reduce cognitive load and save horizontal space in navigation bars, toolbars, and mobile interfaces. ## Designing on a Grid Every icon in a set should be drawn on the same base grid — typically 24x24px with 2px padding (20x20 live area). This ensures consistent optical sizing regardless of the icon's shape. Circles, squares, and tall/wide shapes all occupy the same bounding box but use different portions of the live area. ## Stroke vs Fill | Style | Best For | Considerations | |-------|----------|---------------| | Stroke (outline) | Navigation, toolbars | Lighter visual weight, requires consistent stroke width | | Fill (solid) | Active states, emphasis | Heavier weight, better at small sizes | | Duotone | Illustrations, features | Two-tone depth, more complex to maintain | Choose one primary style for your set and stick with it. Mixing stroke and fill icons in the same toolbar breaks visual consistency. ## Consistent Stroke Weight If you choose outlined icons, lock the stroke weight across the entire set. A 1.5px or 2px stroke at 24px is a common standard. When scaling icons to different sizes (16px, 20px, 32px), consider creating dedicated optical variants rather than simply scaling the SVG. ## Semantic Clarity An icon fails if users cannot guess its meaning. Test with the five-second rule: show the icon in isolation for five seconds and ask what action it represents. If fewer than 80% of testers guess correctly, add a text label or choose a more universally recognized metaphor. ## SVG Optimization Export icons as SVG for crisp rendering at every resolution. Run them through an optimizer (SVGO) to strip metadata, simplify paths, and reduce file size by 20-40%. … ### Dark Mode Design Guidelines: Beyond Inverting Colors Dark mode is more than swapping white for black. Proper dark theme design requires adjusted contrast ratios, desaturated colors, and thoughtful elevation mapping to maintain readability and visual hierarchy. - URL: https://peasydesign.com/guides/dark-mode-design-guidelines/ - Category: How-To - Reading time: 1 min - Words: 243 Key takeaways: - Simply inverting a light theme produces eye-straining contrast, muddy colors, and broken visual hierarchy. - Use a tiered gray system instead of pure black: - Vibrant colors that look great on white can feel harsh on dark backgrounds. - Avoid pure white (#FFFFFF) text on dark backgrounds. - Define all colors as CSS custom properties with two value sets. ## Why Dark Mode Needs Special Attention Simply inverting a light theme produces eye-straining contrast, muddy colors, and broken visual hierarchy. Dark mode is a parallel design system that shares the same structure but uses different rules. ## Background Layers Use a tiered gray system instead of pure black: | Layer | Light Mode | Dark Mode | |-------|------------|----------| | Surface 0 (page) | #FFFFFF | #121212 | | Surface 1 (card) | #F9FAFB | #1E1E1E | | Surface 2 (elevated) | #F3F4F6 | #2A2A2A | | Surface 3 (modal) | #E5E7EB | #333333 | Higher elevation surfaces are lighter in dark mode — the opposite of light mode where shadows create depth. This simulates light falling on raised surfaces. ## Color Adjustments Vibrant colors that look great on white can feel harsh on dark backgrounds. Reduce saturation by 10-20% and increase lightness slightly. For example, a primary blue of `hsl(220, 90%, 50%)` in light mode becomes `hsl(220, 70%, 65%)` in dark mode. ## Text Contrast Avoid pure white (#FFFFFF) text on dark backgrounds. It creates excessive contrast that causes visual fatigue during long reading sessions. Use #E0E0E0 or #D1D5DB for body text and reserve near-white for headings and emphasis. ## Implementation Strategy Define all colors as CSS custom properties with two value sets. Use `prefers-color-scheme: dark` as the default and provide a manual toggle that stores preference in localStorage. Apply the class to the `<html>` element before first paint to prevent FOUC. ### Color Accessibility and WCAG Contrast Checking Approximately 300 million people worldwide have color vision deficiency. Designing with accessible contrast ratios ensures your content is readable by everyone, not just users with typical vision. - URL: https://peasydesign.com/guides/color-accessibility-contrast-checking/ - Category: How-To - Reading time: 1 min - Words: 269 Key takeaways: - The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colors: - The contrast ratio formula compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). - Light gray text (#999) on white (#FFF) has a ratio of only 2.85:1 — fails AA - Beyond contrast ratios, avoid conveying information through color alone. ## Understanding WCAG Contrast Requirements The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colors: | Level | Normal Text | Large Text | |-------|-------------|------------| | AA | 4.5:1 | 3:1 | | AAA | 7:1 | 4.5:1 | Large text is defined as 18px bold or 24px regular. Most body text falls under normal text rules. ## How Contrast Ratios Work The contrast ratio formula compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Luminance is calculated by converting sRGB values to linear light and applying weighted coefficients: 0.2126R + 0.7152G + 0.0722B. ## Common Accessibility Failures - Light gray text (#999) on white (#FFF) has a ratio of only 2.85:1 — fails AA - Placeholder text in forms is often too faint - Colored text on colored backgrounds (e.g., orange on red) may pass hue contrast but fail luminance contrast - Gradients and images behind text create inconsistent contrast across the text span ## Color Blindness Considerations Beyond contrast ratios, avoid conveying information through color alone. Red/green indicators should include icons or text labels. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, with deuteranopia (red-green) being the most common. ## Practical Workflow 1. Choose background and text colors 2. Check the contrast ratio with a tool 3. If below 4.5:1, darken the text or lighten the background until the ratio passes 4. Simulate color blindness (protanopia, deuteranopia, tritanopia) and verify readability 5. Test with a screen reader to ensure non-visual access to all information ### Batch Image Processing: Automating Resize, Convert, and Optimize Processing hundreds of images one by one is tedious and error-prone. A well-designed batch workflow handles resizing, format conversion, and optimization in a single pass with consistent results. - URL: https://peasydesign.com/guides/batch-image-processing-workflow/ - Category: How-To - Reading time: 2 min - Words: 336 Key takeaways: - E-commerce catalogs, photography portfolios, and content-heavy websites routinely deal with hundreds or thousands of images. - Before processing, decide on your target specs. - Process images in parallel — modern CPUs can handle 4-8 simultaneous image operations. - Resize — Scale to target dimensions (always downscale from the original, never upscale a previously downsized version) 4. - If a file fails, log the error and continue — never let one bad image stop a 500-image batch. ## Why Batch Processing Matters E-commerce catalogs, photography portfolios, and content-heavy websites routinely deal with hundreds or thousands of images. Manual processing at this scale introduces inconsistencies — different compression levels, mismatched dimensions, and forgotten optimizations. Batch processing ensures every image meets the same quality standard. ## Designing a Pipeline ### Step 1: Define Output Specifications Before processing, decide on your target specs. For each image, you might need multiple variants: a thumbnail (150×150), a medium view (800×600), and a full-size version (2400×1600). Define the output format (WebP for web, JPEG for email), quality level (80-85 for web, 95+ for print), and naming convention (`product-{id}-{size}.webp`). ### Step 2: Input Validation Filter incoming files before processing. Check file type (reject non-images), minimum resolution (skip images too small to resize up), color profile (convert CMYK to sRGB for web), and file integrity (skip corrupted files gracefully rather than halting the entire batch). ### Step 3: Processing Order The order of operations matters. A reliable sequence is: 1. **Read** — Load the source image and extract metadata 2. **Color correct** — Convert color profiles if needed 3. **Resize** — Scale to target dimensions (always downscale from the original, never upscale a previously downsized version) 4. **Sharpen** — Apply subtle unsharp mask after resize (resizing softens images) 5. **Optimize** — Compress to the target format and quality 6. **Write** — Save with the correct naming convention ### Step 4: Error Handling and Logging Log every processed file with its input size, output size, and any warnings. If a file fails, log the error and continue — never let one bad image stop a 500-image batch. Generate a summary report at the end listing successes, failures, and total size savings. ## Performance Tips Process images in parallel — modern CPUs can handle 4-8 simultaneous image … ### PDF/A for Long-Term Archiving: Standards and Best Practices PDF/A is an ISO-standardized subset of PDF designed for digital preservation. Government agencies, legal firms, and healthcare organizations use PDF/A to ensure documents remain readable decades from now without special software. - URL: https://peasydesign.com/guides/pdf-a-archiving-standards-guide/ - Category: Best Practice - Reading time: 2 min - Words: 362 Key takeaways: - Standard PDFs can reference external fonts, use proprietary encryption, embed JavaScript, and link to external resources. - For most archiving needs, PDF/A-2b is the best choice. - Every font used in the document must be fully embedded — not just referenced or subsetted. - After creating a PDF/A file, always validate it against the target standard. - ## Key Requirements ### Embedded Fonts Every font used in the document must be fully embedded — not just referenced or subsetted. ## What Makes PDF/A Different Standard PDFs can reference external fonts, use proprietary encryption, embed JavaScript, and link to external resources. Any of these dependencies can break over time — a font gets discontinued, an encryption standard becomes unsupported, or a linked resource disappears. PDF/A eliminates these risks by requiring complete self-containment. ## PDF/A Conformance Levels | Level | Standard | Key Requirements | |-------|----------|-------------------| | PDF/A-1a | ISO 19005-1 | Full text extraction, logical structure tags, Unicode mapping | | PDF/A-1b | ISO 19005-1 | Visual reproduction only (no structure requirements) | | PDF/A-2b | ISO 19005-2 | Adds JPEG 2000, transparency, layers, PDF attachments | | PDF/A-2u | ISO 19005-2 | Like 2b plus Unicode text mapping | | PDF/A-3b | ISO 19005-3 | Allows embedding any file type (XML, CSV, CAD) | ### Choosing the Right Level For most archiving needs, **PDF/A-2b** is the best choice. It supports modern PDF features (transparency, JPEG 2000) while maintaining broad compatibility. Use PDF/A-1b when maximum compatibility with older validators is required. Choose PDF/A-3b when you need to embed source data files alongside the rendered document. ## Key Requirements ### Embedded Fonts Every font used in the document must be fully embedded — not just referenced or subsetted. This ensures the text renders correctly even if the font is no longer available. Font embedding typically increases file size by 200-500 KB per font family. ### No External Dependencies PDF/A files cannot contain links to external content, embedded multimedia requiring external codecs, JavaScript, or executable content. All resources must be contained within the file itself. ### Color Management All colors must be specified in a device-independent color space (ICC profiles must be embedded). RGB and CMYK colors without profiles are not permitted — this ensures colors render consistently regardless of the viewing … ### Creating Fillable PDF Forms: A Step-by-Step Guide Fillable PDF forms replace printed forms that must be filled out by hand. Properly designed PDF forms include text fields, checkboxes, dropdowns, and validation rules that guide users and ensure data consistency. - URL: https://peasydesign.com/guides/creating-fillable-pdf-forms-guide/ - Category: How-To - Reading time: 2 min - Words: 381 Key takeaways: - Despite the rise of web forms, PDF forms remain essential in industries that require offline access, legal signatures, and standardized document formats. - Text fields are the most common form element. - Set the tab order to follow the visual layout — top to bottom, left to right. - PDF forms support JavaScript-based validation and calculation. - ## Why PDF Forms Still Matter Despite the rise of web forms, PDF forms remain essential in industries that require offline access, legal signatures, and standardized document formats. ## Why PDF Forms Still Matter Despite the rise of web forms, PDF forms remain essential in industries that require offline access, legal signatures, and standardized document formats. Government applications, insurance claims, tax forms, and medical intake documents all rely heavily on PDF forms. ## Form Field Types ### Text Fields Text fields are the most common form element. Configure them with: - **Max length** — Prevent overly long entries (e.g., 10 characters for phone numbers) - **Format** — Number, date, percentage, or custom format mask - **Default value** — Pre-fill with common answers to speed completion - **Multi-line** — Enable for address fields and comments - **Required** — Mark mandatory fields to prevent incomplete submissions ### Checkboxes and Radio Buttons Use checkboxes for multiple-selection questions (select all that apply) and radio buttons for single-selection questions (choose one). Group related radio buttons so selecting one automatically deselects others in the group. ### Dropdown Lists Dropdowns work well for fields with a predefined set of options (country, state, department). They prevent typos and ensure consistent data. For lists with more than 20 items, consider adding a search/filter capability or splitting into cascading dropdowns. ### Signature Fields Digital signature fields allow users to sign the form electronically. Place signature fields clearly at the bottom of the form with a visible label. Signature fields can be configured to lock the form after signing, preventing further modifications. ## Layout Best Practices ### Tab Order Set the tab order to follow the visual layout — top to bottom, left to right. Users expect to press Tab and move to the next logical field. Poor tab order is the single most common complaint about PDF forms and makes them inaccessible to keyboard-only users. ### Field Sizing Size text fields to match expected input length. A field … ### Color Psychology in UI Design: How Color Affects User Behavior Color choices influence trust, urgency, calmness, and conversion rates. Understanding the psychological impact of color helps you design interfaces that align with your product's goals. - URL: https://peasydesign.com/guides/color-psychology-ui-design/ - Category: Comparison - Reading time: 1 min - Words: 299 Key takeaways: - Color perception is partly cultural and partly biological. - A/B tests consistently show that button color matters less than button contrast. - Blue dominates fintech, healthcare, and SaaS because it communicates reliability. - Use color to reinforce meaning, not replace it — never rely on color alone to convey status ## Color and Emotion Color perception is partly cultural and partly biological. While red universally signals alertness (it raises heart rate), its association with danger versus celebration varies by culture. Design decisions should consider your target audience's cultural context. ## Common Color Associations in Western UI | Color | Positive Associations | UI Use | |-------|----------------------|--------| | Blue | Trust, stability, calm | Banking, healthcare, corporate | | Green | Growth, success, nature | Finance, eco-brands, success states | | Red | Energy, urgency, passion | Sale banners, error states, CTAs | | Orange | Warmth, enthusiasm | Free trials, creative platforms | | Purple | Luxury, creativity | Premium tiers, design tools | | Yellow | Optimism, attention | Warnings, highlights | | Black | Sophistication, power | Luxury brands, dark themes | ## Color and Conversion A/B tests consistently show that button color matters less than button contrast. A red button on a blue page outperforms a blue button because it stands out, not because red is inherently more clickable. The lesson: make your primary CTA the most visually prominent element, regardless of hue. ## Trust and Credibility Blue dominates fintech, healthcare, and SaaS because it communicates reliability. If your product handles sensitive data (banking, health records, legal documents), lean toward cool colors. Warm, saturated palettes work better for creative tools, social platforms, and entertainment. ## Practical Guidelines - Use color to reinforce meaning, not replace it — never rely on color alone to convey status - Limit your palette to two to three semantic colors (primary, secondary, accent) to avoid decision fatigue - Test with users from your target demographic — color preferences vary by age, gender, and culture - Remember that 4-8% of users have color vision deficiency and may not perceive your intended associations ### How to Create Open Graph Images for Social Sharing Open Graph images determine how your links appear when shared on social media. A well-designed OG image can dramatically increase click-through rates compared to a default or missing preview. - URL: https://peasydesign.com/guides/create-open-graph-images/ - Category: How-To - Reading time: 1 min - Words: 210 Key takeaways: - When you share a link on Facebook, LinkedIn, Twitter, or Slack, the platform fetches the `og:image` meta tag and displays it as a preview. - Recommended size**: 1200x630 pixels (1.91:1 aspect ratio). - OG images are often displayed small (300px wide on mobile feeds). - For sites with many pages, generate OG images programmatically using tools like Puppeteer, Playwright, or Pillow. - ### Visual Hierarchy Place the most important information (headline) in the top-center area. ## What Are OG Images? When you share a link on Facebook, LinkedIn, Twitter, or Slack, the platform fetches the `og:image` meta tag and displays it as a preview. This preview image is often the first thing people see. ## Technical Requirements ### Size and Format - **Recommended size**: 1200x630 pixels (1.91:1 aspect ratio). - **Minimum size**: 600x315 pixels. - **File format**: JPEG or PNG (PNG for text-heavy images). - **File size**: Under 8 MB (smaller is better for loading speed). ### HTML Markup Include these meta tags in your page's `<head>`: ```html <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> ``` ## Design Best Practices ### Text Readability OG images are often displayed small (300px wide on mobile feeds). Use large, bold text with high contrast. Keep text to 5-10 words maximum. ### Brand Consistency Include your logo, brand colors, and consistent typography across all OG images. This builds recognition in social feeds. ### Visual Hierarchy Place the most important information (headline) in the top-center area. Some platforms crop the bottom of OG images, so avoid critical content there. ## Dynamic OG Images For sites with many pages, generate OG images programmatically using tools like Puppeteer, Playwright, or Pillow. Template your design and inject page-specific titles and descriptions. ### Typography Pairing: How to Combine Fonts Effectively The right font pairing creates visual hierarchy and personality in your designs. This guide covers pairing principles, common mistakes, and proven font combinations for web and print projects. - URL: https://peasydesign.com/guides/typography-pairing-guide/ - Category: How-To - Reading time: 1 min - Words: 242 Key takeaways: - Good typography pairing creates contrast and hierarchy. - The most reliable pairing strategy. - Too many fonts**: Limit to 2-3 fonts maximum. More creates visual chaos. - Each font file adds 20-100 KB to page weight. ## Font Pairing Fundamentals Good typography pairing creates contrast and hierarchy. The key principle is to combine fonts that are different enough to create visual interest but share enough DNA to feel cohesive. ## Pairing Strategies ### Serif + Sans-Serif The most reliable pairing strategy. Use a serif for headings and sans-serif for body (or vice versa). The structural difference creates natural contrast. **Classic pairs:** - Playfair Display (heading) + Source Sans 3 (body) - Merriweather (heading) + Open Sans (body) - Lora (heading) + Inter (body) ### Same Superfamily Fonts designed as part of the same family (e.g., Roboto and Roboto Slab) are guaranteed to work together because they share metrics and proportions. ### Contrast in Weight Even within a single font family, using a bold weight for headings and regular for body creates sufficient hierarchy. This approach minimizes font file downloads and ensures perfect consistency. ## Common Mistakes - **Too many fonts**: Limit to 2-3 fonts maximum. More creates visual chaos. - **Too similar**: Fonts that are almost-but-not-quite the same look like mistakes. - **Ignoring x-height**: Fonts with very different x-heights look mismatched at the same size. - **Forgetting weights**: Loading 5+ weights of each font degrades page performance. ## Web Font Performance Each font file adds 20-100 KB to page weight. Optimize by loading only the weights you use, using `font-display: swap` for visible text during loading, and considering variable fonts that contain all weights in a single file. ### Flexbox vs CSS Grid: A Practical Comparison Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts. - URL: https://peasydesign.com/guides/flexbox-vs-css-grid/ - Category: Comparison - Reading time: 1 min - Words: 231 Key takeaways: - The fundamental difference: Flexbox handles layout in one direction (row or column), while Grid handles layout in two dimensions (rows and columns simultaneously). - Flexbox excels at distributing space along a single axis: - Grid is ideal for two-dimensional layouts: - The most effective layouts often use both: Grid for the page structure and Flexbox for component-level alignment within grid cells. ## One-Dimensional vs Two-Dimensional The fundamental difference: Flexbox handles layout in one direction (row or column), while Grid handles layout in two dimensions (rows and columns simultaneously). ## When to Use Flexbox Flexbox excels at distributing space along a single axis: - Navigation bars - Button groups - Centering content vertically and horizontally - Aligning items within a row or column - Components where content size determines layout ## When to Use CSS Grid Grid is ideal for two-dimensional layouts: - Page-level layout (header, sidebar, main, footer) - Card grids with consistent sizing - Dashboard layouts - Overlapping elements - Layouts where the grid structure is more important than the content size ## Side-by-Side Comparison | Feature | Flexbox | CSS Grid | |---------|---------|----------| | Dimensions | 1D (row OR column) | 2D (rows AND columns) | | Content-driven | Yes | Optional | | Gap support | Yes | Yes | | Overlapping items | Difficult | Easy | | Auto-placement | Row/column only | Both directions | | Named areas | No | Yes | | Subgrid | No | Yes | ## Combining Both The most effective layouts often use both: Grid for the page structure and Flexbox for component-level alignment within grid cells. A card grid might use CSS Grid for the overall layout and Flexbox inside each card to align its title, description, and action button. ### PDF vs DOCX vs ODT: Choosing the Right Document Format Each document format serves different purposes. PDF excels at preserving layout, DOCX is ideal for collaborative editing, and ODT offers open-source compatibility. This comparison helps you choose the right format for your workflow. - URL: https://peasydesign.com/guides/pdf-vs-docx-vs-odt/ - Category: Comparison - Reading time: 1 min - Words: 254 Key takeaways: - Choosing the right document format depends on your workflow stage. - PDF (Portable Document Format) was designed by Adobe to present documents consistently across all devices and operating systems. - Microsoft Word's DOCX format is built for editing. - OpenDocument Text (ODT) is an open standard maintained by OASIS. ## Format Overview Choosing the right document format depends on your workflow stage. A document that's still being edited needs a different format than one that's being distributed to clients. ## PDF: The Final Format PDF (Portable Document Format) was designed by Adobe to present documents consistently across all devices and operating systems. Once a document is converted to PDF, its layout is fixed — fonts, images, and spacing appear identical whether viewed on Windows, macOS, Linux, or mobile devices. **Best for:** Final distribution, legal documents, invoices, forms, print-ready files. ## DOCX: The Editing Format Microsoft Word's DOCX format is built for editing. It supports track changes, comments, real-time collaboration (via OneDrive/SharePoint), and complex formatting with styles and templates. However, layout can shift between different versions of Word or different operating systems. **Best for:** Drafts, collaborative writing, templates, documents that change frequently. ## ODT: The Open Standard OpenDocument Text (ODT) is an open standard maintained by OASIS. It's natively supported by LibreOffice, Google Docs, and many other applications. ODT avoids vendor lock-in and is often required by government agencies. **Best for:** Cross-platform compatibility, government submissions, long-term archival. ## Comparison Table | Feature | PDF | DOCX | ODT | |---------|-----|------|-----| | Layout consistency | Excellent | Variable | Variable | | Editing support | Limited | Excellent | Good | | File size | Medium | Small | Small | | Open standard | Yes (ISO 32000) | Partially | Yes (ISO 26300) | | Mobile support | Excellent | Good | Fair | ### Lorem Ipsum Alternatives: Realistic Placeholder Content Lorem Ipsum has been the standard placeholder text since the 1500s, but realistic placeholder content produces better design feedback. This guide covers alternatives and best practices for prototype content. - URL: https://peasydesign.com/guides/lorem-ipsum-alternatives/ - Category: Best Practice - Reading time: 1 min - Words: 230 Key takeaways: - Lorem Ipsum looks like real text but conveys no meaning. - Real headlines range from 3 to 15 words. - Use text that matches your content domain: ## The Problem with Lorem Ipsum Lorem Ipsum looks like real text but conveys no meaning. This creates a dangerous illusion — designs that look great with placeholder text may fail with real content of different lengths, languages, or complexity. ## Why Realistic Content Matters ### Length Variations Real headlines range from 3 to 15 words. Real names range from "Li" to "Wolfeschlegelsteinhausenbergerdorff." Lorem Ipsum doesn't expose these edge cases. ### Content Hierarchy Real content has meaning that affects visual hierarchy. A product description with technical specs reads differently than a lifestyle blog post. Testing with realistic content reveals hierarchy problems early. ## Alternatives to Lorem Ipsum ### Domain-Specific Placeholder Text Use text that matches your content domain: - Legal: Sample terms and conditions. - Medical: Anonymized patient summaries. - E-commerce: Realistic product descriptions. - News: Public domain articles. ### Random Data Generators Generate realistic fake data for prototyping: - Names, addresses, phone numbers. - Email addresses and usernames. - Dates, currencies, quantities. ## Best Practices 1. **Use real content early**: Get actual content into designs as soon as possible. 2. **Test extremes**: Include very short and very long content in your tests. 3. **Include numbers**: Mix text with numbers, dates, and special characters. 4. **Consider i18n**: Test with languages that use different scripts, RTL text, and CJK characters. 5. **Mark placeholders clearly**: Ensure nobody ships Lorem Ipsum to production. ### How to Remove Image Backgrounds Effectively Removing backgrounds from product photos, portraits, and logos is a frequent task in design and e-commerce. This guide covers techniques for clean cutouts using both automated tools and manual approaches. - URL: https://peasydesign.com/guides/how-to-remove-image-backgrounds/ - Category: How-To - Reading time: 1 min - Words: 215 Key takeaways: - Clean background removal is essential for e-commerce product photos (Amazon requires white backgrounds), design compositing, social media content, and creating transparent PNGs for overlays. - Modern AI models can detect foreground subjects and remove backgrounds in seconds. - Hair, fur, and translucent objects like glass or fabric are the most challenging subjects for background removal. - After removing the background, save in a format that supports transparency: - ## Background Removal Use Cases Clean background removal is essential for e-commerce product photos (Amazon requires white backgrounds), design compositing, social media content, and creating transparent PNGs for overlays. ## Background Removal Use Cases Clean background removal is essential for e-commerce product photos (Amazon requires white backgrounds), design compositing, social media content, and creating transparent PNGs for overlays. ## Automated vs Manual Approaches ### Automated (AI-Based) Modern AI models can detect foreground subjects and remove backgrounds in seconds. They work best with: - Clear separation between subject and background - Well-lit photographs - Subjects with defined edges ### Manual Approaches When automated tools struggle, manual techniques provide more control: - **Color keying**: Works well when the background is a single, uniform color. - **Edge detection**: Uses contrast differences to find subject boundaries. - **Masking**: Most precise but most time-consuming. ## Dealing with Difficult Edges Hair, fur, and translucent objects like glass or fabric are the most challenging subjects for background removal. These elements have semi-transparent edges that blend with the background. **Tips for difficult edges:** - Use edge refinement settings to soften the transition. - Apply a slight feather (1-2 pixels) to avoid hard, unnatural cutout lines. - For hair, look for tools that support trimap-based matting. ## Output Formats After removing the background, save in a format that supports transparency: - **PNG**: Universal support, larger file size. - **WebP**: Better compression than PNG, 97%+ browser support. - **AVIF**: Best compression, growing browser support. ### Best Practices for Dark Mode Design Dark mode is no longer optional — users expect it. Designing an effective dark theme requires more than inverting colors. This guide covers contrast, elevation, color adaptation, and implementation strategies. - URL: https://peasydesign.com/guides/dark-mode-design-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 222 Key takeaways: - Simply inverting all colors produces harsh, unreadable results. - In light mode, shadows indicate elevation. - Saturated colors that work on white backgrounds can vibrate or cause eye strain on dark backgrounds. - Test dark mode at various times of day and in different lighting conditions. ## Dark Mode Is Not Color Inversion Simply inverting all colors produces harsh, unreadable results. Effective dark mode requires thoughtful adaptation of every color in your palette. ## Surface Hierarchy In light mode, shadows indicate elevation. In dark mode, lighter surfaces appear elevated. Material Design's dark theme uses surface colors from #121212 (lowest) to progressively lighter values for elevated elements. | Elevation | Surface Color | Usage | |-----------|--------------|-------| | 0dp | #121212 | Background | | 1dp | #1E1E1E | Cards | | 4dp | #242424 | Navigation | | 8dp | #2C2C2C | Modals | ## Color Adaptation ### Desaturate Brand Colors Saturated colors that work on white backgrounds can vibrate or cause eye strain on dark backgrounds. Reduce saturation by 10-20% and increase lightness slightly for dark mode variants. ### Reduce White Intensity Pure white (#FFFFFF) on dark backgrounds creates excessive contrast that causes eye fatigue. Use off-white values like #E0E0E0 or #F1F5F9 for body text, reserving brighter whites for headings. ## Implementation Approaches 1. **CSS Custom Properties**: Define color tokens that change between themes. 2. **Tailwind dark: variant**: Use `dark:bg-slate-900` classes. 3. **CSS prefers-color-scheme**: Respect system preference automatically. ## Testing Test dark mode at various times of day and in different lighting conditions. What looks good in a dimly lit room may be too dark in bright sunlight. ### CSS Custom Properties (Variables) Best Practices CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications. - URL: https://peasydesign.com/guides/css-custom-properties-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 193 Key takeaways: - CSS custom properties (often called CSS variables) are named values that you define and reuse throughout your stylesheets. - Define variables with `--` prefix on any element. - Adopt a consistent naming scheme from the start: - Custom properties make dark mode implementation clean: - Custom properties trigger style recalculation when changed. ## What Are CSS Custom Properties? CSS custom properties (often called CSS variables) are named values that you define and reuse throughout your stylesheets. Unlike preprocessor variables (Sass/Less), custom properties are live in the browser and can be changed at runtime with JavaScript. ## Defining and Using Variables Define variables with `--` prefix on any element. The `:root` selector is conventional for global variables: ```css :root { --color-primary: #3B82F6; --spacing-md: 1rem; --font-size-base: 1rem; } ``` Reference with `var()` and optionally provide a fallback: `color: var(--color-primary, blue);` ## Naming Conventions Adopt a consistent naming scheme from the start: - **Semantic names**: `--color-primary`, `--color-danger` (what it means). - **Descriptive names**: `--blue-500`, `--red-600` (what it looks like). - **Two-tier system**: Map descriptive to semantic for maximum flexibility. ## Dark Mode with Custom Properties Custom properties make dark mode implementation clean: ```css :root { --bg: #ffffff; --text: #1a1a1a; } .dark { --bg: #0f172a; --text: #f1f5f9; } ``` All components using these variables automatically adapt when the `.dark` class is toggled. ## Performance Considerations Custom properties trigger style recalculation when changed. Avoid changing many variables simultaneously during animations. For animated properties, consider using `@property` to enable GPU-accelerated transitions. ### How to Build Responsive Layouts Without Media Queries Modern CSS provides intrinsic sizing techniques that create responsive layouts without breakpoint-based media queries. Learn how to use clamp(), min(), max(), container queries, and fluid grids for truly adaptive designs. - URL: https://peasydesign.com/guides/responsive-layouts-without-media-queries/ - Category: How-To - Reading time: 1 min - Words: 204 Key takeaways: - Traditional responsive design relies on media queries with fixed breakpoints. - The `clamp()` function sets a value with a minimum, preferred, and maximum: - Apply the same technique to padding, margins, and gaps: - CSS Grid's `auto-fit` and `minmax()` create grids that automatically adjust column count based on available space: - Container queries let elements respond to their container's size rather than the viewport. ## Beyond Breakpoints Traditional responsive design relies on media queries with fixed breakpoints. Modern CSS offers intrinsic approaches where elements respond to their own size rather than the viewport. ## Fluid Typography with clamp() The `clamp()` function sets a value with a minimum, preferred, and maximum: `font-size: clamp(1rem, 2.5vw, 2rem);` This creates smoothly scaling text that never gets smaller than 1rem or larger than 2rem, with the preferred size based on viewport width. ## Fluid Spacing Apply the same technique to padding, margins, and gaps: `padding: clamp(1rem, 3vw, 3rem);` ## Intrinsic Grid Layouts CSS Grid's `auto-fit` and `minmax()` create grids that automatically adjust column count based on available space: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));` This creates as many 280px-minimum columns as will fit, expanding each to fill remaining space. ## Container Queries Container queries let elements respond to their container's size rather than the viewport. This is ideal for reusable components that may appear in different layout contexts (main content, sidebar, modal). ```css .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { flex-direction: row; } } ``` ## When to Still Use Media Queries Media queries remain useful for major layout shifts (e.g., showing/hiding a sidebar), dark mode preference detection, and print styles. ### How to Generate Lorem Ipsum Text Generate placeholder text for design mockups, wireframes, and prototypes using various Lorem Ipsum styles. - URL: https://peasydesign.com/guides/how-to-generate-lorem-ipsum/ - Category: How-To - Reading time: 1 min - Words: 199 ## Generating Lorem Ipsum Text Lorem Ipsum has been the industry's standard dummy text since the 1500s. Modern generators offer far more than the classic Latin passage, providing options for different languages, themed text, and structured content blocks. ### Choosing the Right Style Classic Lorem Ipsum works well for formal design presentations where you want text that clearly reads as placeholder. For more natural-looking mockups, consider generators that produce text matching the cadence and word length of your target language. Some generators also offer "hipster ipsum" or "bacon ipsum" variants that add levity to internal reviews. ### Controlling Output Most generators let you specify paragraph count, sentence count, or word count. For responsive design testing, generate text blocks of varying lengths — short (50 words), medium (150 words), and long (400+ words) — to see how your layout handles different content volumes. This reveals overflow issues, truncation problems, and spacing inconsistencies. ### Best Practices Always replace placeholder text before publishing. Use a lint step or CI check that flags common Lorem Ipsum strings. For accessibility testing, use real content samples rather than placeholder text, since screen readers will attempt to read Lorem Ipsum aloud, producing confusing results for testers. ### How to Crop Images to Exact Dimensions Cropping images to specific pixel dimensions is essential for web design, social media, and print. Learn techniques for precise, non-destructive cropping. - URL: https://peasydesign.com/guides/how-to-crop-images-exact-dimensions/ - Category: How-To - Reading time: 1 min - Words: 185 Key takeaways: - Platforms have specific size requirements: Instagram posts are 1080×1080, YouTube thumbnails are 1280×720, and LinkedIn banners are 1584×396. - Aspect ratio (like 16:9 or 4:3) defines the shape. - When cropping, keep important content along the thirds grid lines. - For product photography or social media content, you often need dozens of images cropped to the same size. - Non-destructive cropping records the crop region without permanently deleting pixel data. ## Why Exact Dimensions Matter Platforms have specific size requirements: Instagram posts are 1080×1080, YouTube thumbnails are 1280×720, and LinkedIn banners are 1584×396. Uploading images at incorrect sizes causes automatic cropping that may cut off important content. ## Aspect Ratio vs Pixel Dimensions Aspect ratio (like 16:9 or 4:3) defines the shape. Pixel dimensions define the exact size. A 1920×1080 image and a 1280×720 image share the same 16:9 ratio but different sizes. Always verify the platform needs a specific pixel size, not just a ratio. ## The Rule of Thirds in Cropping When cropping, keep important content along the thirds grid lines. Position key elements at intersections of the grid for visually balanced compositions. ## Batch Cropping For product photography or social media content, you often need dozens of images cropped to the same size. Batch cropping applies identical crop settings to multiple images, ensuring consistency across your content. ## Non-Destructive Cropping Non-destructive cropping records the crop region without permanently deleting pixel data. This lets you adjust the crop later. Browser-based tools typically apply destructive crops (creating a new image), so save your originals. ### How to Create the Perfect Open Graph Image Open Graph images are the visual preview when links are shared on social media. Learn optimal dimensions, design tips, and testing procedures. - URL: https://peasydesign.com/guides/how-to-create-perfect-og-image/ - Category: How-To - Reading time: 1 min - Words: 182 Key takeaways: - The standard Open Graph image size is 1200×630 pixels (1.91:1 aspect ratio). - OG images should be readable at small sizes — they often appear as tiny thumbnails in link previews. - Different platforms crop OG images differently. - Include the page title and your brand name/logo. - Test OG images using platform-specific tools: ## Recommended Dimensions The standard Open Graph image size is 1200×630 pixels (1.91:1 aspect ratio). This works across Facebook, LinkedIn, Twitter, Slack, Discord, and iMessage. Using this single size covers all major platforms. ## Design Principles OG images should be readable at small sizes — they often appear as tiny thumbnails in link previews. Use large text (minimum 60px), high contrast, and bold visuals. Avoid fine details that disappear at thumbnail scale. ## Safe Zones Different platforms crop OG images differently. Keep all important content within the central 80% of the image. Text and logos near edges may be cropped on some platforms. ## Text on Images Include the page title and your brand name/logo. Use 2-3 lines of text maximum. White or light text on a dark overlay works well for readability. Avoid placing text where it might be obscured by platform UI elements. ## Testing Test OG images using platform-specific tools: - Facebook: Sharing Debugger - Twitter: Card Validator - LinkedIn: Post Inspector Clear the platform's cache after updating images — old images may persist for days unless manually invalidated. ### How to Build a CSS Color Palette Generator Creating consistent color palettes is essential for design systems. Learn how to generate HSL-based palettes and CSS custom property scales. - URL: https://peasydesign.com/guides/how-to-build-css-color-palette/ - Category: How-To - Reading time: 1 min - Words: 171 Key takeaways: - HSL (Hue, Saturation, Lightness) is the most intuitive color model for palette generation. - A standard palette includes shades from 50 (lightest) to 950 (darkest), following the Tailwind CSS convention. - Map palette values to semantic tokens: `--color-primary`, `--color-danger`, `--color-success`. - OKLCH improves on HSL by producing perceptually uniform scales — each lightness step looks equally different to human eyes. - After generating a palette, verify that text/background combinations meet WCAG contrast requirements. ## HSL: The Designer's Color Model HSL (Hue, Saturation, Lightness) is the most intuitive color model for palette generation. By keeping hue constant and varying lightness from 5% to 95%, you create a consistent shade scale from darkest to lightest. ## Generating a 10-Step Scale A standard palette includes shades from 50 (lightest) to 950 (darkest), following the Tailwind CSS convention. Each step reduces lightness by roughly 8-10 percentage points. ## Semantic Color Tokens Map palette values to semantic tokens: `--color-primary`, `--color-danger`, `--color-success`. This abstraction lets you change the entire palette by updating a single hue value. ## OKLCH: Better Perceptual Uniformity OKLCH improves on HSL by producing perceptually uniform scales — each lightness step looks equally different to human eyes. HSL scales can appear uneven because human perception of lightness is nonlinear. ## Accessibility Verification After generating a palette, verify that text/background combinations meet WCAG contrast requirements. Light backgrounds need dark text (shade 900 on shade 50) and vice versa. Aim for at least 4.5:1 contrast ratio for normal text. ### Figma vs Canva vs Adobe XD: Design Tool Comparison Choosing the right design tool depends on your skill level, team size, and project type. Compare the leading design tools for different use cases. - URL: https://peasydesign.com/guides/figma-vs-canva-vs-adobe-xd/ - Category: Comparison - Reading time: 1 min - Words: 204 Key takeaways: - Figma is browser-based and built for team collaboration. - Canva targets non-designers with templates, drag-and-drop editing, and a massive asset library. - XD integrates with Photoshop, Illustrator, and other Adobe products. - Choose Figma for UI/UX design and team collaboration. ## Figma: The Collaborative Standard Figma is browser-based and built for team collaboration. Multiple designers can work on the same file simultaneously. Its component system, auto layout, and prototyping make it the industry standard for UI/UX design. ## Canva: The Accessible Option Canva targets non-designers with templates, drag-and-drop editing, and a massive asset library. It's ideal for social media graphics, presentations, and marketing materials. Professional design work is limited by its simpler toolset. ## Adobe XD: The Adobe Ecosystem XD integrates with Photoshop, Illustrator, and other Adobe products. It offers powerful prototyping with voice triggers and 3D transforms. However, Adobe is shifting focus to Figma after the acquisition. ## Comparison | Feature | Figma | Canva | Adobe XD | |---------|-------|-------|----------| | Price | Free tier | Free tier | CC subscription | | Learning curve | Medium | Easy | Medium | | Collaboration | Excellent | Good | Good | | Components | Powerful | Templates | Good | | Best for | UI/UX teams | Marketing | Adobe users | ## Making the Choice Choose Figma for UI/UX design and team collaboration. Choose Canva for quick marketing materials without design skills. Choose XD only if deeply invested in the Adobe ecosystem. ### How to Add Text Overlays to Images Adding text to images creates social media graphics, memes, quotes, and promotional materials. Learn typography and positioning best practices. - URL: https://peasydesign.com/guides/how-to-add-text-overlays-images/ - Category: How-To - Reading time: 1 min - Words: 178 Key takeaways: - Sans-serif fonts (Arial, Helvetica, Inter) work best for short, impactful text overlays. - Text must contrast with the background image. - Place text where it doesn't obscure the image's subject. - Use size, weight, and color to create hierarchy. - Save text-overlay images as PNG if the text needs to be sharp and crisp. ## Choosing the Right Font Sans-serif fonts (Arial, Helvetica, Inter) work best for short, impactful text overlays. They're readable at small sizes and photograph well. Avoid decorative fonts that sacrifice legibility for style. ## Text Contrast and Readability Text must contrast with the background image. Common techniques include adding a semi-transparent dark overlay behind the text, using a text shadow or stroke, or placing text over darker or simpler areas of the image. ## Text Positioning Place text where it doesn't obscure the image's subject. Bottom-center works for captions. Upper-third works for headlines. Avoid placing text directly over faces or key product features. ## Typography Hierarchy Use size, weight, and color to create hierarchy. The main message should be the largest element. Supporting text should be smaller and potentially a different color. Limit text overlays to 2-3 levels of hierarchy. ## Export Considerations Save text-overlay images as PNG if the text needs to be sharp and crisp. JPEG compression can create artifacts around text edges. For web use, WebP offers a good balance of quality and file size. ### Tailwind CSS vs Bootstrap vs Vanilla CSS Choosing a CSS approach affects development speed, bundle size, and design flexibility. Compare utility-first, component-based, and custom CSS strategies. - URL: https://peasydesign.com/guides/tailwind-vs-bootstrap-vs-vanilla-css/ - Category: Comparison - Reading time: 1 min - Words: 202 Key takeaways: - Writing CSS from scratch gives maximum control. - Bootstrap provides pre-built components (buttons, cards, modals, navbars) with a consistent design language. - Tailwind provides utility classes like `flex`, `p-4`, `text-lg` that you compose directly in HTML. - Vanilla CSS for small projects or when you need precise control. ## Vanilla CSS Writing CSS from scratch gives maximum control. You define every style, naming convention, and structure. The downside is speed — building complex layouts takes longer, and consistency requires discipline. ## Bootstrap Bootstrap provides pre-built components (buttons, cards, modals, navbars) with a consistent design language. It's fast for prototyping and admin panels but produces 'Bootstrap-looking' sites unless heavily customized. ## Tailwind CSS Tailwind provides utility classes like `flex`, `p-4`, `text-lg` that you compose directly in HTML. It's faster than vanilla CSS for most developers and produces smaller CSS bundles through purging unused utilities. ## Comparison | Feature | Vanilla | Bootstrap | Tailwind | |---------|---------|-----------|----------| | Learning curve | CSS knowledge | Framework API | Utility classes | | Bundle size | Only what you write | 150KB+ | 10-30KB (purged) | | Customization | Unlimited | Theme variables | Config + arbitrary values | | Design uniqueness | High | Low | High | | Development speed | Slow | Fast | Fast | ## When to Choose Each Vanilla CSS for small projects or when you need precise control. Bootstrap for rapid prototyping and admin interfaces. Tailwind for production applications where you want both speed and design flexibility. ### CSS Container Queries vs Media Queries Container queries let components respond to their container's size instead of the viewport. Learn when to use each approach for responsive design. - URL: https://peasydesign.com/guides/css-container-queries-vs-media-queries/ - Category: Comparison - Reading time: 1 min - Words: 159 Key takeaways: - Media queries respond to the browser viewport width. - Container queries respond to the nearest containment context — the parent element's width. - Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). - Media queries**: Page-level layout, navigation breakpoints, font scaling. - Container queries require a containment context on the parent element. ## Media Queries: Viewport-Based Media queries respond to the browser viewport width. They work well for page-level layout changes but fail for reusable components that appear in containers of different widths on the same page. ## Container Queries: Component-Based Container queries respond to the nearest containment context — the parent element's width. A card component can show a horizontal layout in a wide sidebar and a vertical layout in a narrow sidebar, all on the same viewport. ## Browser Support Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, media queries remain the reliable fallback. ## When to Use Each - **Media queries**: Page-level layout, navigation breakpoints, font scaling. - **Container queries**: Reusable components, card layouts, widget sizing. ## Implementation Container queries require a containment context on the parent element. Use `container-type: inline-size` to create a size container, then query it with `@container (min-width: 400px) { ... }` inside child rules. ### How to Generate Color Palettes Programmatically Learn algorithmic approaches to generating harmonious color palettes for web design, data visualization, and branding. - URL: https://peasydesign.com/guides/how-to-generate-color-palettes-programmatically/ - Category: How-To - Reading time: 1 min - Words: 237 ## Programmatic Color Palette Generation Generating color palettes algorithmically produces consistent, harmonious results faster than manual selection. Understanding color theory mathematics lets you create palettes that work across different contexts. ### HSL-Based Generation Working in HSL (Hue, Saturation, Lightness) color space makes palette generation intuitive. To create a complementary palette, add 180° to the hue. For triadic harmony, add 120° intervals. Analogous palettes use 30° intervals. Keeping saturation and lightness consistent while varying hue produces naturally cohesive palettes. ### Perceptually Uniform Spaces HSL has a significant limitation: equal numerical steps don't produce equal perceptual differences. The OKLCH color space solves this — a 10-unit change in lightness looks like the same amount of change regardless of the hue. This matters especially for data visualization where viewers need to distinguish between similar values. ### Palette Expansion Once you have a base palette of 3-5 colors, expand it by generating tints (adding white) and shades (adding black) for each color. A typical design system needs 10 steps per color (50-900), where 500 is the base. Generate these by interpolating in OKLCH space to avoid the muddy grays that RGB interpolation produces. ### Accessibility Integration Every generated palette should be tested for WCAG contrast ratios. Pair each background color with foreground options that meet at least AA standards (4.5:1 for normal text). Automated generators should reject palettes where no text color meets contrast requirements against any of the background colors. ### UI Design System Best Practices Design systems ensure visual consistency and speed up development. Learn how to create and maintain a practical design system. - URL: https://peasydesign.com/guides/ui-design-system-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 159 Key takeaways: - A design system is a collection of reusable components, guidelines, and patterns that work together to create consistent user interfaces. - Design tokens are the smallest design decisions: colors, spacing values, font sizes, border radii. - Build components from simple to complex: atoms (buttons, inputs) → molecules (search bars, form fields) → organisms (navigation, forms) → templates (page layouts) → pages. - Every component needs documentation: what it does, when to use it, available variants, accessibility requirements, and code examples. - Assign ownership to a small team. ## What Is a Design System? A design system is a collection of reusable components, guidelines, and patterns that work together to create consistent user interfaces. It includes colors, typography, spacing, components, and interaction patterns. ## Start With Tokens Design tokens are the smallest design decisions: colors, spacing values, font sizes, border radii. Define them once, reference everywhere. Changes propagate automatically across all components. ## Component Hierarchy Build components from simple to complex: atoms (buttons, inputs) → molecules (search bars, form fields) → organisms (navigation, forms) → templates (page layouts) → pages. Each level composes the previous ones. ## Documentation Every component needs documentation: what it does, when to use it, available variants, accessibility requirements, and code examples. Without documentation, teams create duplicate components. ## Maintaining the System Assign ownership to a small team. Review component requests regularly. Deprecate components cleanly (mark as deprecated, provide migration path, remove after grace period). Run visual regression tests to catch unintended changes. ### How to Make Images Transparent (Remove Background) Transparent backgrounds let images blend seamlessly into any design. Learn techniques for removing backgrounds from product photos and portraits. - URL: https://peasydesign.com/guides/how-to-make-images-transparent/ - Category: How-To - Reading time: 1 min - Words: 185 Key takeaways: - Product photos on e-commerce sites, logos for presentations, portrait photos for ID cards, and design elements for compositing all require transparent backgrounds. - Modern background removal uses machine learning models trained on millions of images. - The quality of background removal depends heavily on edge handling. - Transparency requires formats that support alpha channels: - Product photography benefits most from background removal. ## When Transparency Is Needed Product photos on e-commerce sites, logos for presentations, portrait photos for ID cards, and design elements for compositing all require transparent backgrounds. Transparency is stored in the alpha channel of PNG or WebP formats. ## AI-Powered Background Removal Modern background removal uses machine learning models trained on millions of images. These models can distinguish foreground subjects from backgrounds with remarkable accuracy, handling complex edges like hair and fur. ## Edge Refinement The quality of background removal depends heavily on edge handling. Look for tools that produce smooth, natural edges without halos (light or dark outlines around the subject). Semi-transparent areas like hair wisps require special attention. ## Format Selection Transparency requires formats that support alpha channels: - **PNG**: Universal support, lossless quality, larger files. - **WebP**: 30% smaller than PNG, excellent browser support. - **AVIF**: Best compression, growing browser support. - **JPEG**: Does NOT support transparency — never use for transparent images. ## Common Use Cases Product photography benefits most from background removal. White-background product images are standard for Amazon, Shopify, and eBay listings. Transparent versions enable creative marketing materials. ### Accessible Color Contrast for UI Design Meet WCAG color contrast requirements for text, UI components, and graphical elements in web interfaces. - URL: https://peasydesign.com/guides/accessible-color-contrast-ui-design/ - Category: Best Practice - Reading time: 2 min - Words: 301 Key takeaways: - WCAG 2.1 defines minimum contrast ratios that ensure text and interactive elements are perceivable by users with low vision and color vision deficiencies. - Disabled button text is exempt from contrast requirements, but the disabled state itself must be perceivable. - Never use color as the only means of conveying information — add icons, patterns, or text labels. ## Color Contrast for Accessibility WCAG 2.1 defines minimum contrast ratios that ensure text and interactive elements are perceivable by users with low vision and color vision deficiencies. These are legal requirements in many jurisdictions. ### Contrast Ratio Requirements Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Non-text elements (icons, borders, form field outlines) require 3:1 contrast against adjacent colors. These ratios apply to the specific color combination, not to the colors individually. ### Common Failures Light gray text on white backgrounds is the most frequent failure. Placeholder text in form fields often fails contrast requirements. Disabled button text is exempt from contrast requirements, but the disabled state itself must be perceivable. Focus indicators must be visible against all backgrounds they appear on. ### Testing Tools Use browser extensions that overlay contrast ratios directly on your UI. Check each text color against its actual background — components used on different page sections may pass on one background and fail on another. Automated tools catch most issues, but manual review is needed for gradient backgrounds, images with text overlays, and interactive states. ### Designing with Constraints Rather than designing freely and fixing contrast afterward, start with accessible color palettes. For any brand color, generate a full scale (100-900) and identify which combinations meet AA and AAA requirements. Document these as the approved text/background pairings in your design system. ### Beyond Contrast Ratios Color contrast is necessary but not sufficient for accessibility. Never use color as the only means of conveying information — add icons, patterns, or text labels. Ensure that links are distinguishable from surrounding text without relying on color alone (underline is the simplest solution). Test your designs with color blindness simulation … ### Troubleshooting CSS Layout Overflow and Scrollbar Issues Unexpected horizontal scrollbars and content overflow are common CSS frustrations. Learn systematic approaches to finding and fixing overflow problems. - URL: https://peasydesign.com/guides/troubleshooting-css-overflow-scrollbar/ - Category: Troubleshooting - Reading time: 1 min - Words: 173 Key takeaways: - A horizontal scrollbar appears on the page, or content extends beyond the viewport. - Fixed-width elements**: An element with `width: 1200px` on a 1024px viewport. - Use `max-width: 100%` instead of fixed widths for responsive elements. - Custom scrollbar styles work in WebKit browsers (Chrome, Safari, Edge) using `::-webkit-scrollbar` pseudo-elements. ## Finding the Overflow Source ### Symptoms A horizontal scrollbar appears on the page, or content extends beyond the viewport. ### Debugging Technique Add a temporary style `* { outline: 1px solid red; }` to visualize every element's box. The element extending beyond the viewport edge is the culprit. DevTools' Elements panel also shows overflowing elements. ## Common Causes - **Fixed-width elements**: An element with `width: 1200px` on a 1024px viewport. - **Negative margins**: `margin-left: -50px` can push content off-screen. - **VW units without scrollbar**: `100vw` includes the scrollbar width, causing overflow. - **Flex items**: Flex children default to `min-width: auto`, refusing to shrink. ## Solutions - Use `max-width: 100%` instead of fixed widths for responsive elements. - Replace `100vw` with `100%` on the body or main container. - Add `min-width: 0` to flex children that need to shrink. - Use `overflow-x: hidden` on the body only as a last resort. ## Scrollbar Appearance Custom scrollbar styles work in WebKit browsers (Chrome, Safari, Edge) using `::-webkit-scrollbar` pseudo-elements. Firefox uses `scrollbar-width` and `scrollbar-color` properties. ### How to Design Effective Data Tables Create readable, scannable, and responsive data tables for web applications with proper alignment and visual hierarchy. - URL: https://peasydesign.com/guides/how-to-design-effective-data-tables/ - Category: How-To - Reading time: 1 min - Words: 293 ## Designing Data Tables Data tables are among the most information-dense UI components. Good table design helps users scan, compare, and find data quickly. Bad table design overwhelms users with visual noise. ### Column Alignment Rules Numbers should be right-aligned so decimal points line up, making magnitude comparison effortless. Text should be left-aligned (or start-aligned for RTL support). Dates can be left-aligned when they start with the most significant unit (2024-03-15) or right-aligned when they end with it (15/03/2024). Status indicators and actions center-align well. ### Visual Hierarchy Use alternating row backgrounds (zebra striping) with very subtle contrast — 2-3% lightness difference is enough. Heavy borders between every cell create visual noise. Use horizontal rules only, with heavier weight on the header border. Sort indicators should be visible but not dominant. Active sort columns can use a slightly different background tint. ### Responsive Tables Tables don't fit mobile screens. Solutions from least to most disruptive: horizontal scroll with a sticky first column (preserves structure), card layout where each row becomes a card with label-value pairs (changes mental model), or priority columns that hide less important columns on small screens (loses data). ### Density and Spacing Compact tables (24-32px row height) suit data-heavy applications where users need to scan many rows. Comfortable tables (40-48px row height) work for general-purpose applications. Touch targets in tables need at least 44×44px hit areas, which may require larger row heights on touch devices. ### Empty and Loading States Empty tables should show a helpful message explaining why there's no data and suggesting an action (create a record, adjust filters, try a different date range). Loading states should show skeleton rows rather than a spinner — this preserves the layout and gives users a preview of the table structure. ### How to Generate QR Codes with Custom Designs Create branded QR codes with custom colors, logos, and patterns while maintaining reliable scannability. - URL: https://peasydesign.com/guides/how-to-generate-custom-qr-codes/ - Category: How-To - Reading time: 1 min - Words: 272 Key takeaways: - QR codes support significant visual customization without sacrificing functionality, thanks to built-in error correction. - ### Color Customization Dark modules must contrast against light modules with a minimum 40% luminance difference for reliable scanning. - The quiet zone (white border) must be maintained — it's at least 4 modules wide on all sides. - Always test the final code with multiple scanner apps — what works on one may fail on another. ## Custom QR Code Generation QR codes support significant visual customization without sacrificing functionality, thanks to built-in error correction. Understanding the technical constraints lets you create branded codes that scan reliably. ### Error Correction Levels QR codes have four error correction levels: L (7%), M (15%), Q (25%), and H (30%). The percentage indicates how much of the code can be obscured or damaged while remaining scannable. For branded QR codes with logos, use level H — this lets you place a logo over up to 30% of the code area. For plain codes, level M offers a good balance between data density and resilience. ### Color Customization Dark modules must contrast against light modules with a minimum 40% luminance difference for reliable scanning. You can use brand colors as long as this contrast ratio is maintained. Avoid red/green combinations that are problematic for colorblind users. The quiet zone (white border) must be maintained — it's at least 4 modules wide on all sides. ### Adding Logos Center logos work best because QR scanners typically start reading from the corner finder patterns. Keep the logo within the center 20-25% of the code area. Use a white background behind the logo to create a clean boundary. Always test the final code with multiple scanner apps — what works on one may fail on another. ### Output Formats Generate QR codes as SVG for web use — they scale perfectly to any size. Use PNG at minimum 300 DPI for print materials. For very small physical sizes (under 2cm), simplify the code by using shorter URLs and lower error correction to reduce module density. ### Icon Design and Usage Best Practices Choose, implement, and maintain icon systems for web applications with consistent sizing, spacing, and accessibility. - URL: https://peasydesign.com/guides/icon-design-usage-best-practices/ - Category: Best Practice - Reading time: 2 min - Words: 309 Key takeaways: - Icons communicate faster than text when used correctly. - ## Icon Best Practices Icons communicate faster than text when used correctly. - ### Icon + Text is Almost Always Better Research consistently shows that icons alone are slower to interpret than icon + text labels, except for universally understood icons (close/X, play/pause, search magnifying glass, home). - Never rely on the title attribute for accessibility — screen readers handle it inconsistently, and it requires hover (not available on touch devices). ## Icon Best Practices Icons communicate faster than text when used correctly. They fail when they're ambiguous, inconsistent, or used without text labels to clarify their meaning. ### Icon + Text is Almost Always Better Research consistently shows that icons alone are slower to interpret than icon + text labels, except for universally understood icons (close/X, play/pause, search magnifying glass, home). The hamburger menu icon, despite decades of use, still confuses some users. When in doubt, add a text label — it costs a few pixels but eliminates ambiguity. ### Consistency Rules Use a single icon library throughout your application. Mixing outlined icons with filled icons, or different stroke weights, creates visual dissonance. Establish a standard size (16px inline, 20px in buttons, 24px standalone) and stick to it. All icons should share the same visual weight — a thin-lined icon next to a bold one looks inconsistent. ### SVG Implementation Use inline SVG for icons that need to be colored with CSS (currentColor inherits the parent's text color). Set width and height attributes for proper sizing, and include a viewBox for scaling. Add aria-hidden="true" when the icon is decorative (accompanied by text), or role="img" with an aria-label when it's the only content. ### Icon Accessibility Every functional icon needs an accessible name. For icon buttons, use aria-label on the button element. For icon links, use visually hidden text inside the link. Never rely on the title attribute for accessibility — screen readers handle it inconsistently, and it requires hover (not available on touch devices). ### Performance An SVG icon sprite (symbols referenced by use) loads all icons in one HTTP request. For large icon sets, consider loading icons on demand using dynamic imports. Icon fonts (like Font Awesome) are falling out of favor due to rendering issues, FOUT (flash of … ### CSS Performance Optimization Best Practices CSS affects page rendering speed more than developers realize. Learn how to reduce render-blocking, optimize selectors, and minimize layout thrashing. - URL: https://peasydesign.com/guides/css-performance-optimization/ - Category: Best Practice - Reading time: 1 min - Words: 159 Key takeaways: - Browsers won't render content until they've downloaded and parsed all CSS. - CSS selectors are evaluated right-to-left. - Remove unused CSS with tree-shaking tools. - Reading layout properties (offsetHeight, getBoundingClientRect) forces the browser to recalculate layout. - Custom fonts can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text). ## CSS Is Render-Blocking Browsers won't render content until they've downloaded and parsed all CSS. A large stylesheet delays the first paint. Critical CSS (styles for above-the-fold content) should be inlined in `<head>` for fastest first paint. ## Selector Performance CSS selectors are evaluated right-to-left. A selector like `.sidebar .nav li a` first finds all `<a>` elements, then filters. Flat selectors (`.nav-link`) are faster than deeply nested ones. ## Reducing CSS Size - Remove unused CSS with tree-shaking tools. - Use shorthand properties (`margin: 0 auto` instead of four margin declarations). - Combine duplicate rules. - Use modern features like `gap` instead of margin hacks. ## Layout Thrashing Reading layout properties (offsetHeight, getBoundingClientRect) forces the browser to recalculate layout. Batch reads and writes separately to avoid forced synchronous layout. ## Font Loading Custom fonts can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text). Use `font-display: swap` to show fallback fonts immediately while custom fonts load. ### CSS Logical Properties for International Layouts Use CSS logical properties for layouts that work correctly in left-to-right, right-to-left, and vertical writing modes. - URL: https://peasydesign.com/guides/css-logical-properties-international-layouts/ - Category: Best Practice - Reading time: 1 min - Words: 255 Key takeaways: - Logical properties replace physical properties (left/right/top/bottom) with flow-relative equivalents (inline-start/inline-end/block-start/block-end) that adapt automatically to writing direction and text orientation. - They're especially important in design systems and component libraries that may be used in internationalized applications. - ### Physical vs Logical `margin-left: 1rem` always adds space on the left side, regardless of text direction. ## CSS Logical Properties Logical properties replace physical properties (left/right/top/bottom) with flow-relative equivalents (inline-start/inline-end/block-start/block-end) that adapt automatically to writing direction and text orientation. ### Physical vs Logical `margin-left: 1rem` always adds space on the left side, regardless of text direction. In a right-to-left language like Arabic, this pushes content away from the reading start — the opposite of the intent. `margin-inline-start: 1rem` adds space at the start of the inline axis, which is left in LTR and right in RTL. The same CSS works correctly in both directions. ### Property Mapping `padding-left` → `padding-inline-start`. `margin-right` → `margin-inline-end`. `top` → `inset-block-start`. `border-bottom` → `border-block-end`. `width` → `inline-size`. `height` → `block-size`. `text-align: left` → `text-align: start`. ### When to Use Logical Properties Use logical properties in all new CSS. Even if you don't currently support RTL languages, logical properties cost nothing extra and future-proof your styles. They're especially important in design systems and component libraries that may be used in internationalized applications. ### Browser Support Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+). For older browser support, use a PostCSS plugin that generates physical property fallbacks. The fallback approach is `margin-left: 1rem; margin-inline-start: 1rem` — browsers that understand logical properties use the latter. ### Practical Adoption Start by replacing padding and margin on components. Then update border properties and positioning. Finally, convert width/height to inline-size/block-size. Use your linter to flag physical properties in new code. For existing codebases, migrate gradually — component by component rather than a big-bang rewrite. ### How to Create Effective Infographics Design data-driven infographics with clear visual hierarchy, accurate data representation, and shareability. - URL: https://peasydesign.com/guides/how-to-create-effective-infographics/ - Category: How-To - Reading time: 1 min - Words: 292 Key takeaways: - Effective infographics transform data into visual stories. - Use size to indicate importance — the most important data point should be the largest visual element. - ### Accurate Data Representation Never manipulate visual scales to exaggerate differences. ## Creating Infographics Effective infographics transform data into visual stories. They're shared 3× more than other content types on social media, but only when they're well-designed and genuinely informative. ### Data First, Design Second Start with a clear narrative: what story does the data tell? Identify the 3-5 key data points that support your narrative. Resist the temptation to include every data point — information overload defeats the purpose of visualization. A focused infographic with 5 data points is more effective than a cluttered one with 50. ### Visual Hierarchy Guide the viewer's eye from top to bottom (or left to right) through a logical progression. Use size to indicate importance — the most important data point should be the largest visual element. Use color sparingly for emphasis: one accent color to highlight key data, neutral colors for supporting information. ### Accurate Data Representation Never manipulate visual scales to exaggerate differences. Bar charts should start at zero. Pie chart segments should sum to 100%. Area encodings should be proportional to the values they represent. A circle representing 200 should have twice the area (not twice the diameter) of a circle representing 100. Misleading visualizations destroy credibility. ### Dimensions and Format For blog posts: 800px wide, variable height (typically 2000-5000px tall). For social media sharing: 1080×1080 (Instagram), 1200×628 (Facebook/LinkedIn). For Pinterest: 735×1102 or taller. Export as PNG for raster or SVG for scalable web embedding. Include your brand logo and source citations at the bottom. ### Shareability Include a clear title that works as a standalone headline. Add your website URL but don't make it the dominant element. Make the infographic self-contained — viewers should understand it without reading the accompanying article. Include a brief methodology note or data source citation for credibility. ### Design Systems: Building Consistent UI Components A design system provides reusable components, patterns, and guidelines that ensure visual consistency across a product. Learn how to build one from scratch. - URL: https://peasydesign.com/guides/design-systems-consistent-ui-components/ - Category: Best Practice - Reading time: 1 min - Words: 222 ## What is a Design System? A design system is more than a component library — it's a collection of reusable components, design tokens, patterns, and guidelines that enable teams to build consistent user interfaces efficiently. It bridges the gap between design and development. ### Design Tokens Tokens are the atomic values of your design system: colors, spacing, typography, shadows, and border radii. Define them as variables that can be consumed by both design tools and code: ```css :root { --color-primary: #4F46E5; --space-sm: 0.5rem; --space-md: 1rem; --radius-md: 0.5rem; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); } ``` ### Component Hierarchy Build components from small to large: atoms (buttons, inputs, labels) → molecules (search bars, form fields with labels) → organisms (navigation bars, hero sections) → templates (page layouts) → pages (instances with real content). Each level composes lower-level components. ### Documentation Every component needs: a visual example, usage guidelines (when to use and when not to use), props/variants documentation, accessibility requirements, and code snippets. Without documentation, developers will build their own variations instead of using the system. ### Governance Assign ownership of the design system to a dedicated team or rotating role. Establish a contribution process — anyone can propose new components, but additions must meet quality standards. Regular audits identify inconsistencies and deprecated patterns. Version your design system and communicate changes through changelogs. ### Responsive Typography: Fluid Text Sizing Strategies Fixed font sizes don't adapt to different screen sizes. Learn how to implement fluid typography that scales smoothly between mobile and desktop viewports. - URL: https://peasydesign.com/guides/responsive-typography-fluid-text-sizing/ - Category: How-To - Reading time: 1 min - Words: 250 ## The Problem with Fixed Sizes Using a single font-size for all screen widths creates readability issues. Text sized for desktop becomes too large on mobile, consuming valuable viewport space. Text sized for mobile becomes too small on large monitors, forcing unnecessary scrolling. ### The clamp() Approach CSS clamp() sets a minimum, preferred, and maximum value in one declaration: ```css h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem); } p { font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); } ``` This creates text that scales with viewport width while staying within readable bounds. The middle value (preferred) uses viewport units combined with a fixed value for smoother scaling. ### Type Scale Ratios A type scale is a set of harmonious font sizes based on a ratio. Common ratios: 1.25 (Major Third), 1.333 (Perfect Fourth), 1.5 (Perfect Fifth). Starting from a base size of 1rem, multiply by the ratio for each level: 1rem, 1.25rem, 1.563rem, 1.953rem, 2.441rem. ### Line Height Considerations Larger text needs tighter line height. A body text line-height of 1.5-1.7 works well, but headings should use 1.1-1.3. Line length (measure) should stay between 45-75 characters per line for optimal readability — adjust container max-width accordingly. ### Testing Fluid Typography Test at the minimum, maximum, and several intermediate viewport widths. Check that text doesn't become too small on narrow screens or too large on ultra-wide monitors. Verify that line lengths stay readable at all sizes. Test with browser zoom levels from 50% to 200% to ensure the typography remains coherent. ### Wireframing Tools and Techniques Compared Compare wireframing approaches from paper sketching to digital tools for different stages of the design process. - URL: https://peasydesign.com/guides/wireframing-tools-techniques-compared/ - Category: Comparison - Reading time: 1 min - Words: 273 ## Wireframing Approaches Wireframes bridge the gap between ideas and detailed designs. The right wireframing approach depends on your design stage, audience, and the level of fidelity needed. ### Paper Sketching Fastest for early exploration. Requires no tools, no learning curve, and forces focus on layout rather than visual details. Paper sketches are intentionally rough, which encourages stakeholders to focus on structure and flow rather than colors and fonts. Best for: initial brainstorming, user flow mapping, and quick iteration with a small team. ### Low-Fidelity Digital Wireframes Gray boxes, placeholder text, and simple shapes. Created in tools like Balsamiq, Whimsical, or even PowerPoint. These communicate layout, content hierarchy, and navigation structure without visual design decisions. Best for: stakeholder presentations, user testing of navigation patterns, and documenting requirements. ### High-Fidelity Wireframes Include real content (or realistic content), actual proportions, and typographic hierarchy. Created in Figma, Sketch, or Adobe XD. These look close to the final design but without colors or images, keeping the focus on layout and interaction. Best for: developer handoff, detailed user testing, and complex interfaces. ### Interactive Prototypes Add click interactions, page transitions, and state changes to high-fidelity wireframes. Users can "use" the prototype, revealing usability issues before any code is written. The investment is higher, but discovering a navigation problem at this stage costs a fraction of discovering it after development. ### Choosing the Right Fidelity Use the lowest fidelity that communicates your intent. Over-polished wireframes invite bike-shedding on visual details when the goal is to validate layout and flow. A stakeholder who sees a polished wireframe thinks the design is nearly finished — a rough sketch invites constructive feedback. ### Whitespace in UI Design: Principles and Common Mistakes Whitespace is not empty space — it's a design element that improves readability, guides attention, and communicates hierarchy. Learn how to use it effectively. - URL: https://peasydesign.com/guides/whitespace-ui-design-principles/ - Category: Best Practice - Reading time: 1 min - Words: 242 Key takeaways: - Whitespace (or negative space) serves critical functions: it separates content groups, establishes visual hierarchy, improves readability, and reduces cognitive load. - ## Whitespace is Active Design Whitespace (or negative space) serves critical functions: it separates content groups, establishes visual hierarchy, improves readability, and reduces cognitive load. - Ask a new user where they would look first; whitespace should guide their eye to the most important element. ## Whitespace is Active Design Whitespace (or negative space) serves critical functions: it separates content groups, establishes visual hierarchy, improves readability, and reduces cognitive load. Removing whitespace to "fit more content" is one of the most counterproductive design decisions. ### Macro vs Micro Whitespace Macro whitespace is the space between major page elements — between sections, around the main content area, and in page margins. Micro whitespace is the space within components — padding inside cards, gap between icon and label, line spacing within paragraphs. Both require deliberate management. ### The Spacing Scale Use a consistent spacing scale based on a base unit. A common approach uses multiples of 4px or 8px: 4, 8, 12, 16, 24, 32, 48, 64, 96. This creates visual rhythm and prevents arbitrary spacing values that make a design feel disjointed. ### Common Mistakes Insufficient padding inside interactive elements makes them feel cramped and hard to tap on mobile. Equal spacing between all elements destroys the visual hierarchy — related items should be closer together than unrelated items (Law of Proximity). Confining content within borders when whitespace alone could define boundaries creates visual noise. ### Testing Whitespace Effectiveness Squint at your interface — the content groupings should be obvious even when you can't read the text. Ask a new user where they would look first; whitespace should guide their eye to the most important element. Check that the interface doesn't feel "dense" or "claustrophobic" on smaller screens. ### Data Visualization Best Practices for Non-Designers Effective charts communicate insights instantly; bad charts mislead or confuse. Learn the fundamental principles of data visualization without needing design expertise. - URL: https://peasydesign.com/guides/data-visualization-best-practices/ - Category: Best Practice - Reading time: 2 min - Words: 314 Key takeaways: - The most common visualization mistake is choosing the wrong chart type. - Every visual element should either encode data or provide essential context (axis labels, legends). - Always ensure your visualization is interpretable in grayscale and by colorblind viewers. ## Choose the Right Chart Type The most common visualization mistake is choosing the wrong chart type. Bar charts compare categories. Line charts show trends over time. Scatter plots reveal relationships between two variables. Pie charts show parts of a whole (but bar charts usually do it better). Tables are best when exact values matter more than patterns. ### The Data-Ink Ratio Edward Tufte's data-ink ratio principle states that the majority of ink (or pixels) should represent data. Remove chart junk: decorative borders, background patterns, 3D effects, gradient fills, and unnecessary gridlines. Every visual element should either encode data or provide essential context (axis labels, legends). ### Color Usage Use color purposefully: to distinguish categories, highlight important data points, or encode a third variable. Limit your palette to 5-7 distinguishable colors. Use sequential palettes (light to dark) for continuous data and categorical palettes for distinct groups. Always ensure your visualization is interpretable in grayscale and by colorblind viewers. ### Axis and Scale Integrity Always start your y-axis at zero for bar charts — truncating the axis exaggerates differences. For line charts, a non-zero baseline is acceptable when the range of values is small relative to the baseline. Label axes clearly with units. Use consistent scales across comparison charts. Avoid dual y-axes unless absolutely necessary — they confuse more than they clarify. ### Annotation and Context Add context that helps readers interpret the data: milestone markers on time series, benchmark lines, and brief annotations explaining anomalies. A chart title should state the insight, not just describe the data: "Sales doubled after launch" is better than "Monthly sales 2024-2025." ### Responsive Visualizations On small screens, simplify: reduce data points, use larger labels, switch from multi-series to single-series views, and consider replacing charts with summary statistics. Test your visualizations on mobile devices — … ### Design System Color Tokens: A Practical Guide Create and manage color tokens in design systems for consistent theming across products. - URL: https://peasydesign.com/guides/design-system-color-tokens-practical-guide/ - Category: Best Practice - Reading time: 1 min - Words: 228 Key takeaways: - Color tokens are named variables that abstract raw color values into semantic meanings. - Build a three-tier token system. - Semantic names describe function, not appearance: --color-text-primary (not --color-dark-gray), --color-surface-warning (not --color-light-yellow), --color-border-interactive (not --color-blue-200). - With proper semantic tokens, dark mode is a matter of remapping alias tokens. - Start small — define tokens for text (primary, secondary, disabled), surfaces (default, elevated, sunken), borders (default, interactive, focus), and state colors (success, warning, error, info). ## What Are Color Tokens Color tokens are named variables that abstract raw color values into semantic meanings. Instead of using #3B82F6 directly, you use tokens like --color-primary, --color-text-secondary, or --color-surface-elevated. This abstraction enables theming, ensures consistency, and makes updates effortless. ## Token Hierarchy Build a three-tier token system. Tier 1 (Global): raw color values (--blue-500: #3B82F6). Tier 2 (Alias): semantic mapping (--color-primary: var(--blue-500)). Tier 3 (Component): specific usage (--button-bg: var(--color-primary)). Most teams only need Tier 1 and 2 — Tier 3 is for large design systems. ## Naming Conventions Semantic names describe function, not appearance: --color-text-primary (not --color-dark-gray), --color-surface-warning (not --color-light-yellow), --color-border-interactive (not --color-blue-200). This makes dark mode implementation natural — --color-text-primary maps to white in dark mode without renaming anything. ## Dark Mode Implementation With proper semantic tokens, dark mode is a matter of remapping alias tokens. --color-surface-default: white (light) or #1a1a1a (dark). --color-text-primary: #111827 (light) or #f9fafb (dark). The component code doesn't change at all — it still references --color-text-primary. Use the CSS prefers-color-scheme media query or a class toggle. ## Practical Implementation Start small — define tokens for text (primary, secondary, disabled), surfaces (default, elevated, sunken), borders (default, interactive, focus), and state colors (success, warning, error, info). Document each token with its intended use case. Use CSS custom properties for web, and platform-specific token systems for native apps. Review and prune unused tokens quarterly. ### Typography Scale: Choosing Type Sizes for UI Design Build a harmonious type scale using mathematical ratios for readable, consistent interfaces. - URL: https://peasydesign.com/guides/typography-scale-choosing-type-sizes-ui/ - Category: How-To - Reading time: 1 min - Words: 281 Key takeaways: - Random font sizes create visual noise and inconsistency. - Minor Third (1.2): conservative, good for body-heavy content. - Start with your body text size (typically 16px for web, 14-17px for apps). - Type sizes should increase on larger screens. - Each type size needs an appropriate line height. ## Why Type Scales Matter Random font sizes create visual noise and inconsistency. A type scale uses a mathematical ratio to generate a harmonious set of sizes where each step feels proportionally related. This creates visual hierarchy, improves readability, and speeds up design decisions — instead of choosing from infinite sizes, you pick from a predefined set. ## Popular Scale Ratios Minor Third (1.2): conservative, good for body-heavy content. Major Third (1.25): balanced, popular for web apps. Perfect Fourth (1.333): moderate contrast, good for marketing pages. Augmented Fourth (1.414): strong contrast, suitable for editorial design. Golden Ratio (1.618): dramatic contrast, best for large displays and headings. ## Building Your Scale Start with your body text size (typically 16px for web, 14-17px for apps). Multiply up for headings: 16 × 1.25 = 20, 20 × 1.25 = 25, 25 × 1.25 = 31. Divide down for small text: 16 / 1.25 = 12.8 (round to 13). This gives you: 13, 16, 20, 25, 31, 39. Six to eight steps covers most interface needs. ## Responsive Scaling Type sizes should increase on larger screens. A common approach: use a smaller ratio on mobile (1.2) and larger ratio on desktop (1.333). The body size might be 16px on mobile and 18px on desktop. Implement with CSS clamp(): font-size: clamp(1rem, 0.5rem + 1vw, 1.125rem) for fluid scaling between breakpoints. ## Line Height and Spacing Each type size needs an appropriate line height. Smaller text needs more relative line height (1.6-1.8 for body copy) while larger headings need less (1.1-1.3). Spacing between text elements should follow the same scale. Heading-to-body spacing is typically 0.5-1× the heading size. Paragraph spacing is typically 0.5-1× the body line height. ### Responsive Design Breakpoints: Modern Best Practices Set responsive breakpoints based on content needs rather than specific device dimensions. - URL: https://peasydesign.com/guides/responsive-design-breakpoints-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 257 Key takeaways: - Setting breakpoints at iPhone (375px), iPad (768px), and desktop (1024px) widths is outdated. - Start with your smallest layout and widen the browser. - While specific values depend on your content, these ranges cover most scenarios: 320-480px (compact mobile), 481-768px (comfortable mobile/small tablet), 769-1024px (tablet/small desktop), 1025-1280px (desktop), 1281px+ (large desktop). - Mobile-first (min-width queries) is the recommended approach. - Test at your specific breakpoints plus ±20px to catch edge cases. ## The Device-Targeting Trap Setting breakpoints at iPhone (375px), iPad (768px), and desktop (1024px) widths is outdated. New devices launch constantly with varying dimensions. Content-first breakpoints — set where your layout actually breaks — produce more robust responsive designs. ## Content-First Breakpoints Start with your smallest layout and widen the browser. When the content looks stretched, cramped, or awkward — that's where you need a breakpoint. This might be 480px for one component and 520px for another. Use named breakpoints in your CSS framework that describe the layout, not the device: --layout-compact, --layout-comfortable, --layout-spacious. ## Common Breakpoint Ranges While specific values depend on your content, these ranges cover most scenarios: 320-480px (compact mobile), 481-768px (comfortable mobile/small tablet), 769-1024px (tablet/small desktop), 1025-1280px (desktop), 1281px+ (large desktop). Most designs need 3-4 breakpoints, not more. Each breakpoint should trigger a meaningful layout change. ## Mobile-First vs Desktop-First Mobile-first (min-width queries) is the recommended approach. Write default styles for the smallest screen, then add complexity at wider breakpoints. This ensures the base experience works on all devices and avoids the overhead of undoing desktop styles on mobile. CSS frameworks like Tailwind CSS are built on mobile-first principles. ## Testing Strategy Test at your specific breakpoints plus ±20px to catch edge cases. Test in both portrait and landscape orientations. Use browser DevTools' responsive mode but also test on real devices — touch targets and text readability feel different on actual screens. Test with content at minimum and maximum expected lengths. Test at 67% and 200% zoom levels to catch zoom-related layout breaks. ### How to Create Accessible CSS Focus Styles Focus indicators help keyboard users navigate your interface. Learn how to create visible, attractive focus styles that meet WCAG requirements without compromising design. - URL: https://peasydesign.com/guides/how-to-create-accessible-focus-styles/ - Category: How-To - Reading time: 1 min - Words: 248 Key takeaways: - Keyboard users rely on focus indicators to know which element is currently active. - The focus indicator must be visible on all backgrounds — test on white, dark, and colored backgrounds. - Every interactive element (links, buttons, inputs, selects, custom controls) must have a visible focus state. ## Why Focus Styles Matter Keyboard users rely on focus indicators to know which element is currently active. Without visible focus styles, navigating a website with a keyboard is like using a mouse without a cursor. WCAG 2.2 Success Criterion 2.4.7 requires visible focus indicators on all interactive elements. ### The Default Problem Most browsers provide a default outline on focused elements, but `outline: none` is one of the most common CSS declarations in the wild. Designers remove it because the default focus ring doesn't match their design, but they rarely add a replacement, breaking keyboard accessibility. ### Creating Better Focus Styles Use `:focus-visible` instead of `:focus` to show focus indicators only for keyboard navigation, not mouse clicks. Combine outline and box-shadow for a prominent but attractive indicator: ```css button:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3); } ``` ### Contrast Requirements WCAG 2.2 requires focus indicators to have a contrast ratio of at least 3:1 against adjacent colors. The focus indicator must be visible on all backgrounds — test on white, dark, and colored backgrounds. A thick outline with an offset works better than background color changes because it's visible regardless of the element's background. ### Testing Focus Styles Tab through your entire page to test focus styles. Every interactive element (links, buttons, inputs, selects, custom controls) must have a visible focus state. Test with forced-colors mode (Windows High Contrast) to ensure focus styles survive user color overrides. ### How to Generate Gradients for Web Design Create smooth CSS gradients with proper color interpolation, avoiding muddy midpoints and banding artifacts. - URL: https://peasydesign.com/guides/how-to-generate-gradients-web-design/ - Category: How-To - Reading time: 2 min - Words: 302 ## CSS Gradient Generation CSS gradients are powerful but easy to get wrong. Muddy midpoints, visible banding, and unnatural color transitions are common problems with simple two-color gradients. ### Linear vs Radial vs Conic Linear gradients transition along a straight line (top to bottom, left to right, or any angle). Radial gradients radiate from a center point outward. Conic gradients sweep around a center point like a clock hand. Each type suits different design needs: linear for backgrounds, radial for spotlight effects, conic for pie charts and loading indicators. ### The Muddy Middle Problem A gradient from blue to yellow passes through gray in the middle when interpolated in RGB space. This happens because RGB treats each channel independently — the "shortest path" between blue (0,0,255) and yellow (255,255,0) passes through dark gray (128,128,128). Interpolating in OKLCH or HSL space produces vibrant midpoints instead. ### Color Interpolation in CSS CSS Color Level 4 supports `in oklch` syntax: `background: linear-gradient(in oklch, blue, yellow)`. This produces a vibrant gradient through green and cyan rather than muddy gray. For browsers that don't support this yet, add intermediate color stops manually: `linear-gradient(blue, cyan, green, yellow)`. ### Preventing Banding Visible color bands (stair-stepping instead of smooth transitions) occur in gradients with subtle color differences over large areas. Solutions: add a slight noise overlay (1-2% opacity), use more color stops with slight variations, or combine the gradient with a subtle texture. Dark gradients show banding more than bright ones because our eyes are more sensitive to differences in dark tones. ### Gradient Tools Browser-based gradient generators let you pick colors, adjust angles, add color stops, and copy the CSS. Some generate OKLCH-interpolated gradients automatically. Others provide preset gradient collections as starting points. Always test gradients on various screen types — cheap monitors show banding that high-quality … ### Mobile-First Design for Online Tools Over 60% of web traffic is mobile, but most online tools are designed for desktop first. Learn how to create tool interfaces that work beautifully on touch devices. - URL: https://peasydesign.com/guides/mobile-first-design-online-tools/ - Category: How-To - Reading time: 1 min - Words: 292 Key takeaways: - Desktop tools rely on drag-and-drop, hover states, right-click menus, and precise mouse targeting — none of which work on touch devices. - Pinch-to-zoom is essential for image output. - ### Touch Target Sizing Interactive elements must be at least 44x44 CSS pixels (Apple guideline) or 48x48dp (Material Design). - Long-press can reveal context menus (but always provide an alternative). ## The Mobile Tool Challenge Desktop tools rely on drag-and-drop, hover states, right-click menus, and precise mouse targeting — none of which work on touch devices. Mobile-first tool design requires rethinking interaction patterns, not just shrinking the desktop layout. ### Touch Target Sizing Interactive elements must be at least 44x44 CSS pixels (Apple guideline) or 48x48dp (Material Design). Space targets at least 8px apart to prevent accidental taps. Form inputs should be tall enough to tap comfortably (minimum 44px height). Icon buttons are especially problematic — they often look tappable but are too small. ### File Input Patterns The standard file input (`<input type="file">`) works on mobile but the experience is poor. Style it as a large drop zone with clear instructions: "Tap to select a photo" with a camera icon. Use the `accept` attribute to filter file types: `accept="image/*"` opens the camera/gallery chooser. On iOS, `capture="environment"` opens the camera directly. ### Layout Adaptations Stack tool controls vertically on mobile — side-by-side layouts require horizontal scrolling. Use collapsible sections for advanced options. Place primary actions (process, download) at the bottom of the screen where thumbs can reach. Show output below the input rather than beside it. ### Performance on Mobile Mobile devices have less memory, slower processors, and unreliable network connections. Reduce file size limits on mobile (detect with screen width or User-Agent). Compress uploaded files before processing when possible. Use progressive loading — show partial results as they become available rather than waiting for complete processing. ### Gesture Support Consider swipe gestures for navigating between tool steps or result pages. Pinch-to-zoom is essential for image output. Long-press can reveal context menus (but always provide an alternative). Be careful with custom gestures that conflict with browser or OS gestures (back swipe, pull-to-refresh). ### QR Code Design: Branding Without Breaking Scannability Design branded QR codes with custom colors, logos, and shapes while maintaining reliable scanning. - URL: https://peasydesign.com/guides/qr-code-branding-design-scannability/ - Category: Best Practice - Reading time: 1 min - Words: 234 Key takeaways: - Branded QR codes can increase scan rates by 30-50% compared to plain black-and-white codes. - The three finder patterns (large squares in corners) must maintain their shape and contrast — they're how scanners locate and orient the code. - Dark modules must be darker than light modules — this sounds obvious but is often violated with brand colors. - Place logos in the center of the code, covering no more than 10% of the total area at Level M correction, or 20% at Level H. - Generate branded codes and test with at least five different devices across iOS and Android. ## Balancing Aesthetics and Function Branded QR codes can increase scan rates by 30-50% compared to plain black-and-white codes. However, excessive customization can render codes unscannable. The key is understanding which elements can be modified and which are critical for scanner recognition. ## Safe Customization Areas The three finder patterns (large squares in corners) must maintain their shape and contrast — they're how scanners locate and orient the code. The quiet zone (white border) must remain clear. Data modules in the center can tolerate more modification since error correction can compensate. ## Color Guidelines Dark modules must be darker than light modules — this sounds obvious but is often violated with brand colors. Minimum contrast ratio is 4:1. Avoid red-green combinations as they fail for colorblind users. Light backgrounds with dark modules work best; inverted codes (light on dark) have lower scan rates. ## Logo Insertion Techniques Place logos in the center of the code, covering no more than 10% of the total area at Level M correction, or 20% at Level H. Use a clean white or matching-background border around the logo. Never place logos over finder patterns or alignment patterns. ## Testing Protocol Generate branded codes and test with at least five different devices across iOS and Android. Test at various distances, angles, and lighting conditions. Create a comparison matrix documenting scan success rates for each design variant before committing to production. ### CSS Grid vs Flexbox: Layout Strategy Guide Decide between CSS Grid and Flexbox for different layout patterns with practical examples. - URL: https://peasydesign.com/guides/css-grid-vs-flexbox-layout-strategy-guide/ - Category: Comparison - Reading time: 2 min - Words: 300 Key takeaways: - CSS Grid and Flexbox are both powerful layout systems, but they solve different problems. - Flexbox excels at distributing space along a single axis. - Grid is ideal when you need control over both rows and columns simultaneously. - Navigation bar: Flexbox (items flow horizontally, space-between works perfectly). - The most effective approach uses Grid for the page layout and Flexbox for component-level layout. ## Two Layout Systems, Different Strengths CSS Grid and Flexbox are both powerful layout systems, but they solve different problems. Flexbox works in one dimension — either a row or a column. Grid works in two dimensions — rows and columns simultaneously. Understanding when to use each (and when to combine them) is essential for modern CSS. ## When to Use Flexbox Flexbox excels at distributing space along a single axis. Use it for: navigation bars, centering content (vertically and horizontally), equal-height cards in a row, space-between distribution, and any layout where items flow in one direction. Flexbox's strength is its simplicity for one-dimensional layout problems. ## When to Use Grid Grid is ideal when you need control over both rows and columns simultaneously. Use it for: page-level layout (header, sidebar, main, footer), magazine-style layouts with varying column spans, overlapping elements, dashboard layouts with precise cell placement, and any layout where items need to align in both directions. ## Common Patterns Navigation bar: Flexbox (items flow horizontally, space-between works perfectly). Card grid: CSS Grid with auto-fill and minmax for responsive columns. Form layout: Grid for label-input alignment. Hero section with centered content: Flexbox with align-items and justify-content. Dashboard: Grid for the overall layout, Flexbox within each card. ## Combining Both The most effective approach uses Grid for the page layout and Flexbox for component-level layout. A Grid defines the overall page structure (sidebar, main content area). Within each grid cell, Flexbox handles the internal layout (centering content, distributing items). This combination leverages each system's strengths. ## Browser Support and Fallbacks Both Grid and Flexbox have excellent browser support (98%+). No fallbacks are needed for modern projects. For legacy browser support, Flexbox has slightly broader support than Grid. Use feature queries (@supports) to provide grid-based layouts with flexbox fallbacks when necessary. ### How to Design RESTful API URL Structures Well-designed API URLs are intuitive, consistent, and follow REST conventions. Learn patterns for resource naming, versioning, filtering, and pagination. - URL: https://peasydesign.com/guides/how-to-design-restful-api-urls/ - Category: How-To - Reading time: 1 min - Words: 193 ## REST URL Design Principles REST URLs should represent resources (nouns), not actions (verbs). Use plural nouns for collections, nested resources for relationships, and query parameters for filtering and pagination. ### Resource Naming Conventions Use lowercase with hyphens for multi-word resources: `/api/v1/user-profiles/` not `/api/v1/UserProfiles/`. Keep URLs shallow — avoid nesting beyond two levels. `/users/123/orders/456` is fine; `/users/123/orders/456/items/789/reviews` is too deep. Create a top-level `/reviews` endpoint instead. ### Versioning Strategies URL path versioning (`/api/v1/`, `/api/v2/`) is the most explicit and visible approach. Header versioning (`Accept: application/vnd.api.v2+json`) keeps URLs clean but is harder to test and debug. Query parameter versioning (`?version=2`) is simple but can conflict with caching. ### Filtering and Pagination Use query parameters for filtering: `/products?category=electronics&min_price=100`. For pagination, cursor-based pagination (using an opaque token) is more reliable than offset-based pagination for large datasets. Include `next` and `previous` links in your response for easy navigation. ### Common Mistakes Avoid verbs in URLs — use HTTP methods instead: `POST /orders/` not `POST /create-order`. Don't return different resource types from the same endpoint. Don't use query parameters for resource identification (`/users?id=123` should be `/users/123`). Always use HTTPS — API URLs should never work over plain HTTP. ### Lorem Ipsum Alternatives: Better Placeholder Text Compare placeholder text options beyond Lorem Ipsum for more realistic and useful design mockups. - URL: https://peasydesign.com/guides/lorem-ipsum-alternatives-placeholder-text/ - Category: Comparison - Reading time: 1 min - Words: 263 Key takeaways: - Lorem Ipsum has been the standard placeholder text since the 1500s, but it has significant drawbacks for modern design work. - The best placeholder is real content. - When designing for specific languages, use placeholder text in that language. - For data-heavy interfaces (dashboards, tables, lists), random text is less useful than structured fake data. - Always indicate placeholder text is temporary — use a different color or add a watermark. ## Beyond Lorem Ipsum Lorem Ipsum has been the standard placeholder text since the 1500s, but it has significant drawbacks for modern design work. Its Latin-based character distribution doesn't match English (or any modern language), leading to inaccurate line length estimates. Clients sometimes think it's real content and approve layouts without reviewing actual copy. ## Real Content First The best placeholder is real content. Even draft copy gives a more accurate representation of the final design. If real content isn't available, use content from a similar context — a competitor's page, an industry article, or previous project copy. This reveals layout issues that Lorem Ipsum masks. ## Language-Specific Placeholders When designing for specific languages, use placeholder text in that language. Japanese, Arabic, and CJK languages have fundamentally different character widths and line-breaking rules. German text tends to be 30% longer than English equivalents. Russian uses wider Cyrillic characters. Using Latin placeholder text for these languages leads to layouts that break with real content. ## Structured Placeholder Data For data-heavy interfaces (dashboards, tables, lists), random text is less useful than structured fake data. Generate realistic names, dates, currency amounts, and status values. This reveals column width issues, number formatting problems, and alignment concerns that Lorem Ipsum cannot. ## Best Practices Always indicate placeholder text is temporary — use a different color or add a watermark. Set minimum and maximum content lengths to test both extremes. Include edge cases in placeholders: very long words, empty states, single-character entries, and special characters. Document the expected content type and length for each placeholder area to guide copywriters. ### Pinterest Pin Design: Visual Best Practices for Click-Through Pinterest is a visual search engine where pin design directly determines click-through rate. Optimal aspect ratios, text overlay techniques, and color choices can double engagement compared to generic image sharing. - URL: https://peasydesign.com/guides/pinterest-pin-design-best-practices/ - Category: Best Practice - Reading time: 2 min - Words: 315 Key takeaways: - Unlike other social platforms driven by social graphs, Pinterest operates primarily as a visual discovery and search engine. - The optimal pin aspect ratio is 2:3 (1000×1500 pixels). - Pins with text overlays receive 2-3x more saves than image-only pins. - Red and orange tones consistently outperform blue and green in Pinterest engagement studies. - The pin title (up to 100 characters) is your primary SEO field. ## Pinterest as a Search Engine Unlike other social platforms driven by social graphs, Pinterest operates primarily as a visual discovery and search engine. Users come with intent — they are searching for ideas, products, and inspiration. This means pin design must communicate value at a glance, much like a search result snippet. ## Pin Specifications The optimal pin aspect ratio is 2:3 (1000×1500 pixels). Pins taller than 2:3 get truncated in the feed, hiding the bottom portion. Square pins (1:1) receive less real estate in the feed and underperform by roughly 30%. Use high-resolution images — Pinterest recommends a minimum width of 600 pixels. ## Text Overlay Strategy Pins with text overlays receive 2-3x more saves than image-only pins. The text should be large enough to read on a mobile device (minimum 24pt equivalent), using no more than 6-8 words. Place text in the top two-thirds of the pin — the bottom third is often obscured by the pin title in some views. Use high-contrast text: white text on a dark semi-transparent overlay, or dark text on a light background area. Avoid placing text directly over complex image areas where it becomes unreadable. ## Color and Visual Hierarchy Red and orange tones consistently outperform blue and green in Pinterest engagement studies. Warm colors create urgency and draw the eye in a feed filled with muted lifestyle photography. However, brand consistency should take priority over trend chasing. Multiple images in a single pin (collage style) can work for tutorials and before/after content. Limit collages to 2-4 images to avoid visual clutter at mobile sizes. ## Pin Titles and Descriptions The pin title (up to 100 characters) is your primary SEO field. Include the search keyword naturally — 'Easy 30-Minute Dinner Recipes for Beginners' outperforms 'My Favorite Meals.' The description (up … ### Facebook Carousel Posts: Design and Engagement Strategies Facebook carousel posts display up to 10 swipeable cards, each with its own image, headline, and link. They consistently outperform single-image posts for click-through rate and are underutilized for organic content. - URL: https://peasydesign.com/guides/facebook-carousel-posts-guide/ - Category: How-To - Reading time: 1 min - Words: 285 Key takeaways: - Carousel posts generate higher engagement because they require active interaction — swiping through cards. - Each carousel card accepts a 1080×1080 pixel image (1:1 ratio) with a headline of up to 40 characters and a description of up to 20 characters. - The most engaging carousels tell a story that unfolds across cards: - For organic reach, carousels work exceptionally well for: - Track card-level metrics to identify where users drop off. ## Why Carousels Work Carousel posts generate higher engagement because they require active interaction — swiping through cards. This physical engagement signals interest to Facebook's algorithm, which rewards the post with broader distribution. Studies show carousel ads achieve 72% higher click-through rates than single image ads, and the same principle applies to organic carousel posts. ## Technical Specifications Each carousel card accepts a 1080×1080 pixel image (1:1 ratio) with a headline of up to 40 characters and a description of up to 20 characters. You can attach up to 10 cards. Each card can link to a different URL, making carousels ideal for product catalogs or multi-page guides. ## Storytelling Across Cards The most engaging carousels tell a story that unfolds across cards: - **Card 1:** Hook — a bold statement or question that compels swiping - **Cards 2-8:** Sequential steps, tips, or product features - **Card 9-10:** Call-to-action with a clear next step Create visual continuity by using a consistent color scheme, font, and layout across all cards. Some brands use a panoramic image split across cards, creating a reveal effect that encourages swiping. ## Organic Carousel Strategy For organic reach, carousels work exceptionally well for: - **Step-by-step tutorials** — Each card is one step - **Before/after comparisons** — Renovation, design, transformation - **Listicles** — '5 tools every designer needs' - **Product showcases** — Multiple angles or variations ## Measuring Carousel Performance Track card-level metrics to identify where users drop off. If most users only view 3 of 10 cards, the story arc loses momentum too early. A healthy carousel maintains at least 40% view-through to the final card. If drop-off is high, front-load the most compelling content and reduce the total card count. ### Troubleshooting CSS Grid Layout Alignment Issues CSS Grid is powerful but its alignment behavior can be confusing when items don't land where you expect. This guide diagnoses the most common Grid alignment problems and provides concrete fixes for each scenario. - URL: https://peasydesign.com/guides/troubleshooting-css-grid-layout-alignment/ - Category: Troubleshooting - Reading time: 3 min - Words: 560 Key takeaways: - CSS Grid provides two axes of alignment: the block axis (vertical, controlled by `align-*` properties) and the inline axis (horizontal, controlled by `justify-*` properties). - When items don't center as expected, the first thing to check is whether your grid is actually spanning the full available width. - By default, `align-items` is set to `stretch`, causing all items in a row to match the height of the tallest item. - Using percentage values for `gap` can cause unexpected results because the gap percentage is resolved against the grid container's content box size in that dimension. - When two items are placed in the same cell via `grid-column` and `grid-row`, they overlap. ## How Grid Alignment Works CSS Grid provides two axes of alignment: the block axis (vertical, controlled by `align-*` properties) and the inline axis (horizontal, controlled by `justify-*` properties). Each axis has three levels of control: the grid container (`*-content`), individual tracks (`*-items` on the container), and individual cells (`*-self` on the item). Understanding this hierarchy is essential for debugging alignment issues. ## Items Not Centering ### Implicit vs Explicit Grid When items don't center as expected, the first thing to check is whether your grid is actually spanning the full available width. A common mistake is setting `display: grid` without defining column templates — the grid defaults to a single column that fills the container, but `justify-items: center` centers items within that single column, not within the page. ### The min-content Trap Columns defined with `auto` sizing shrink to fit their content. If you center items within an auto-sized column, the column itself may be narrower than expected. Use `1fr` units to ensure columns expand to fill available space before centering. ## Uneven Row Heights ### Default Stretch Behavior By default, `align-items` is set to `stretch`, causing all items in a row to match the height of the tallest item. If you override this with `align-items: start` or `center`, items will shrink to their intrinsic height, creating uneven rows. This is often the intended behavior for card layouts but surprising for data tables. ### Subgrid for Consistent Alignment When card components have internal elements (title, image, description, button) that need to align across cards, use `subgrid` on the card's row definition. This allows the card's children to participate in the parent grid's track sizing, ensuring titles align with titles and buttons align with buttons across all cards in a row. ## Gap Behavior Issues ### Gap with Percentage Values … ### Event Ticket QR Codes: Generation, Validation, and Security QR codes on event tickets must balance ease of scanning with resistance to duplication and fraud. A well-designed ticket QR system validates entry in under one second while preventing unauthorized copies. - URL: https://peasydesign.com/guides/event-ticket-qr-codes-guide/ - Category: Best Practice - Reading time: 2 min - Words: 303 Key takeaways: - Each ticket QR code encodes a unique identifier — typically a UUID or cryptographically signed token. - Unique per ticket:** Never encode the same data in multiple QR codes - Scanner reads QR → sends identifier to server → server checks validity and marks as used → returns allow/deny. - The simplest fraud is screenshotting a QR code and sharing it. - At events with 1,000+ attendees, scan speed determines entry throughput. ## Ticket QR Code Architecture Each ticket QR code encodes a unique identifier — typically a UUID or cryptographically signed token. The identifier maps to a record in the event management database containing the ticket holder's information, ticket type, and validation status. ## Generation Best Practices - **Unique per ticket:** Never encode the same data in multiple QR codes - **Cryptographic signing:** Embed a digital signature that the scanner verifies offline, preventing forged QR codes - **Error correction level H:** Events involve physical handling (folding, pockets, rain) — maximum error correction prevents scan failures - **Minimum size:** 3×3 cm for reliable scanning at arm's length under variable lighting conditions ## Validation Workflow ### Online Validation Scanner reads QR → sends identifier to server → server checks validity and marks as used → returns allow/deny. Latency must be under 500ms to maintain entry throughput. Requires network connectivity at the venue. ### Offline Validation For venues without reliable connectivity, embed a cryptographic signature in the QR data itself. The scanner verifies the signature against a pre-shared public key without contacting the server. Trade-off: offline validation cannot detect duplicate use in real time. ## Preventing Fraud ### Screenshot Duplication The simplest fraud is screenshotting a QR code and sharing it. Mitigate with first-scan-wins policy (the first person to scan enters, duplicates are rejected) and rotating QR codes that change every 30 seconds in the ticket app. ### Counterfeit Tickets Without cryptographic signing, anyone who knows the QR format can generate valid-looking codes. Always sign the ticket data so scanners can verify authenticity. ## Scaling for Large Events At events with 1,000+ attendees, scan speed determines entry throughput. Aim for sub-second validation per ticket. Pre-download the attendee database to scanner devices for offline capability. Deploy multiple scanning lanes with independent devices to avoid single … ### Fluid Typography with clamp(): A Modern CSS Approach Implement responsive typography that scales smoothly between viewport sizes using CSS clamp(). Covers the math behind fluid type scales, accessibility considerations, and practical implementation patterns. - URL: https://peasydesign.com/guides/fluid-typography-clamp-modern-css/ - Category: How-To - Reading time: 1 min - Words: 269 Key takeaways: - Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes. - font-size: clamp(minimum, preferred, maximum); - To calculate the preferred value for a given range: - Always use `rem` for minimum values to respect user font size preferences. ## The Problem with Fixed Font Sizes Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes. Viewport units (`vw`) scale continuously but become too small on mobile and too large on desktop without constraints. The `clamp()` function solves both problems elegantly. ## How clamp() Works ```css font-size: clamp(minimum, preferred, maximum); font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem); ``` The browser uses the preferred value (viewport-relative) but never goes below the minimum or above the maximum. The result is smooth scaling between two bounds — no breakpoints needed. ## The Formula To calculate the preferred value for a given range: ``` preferred = min-size + (max-size - min-size) * (100vw - min-viewport) / (max-viewport - min-viewport) ``` For 1rem at 320px → 2rem at 1200px: `preferred = 1rem + (2 - 1) * (100vw - 320px) / (1200 - 320)` = `1rem + 1 * (100vw - 320px) / 880` ≈ `0.636rem + 1.136vw` ## Type Scale | Level | Mobile (320px) | Desktop (1200px) | clamp() | | --- | --- | --- | --- | | Body | 1rem | 1.125rem | `clamp(1rem, 0.95rem + 0.14vw, 1.125rem)` | | H3 | 1.25rem | 1.5rem | `clamp(1.25rem, 1.11rem + 0.28vw, 1.5rem)` | | H2 | 1.5rem | 2rem | `clamp(1.5rem, 1.22rem + 0.57vw, 2rem)` | | H1 | 2rem | 3rem | `clamp(2rem, 1.43rem + 1.14vw, 3rem)` | ## Accessibility Always use `rem` for minimum values to respect user font size preferences. Ensure the minimum size meets WCAG SC 1.4.4 (resize up to 200%). Generate fluid type scales with the Peasy typography calculator. ### Barcode Inventory Management: Setup and Best Practices Barcode-based inventory management reduces counting errors by 67% compared to manual entry. Setting up an effective system requires choosing the right symbology, label design, and scanning hardware. - URL: https://peasydesign.com/guides/barcode-inventory-management-guide/ - Category: How-To - Reading time: 1 min - Words: 279 Key takeaways: - Manual inventory entry averages one error per 300 keystrokes. - For internal inventory (not retail sale), Code 128 is the standard choice. - Design a structured SKU system before generating barcodes: - For warehouse environments, choose laser scanners (fast, long range, 1D only) or imaging scanners (read 1D and 2D, can capture images, shorter range). - Integrate barcode scanning into every inventory touchpoint: receiving (scan incoming items), putaway (scan shelf location + item), picking (scan pick list items), and shipping (scan outgoing items). ## Why Barcodes for Inventory Manual inventory entry averages one error per 300 keystrokes. Barcode scanning averages one error per 36 trillion scans. This difference eliminates the cascading problems caused by miscounts — incorrect reorder points, phantom stock, and fulfillment errors. ## Choosing a Symbology For internal inventory (not retail sale), Code 128 is the standard choice. It encodes alphanumeric data at high density, supports variable length, and includes a built-in check digit. For items that may be sold retail, use GS1 standards (EAN-13 or GS1-128). ## SKU Design Design a structured SKU system before generating barcodes: - **Category prefix:** 2-3 characters identifying the product category - **Identifier:** Unique product number (sequential or meaningful) - **Variant suffix:** Size, color, or configuration code Example: `ELC-4521-BLK` (Electronics, product 4521, Black) Avoid sequential-only SKUs (`0001`, `0002`) — they carry no semantic information and are easy to transpose. ## Label Specifications | Parameter | Recommendation | |-----------|---------------| | Barcode height | Minimum 15 mm | | Module width | 0.33-0.50 mm | | Quiet zone | 10× module width (minimum) | | Human-readable text | Below barcode, 8pt+ font | | Label material | Thermal-transfer for durability | ## Scanner Selection For warehouse environments, choose laser scanners (fast, long range, 1D only) or imaging scanners (read 1D and 2D, can capture images, shorter range). For mobile inventory apps, modern smartphone cameras work for low-volume scanning but are too slow for high-volume warehouse operations. ## Workflow Integration Integrate barcode scanning into every inventory touchpoint: receiving (scan incoming items), putaway (scan shelf location + item), picking (scan pick list items), and shipping (scan outgoing items). Every scan event creates an auditable trail of item movement. ### eBook Format Guide: EPUB, MOBI, PDF, and AZW3 Navigate the eBook format landscape. Understand reflowable vs fixed-layout formats, DRM implications, and how to choose the right format for publishing and personal reading. - URL: https://peasydesign.com/guides/ebook-format-epub-mobi-pdf-azw3-guide/ - Category: How-To - Reading time: 1 min - Words: 268 Key takeaways: - eBook formats split into two paradigms. - EPUB is essentially a ZIP archive containing XHTML content, CSS styling, and metadata. - Amazon Kindle uses proprietary formats (MOBI, AZW3/KF8). - Use PDF only for content where exact layout matters — textbooks with complex diagrams, sheet music, manga, or technical manuals with precise page references. ## Reflowable vs Fixed Layout eBook formats split into two paradigms. Reflowable formats (EPUB, MOBI) adapt text to any screen size — the reader controls font size, margins, and line spacing. Fixed-layout formats (PDF) preserve exact page design but cannot adapt to different screens. Most prose books should use reflowable formats. ## Format Comparison | Format | Type | DRM | Ecosystem | Standard | | --- | --- | --- | --- | --- | | EPUB 3 | Reflowable/Fixed | Optional | Open (Apple, Kobo, Google) | W3C | | MOBI | Reflowable | Kindle DRM | Amazon Kindle (legacy) | Proprietary | | AZW3 (KF8) | Reflowable | Kindle DRM | Amazon Kindle | Proprietary | | PDF | Fixed layout | Optional | Universal | ISO | ## EPUB: The Open Standard EPUB is essentially a ZIP archive containing XHTML content, CSS styling, and metadata. EPUB 3 supports JavaScript, MathML, SVG, audio, and video. It is the standard format for Apple Books, Google Play Books, Kobo, and most independent bookstores. ## The Amazon Ecosystem Amazon Kindle uses proprietary formats (MOBI, AZW3/KF8). Amazon's Send to Kindle service now accepts EPUB files and converts them internally. For self-publishing on Amazon, upload EPUB — Amazon converts to their internal format automatically. ## PDF for eBooks: When and Why Use PDF only for content where exact layout matters — textbooks with complex diagrams, sheet music, manga, or technical manuals with precise page references. For everything else, EPUB provides a superior reading experience across devices. Convert between eBook formats with Peasy's client-side converter — no uploads, no DRM concerns. ### CSS Logical Properties: Writing Direction-Agnostic Layouts Learn CSS logical properties that replace physical directions (left, right, top, bottom) with flow-relative equivalents. Essential for internationalization and RTL language support. - URL: https://peasydesign.com/guides/css-logical-properties-direction-agnostic/ - Category: Best Practice - Reading time: 1 min - Words: 258 Key takeaways: - Traditional CSS uses physical directions: `margin-left`, `padding-right`, `border-top`. - margin: 1rem 2rem; /* top/bottom, left/right */ - Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 15+). - New projects should use logical properties by default — even if you only support LTR today, it future-proofs the codebase. ## Physical vs Logical Properties Traditional CSS uses physical directions: `margin-left`, `padding-right`, `border-top`. These break in right-to-left (RTL) languages like Arabic and Hebrew — a `margin-left` that adds space before content in English adds space after content in Arabic. Logical properties use flow-relative directions that automatically adapt. ## Property Mapping | Physical | Logical | Meaning | | --- | --- | --- | | `margin-left` | `margin-inline-start` | Before content (in writing direction) | | `margin-right` | `margin-inline-end` | After content | | `margin-top` | `margin-block-start` | Before block (typically top) | | `margin-bottom` | `margin-block-end` | After block (typically bottom) | | `width` | `inline-size` | Size in writing direction | | `height` | `block-size` | Size perpendicular to writing | | `text-align: left` | `text-align: start` | Align to writing start | ## Shorthand Properties ```css /* Physical shorthand */ margin: 1rem 2rem; /* top/bottom, left/right */ /* Logical equivalents */ margin-block: 1rem; /* block-start and block-end */ margin-inline: 2rem; /* inline-start and inline-end */ ``` ## Browser Support Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 15+). For projects requiring older browser support, use physical properties with `[dir=rtl]` overrides as a fallback. ## When to Adopt New projects should use logical properties by default — even if you only support LTR today, it future-proofs the codebase. For existing projects, migrate incrementally during refactoring. The CSS is identical in LTR — logical properties only change behavior in RTL contexts. Generate and preview logical property CSS with the Peasy CSS tools. ### QR Codes for Product Packaging: Design and Compliance QR codes on product packaging bridge the physical-digital gap, linking to instructions, authentication, warranty registration, and marketing content. Packaging constraints require careful attention to print quality and placement. - URL: https://peasydesign.com/guides/qr-codes-product-packaging/ - Category: Best Practice - Reading time: 2 min - Words: 322 Key takeaways: - Different packaging materials present scanning challenges: - Some jurisdictions require QR codes on packaging for compliance: - Place the QR code where it is visible without opening the package — ideally the back panel or side panel at the consumer's eye level on shelf. - Always use dynamic QR codes on packaging. - High-contrast ink is essential on reflective surfaces. ## Common Packaging QR Use Cases | Use Case | Destination | Consumer Value | |----------|------------|---------------| | Product manual | PDF or web guide | Reduces paper waste, always up to date | | Warranty registration | Form with pre-filled product info | Faster registration | | Authentication/anti-counterfeit | Verification page | Trust and safety | | Recipe/usage ideas | Content hub | Extended brand engagement | | Sustainability info | Supply chain transparency page | ESG-conscious consumers | | Reorder link | Direct purchase URL | Friction-free repurchase | ## Printing on Packaging Materials Different packaging materials present scanning challenges: - **Cardboard:** Good — provides natural contrast. Use dark ink on unbleached cardboard. Avoid printing over folds or seams. - **Plastic wrap/bags:** Challenging — wrinkles and reflections cause scan failures. Place QR code on a flat, non-reflective area. Use matte finish. - **Glass/metal:** Use a label or direct print. High-contrast ink is essential on reflective surfaces. - **Fabric tags:** Low resolution printing limits QR density. Keep data minimal. ## Regulatory Requirements Some jurisdictions require QR codes on packaging for compliance: - **EU Digital Product Passport** (2027+): QR code linking to product lifecycle data - **FDA UDI (US):** Medical devices must carry a DataMatrix barcode - **GS1 Digital Link:** Transitioning from linear barcodes to QR codes carrying GS1-standard product identifiers ## Placement Best Practices Place the QR code where it is visible without opening the package — ideally the back panel or side panel at the consumer's eye level on shelf. Avoid placement near the barcode used for retail scanning (EAN/UPC) to prevent confusion at checkout. Minimum size of 1.5×1.5 cm for typical consumer packaging scanning distance. ## Dynamic Codes for Packaging Always use dynamic QR codes on packaging. Product URLs may change, landing pages may be redesigned, and warranty … ### Custom QR Code Logos: Embedding Brand Identity Safely Embedding a logo in the center of a QR code reinforces brand identity but risks scan failures if done incorrectly. Understanding the safe zone, error correction requirements, and design constraints ensures reliable scanning. - URL: https://peasydesign.com/guides/custom-qr-code-logos-guide/ - Category: How-To - Reading time: 2 min - Words: 333 Key takeaways: - The logo is not technically part of the QR code data. - Always use error correction level H (30% recovery) when embedding logos. - The center of the QR code is the safest area for logos because: - Round or rounded-square logos work best because they avoid sharp corners that interfere with adjacent data modules. - Test logo QR codes with at least 5 different scanning apps on both iOS and Android. ## How Logo Embedding Works The logo is not technically part of the QR code data. It physically obscures data modules in the center of the code. The QR scanner uses error correction to reconstruct the obscured data. This means the logo area counts against the error correction budget — you are deliberately damaging the code and relying on redundancy to compensate. ## Error Correction Requirements Always use error correction level H (30% recovery) when embedding logos. Even so, the logo should not obscure more than 20-25% of the data area. The remaining 5-10% of recovery capacity handles real-world damage (scratches, printing imperfections, dirt). ## Safe Zone Dimensions The center of the QR code is the safest area for logos because: - Finder patterns (three corners) remain intact - Timing patterns (between finders) remain intact - Alignment patterns (bottom-right region) remain intact - Format and version information (near finders) remain intact A safe logo size is approximately 20% of the QR code's total area. For a 100×100 module code, the logo should fit within approximately 20×20 modules. ## Design Guidelines ### Shape Round or rounded-square logos work best because they avoid sharp corners that interfere with adjacent data modules. Add a white buffer zone (2-3 modules) between the logo edge and the surrounding data modules. ### Color The logo can use brand colors because it is not part of the scannable data. However, maintain sufficient contrast between the logo background and the surrounding QR modules so the scanner can distinguish the boundary. ### Transparency Never use semi-transparent logos that partially obscure data modules. Each module must be either clearly readable or clearly obscured — partial obscuration confuses the error correction algorithm. ## Testing Rigorously Test logo QR codes with at least 5 different scanning apps on both iOS and Android. … ### Gradient Design Trends and Techniques for 2025-2026 Gradients have evolved far beyond simple two-color linear fills. Modern gradient techniques include mesh gradients, noise overlays, and animated transitions that add depth and dimension to interfaces. - URL: https://peasydesign.com/guides/gradient-design-trends-techniques/ - Category: How-To - Reading time: 1 min - Words: 256 Key takeaways: - After years of flat design dominance, gradients have returned with more sophistication. - The simplest form: color transitions along a straight axis. - Use analogous colors for smooth transitions and complementary colors for vibrant energy - CSS gradients render on the GPU and cost virtually nothing in performance. ## The Gradient Renaissance After years of flat design dominance, gradients have returned with more sophistication. Instagram's logo refresh in 2016 kicked off the revival, and today gradients appear in hero sections, buttons, backgrounds, and even typography. ## Types of Gradients ### Linear Gradients The simplest form: color transitions along a straight axis. Control the angle (0-360 degrees) and add multiple color stops to create banding or smooth transitions. CSS syntax: `linear-gradient(135deg, #667eea, #764ba2)`. ### Radial Gradients Colors radiate outward from a center point. Useful for spotlight effects, button glows, and focal-point backgrounds. Adjust the shape (circle vs ellipse) and the size to control how the gradient spreads. ### Conic Gradients Colors rotate around a center point like a color wheel. Ideal for pie-chart-style indicators, progress rings, and decorative elements. CSS: `conic-gradient(from 45deg, red, blue, red)`. ### Mesh Gradients Multiple control points create organic, multi-tonal blends that mimic real-world lighting. Mesh gradients are typically created in design tools like Figma or Illustrator and exported as SVG or raster images. ## Gradient Best Practices - Use analogous colors for smooth transitions and complementary colors for vibrant energy - Add a subtle noise overlay (2-4% opacity) to eliminate banding artifacts on large gradient areas - Test gradients on both light and dark backgrounds - Keep text readable by ensuring sufficient contrast between the gradient background and foreground text ## Performance Note CSS gradients render on the GPU and cost virtually nothing in performance. Avoid replacing them with image files unless you need mesh-gradient fidelity that CSS cannot reproduce. ### Batch QR Code Generation: Techniques for Large-Scale Creation Generating hundreds or thousands of unique QR codes for events, inventory, or marketing campaigns requires automation. Batch generation combines template design with data-driven code creation for consistent, scalable output. - URL: https://peasydesign.com/guides/batch-qr-code-generation-guide/ - Category: How-To - Reading time: 1 min - Words: 288 Key takeaways: - Manual QR code generation works for 1-10 codes. - Start with a structured data source — typically a CSV or spreadsheet with one row per QR code. - JavaScript QR libraries can generate codes in the browser from uploaded CSV data. - PNG:** Best for digital use and basic printing - After batch generation, randomly sample 5-10% of codes and scan them. ## When Batch Generation Is Needed Manual QR code generation works for 1-10 codes. Beyond that, automation becomes essential: - **Event badges:** One unique QR per attendee (100-10,000+) - **Product labels:** One QR per SKU or serial number (100-100,000+) - **Direct mail:** Personalized QR codes linking to individual landing pages - **Asset tracking:** One QR per physical asset in an organization ## Data Preparation Start with a structured data source — typically a CSV or spreadsheet with one row per QR code. Each row contains the unique data to encode and any metadata for the label template: ``` id,name,url,location 001,Server Rack A1,https://assets.co/001,DC-North-R1 002,Server Rack A2,https://assets.co/002,DC-North-R2 ``` Validate the data before generation: check for duplicates, empty fields, malformed URLs, and character encoding issues (special characters in names). ## Generation Approaches ### Client-Side (Browser) JavaScript QR libraries can generate codes in the browser from uploaded CSV data. Best for batches under 1,000 codes. No data leaves the user's device, which is important for sensitive data like serial numbers. ### Command-Line Tools Tools like `qrencode` (Linux/macOS) can be scripted for batch generation: ```bash while IFS=, read -r id name url; do qrencode -o "qr_${id}.png" -s 10 -l H "$url" done < data.csv ``` ## Output Formats - **PNG:** Best for digital use and basic printing - **SVG:** Best for print at any size (vector, infinitely scalable) - **PDF:** Best for direct printing with label templates - **ZIP archive:** Package all generated codes for download ## Quality Assurance After batch generation, randomly sample 5-10% of codes and scan them. Verify that each scanned code resolves to the correct destination. Automated validation can use a QR decoding library to read back each generated image and compare the decoded data against the source CSV. ### MIDI Basics: Understanding Digital Music Notation MIDI is not audio — it is a set of instructions that tells instruments what notes to play. Understanding this distinction unlocks powerful creative possibilities for music production, live performance, and sound design. - URL: https://peasydesign.com/guides/midi-basics-digital-music-notation/ - Category: How-To - Reading time: 2 min - Words: 341 Key takeaways: - MIDI (Musical Instrument Digital Interface) is a communication protocol from 1983 that remains the backbone of digital music production. - Note numbers map to pitches: Middle C = 60, C#4 = 61, etc. - Music production:** Compose in MIDI, experiment with different instruments and sounds after recording - Released in 2020, MIDI 2.0 increases resolution from 7-bit (128 values) to 32-bit (4.3 billion values) for velocity, controllers, and pitch bend. ## What MIDI Is MIDI (Musical Instrument Digital Interface) is a communication protocol from 1983 that remains the backbone of digital music production. A MIDI file contains no sound — it contains instructions: 'play note C4 at velocity 80 for 500 milliseconds.' The receiving instrument (hardware synthesizer, software plugin, or virtual instrument) interprets these instructions and generates the actual sound. ## MIDI Messages ### Note Messages | Message | Data | Purpose | |---------|------|---------| | Note On | Note number (0-127), Velocity (0-127) | Start playing a note | | Note Off | Note number, Release velocity | Stop playing a note | Note numbers map to pitches: Middle C = 60, C#4 = 61, etc. Velocity represents how hard the key was pressed (0 = silent, 127 = maximum force), which typically controls volume and tone. ### Control Messages - **CC1 (Modulation):** Typically vibrato depth - **CC7 (Volume):** Channel volume - **CC10 (Pan):** Left-right stereo position - **CC64 (Sustain):** Sustain pedal on/off - **Pitch Bend:** Smoothly bends pitch up or down ## MIDI vs. Audio | MIDI | Audio (WAV/MP3) | |------|----------------| | Instructions (what to play) | Actual sound waves | | ~10 KB for a 4-min song | ~40 MB (WAV) / ~8 MB (MP3) | | Editable note by note | Editable only as waveform | | Sounds different on every instrument | Sounds identical everywhere | | No fixed timbre/tone | Fixed timbre/tone | ## Practical Uses - **Music production:** Compose in MIDI, experiment with different instruments and sounds after recording - **Live performance:** MIDI controllers (keyboards, drum pads) trigger sounds from laptops or hardware synths - **Education:** MIDI visualizations show which notes are played (popular in YouTube piano tutorials) - **Film scoring:** Compose with MIDI instruments, replace with live orchestra recordings later ## MIDI … ### Design System Spacing and Scale: Building Consistent Layouts Spacing is the invisible architecture of good design. A well-defined spacing scale ensures consistent padding, margins, and gaps across every component without guesswork. - URL: https://peasydesign.com/guides/design-system-spacing-scale/ - Category: Best Practice - Reading time: 1 min - Words: 275 Key takeaways: - Without a scale, every designer picks arbitrary pixel values: 13px here, 17px there. - The most popular system uses multiples of 4px: - A stricter variation uses only multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80. - Padding inside components (buttons, cards, inputs) uses the smaller end of the scale: 8-16px. - Define your scale as CSS custom properties or Tailwind theme values. ## Why Spacing Systems Exist Without a scale, every designer picks arbitrary pixel values: 13px here, 17px there. The result is subtle misalignment that makes interfaces feel unpolished. A spacing system constrains choices to a finite set of values that always look right together. ## The 4-Point Grid The most popular system uses multiples of 4px: | Token | Value | Common Use | |-------|-------|------------| | xs | 4px | Icon padding, tight gaps | | sm | 8px | Inline element spacing | | md | 16px | Component padding | | lg | 24px | Section gaps | | xl | 32px | Card padding | | 2xl | 48px | Section margins | | 3xl | 64px | Page section breaks | Multiples of 4 align cleanly on most screen densities (1x, 1.5x, 2x, 3x) without subpixel rendering. ## The 8-Point Grid A stricter variation uses only multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80. Fewer options mean faster decisions but less granularity. Many teams start with 8-point and add 4px increments only when needed. ## Applying the Scale ### Component-Level Spacing Padding inside components (buttons, cards, inputs) uses the smaller end of the scale: 8-16px. Keep internal padding consistent across all components of the same tier. ### Layout-Level Spacing Gaps between sections and content blocks use the larger end: 32-64px. Increase spacing as visual importance decreases — more space around hero sections, tighter gaps in data tables. ## Implementation Define your scale as CSS custom properties or Tailwind theme values. Reference tokens by name rather than raw pixels so the scale can evolve without hunting through every stylesheet. ### Trigonometry Basics for Developers and Designers Trigonometric functions power animations, game physics, audio visualization, and SVG path generation. This guide covers sin, cos, and tan with practical code examples. - URL: https://peasydesign.com/guides/trigonometry-basics-for-developers/ - Category: How-To - Reading time: 2 min - Words: 304 Key takeaways: - Trigonometry is the math of angles and distances. - For a right triangle with angle θ: - Most programming languages use radians. - Place points on a circle of radius r centered at (cx, cy): ## Why Developers Need Trigonometry Trigonometry is the math of angles and distances. It underlies circular motion, wave animations, audio waveforms, radar charts, analog clocks, and collision detection. Understanding sine and cosine unlocks an enormous range of visual and interactive effects. ## The Big Three Functions For a right triangle with angle θ: - **sin(θ)** = opposite / hypotenuse - **cos(θ)** = adjacent / hypotenuse - **tan(θ)** = opposite / adjacent = sin / cos ## Radians vs Degrees Most programming languages use radians. Convert with: - Degrees to radians: `rad = deg * (π / 180)` - Radians to degrees: `deg = rad * (180 / π)` Full circle = 360° = 2π radians. ## Practical Applications ### Circular Motion Place points on a circle of radius r centered at (cx, cy): `x = cx + r * cos(angle)` `y = cy + r * sin(angle)` Distribute 12 items evenly: increment angle by 2π/12 = 30° between each. ### Wave Animation A sine wave oscillates between -1 and 1. Control amplitude (height), frequency (speed), and phase (offset): `y = amplitude * sin(frequency * x + phase)` ### Rotation Rotate point (x, y) by angle θ around the origin: `x' = x * cos(θ) - y * sin(θ)` `y' = x * sin(θ) + y * cos(θ)` ### Distance and Angle Between Points Distance: `d = sqrt((x2-x1)² + (y2-y1)²)` Angle: `θ = atan2(y2-y1, x2-x1)` Use `atan2` instead of `atan` because it handles all four quadrants correctly. ## Quick Reference | Angle | sin | cos | tan | |-------|-----|-----|-----| | 0° | 0 | 1 | 0 | | 30° | 0.5 | 0.866 | 0.577 | | 45° | 0.707 | 0.707 | 1 | | 90° | 1 | 0 | undefined | | 180° | 0 | … ### CAD File Formats: DXF, DWG, STEP, and IGES for Non-Engineers A practical guide to CAD file formats for developers, designers, and project managers who need to work with engineering files. Understand what each format contains and how to handle them. - URL: https://peasydesign.com/guides/cad-file-formats-dxf-dwg-step-iges/ - Category: How-To - Reading time: 1 min - Words: 293 Key takeaways: - CAD files appear in web applications, data pipelines, and collaboration tools more often than many developers expect. - DWG is Autodesk's native binary format — the dominant standard in architecture and civil engineering. - STEP (Standard for the Exchange of Product Data) is the ISO standard for 3D solid model exchange. - For web-based CAD viewing, convert STEP/DXF to glTF for 3D or SVG for 2D. ## Why CAD Formats Matter Outside Engineering CAD files appear in web applications, data pipelines, and collaboration tools more often than many developers expect. Manufacturing companies share STEP files with suppliers, architectural firms distribute DWG drawings, and 3D printing services accept multiple CAD formats. Understanding the basics helps you handle them correctly. ## Format Overview | Format | Type | Standard | Primary Use | Open? | | --- | --- | --- | --- | --- | | DWG | 2D/3D | Autodesk proprietary | Architecture, mechanical | No | | DXF | 2D/3D | Autodesk (documented) | CAD interchange | Partially | | STEP (.stp) | 3D solid | ISO 10303 | Manufacturing exchange | Yes | | IGES (.igs) | 3D surface | ANSI Y14.26M | Legacy exchange | Yes | | Parasolid (.x_t) | 3D solid | Siemens | Solid modeling kernel | No | ## DWG and DXF: The AutoCAD Ecosystem DWG is Autodesk's native binary format — the dominant standard in architecture and civil engineering. DXF (Drawing Exchange Format) is the text-based interchange variant that most CAD software can read. When you receive DWG files but do not have AutoCAD, request DXF conversion or use open-source viewers. ## STEP: The Universal 3D Exchange STEP (Standard for the Exchange of Product Data) is the ISO standard for 3D solid model exchange. It preserves geometry, topology, and manufacturing information across different CAD systems. When a supplier sends you a 3D model, STEP is the safest format to request. ## Handling CAD Files in Web Applications For web-based CAD viewing, convert STEP/DXF to glTF for 3D or SVG for 2D. These web-native formats render in any browser without plugins. Libraries like Three.js can load converted models directly for interactive visualization. ### Responsive Design Breakpoint Strategy for Modern Devices Choosing the right breakpoints prevents layout issues across the ever-growing range of screen sizes. Learn content-driven breakpoint strategies that outperform device-based approaches. - URL: https://peasydesign.com/guides/responsive-design-breakpoint-strategy/ - Category: Best Practice - Reading time: 1 min - Words: 285 Key takeaways: - Setting breakpoints at exact device widths (375px for iPhone, 768px for iPad) creates a fragile system that breaks whenever a new device launches. - These ranges (used by Tailwind CSS) cover the vast majority of real-world devices without targeting specific models. - Mobile-first means writing base styles for small screens and adding complexity with `min-width` media queries. - CSS Container Queries let components respond to their parent container width rather than the viewport. - Do not rely on browser DevTools alone. ## The Problem with Device Breakpoints Setting breakpoints at exact device widths (375px for iPhone, 768px for iPad) creates a fragile system that breaks whenever a new device launches. A better approach is content-driven breakpoints: resize your browser until the layout breaks, then add a breakpoint at that width. ## Recommended Breakpoint Ranges | Name | Min Width | Typical Devices | |------|-----------|----------------| | sm | 640px | Large phones, small tablets | | md | 768px | Tablets portrait | | lg | 1024px | Tablets landscape, small laptops | | xl | 1280px | Laptops, desktops | | 2xl | 1536px | Large monitors | These ranges (used by Tailwind CSS) cover the vast majority of real-world devices without targeting specific models. ## Mobile-First vs Desktop-First Mobile-first means writing base styles for small screens and adding complexity with `min-width` media queries. This approach produces cleaner CSS because mobile layouts are simpler — you add features rather than overriding them. ## Container Queries CSS Container Queries let components respond to their parent container width rather than the viewport. This is ideal for reusable components (cards, widgets) that appear in sidebars, grids, and full-width layouts at different sizes. ## Testing Strategy Do not rely on browser DevTools alone. Test on real devices to catch touch-target issues, font rendering differences, and scroll behavior. At minimum, test on one iOS device, one Android device, and one tablet. Use cloud-based device labs for broader coverage without maintaining a physical device collection. ## Common Mistakes - Fixed-width containers that overflow on small screens - Hover-only interactions with no touch equivalent - Images without `max-width: 100%` that break layout - Forgetting the viewport meta tag, which disables mobile responsiveness entirely ### CSS Subgrid: Aligning Nested Grid Items Across Tracks Learn CSS subgrid — the feature that solves nested grid alignment. Understand how child elements can participate in their grandparent's grid, enabling card layouts with perfectly aligned content. - URL: https://peasydesign.com/guides/css-subgrid-aligning-nested-grid-items/ - Category: Troubleshooting - Reading time: 1 min - Words: 268 Key takeaways: - When you place cards in a CSS Grid, each card is a grid item. - grid-template-columns: repeat(3, 1fr); - Product cards**: Price, title, and 'Add to Cart' aligned across cards - Subgrid is supported in all modern browsers (Chrome 117+, Firefox 71+, Safari 16+). ## The Nested Grid Problem When you place cards in a CSS Grid, each card is a grid item. But the content inside each card — title, description, footer — creates a separate formatting context. Titles of different lengths cause descriptions and footers to misalign across cards. Subgrid solves this by letting inner elements participate in the outer grid's row tracks. ## How Subgrid Works ```css .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: subgrid; /* Not here — on children */ gap: 1.5rem; } .card { display: grid; grid-row: span 3; /* Card spans 3 parent rows */ grid-template-rows: subgrid; /* Inherit parent's row tracks */ } ``` Each card's title, content, and footer now snap to the same row tracks, creating perfect horizontal alignment across the grid. ## Before and After Subgrid | Without Subgrid | With Subgrid | | --- | --- | | Card heights vary | Cards share row tracks | | Footers misalign | Footers align horizontally | | Requires fixed heights | Content drives sizing | | JavaScript alignment hacks | Pure CSS solution | ## Common Use Cases - **Product cards**: Price, title, and 'Add to Cart' aligned across cards - **Feature comparisons**: Rows align across columns - **Form layouts**: Labels and inputs align in nested fieldsets - **Navigation menus**: Submenu items align with parent grid ## Browser Support Subgrid is supported in all modern browsers (Chrome 117+, Firefox 71+, Safari 16+). For older browsers, the inner grid falls back to independent sizing, which is functional but not perfectly aligned. Experiment with subgrid layouts using the Peasy CSS grid builder. ### SVG Optimization for Web: Reducing File Size and Complexity SVG files exported from design tools contain redundant metadata, unnecessary precision, and editor artifacts. Optimization can reduce file size by 20-60% without any visual change. - URL: https://peasydesign.com/guides/svg-optimization-for-web/ - Category: How-To - Reading time: 1 min - Words: 274 Key takeaways: - Design tools like Figma, Illustrator, and Sketch embed editor metadata, redundant namespaces, excessive decimal precision, and hidden layers in exported SVGs. - SVGO (SVG Optimizer) is the industry-standard tool. - Complex paths with hundreds of anchor points can often be simplified without visible change. - For icons used across many pages, an SVG sprite sheet offers the best balance of performance and flexibility. ## Why Optimize SVGs Design tools like Figma, Illustrator, and Sketch embed editor metadata, redundant namespaces, excessive decimal precision, and hidden layers in exported SVGs. A 50KB logo might shrink to 15KB after optimization — a significant saving when the icon appears on every page. ## What SVGO Removes SVGO (SVG Optimizer) is the industry-standard tool. Its default plugins remove: - XML declarations and doctype - Editor metadata (Illustrator, Sketch namespaces) - Empty groups and unused definitions - Redundant attributes inherited from parents - Excessive coordinate precision (6 decimals reduced to 1-2) - Comments and hidden elements ## Manual Optimization Techniques ### Simplify Paths Complex paths with hundreds of anchor points can often be simplified without visible change. In Illustrator, use Object > Path > Simplify before exporting. This reduces both file size and rendering cost. ### Use CSS Instead of Attributes Inline `fill`, `stroke`, and `opacity` attributes can be consolidated into a `<style>` block or external CSS. This enables theming (including dark mode) and reduces repetition across similar elements. ### Avoid Embedded Rasters Some SVGs contain embedded PNG or JPEG data (base64-encoded `<image>` elements). These negate the scalability benefit of SVG. Extract raster elements into separate files or recreate them as vector paths. ## Inline vs External SVGs | Method | Pros | Cons | |--------|------|------| | Inline `<svg>` | No HTTP request, CSS-stylable | Increases HTML size, not cached | | External `<img>` | Cached, clean HTML | Not CSS-stylable, extra request | | SVG sprite | Cached, CSS-stylable | Build step required | For icons used across many pages, an SVG sprite sheet offers the best balance of performance and flexibility. ### Design Token Management: Bridging Design and Development Design tokens are the single source of truth for colors, spacing, typography, and other visual properties. Managing them well eliminates design-development inconsistencies. - URL: https://peasydesign.com/guides/design-token-management/ - Category: Best Practice - Reading time: 1 min - Words: 250 Key takeaways: - Design tokens are named values that represent design decisions: `color-primary-500`, `spacing-lg`, `font-size-heading-1`. - Raw values with no semantic meaning: `blue-500`, `gray-100`, `4px`. - Store tokens in a platform-agnostic format (JSON or YAML) and transform them into platform-specific outputs: CSS custom properties for web, Swift/Kotlin constants for mobile, XML for Android. - Treat your token file like a library with semantic versioning. ## What Are Design Tokens Design tokens are named values that represent design decisions: `color-primary-500`, `spacing-lg`, `font-size-heading-1`. They abstract raw values (like `#3B82F6` or `24px`) behind semantic names, making it easy to update an entire design system by changing a single token. ## Token Categories | Category | Examples | |----------|--------| | Color | primary, secondary, neutral, semantic (error, success, warning) | | Spacing | xs, sm, md, lg, xl, 2xl | | Typography | font-family, font-size, line-height, font-weight | | Border | radius, width, color | | Shadow | sm, md, lg, xl | | Motion | duration, easing | ## Three-Tier Token Architecture ### Global Tokens Raw values with no semantic meaning: `blue-500`, `gray-100`, `4px`. These form the palette from which all other tokens draw. ### Alias Tokens Semantic references to global tokens: `color-primary` points to `blue-500`, `color-surface` points to `gray-100`. Alias tokens encode design intent. ### Component Tokens Scoped to specific components: `button-bg-primary` points to `color-primary`. These provide granular control without changing the global system. ## Storage Formats Store tokens in a platform-agnostic format (JSON or YAML) and transform them into platform-specific outputs: CSS custom properties for web, Swift/Kotlin constants for mobile, XML for Android. Style Dictionary and Tokens Studio are popular tools for this transformation. ## Versioning Tokens Treat your token file like a library with semantic versioning. Breaking changes (renaming or removing tokens) require a major version bump. Adding new tokens is a minor bump. This discipline prevents downstream breakage when teams consume your tokens. ### Figma to CSS Export: A Complete Workflow Guide Translating Figma designs into production CSS requires more than copying values from the inspect panel. This workflow covers design tokens, responsive adaptations, and handoff best practices. - URL: https://peasydesign.com/guides/figma-to-css-export-workflow/ - Category: How-To - Reading time: 1 min - Words: 299 Key takeaways: - Figma designs are pixel-perfect mockups at fixed dimensions. - Before writing any CSS, extract the design system foundations from Figma: colors (fill values), typography (font family, size, weight, line height), spacing (auto layout gaps and padding), border radius, and shadows. - For each Figma component, decide the HTML structure. - Figma's Inspect panel gives absolute pixel values. - Figma variants show hover, focus, active, and disabled states. ## The Gap Between Design and Code Figma designs are pixel-perfect mockups at fixed dimensions. Production CSS must handle fluid widths, dynamic content, and edge cases that designers cannot anticipate. The goal of export is not pixel matching but intent matching. ## Step 1: Extract Design Tokens Before writing any CSS, extract the design system foundations from Figma: colors (fill values), typography (font family, size, weight, line height), spacing (auto layout gaps and padding), border radius, and shadows. Map these to CSS custom properties. ## Step 2: Map Components to HTML For each Figma component, decide the HTML structure. A Figma auto-layout frame might become a flex container, a grid, or a simple block element depending on content flow requirements. ## Step 3: Write Responsive CSS Figma's Inspect panel gives absolute pixel values. Convert these to relative units where appropriate: | Figma Value | CSS Conversion | When to Use | |-------------|---------------|------------| | 16px font | 1rem | Body text | | 1200px container | max-width: 75rem | Layout containers | | 24px gap | gap: 1.5rem | Flex/grid gaps | | 360px fixed width | width: 100%; max-width: 22.5rem | Cards | ## Step 4: Handle States and Interactions Figma variants show hover, focus, active, and disabled states. Translate each variant into the corresponding CSS pseudo-class. Ensure focus states include visible outlines for keyboard navigation. ## Step 5: Export Assets Export icons as SVG, images as WebP (with JPEG fallback), and illustrations as SVG where possible. Use Figma's export presets to generate multiple resolutions (1x, 2x, 3x) for raster assets. ## Common Pitfalls - Copying box-shadow values verbatim when the design uses inner shadows (CSS `inset`) - Forgetting that Figma's blend modes may not have exact CSS equivalents - Hardcoding pixel widths that should be percentage or viewport-based ### Favicon Creation Guide: From Design to Deployment Favicons appear in browser tabs, bookmarks, home screens, and search results. A complete favicon set requires multiple sizes and formats to cover all platforms. This guide covers the full process from design through implementation. - URL: https://peasydesign.com/guides/favicon-creation-design-to-deployment/ - Category: How-To - Reading time: 2 min - Words: 318 Key takeaways: - A single `favicon.ico` file is no longer sufficient. - Favicons are displayed at 16×16 to 32×32 pixels in browser tabs. - Place these tags in your `<head>` element: - Using `sizes="any"` on the ICO file — specify `sizes="32x32"` instead. - Serving the manifest from a CDN without CORS headers — it must be same-origin or have proper cross-origin headers. ## The Modern Favicon Set A single `favicon.ico` file is no longer sufficient. Modern browsers and platforms expect multiple icon sizes and formats: | File | Size | Purpose | |------|------|---------| | `favicon.ico` | 32×32 | Browser tabs, bookmarks, legacy support | | `icon.svg` | Scalable | Modern browsers (supports dark mode via CSS media queries) | | `apple-touch-icon.png` | 180×180 | iOS home screen shortcut | | `icon-192.png` | 192×192 | Android Chrome, PWA icon | | `icon-512.png` | 512×512 | PWA splash screen, high-DPI displays | | `icon-mask.png` | 512×512 | Android adaptive icon (safe zone: center 50%) | ## Design Guidelines ### Keep It Simple Favicons are displayed at 16×16 to 32×32 pixels in browser tabs. Fine details, thin lines, and small text become unreadable at this size. Use a single bold shape, letter, or symbol. Test your design at 16×16 pixels before committing — if it's not instantly recognizable at that size, simplify further. ### Color and Contrast Choose colors with strong contrast against both light and dark browser chrome. Avoid pure white (invisible on light backgrounds) and very dark colors (invisible in dark mode tabs). If your brand color has low contrast, add a colored background shape or border. ### SVG Favicon with Dark Mode SVG favicons can adapt to the user's color scheme preference: ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <style> circle { fill: #4F46E5; } @media (prefers-color-scheme: dark) { circle { fill: #818CF8; } } </style> <circle cx="256" cy="256" r="240"/> </svg> ``` ## HTML Implementation Place these tags in your `<head>` element: ```html <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> ``` ## Common Mistakes Using `sizes="any"` on the ICO file — specify `sizes="32x32"` instead. Forgetting the `apple-touch-icon` — iOS will use a screenshot instead. Serving … ### SVG Optimization: Reducing File Size While Maintaining Quality SVG files from design tools often contain unnecessary metadata, redundant paths, and bloated markup. Proper optimization can reduce SVG file size by 50-80% without any visual difference. - URL: https://peasydesign.com/guides/svg-optimization-techniques/ - Category: Best Practice - Reading time: 2 min - Words: 348 Key takeaways: - Design tools like Figma, Illustrator, and Sketch export SVGs with editor metadata, unnecessary precision (coordinates with 15 decimal places), hidden layers, empty groups, and redundant styling. - Design tools embed proprietary data: Illustrator's `<i:pgf>` blocks, Sketch's `sketch:` namespace attributes, Figma's layer IDs. - Never remove `<title>`, `<desc>`, or `aria-label` attributes. - For consistent results, integrate SVG optimization into your build pipeline. - ### viewBox Attribute The `viewBox` attribute is essential for responsive scaling. ## Why SVGs Need Optimization Design tools like Figma, Illustrator, and Sketch export SVGs with editor metadata, unnecessary precision (coordinates with 15 decimal places), hidden layers, empty groups, and redundant styling. A 50 KB icon from Figma often compresses to under 5 KB after optimization. ## Key Optimization Techniques ### Remove Editor Metadata Design tools embed proprietary data: Illustrator's `<i:pgf>` blocks, Sketch's `sketch:` namespace attributes, Figma's layer IDs. This data is only useful for reimporting into the original tool and should be stripped for production. ### Reduce Coordinate Precision Path coordinates exported as `M 12.847362847 23.948573629` can usually be safely reduced to `M 12.85 23.95` with no visible difference. Reducing precision from 15 to 2 decimal places typically saves 20-30% of file size in path-heavy SVGs. ### Simplify Paths Complex paths with hundreds of control points can often be simplified with minimal visual impact. Path simplification reduces the number of curve segments while maintaining the overall shape. This is particularly effective for traced or auto-generated paths. ### Convert Shapes to Paths Elements like `<rect>`, `<circle>`, and `<ellipse>` are actually more compact than their path equivalents, so keep them as primitives when possible. However, if a `<rect>` has complex transforms applied, converting it to a pre-transformed `<path>` can be smaller. ### Merge Similar Styles Inline `style` attributes repeated across elements waste bytes. Consolidate repeated styles into a single `<style>` block with CSS classes, or better yet, use `fill` and `stroke` attributes directly on parent `<g>` elements. ## What Not to Optimize ### Accessibility Attributes Never remove `<title>`, `<desc>`, or `aria-label` attributes. These provide screen reader access and should be added if missing, not removed. ### viewBox Attribute The `viewBox` attribute is essential for responsive scaling. Removing it forces the SVG to display at a fixed size. Always keep `viewBox` and remove … ### CI/CD Pipeline Setup: From Code Push to Production Deploy A well-designed CI/CD pipeline catches bugs early, enforces code quality, and deploys with confidence. This guide walks through building a pipeline from scratch with lint, test, build, and deploy stages. - URL: https://peasydesign.com/guides/ci-cd-pipeline-setup-guide/ - Category: How-To - Reading time: 2 min - Words: 375 Key takeaways: - Continuous Integration (CI) means every code change triggers automated checks — linting, type checking, unit tests, integration tests. - Tools: Ruff (Python), ESLint (JavaScript), Biome (JS/TS), golangci-lint (Go) - run: pip install ruff && ruff check . - Fail fast — run cheap checks before expensive ones. ## What CI/CD Means in Practice **Continuous Integration (CI)** means every code change triggers automated checks — linting, type checking, unit tests, integration tests. Broken code is detected within minutes, not days. **Continuous Deployment (CD)** extends this by automatically deploying code that passes all checks to staging or production. ## Pipeline Stages ### Stage 1: Lint and Format The fastest checks run first. Linting catches syntax errors, unused imports, and style violations in seconds. Formatting verification ensures consistent code style across the team. If linting fails, there's no point running slower tests. **Tools:** Ruff (Python), ESLint (JavaScript), Biome (JS/TS), golangci-lint (Go) ### Stage 2: Type Checking Static type analysis catches type errors without executing code. This stage runs in parallel with linting since they're independent. **Tools:** mypy (Python), TypeScript compiler, Flow (JavaScript) ### Stage 3: Unit Tests Unit tests verify individual functions and classes in isolation. They should complete in under 2 minutes for fast feedback. Mock external dependencies (databases, APIs) to keep unit tests fast and deterministic. ### Stage 4: Integration Tests Integration tests verify that components work together correctly — database queries return expected results, API endpoints respond correctly, and background jobs process as expected. These are slower (5-15 minutes) and may require database fixtures or Docker containers. ### Stage 5: Build Compile the application, build Docker images, bundle frontend assets, and generate static files. The build output is an artifact that can be deployed to any environment. ### Stage 6: Deploy Deploy the build artifact to the target environment. For staging, this may be automatic. For production, add a manual approval gate. Post-deploy, run smoke tests to verify the deployment is healthy. ## Pipeline Configuration Example ```yaml # GitHub Actions example name: CI/CD on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: pip … ### Glassmorphism and Neumorphism: When to Use Each Glassmorphism and neumorphism are popular visual styles that add depth to flat interfaces. Both have strengths and serious accessibility trade-offs that designers must understand before adopting them. - URL: https://peasydesign.com/guides/glassmorphism-neumorphism-techniques/ - Category: Comparison - Reading time: 1 min - Words: 296 Key takeaways: - Glassmorphism creates a frosted-glass effect using background blur, transparency, and subtle borders. - Neumorphism (or soft UI) simulates extruded shapes using paired light and dark shadows on matching background colors. - Use glassmorphism sparingly for hero sections and overlays where the blur effect adds visual interest. - Always test contrast ratios against the worst-case background and add a semi-opaque fallback layer if needed. - Interactive elements (buttons, inputs) must have additional visual cues like borders or focus rings. ## Glassmorphism Glassmorphism creates a frosted-glass effect using background blur, transparency, and subtle borders. Popularized by Apple's macOS Big Sur and iOS design language, it adds depth while keeping underlying content partially visible. ### CSS Implementation ```css .glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; } ``` ### Accessibility Concern Transparent backgrounds reduce text contrast against complex backgrounds. Always test contrast ratios against the worst-case background and add a semi-opaque fallback layer if needed. ## Neumorphism Neumorphism (or soft UI) simulates extruded shapes using paired light and dark shadows on matching background colors. Elements appear to push out of or sink into the surface. ### CSS Implementation ```css .neomorphic-button { background: #e0e0e0; box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff; border-radius: 12px; } ``` ### Accessibility Concern Neumorphic elements rely on subtle shadow contrast for visibility. Users with low vision or on low-contrast displays may not perceive boundaries between elements. Interactive elements (buttons, inputs) must have additional visual cues like borders or focus rings. ## Comparison | Aspect | Glassmorphism | Neumorphism | |--------|-------------|-------------| | Depth cue | Blur + transparency | Paired shadows | | Best for | Overlays, modals, cards | Buttons, toggles, sliders | | Accessibility | Moderate (contrast issues) | Poor (low boundary contrast) | | Performance | Moderate (`backdrop-filter` is GPU-heavy) | Good (box-shadow is cheap) | | Dark mode | Works well | Difficult (shadows less visible) | ## Recommendation Use glassmorphism sparingly for hero sections and overlays where the blur effect adds visual interest. Avoid neumorphism for primary interactive elements unless paired with strong affordance cues. Neither style should be the sole visual language of an application — treat them as accent techniques within a broader design system. ### Design Handoff Best Practices: From Figma to Production Poor design handoff causes miscommunication, wasted developer time, and pixel-imperfect implementations. A structured handoff process bridges the gap between design intent and code. - URL: https://peasydesign.com/guides/design-handoff-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 277 Key takeaways: - The most common handoff failures are missing states (hover, disabled, error, empty, loading), undefined responsive behavior, and ambiguous spacing values. - Document every interactive state for each component as a Figma variant: default, hover, focus, active, disabled, loading, error, and success. - Schedule a design review before launch. ## Why Handoff Fails The most common handoff failures are missing states (hover, disabled, error, empty, loading), undefined responsive behavior, and ambiguous spacing values. Developers fill gaps with guesses that diverge from design intent. ## The Handoff Checklist ### 1. Component States Document every interactive state for each component as a Figma variant: default, hover, focus, active, disabled, loading, error, and success. Missing states are the number one source of design-dev discrepancies. ### 2. Responsive Specifications Provide layouts at three to four breakpoints: mobile (375px), tablet (768px), desktop (1280px), and optionally large desktop (1536px). Annotate which elements stack, hide, resize, or reorder at each breakpoint. ### 3. Spacing and Alignment Use auto layout in Figma with explicit gap and padding values. Developers can read these values directly from the Inspect panel without measuring pixel distances between elements. ### 4. Content Extremes Show designs with minimum and maximum content lengths. What happens when a username is 3 characters versus 30? When a product description is one line versus ten? Edge cases reveal layout fragility. ### 5. Animation Specifications Describe motion with timing (duration in ms), easing curve (ease-in-out, spring), and trigger event (on hover, on mount, on scroll). Use Figma prototyping or record a short video reference. ## Tools and Formats | Tool | Strength | |------|--------| | Figma Dev Mode | Inspect values, copy CSS snippets | | Storybook | Interactive component documentation | | Zeroheight | Design system documentation | | Loom/video recordings | Animation and interaction specs | ## Post-Handoff QA Schedule a design review before launch. Compare the implementation to the original designs at each breakpoint, checking spacing, typography, color accuracy, and interactive states. ### Micro-Interaction Design Patterns for Delightful UX Micro-interactions are subtle animations that respond to user actions — a button bounce on click, a toggle slide, a checkmark draw. They make interfaces feel alive and provide immediate feedback. - URL: https://peasydesign.com/guides/micro-interaction-design-patterns/ - Category: How-To - Reading time: 1 min - Words: 294 Key takeaways: - A successful micro-interaction has four parts: a trigger (user action or system event), rules (what happens), feedback (what the user sees), and loops/modes (what happens on repeat or over time). - A button that snaps down 2px on click and returns on release simulates physical button behavior. - Some users experience motion sickness from screen animations. - Always wrap animations in a `prefers-reduced-motion` media query and provide a static fallback. ## What Makes a Good Micro-Interaction A successful micro-interaction has four parts: a trigger (user action or system event), rules (what happens), feedback (what the user sees), and loops/modes (what happens on repeat or over time). Each part should be intentional, not decorative. ## Common Patterns ### Button Feedback A button that snaps down 2px on click and returns on release simulates physical button behavior. Add a subtle scale transform (0.97) for a satisfying press effect. Duration: 100-150ms with ease-out easing. ### Toggle Switches The thumb slides from left to right while the track color transitions. Use a spring easing for the thumb movement and a linear transition for the color change. Duration: 200-300ms. ### Loading Indicators Replace static spinners with skeleton screens that match the layout of incoming content. A subtle shimmer animation (a moving linear-gradient highlight) communicates that content is loading without the anxiety of a spinner. ### Form Validation Shake the input field gently (translateX 3px oscillation, 3 cycles, 300ms) on validation error. Combine with a red border transition and an error message that slides in from above. For success, draw a checkmark SVG path with stroke-dashoffset animation. ## Performance Guidelines | Rule | Reason | |------|--------| | Duration under 400ms | Longer feels sluggish | | Animate transform/opacity only | GPU-composited, no layout thrashing | | Respect prefers-reduced-motion | Accessibility for vestibular disorders | | No animation on page load | Let content appear instantly | ## The Reduced Motion Imperative Some users experience motion sickness from screen animations. Always wrap animations in a `prefers-reduced-motion` media query and provide a static fallback. This is not optional — it is an accessibility requirement. ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` ## Glossary (33 terms) ### Accessibility (Design Accessibility (a11y)) Designing products usable by people with disabilities, following WCAG guidelines for perceivable and operable interfaces. - URL: https://peasydesign.com/glossary/accessibility/ ### Affordance (Design Affordance) A visual cue suggesting how an element should be used (e.g. a raised button affords clicking). - URL: https://peasydesign.com/glossary/affordance/ ### Analogous Colors (Analogous Color Scheme) Three or more colors adjacent on the color wheel, producing harmonious and visually cohesive palettes. - URL: https://peasydesign.com/glossary/analogous-colors/ ### Baseline Grid (Typographic Baseline Grid) A horizontal grid aligned to text baselines that maintains consistent vertical rhythm across a page. - URL: https://peasydesign.com/glossary/baseline-grid/ ### Color Blindness (Color Vision Deficiency) A condition affecting ~8% of men where certain color differences are difficult or impossible to perceive. - URL: https://peasydesign.com/glossary/color-blindness/ ### Color Temperature (Color Temperature) The perceived warmth (reds, yellows) or coolness (blues, greens) of a color, influencing mood and atmosphere. - URL: https://peasydesign.com/glossary/color-temperature/ ### Color Wheel (Color Wheel (Color Circle)) A circular diagram organizing colors by hue to visualize relationships like complementary and analogous colors. - URL: https://peasydesign.com/glossary/color-wheel/ ### Complementary Colors (Complementary Color Scheme) Two colors positioned directly opposite each other on the color wheel, creating high contrast when paired. - URL: https://peasydesign.com/glossary/complementary-colors/ ### Contrast Ratio (WCAG Contrast Ratio) A numerical measure of luminance difference between text and background, with 4.5:1 minimum for WCAG AA compliance. - URL: https://peasydesign.com/glossary/contrast-ratio/ ### Design System (Design System) A collection of reusable components, patterns, and guidelines ensuring visual and behavioral consistency across products. - URL: https://peasydesign.com/glossary/design-system/ ### Design Token (Design Token) A named value representing a design decision (color, spacing, typography) shared across design and code systems. - URL: https://peasydesign.com/glossary/design-token/ ### Fitts's Law (Fitts's Law) A predictive model stating that the time to reach a target depends on its distance and size — larger, closer targets are faster. - URL: https://peasydesign.com/glossary/fittss-law/ ### Font Weight (Font Weight) The thickness of a typeface's strokes, expressed numerically (100-900) or by name (light, regular, bold). - URL: https://peasydesign.com/glossary/font-weight/ ### Gestalt Principles (Gestalt Principles of Perception) Psychological laws (proximity, similarity, closure, continuity) explaining how humans perceive visual elements as groups. - URL: https://peasydesign.com/glossary/gestalt-principles/ ### Golden Ratio (Golden Ratio) The mathematical ratio (~1.618:1) found in nature and used in design to create aesthetically pleasing proportions. - URL: https://peasydesign.com/glossary/golden-ratio/ ### Grid System (Design Grid System) A framework of columns, gutters, and margins used to create consistent, aligned layouts in design. - URL: https://peasydesign.com/glossary/grid-system/ ### Hick's Law (Hick-Hyman Law) A UX principle stating that decision time increases logarithmically with the number of available choices. - URL: https://peasydesign.com/glossary/hicks-law/ ### HSL (Hue, Saturation, Lightness) A cylindrical color model describing colors by hue angle (0-360), saturation (%), and lightness (%). - URL: https://peasydesign.com/glossary/hsl/ ### Information Architecture (Information Architecture (IA)) The structural design of shared information environments, organizing content for intuitive navigation and findability. - URL: https://peasydesign.com/glossary/information-architecture/ ### Material Design (Google Material Design) A design language by Google using grid-based layouts, responsive animations, and depth effects inspired by physical materials. - URL: https://peasydesign.com/glossary/material-design/ ### Mockup (Design Mockup) A high-fidelity static representation of a design showing visual details like colors, typography, and imagery. - URL: https://peasydesign.com/glossary/mockup/ ### Modular Scale (Typographic Modular Scale) A sequence of font sizes generated by multiplying a base size by a consistent ratio for harmonious typography. - URL: https://peasydesign.com/glossary/modular-scale/ ### Monochromatic Color (Monochromatic Color Scheme) A palette using variations of a single hue through different tints, shades, and tones for subtle, cohesive designs. - URL: https://peasydesign.com/glossary/monochromatic-color/ ### Negative Space (Negative Space (White Space)) The empty space between and around design elements that improves readability and visual hierarchy. - URL: https://peasydesign.com/glossary/negative-space/ ### Prototype (Interactive Prototype) A functional model of a design with clickable interactions, used to test usability before development begins. - URL: https://peasydesign.com/glossary/prototype/ ### Responsive Design (Responsive Web Design) A design approach where layouts adapt fluidly to different screen sizes using flexible grids and media queries. - URL: https://peasydesign.com/glossary/responsive-design/ ### Rule of Thirds (Rule of Thirds) A composition guideline dividing the frame into a 3x3 grid, placing key elements along lines or intersections for visual balance. - URL: https://peasydesign.com/glossary/rule-of-thirds/ ### Split-Complementary (Split-Complementary Color Scheme) A color scheme using a base color plus the two colors adjacent to its complement, offering contrast with less tension. - URL: https://peasydesign.com/glossary/split-complementary/ ### Tracking (Letter Spacing (Tracking)) The uniform adjustment of spacing between all characters in a block of text, distinct from kerning. - URL: https://peasydesign.com/glossary/tracking/ ### Triadic Colors (Triadic Color Scheme) Three colors equally spaced (120 degrees apart) on the color wheel, offering vibrant and balanced contrast. - URL: https://peasydesign.com/glossary/triadic-colors/ ### Typeface (Typeface) The overall design of a set of characters (e.g. Helvetica), distinct from a font which is a specific weight and size. - URL: https://peasydesign.com/glossary/typeface/ ### Visual Hierarchy (Visual Hierarchy) The arrangement of design elements by importance using size, color, contrast, and placement to guide the viewer's eye. - URL: https://peasydesign.com/glossary/visual-hierarchy/ ### Wireframe (UI Wireframe) A low-fidelity skeletal outline of a page layout showing structure and content placement without visual design. - URL: https://peasydesign.com/glossary/wireframe/ ## API Base URL: https://peasydesign.com/api/v1/ | Endpoint | Description | |----------|-------------| | GET /api/v1/tools/ | List all tools (filterable by category) | | GET /api/v1/tools/{slug}/ | Tool detail with description, steps, FAQ | | GET /api/v1/categories/ | Tool categories | | GET /api/v1/formats/ | File formats reference | | GET /api/v1/formats/{slug}/ | Format detail with history, pros/cons | | GET /api/v1/conversions/ | Format conversion guides | | GET /api/v1/glossary/ | Terminology with definitions | | GET /api/v1/glossary/{slug}/ | Term with simple + technical explanations, code examples, references | | GET /api/v1/guides/ | Educational guides (filterable by category, audience_level) | | GET /api/v1/guides/{slug}/ | Full guide with content, takeaways, ToC, related guides | | GET /api/v1/use-cases/ | Real-world use cases by industry | | GET /api/v1/search/?q={query} | Cross-model search | | GET /api/v1/sites/ | All 16 Peasy sites | OpenAPI spec: https://peasydesign.com/api/openapi.json ## Content Negotiation All pages support Markdown output for AI agents: - Add `?format=md` to any page URL - Or send `Accept: text/markdown` header ## Platform Stats - 251 tools across 16 sites - 131 file formats documented - 1484 format conversion guides - 695 glossary terms (with simple + technical explanations) - 645 educational guides (avg 1,308 words) - 302 real-world use cases