Shukr Systemic Typescale

Typescale & Color Generator

Precision Typography & Color Systems Stop guessing your font sizes and color shades. The Typescale & Color Generator brings mathematical precision to your Framer projects using geometric progressions and the modern OKLCH color space. Advanced Typography - Geometric Scaling : Use ratios like the Golden Ratio or Perfect Fourth to create visual hierarchy instantly. - 4px Grid Snapping : Automatically round your font sizes to the nearest 4px for a clean, surgical layout. - Responsive by Default : Styles come pre-configured with Framer's standard L/M/S breakpoints (1200px / 810px / 0px). - Smart Logic : Headings scale responsively, while Body and Small text stay static to preserve legibility across devices. Professional OKLCH Colors - Vibrant Palettes : Uses the perceptually uniform OKLCH color space for colors that feel more "alive" and consistent than standard HSL. - Intelligent Chroma Tapering : Automatically manages saturation at the extremes (50/950) to prevent muddy or neon colors. - Dark Mode Ready : One-click generation for matching Light and Dark mode variants that integrate seamlessly with Framer's theme engine. Clean Organization - Style Folders : Automatically group your generated styles into custom folders (e.g., "Brand / Primary / 500"). - Zero Configuration : No manual setup required. Just click generate and your Styles panel populates instantly. Built for high-end Framer designers who care about precision and aesthetic excellence.

Typescale & Color Generator