Add tailwind spec to guideline

Author: Guilhem-lm

brand_guidelines/visual_identity/typography/index.mdx

@@ -101,15 +101,15 @@ We use a **lighter default** with a **darker emphasis option** to:
 		{
 			style: 'Page Title',
 			example: <div style={{ fontSize: '24px', fontWeight: '600', color: '#2d3748' }}>Home</div>,
-			specifications: '24px • 600 weight • text-emphasis',
+			specifications: '24px (text-2xl) • 600 weight (font-semibold) • text-emphasis',
 			usage: 'Main application page titles'
 		},
 		{
 			style: 'Title',
 			example: (
 				<div style={{ fontSize: '18px', fontWeight: '600', color: '#2d3748' }}>Flow inputs</div>
 			),
-			specifications: '18px • 600 weight • text-emphasis',
+			specifications: '18px (text-lg) • 600 weight (font-semibold) • text-emphasis',
 			usage: 'Top-level page headings, modal titles'
 		},
 		{
@@ -119,7 +119,7 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Advanced settings
 				</div>
 			),
-			specifications: '14px • 600 weight • text-emphasis',
+			specifications: '14px (text-sm) • 600 weight (font-semibold) • text-emphasis',
 			usage: 'Panel headers, card titles, sidebar groups'
 		},
 		{
@@ -129,15 +129,15 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Default text throughout the application
 				</div>
 			),
-			specifications: '12px • 400 weight • text-primary',
+			specifications: '12px (text-xs) • 400 weight (font-normal) • text-primary',
 			usage: 'Descriptions, content, list items, table cells'
 		},
 		{
 			style: 'Body Emphasized',
 			example: (
 				<div style={{ fontSize: '12px', fontWeight: '500', color: '#2d3748' }}>Field name:</div>
 			),
-			specifications: '12px • 500 weight • text-emphasis',
+			specifications: '12px (text-xs) • 500 weight (font-medium) • text-emphasis',
 			usage: 'Labels, form field labels, tab labels'
 		},
 		{
@@ -147,15 +147,15 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Last run 2 hours ago
 				</div>
 			),
-			specifications: '12px • 400 weight • text-secondary',
+			specifications: '12px (text-xs) • 400 weight (font-normal) • text-secondary',
 			usage: 'Supporting information, metadata, timestamps'
 		},
 		{
 			style: 'Caption',
 			example: (
 				<div style={{ fontSize: '11px', fontWeight: '400', color: '#718096' }}>Optional field</div>
 			),
-			specifications: '11px • 400 weight • text-secondary',
+			specifications: '11px (text-2xs) • 400 weight (font-normal) • text-secondary',
 			usage: 'Helper text, table headers, annotations'
 		},
 		{
@@ -165,7 +165,7 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Enter job name...
 				</div>
 			),
-			specifications: '11px • 400 weight • text-hint',
+			specifications: '11px (text-2xs) • 400 weight (font-normal) • text-hint',
 			usage: 'Input placeholders, tooltips, empty states'
 		},
 		{
@@ -184,23 +184,23 @@ We use a **lighter default** with a **darker emphasis option** to:
 					job_id_12345
 				</code>
 			),
-			specifications: '11px • 400 weight • monospace • text-emphasis',
+			specifications: '11px (text-2xs) • 400 weight (font-normal) • monospace (font-mono) • text-emphasis',
 			usage: 'Job IDs, code snippets, file paths, API endpoints'
 		}
 	]}
 	darkExamples={[
 		{
 			style: 'Page Title',
 			example: <div style={{ fontSize: '24px', fontWeight: '600', color: '#f3f4f6' }}>Home</div>,
-			specifications: '24px • 600 weight • text-emphasis',
+			specifications: '24px (text-2xl) • 600 weight (font-semibold) • text-emphasis',
 			usage: 'Main application page titles'
 		},
 		{
 			style: 'Title',
 			example: (
 				<div style={{ fontSize: '18px', fontWeight: '600', color: '#f3f4f6' }}>Flow inputs</div>
 			),
-			specifications: '18px • 600 weight • text-emphasis',
+			specifications: '18px (text-lg) • 600 weight (font-semibold) • text-emphasis',
 			usage: 'Top-level page headings, modal titles'
 		},
 		{
@@ -210,7 +210,7 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Advanced settings
 				</div>
 			),
-			specifications: '14px • 600 weight • text-emphasis',
+			specifications: '14px (text-sm) • 600 weight (font-semibold) • text-emphasis',
 			usage: 'Panel headers, card titles, sidebar groups'
 		},
 		{
@@ -220,15 +220,15 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Default text throughout the application
 				</div>
 			),
-			specifications: '12px • 400 weight • text-primary',
+			specifications: '12px (text-xs) • 400 weight (font-normal) • text-primary',
 			usage: 'Descriptions, content, list items, table cells'
 		},
 		{
 			style: 'Body Emphasized',
 			example: (
 				<div style={{ fontSize: '12px', fontWeight: '500', color: '#f3f4f6' }}>Field name:</div>
 			),
-			specifications: '12px • 500 weight • text-emphasis',
+			specifications: '12px (text-xs) • 500 weight (font-medium) • text-emphasis',
 			usage: 'Labels, form field labels, tab labels'
 		},
 		{
@@ -238,15 +238,15 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Last run 2 hours ago
 				</div>
 			),
-			specifications: '12px • 400 weight • text-secondary',
+			specifications: '12px (text-xs) • 400 weight (font-normal) • text-secondary',
 			usage: 'Supporting information, metadata, timestamps'
 		},
 		{
 			style: 'Caption',
 			example: (
 				<div style={{ fontSize: '11px', fontWeight: '400', color: '#aab0bb' }}>Optional field</div>
 			),
-			specifications: '11px • 400 weight • text-secondary',
+			specifications: '11px (text-2xs) • 400 weight (font-normal) • text-secondary',
 			usage: 'Helper text, table headers, annotations'
 		},
 		{
@@ -256,7 +256,7 @@ We use a **lighter default** with a **darker emphasis option** to:
 					Enter job name...
 				</div>
 			),
-			specifications: '11px • 400 weight • text-hint',
+			specifications: '11px (text-2xs) • 400 weight (font-normal) • text-hint',
 			usage: 'Input placeholders, tooltips, empty states'
 		},
 		{
@@ -275,7 +275,7 @@ We use a **lighter default** with a **darker emphasis option** to:
 					job_id_12345
 				</code>
 			),
-			specifications: '11px • 400 weight • monospace • text-emphasis',
+			specifications: '11px (text-2xs) • 400 weight (font-normal) • monospace (font-mono) • text-emphasis',
 			usage: 'Job IDs, code snippets, file paths, API endpoints'
 		}
 	]}

tailwind.config.js

@@ -43,7 +43,17 @@ module.exports = {
 		'bg-feedback-success',
 		'bg-feedback-warning',
 		'bg-feedback-error',
-		'bg-feedback-info'
+		'bg-feedback-info',
+		// Typography classes used in guidelines
+		'text-2xl',
+		'text-lg',
+		'text-sm',
+		'text-xs',
+		'text-2xs',
+		'font-normal',
+		'font-medium',
+		'font-semibold',
+		'font-mono'
 	],
 	extend: {
 		height: {
@@ -70,6 +80,9 @@ module.exports = {
 				'"Courier New"',
 				'monospace'
 			]
+		},
+		fontSize: {
+			'2xs': ['11px', { lineHeight: '16px' }]
 		}
 	},
 	theme: {