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
v3.0 — Final Compliance Update
- Renamed plugin to "Shukr Systemic Typescale" (unique name)
- Added custom 1:1 square icon (Earth horizon)
- Removed manual theme toggle — plugin now automatically follows Framer's Light/Dark theme setting
- Light Mode implemented via CSS [data-framer-theme="light"] attribute selectors (per Framer docs)
- Light Mode: clean Tailwind Slate palette (Slate-50 background, white inputs, dark text)
- Background video hidden in Light Mode for a fast, native feel
- Typography preview text automatically renders in dark color in Light Mode
Details
Shukr Design
