Text styles

Assigned interface text roles composed from the typography foundations and structured for direct implementation.

Semantic roles

Portal typography

Inter Display · sentence case · Semibold is the maximum normal interface emphasis.

type.display2.5rem · 3rem line · 600 weight · -0.03em tracking

A calm operational workspace

type.page-title-lg2rem · 2.5rem line · 500 weight · -0.02em tracking

Product management

type.page-title1.75rem · 2.25rem line · 500 weight · -0.02em tracking

Seasonal menu

type.page-title-sm1.5rem · 2rem line · 500 weight · -0.01em tracking

Search appearance

type.section-title-lg1.5rem · 2rem line · 500 weight · -0.01em tracking

Availability and fulfilment

type.section-title1.25rem · 1.75rem line · 500 weight · -0.01em tracking

Product details

type.subsection-title1rem · 1.5rem line · 500 weight · 0.01em tracking

Location availability

type.component-title0.875rem · 1.25rem line · 500 weight · 0.01em tracking

Preparation time

type.body-lg1rem · 1.5rem line · 400 weight · 0.01em tracking

Keep product information clear and consistent across every connected channel.

type.body0.875rem · 1.375rem line · 400 weight · 0.01em tracking

Changes made here appear on the product page after publishing.

type.body-sm0.8125rem · 1.25rem line · 400 weight · 0.01em tracking

Last updated today at 09:42.

type.label0.875rem · 1.25rem line · 500 weight · 0.01em tracking

Product name

type.label-sm0.8125rem · 1.125rem line · 500 weight · 0.01em tracking

Order reference

type.support0.75rem · 1.125rem line · 400 weight · 0.02em tracking

Shown to customers on every sales channel.

type.micro0.6875rem · 1rem line · 500 weight · 0.02em tracking

Updated 2 minutes ago

type.action0.875rem · 1.25rem line · 500 weight · 0.015rem tracking

Save changes

type.action-sm0.8125rem · 1.125rem line · 500 weight · 0.015rem tracking

View details

type.data-display1.75rem · 2.25rem line · 500 weight · -0.02em tracking

€12.840,50

type.data-display-sm1.5rem · 2rem line · 500 weight · -0.01em tracking

1.284

type.data-lg0.875rem · 1.25rem line · 500 weight · 0.01em tracking

€1.284,50

type.data0.8125rem · 1.25rem line · 500 weight · 0.01em tracking

24 orders

type.data-sm0.75rem · 1.125rem line · 500 weight · 0.02em tracking

09:42

Implementation reference

Each text-style property points to a typography foundation and resolves to the value shown.

PreviewSemantic roleUses tokenResolved value

Ag--sous-type-action-sm-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-action-sm-linefont.line.181.125rem

Ag--sous-type-action-sm-sizefont.size.130.8125rem

Ag--sous-type-action-sm-trackingfont.tracking.roomy0.015rem

Ag--sous-type-action-sm-weightfont.weight.medium500

Ag--sous-type-action-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-action-linefont.line.201.25rem

Ag--sous-type-action-sizefont.size.140.875rem

Ag--sous-type-action-trackingfont.tracking.roomy0.015rem

Ag--sous-type-action-weightfont.weight.medium500

Ag--sous-type-body-lg-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-body-lg-linefont.line.241.5rem

Ag--sous-type-body-lg-sizefont.size.161rem

Ag--sous-type-body-lg-trackingfont.tracking.wide0.01em

Ag--sous-type-body-lg-weightfont.weight.regular400

Ag--sous-type-body-sm-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-body-sm-linefont.line.201.25rem

Ag--sous-type-body-sm-sizefont.size.130.8125rem

Ag--sous-type-body-sm-trackingfont.tracking.wide0.01em

Ag--sous-type-body-sm-weightfont.weight.regular400

Ag--sous-type-body-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-body-linefont.line.221.375rem

Ag--sous-type-body-sizefont.size.140.875rem

Ag--sous-type-body-trackingfont.tracking.wide0.01em

Ag--sous-type-body-weightfont.weight.regular400

Ag--sous-type-component-title-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-component-title-linefont.line.201.25rem

Ag--sous-type-component-title-sizefont.size.140.875rem

Ag--sous-type-component-title-trackingfont.tracking.wide0.01em

Ag--sous-type-component-title-weightfont.weight.medium500

Ag--sous-type-data-display-sm-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-data-display-sm-linefont.line.322rem

Ag--sous-type-data-display-sm-sizefont.size.241.5rem

Ag--sous-type-data-display-sm-trackingfont.tracking.snug-0.01em

Ag--sous-type-data-display-sm-weightfont.weight.medium500

Ag--sous-type-data-display-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-data-display-linefont.line.362.25rem

Ag--sous-type-data-display-sizefont.size.281.75rem

Ag--sous-type-data-display-trackingfont.tracking.tight-0.02em

Ag--sous-type-data-display-weightfont.weight.medium500

Ag--sous-type-data-lg-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-data-lg-linefont.line.201.25rem

Ag--sous-type-data-lg-sizefont.size.140.875rem

Ag--sous-type-data-lg-trackingfont.tracking.wide0.01em

Ag--sous-type-data-lg-weightfont.weight.medium500

Ag--sous-type-data-sm-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-data-sm-linefont.line.181.125rem

Ag--sous-type-data-sm-sizefont.size.120.75rem

Ag--sous-type-data-sm-trackingfont.tracking.wider0.02em

Ag--sous-type-data-sm-weightfont.weight.medium500

Ag--sous-type-data-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-data-linefont.line.201.25rem

Ag--sous-type-data-sizefont.size.130.8125rem

Ag--sous-type-data-trackingfont.tracking.wide0.01em

Ag--sous-type-data-weightfont.weight.medium500

Ag--sous-type-display-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-display-linefont.line.483rem

Ag--sous-type-display-sizefont.size.402.5rem

Ag--sous-type-display-trackingfont.tracking.tighter-0.03em

Ag--sous-type-display-weightfont.weight.semibold600

Ag--sous-type-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-family-displayfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-family-textfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-label-sm-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-label-sm-linefont.line.181.125rem

Ag--sous-type-label-sm-sizefont.size.130.8125rem

Ag--sous-type-label-sm-trackingfont.tracking.wide0.01em

Ag--sous-type-label-sm-weightfont.weight.medium500

Ag--sous-type-label-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-label-linefont.line.201.25rem

Ag--sous-type-label-sizefont.size.140.875rem

Ag--sous-type-label-trackingfont.tracking.wide0.01em

Ag--sous-type-label-weightfont.weight.medium500

Ag--sous-type-micro-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-micro-linefont.line.161rem

Ag--sous-type-micro-sizefont.size.110.6875rem

Ag--sous-type-micro-trackingfont.tracking.wider0.02em

Ag--sous-type-micro-weightfont.weight.medium500

Ag--sous-type-page-title-lg-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-page-title-lg-linefont.line.402.5rem

Ag--sous-type-page-title-lg-sizefont.size.322rem

Ag--sous-type-page-title-lg-trackingfont.tracking.tight-0.02em

Ag--sous-type-page-title-lg-weightfont.weight.medium500

Ag--sous-type-page-title-sm-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-page-title-sm-linefont.line.322rem

Ag--sous-type-page-title-sm-sizefont.size.241.5rem

Ag--sous-type-page-title-sm-trackingfont.tracking.snug-0.01em

Ag--sous-type-page-title-sm-weightfont.weight.medium500

Ag--sous-type-page-title-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-page-title-linefont.line.362.25rem

Ag--sous-type-page-title-sizefont.size.281.75rem

Ag--sous-type-page-title-trackingfont.tracking.tight-0.02em

Ag--sous-type-page-title-weightfont.weight.medium500

Ag--sous-type-section-title-lg-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-section-title-lg-linefont.line.322rem

Ag--sous-type-section-title-lg-sizefont.size.241.5rem

Ag--sous-type-section-title-lg-trackingfont.tracking.snug-0.01em

Ag--sous-type-section-title-lg-weightfont.weight.medium500

Ag--sous-type-section-title-familyfont.family.displayInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-section-title-linefont.line.281.75rem

Ag--sous-type-section-title-sizefont.size.201.25rem

Ag--sous-type-section-title-trackingfont.tracking.snug-0.01em

Ag--sous-type-section-title-weightfont.weight.medium500

Ag--sous-type-subsection-title-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-subsection-title-linefont.line.241.5rem

Ag--sous-type-subsection-title-sizefont.size.161rem

Ag--sous-type-subsection-title-trackingfont.tracking.wide0.01em

Ag--sous-type-subsection-title-weightfont.weight.medium500

Ag--sous-type-support-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-support-linefont.line.181.125rem

Ag--sous-type-support-sizefont.size.120.75rem

Ag--sous-type-support-trackingfont.tracking.wider0.02em

Ag--sous-type-support-weightfont.weight.regular400

Ag--sous-type-table-header-familyfont.family.textInter Display, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Ag--sous-type-table-header-linefont.line.201.25rem

Ag--sous-type-table-header-sizefont.size.140.875rem

Ag--sous-type-table-header-trackingfont.tracking.wide0.01em

Ag--sous-type-table-header-weightfont.weight.medium500