Vector Shape Generator
π·
Basic Shapes
Shape:
β
β
β²
β
β
⬑
Size:
100px
Color:
Pattern Generator
Pattern:
Spacing:
20px
Primary:
Secondary:
Grid System Builder
β
Custom Grid
Columns:
Gutter:
20px
Margin:
20px
Width:
px
Responsive Breakpoints
Mobile:
px
Tablet:
px
Desktop:
px
Large:
px
Define your breakpoints above to generate responsive CSS media queries.
Measurement & Spacing Tools
π
Distance Calculator
X1:
Y1:
X2:
Y2:
Distance: 0px
Angle: 0Β°
Golden Ratio Calculator
Base Value:
px
Golden Ratio (Ο): 1.618033988749895
Base: 100px
Golden: 161.80px
Small: 61.80px
Fibonacci Sequence:
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144
Color Theory Calculator
π¨
Color Harmony
Base Color:
Harmony Type:
Contrast Analyzer
Foreground:
Background:
Sample Text
Contrast Ratio: 21:1
WCAG AA: β
Pass (4.5:1)
WCAG AAA: β
Pass (7:1)
Typography Analyzer
Aa
Type Scale Generator
Base Size:
px
Scale Ratio:
Readability Tester
Font Size:
16px
Line Height:
1.5
Letter Spacing:
0em
The quick brown fox jumps over the lazy dog. This sample text demonstrates readability with current typography settings. Proper spacing and sizing ensure optimal reading experience across different devices and user preferences.
Readability Score: Good
Characters per line: 65-75 (optimal)
Reading level: 8th grade
Logo Construction Tools
β
Logo Grid Builder
Grid Type:
Divisions:
8
Icon Generator
Icon Style:
Stroke Width:
2px
Size:
Accessibility Testing
βΏ
WCAG Compliance
Text Color:
Background:
Font Size:
16px
Accessibility Test Sample
This text demonstrates accessibility compliance with current color and typography settings. Proper contrast ensures readability for users with visual impairments.
Contrast: 21:1 (WCAG AAA)
Font Size: 16px (Minimum met)
Color Blindness: Safe
Focus Indicators: Check needed
Color Blindness Simulator
Simulation Type:
Test Colors:
Select a color blindness type to see how your colors appear to users with different types of color vision deficiency.
Export & Code Generation
π€
Design System Export
Export Format:
π¨
Colors
Colors
Aa
Typography
Typography
π
Spacing
Spacing
βοΈ
Shadows
Shadows
β¬
Borders
Borders
π¦
Complete
Complete
Specification Generator
Project Name:
Include Sections:
Design Specification will be generated here based on your selections and current design tokens.