export const fonts = [
	{
		name: 'display-l',
		description:
			'Display fonts are used for large text to grab attention, such as titles or important data.',
		size: 'display-l',
		definitions: {
			px: '56px',
			rem: '3.5rem',
		},
	},
	{
		name: 'display-m',
		description:
			'Display fonts are used for large text to grab attention, such as titles or important data.',
		size: 'display-m',
		definitions: {
			px: '48px',
			rem: '3rem',
		},
	},
	{
		name: 'display-s',
		description:
			'Display fonts are used for large text to grab attention, such as titles or important data.',
		size: 'display-s',
		definitions: {
			px: '40px',
			rem: '2.5rem',
		},
	},
	{
		name: 'headline-xl',
		description:
			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
		size: 'headline-xl',
		definitions: {
			px: '40px',
			rem: '2.5rem',
		},
	},
	{
		name: 'headline-l',
		description:
			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
		size: 'headline-l',
		definitions: {
			px: '32px',
			rem: '2rem',
		},
	},
	{
		name: 'headline-m',
		description:
			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
		size: 'headline-m',
		definitions: {
			px: '24px',
			rem: '1.5rem',
		},
	},
	{
		name: 'headline-s',
		description:
			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
		size: 'headline-s',
		definitions: {
			px: '20px',
			rem: '1.25rem',
		},
	},
	{
		name: 'headline-xs',
		description:
			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
		size: 'headline-xs',
		definitions: {
			px: '18px',
			rem: '1.125rem',
		},
	},
	{
		name: 'body-xl',
		description:
			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
		size: 'body-xl',
		definitions: {
			px: '20px',
			rem: '1.25rem',
		},
	},
	{
		name: 'body-l',
		description:
			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
		size: 'body-l',
		definitions: {
			px: '18px',
			rem: '1.125rem',
		},
	},
	{
		name: 'body-m',
		description:
			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
		size: 'body-m',
		definitions: {
			px: '16px',
			rem: '1rem',
		},
	},
	{
		name: 'body-s',
		description:
			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
		size: 'body-s',
		definitions: {
			px: '14px',
			rem: '0.875rem',
		},
	},
	{
		name: 'body-xs',
		description:
			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
		size: 'body-xs',
		definitions: {
			px: '12px',
			rem: '0.75rem',
		},
	},
];
