Shukr Systemic Typescale

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.