Design & Coloring Tool

Grid & Proportions

Image

ⓘ

Overlays

ⓘ

Rule of Thirds (3×3)

Golden Spiral

Canvas Size

ⓘ

Width

Height

Fibonacci Circles

ⓘ

Count

Show Circles

💡 Recommendations

Upload an image to get composition recommendations.

Golden Ratio Typography

Calculator

ⓘ

Base Font Size (px)

Headline—

Sub-headline—

Body—

Line-Height—

Preview

ⓘ

Headline Text

Sub-headline Text

Body text demonstrates how the golden ratio auto-leading improves readability and ergonomics of paragraph content.

💡 Typography Tips

📏

Body text should be 14–18px for web. Below 14px hurts readability on screens.

📐

Line-height 1.618 (golden ratio) gives comfortable reading rhythm. Avoid below 1.4.

🎯

Headline scale — at least 1.5× body size for clear hierarchy. Our φ multiplier gives 1.618×.

📏

Line length — aim for 50–75 characters per line. Wider than that and readers lose their place.

Contrast Checker

Color Selection

ⓘ

Text Color

Background

WCAG Results

ⓘ

—

Sample Text

💡 Contrast Tips

♿

Accessibility is not optional. 1 in 12 men have color vision deficiency. Always aim for AA minimum.

🖥️

Ambient light matters. Users outdoors need higher contrast than in a dark room. Design for the worst case.

⚠️

Never rely on color alone. Pair color with icons, text labels, or patterns to convey meaning.

Design Linter

Image Analysis

ⓘ

Upload an image to analyze

Font Family Tracker

ⓘ

Display Font Check

ⓘ

Font Name

Font Pairing Suggestions

ⓘ

Heading Font

💡 Lint Recommendations

Upload an image to see design health recommendations.

Color Psychology

Extracted Palette

ⓘ

Upload an image to extract colors

Select Mood

ⓘ

—

Industry Suggestions

ⓘ

Color Tooltip

ⓘ

Pick a color

💡 Color Recommendations

Upload an image to get palette-based recommendations.

📁

Drop image here or click to upload

PNG, JPG, SVG, WebP supported