Cynosure Design System

Typography

Juana (headings) and Inter (body) type scales for Cynosure Lutronic.

CSS Tokens SASS Tokens Style Dictionary Component Types

Typefaces

Our typeface defines the foundation of our typography system. It ensures readability, consistency, and flexibility across all applications.

Typeface

Juana

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Typeface

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Typography Scale

This is our typography hierarchy, defining the full range of headings, paragraphs, labels and other text used across the system. It creates a clear and consistent type ramp to maintain readability and visual harmony.

Display

Juana • 40072px • 1.1
Almost before we knew it, we had left the ground.

Display 2

Juana • 40064px • 1.1
Almost before we knew it, we had left the ground.

Heading 1

Juana • 40056px • 1.1

Almost before we knew it, we had left the ground.

Heading 2

Juana • 40048px • 1.1

Almost before we knew it, we had left the ground.

Heading 3

Juana • 40040px • 1.1

Almost before we knew it, we had left the ground.

Heading 4

Juana • 40032px • 1.2

Almost before we knew it, we had left the ground.

Heading 5

Juana • 40028px • 1.2
Almost before we knew it, we had left the ground.

Heading 6

Juana • 40024px • 1.3
Almost before we knew it, we had left the ground.

Body 1

Inter • 40022px • 1.4
Almost before we knew it, we had left the ground.

Body 2

Inter • 40020px • 1.4
Almost before we knew it, we had left the ground.

Body 3

Inter • 40018px • 1.4
Almost before we knew it, we had left the ground.

Body 4

Inter • 40017px • 1.4
Almost before we knew it, we had left the ground.

Body 5

Inter • 40016px • 1.4
Almost before we knew it, we had left the ground.

Body 6

Inter • 40015px • 1.3
Almost before we knew it, we had left the ground.

Body 7

Inter • 40014px • 1.3
Almost before we knew it, we had left the ground.

Caption 1

Inter • 50013px • 1.3
Almost before we knew it, we had left the ground.

Label M

Inter • 50012px • 1.3
Almost before we knew it, we had left the ground.

Button L

Inter • 50016px • 1.0
Almost before we knew it, we had left the ground.

Button S

Inter • 50013px • 1.0
Almost before we knew it, we had left the ground.

Samples below are the live type tokens. For Juana/Inter usage, section headers, and Tailwind utilities (text-h*, text-body-*, eyebrows, quotes), see Typography guidelines and Resources.