Shukr Systemic Typescale
Generate mathematically perfect typography scales and vibrant OKLCH color palettes directly in Framer. Snap sizes to a 4px grid and build responsive, dark- and lightmode ready systems in seconds.
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.
Changelog
- Fixed default text color from #333333 to #ffffff so generated text styles are white by default, matching dark-mode Framer projects
- Rebuilt color scale engine using true OKLCH chroma maximization: for each shade, a binary search finds the maximum sRGB-gamut chroma at that lightness/hue pair, producing the most vibrant color physically possible at every step — the same technique used by Radix UI and Tailwind v3
- Lightness targets recalibrated to match Tailwind's 50–950 perceptual distribution (shade 500 now anchors at the natural visual midpoint)
- Hue is now locked across the entire 11-step scale to prevent color drift between shades
- Chroma only fades at the extreme tips (50, 100, 950) to preserve tint/shade aesthetics without killing vibrancy in the mid-range- fixed the CSS bugs
Details
Shukr Design
