Design Tools
Design system generators and visual design utilities.
์์ ํ๋ ํธ ์์ฑ๊ธฐ
๋์์ธ์ฉ ์กฐํ๋ก์ด ์์ ํ๋ ํธ ์์ฑ
ํ์ ์ค์ผ์ผ ์์ฑ๊ธฐ
์กฐํ๋ก์ด ํ์ดํฌ๊ทธ๋ํผ ์ค์ผ์ผ ์์ฑ
๊ฐ๊ฒฉ ์ค์ผ์ผ ์์ฑ๊ธฐ
์ผ๊ด๋ ๊ฐ๊ฒฉ ์ค์ผ์ผ ์์ฑ
๋ฐ์ํ ๋ธ๋ ์ดํฌํฌ์ธํธ
๋ฐ์ํ ๋ธ๋ ์ดํฌํฌ์ธํธ ์ฐธ์กฐ ๊ฐ์ด๋
ํ๋ฉด ๋น์จ ๊ณ์ฐ๊ธฐ
์ด๋ฏธ์ง ๋ฐ ์์ ํ๋ฉด ๋น์จ ๊ณ์ฐ
์์ ์์ ์์ฑ๊ธฐ
์์์ ๋ฐ๊ธฐ ์ค์ผ์ผ ์์ฑ
๊ธ๊ผด ํ์ด๋ง ์ ์
์กฐํ๋ก์ด ๊ธ๊ผด ํ์ด๋ง ์ฐพ๊ธฐ
๋๋น ๊ฒ์ฌ๊ธฐ
WCAG ๋๋น ๋น์จ ๊ฒ์ฌ
๋์์ธ ํ ํฐ ์์ฑ๊ธฐ
๋์์ธ ์์คํ ํ ํฐ ์์ฑ
์์ ๋ฏธ๋์ด ํฌ๊ธฐ ๊ฐ์ด๋
์์ ๋ฏธ๋์ด ์ด๋ฏธ์ง/์์ ํฌ๊ธฐ ์ฐธ์กฐ
Golden Ratio Calculator
Calculate golden ratio proportions for layouts, typography, and spacing
App Icon Size Guide
Complete icon size requirements for iOS, Android, Web, Windows, and macOS
Shadow System Generator
Generate elevation shadow systems in Material, Tailwind, or custom style
Multi-Stop Gradient Generator
CSS Pattern Generator
Learn Design Tools
Key concepts and practical guides to level up your workflow.
๐ ์ฉ์ด์ง
A visual cue suggesting how an element should be used (e.g. a raised button affords โฆ
A horizontal grid aligned to text baselines that maintains consistent vertical rhythm across a page.
The perceived warmth (reds, yellows) or coolness (blues, greens) of a color, influencing mood and โฆ
A numerical measure of luminance difference between text and background, with 4.5:1 minimum for WCAG โฆ
A predictive model stating that the time to reach a target depends on its distance โฆ
The thickness of a typeface's strokes, expressed numerically (100-900) or by name (light, regular, bold).
A composition guideline dividing the frame into a 3x3 grid, placing key elements along lines โฆ
Designing products usable by people with disabilities, following WCAG guidelines for perceivable and operable interfaces.
๐ ๊ฐ์ด๋
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.
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 โฆ
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 โฆ
Online tools must be usable by everyone, including people with visual, motor, and cognitive disabilities. Learn the key accessibility patterns for interactive web applications.
Explore All Peasy Tools
15 specialized sites โ one easy-peasy family.