---
title: "Shukr Systemic Typescale — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Shukr Design · Styles. Typescale & Color Generator"
canonical: "https://framer.elliotli.dev/plugin/shukr-systemic-typescale"
---

[Home](/)/[Plugins](/plugins)/[Styles](/plugins/category/styles)/Shukr Systemic Typescale

# Shukr Systemic Typescale

Typescale & Color Generator

[View on Framer](https://framer.com/marketplace/plugins/shukr-systemic-typescale/?via=elliot-li)

![Shukr Systemic Typescale preview image 1](https://framer.elliotli.dev/og/plugin/shukr-systemic-typescale/f9ab0a96b57a92d1/1600x1200.jpg)

## Summary

Typescale & Color Generator

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #459

## Details

- **Author**: Shukr Design
- **Published**: 2026-04-06
- **Updated**: 2026-04-05
- **Added**: 2026-04-04
- **Categories**: Styles

## More like this

-   [Sealcraft](/plugin/sealcraft) — Cyedi Creative Studio · Free — Badges, stamps and spinning seals
-   [Divider Lab](/plugin/divider-lab) — ANASS TB · Free — Shape dividers for clean sections
-   [Tablecraft](/plugin/tablecraft) — ANASS TB · Free — Paste rows, get a designed table
-   [Cookiewall](/plugin/cookiewall) — ANASS TB · Free — Cookie banners, done in seconds