Settings

Headings Weight Range

Generated typescale CSS

You're almost setup to use your new typescale, you'll need to use this css file in your code, as well as to import the design tokens into Figma through our plugin.

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500;600;700&display=swap'); body { font-size: 20px; font-family: "Red Hat Text", sans-serif; --paragraph-space: 2rem; --title-space: 1rem; font-weight: 300; } .space-text-above, p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: var(--paragraph-space); } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: var(--title-space); } p + p { margin-top: var(--title-space); } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .space-text-below { margin-bottom: var(--paragraph-space); } p.bold, span.bold, .body-1.bold, .body-2.bold, p .bold, span .bold, .body-1 .bold, .body-2 .bold, p strong, span strong, .body-1 strong, .body-2 strong, p b, span b, .body-1 b, .body-2 b { font-weight: 700; } h1, .title-1 ,h2, .title-2 ,h3, .title-3 ,h4, .title-4 ,h5, .title-5 ,h6, .title-6 { font-style: normal; text-transform: none; max-width: 768px; } p, .max-w-text { max-width: 768px; } h1, .title-1 { font-size: 50px; line-height: 56px; font-weight: 300; letter-spacing: -0.005em; } h2, .title-2 { font-size: 44px; line-height: 52px; font-weight: 300; letter-spacing: -0.004em; } h3, .title-3 { font-size: 38px; line-height: 52px; font-weight: 400; letter-spacing: -0.002em; } h4, .title-4 { font-size: 34px; line-height: 48px; font-weight: 500; letter-spacing: -0.001em; } h5, .title-5 { font-size: 30px; line-height: 48px; font-weight: 600; letter-spacing: 0em; } h6, .title-6 { font-size: 26px; line-height: 48px; font-weight: 700; letter-spacing: 0.001em; } p, button, .body-1 { font-size: 20px; line-height: 32px; font-weight: 400; letter-spacing: 0.001em; } label, figcaption, input, .body-2 { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.043em; } .tooltip { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.081em; } @media (min-width: 768px) { body { font-size: 22px; } h1, .title-1 { font-size: 88px; line-height: 96px; } h2, .title-2 { font-size: 72px; line-height: 88px; } h3, .title-3 { font-size: 60px; line-height: 80px; } h4, .title-4 { font-size: 48px; line-height: 72px; } h5, .title-5 { font-size: 40px; line-height: 64px; } h6, .title-6 { font-size: 32px; line-height: 56px; } p, button, .body-1 { font-size: 22px; line-height: 32px; } label, figcaption, input, .body-2 { font-size: 18px; line-height: 28px; } .tooltip { font-size: 14px; line-height: 20px; } }

Typescale Garden

Data Policy

Last Updated: March 6 2024

1. Overview

This data policy outlines how Typescale Garden collects, uses, and protects user data when interacting with our services. We leverage Auth0 as a third-party authentication provider and utilize Hotjar and Google Analytics for analytics purposes.

2. Information Collected

We collect and store the following user information:

  • Basic Profile Information: Like Name and email as well as other public openId fields.
  • Authentication Data: Auth0 Tokens used to verify ownership of the different generated contents of Typescale Garden's users.
  • Usage Analytics: Anonymous and encrypted usage data through Hotjar and Google Analytics (GA4).

3. How We Use Your Data

We use the collected data for the following purposes:

  • User Authentication: Utilizing Auth0 for secure user authentication.
  • Personalization: Enhancing user experience based on preferences.
  • Analytics: Improving our services through aggregated usage data with Hotjar and Google Analytics.

4. Data Security

We prioritize the security of your data:

  • Third-Party Providers: Auth0, Hotjar, and Google Analytics are trusted for secure services.
  • Encryption: Data transmission is encrypted using industry-standard protocols.

5. Data Retention

We retain user data for the duration necessary for the outlined purposes. Users can request data deletion by contacting [email protected].

6. Third-Party Access

We share aggregated usage analytics with Hotjar and Google Analytics for analytics purposes.

7. Changes to Policy

Any changes to this data policy will be communicated through [Notification Channel].

8. Contact Information

For any questions or concerns regarding your data, contact us at [email protected].

Hi, Nacho Here 😄! I Think There's Something You Should Know:

Typescale Garden is an Open Source Project!

If you've found value in it and would like to support its continued maintenance, I encourage you to consider making a donation through GitHub Sponsors .

I will greatly appreciate it! Also your name will be forever visible in the project's wall of eternity 😱!!! (coming soon once we have someone to put there 😅).

How Else Can I Support the Project?

Whether you're a developer or simply want to offer support, request new features, or report a bug for swift resolution, please check the GitHub repo. or send me a message at [email protected].