Micro Core UI

Appearance

Typography Presets ​

Pre-built typography classes that combine font size, line height, letter spacing, font family, and font weight for consistent text styling.

Headings ​

Heading styles for page titles, section headers, and content hierarchy.

Class NameDescriptionFont SizeLine HeightLetter SpacingFont WeightSample
.mc-heading-xlExtra large headingmc-font-size-900mc-line-height-1000mc-letter-spacing-densestmc-font-mediumHeading XL
.mc-heading-lgLarge headingmc-font-size-800mc-line-height-900mc-letter-spacing-densermc-font-mediumHeading Large
.mc-heading-mdMedium headingmc-font-size-700mc-line-height-800mc-letter-spacing-densermc-font-mediumHeading Medium
.mc-heading-smSmall headingmc-font-size-600mc-line-height-700mc-letter-spacing-densemc-font-mediumHeading Small
.mc-heading-xsExtra small headingmc-font-size-500mc-line-height-600mc-letter-spacing-densemc-font-mediumHeading XS

Subheadings ​

Subheading styles for section divisions and content organization.

Class NameDescriptionFont SizeLine HeightLetter SpacingFont WeightSample
.mc-subheading-smSmall subheadingmc-font-size-400mc-line-height-500mc-letter-spacing-densemc-font-mediumSubheading Small
.mc-subheading-xsExtra small subheadingmc-font-size-300mc-line-height-400mc-letter-spacing-normalmc-font-mediumSubheading XS

Body Text ​

Body text styles for paragraphs, descriptions, and general content.

Base Body Classes ​

Class NameDescriptionFont SizeLine HeightSample
.mc-body-lgLarge body text basemc-font-size-400mc-line-height-600Large body text
.mc-body-mdMedium body text basemc-font-size-300mc-line-height-500Medium body text
.mc-body-smSmall body text basemc-font-size-200mc-line-height-400Small body text
.mc-body-xsExtra small body text basemc-font-size-100mc-line-height-300Extra small body text

Body Text with Font Weight Variations ​

Large Body Text ​

Class NameFont WeightDecorationSample
.mc-body-lg-regularNormal-Regular large text
.mc-body-lg-regular-underlineNormalUnderlinedUnderlined regular large text
.mc-body-lg-regular-mediumMedium-Medium weight large text
.mc-body-lg-medium-underlineMediumUnderlinedUnderlined medium large text

Medium Body Text ​

Class NameFont WeightDecorationSample
.mc-body-md-regularNormal-Regular medium text
.mc-body-md-regular-underlineNormalUnderlinedUnderlined regular medium text
.mc-body-md-regular-mediumMedium-Medium weight medium text
.mc-body-md-medium-underlineMediumUnderlinedUnderlined medium medium text

Small Body Text ​

Class NameFont WeightDecorationSample
.mc-body-sm-regularNormal-Regular small text
.mc-body-sm-regular-underlineNormalUnderlinedUnderlined regular small text
.mc-body-sm-regular-mediumMedium-Medium weight small text
.mc-body-sm-medium-underlineMediumUnderlinedUnderlined medium small text

Extra Small Body Text ​

Class NameFont WeightDecorationSample
.mc-body-xs-regularNormal-Regular extra small text
.mc-body-xs-regular-underlineNormalUnderlinedUnderlined regular extra small text
.mc-body-xs-regular-mediumMedium-Medium weight extra small text
.mc-body-xs-medium-underlineMediumUnderlinedUnderlined medium extra small text

Labels ​

Label styles for form inputs, UI components, and small text elements.

Base Label Classes ​

Class NameDescriptionFont SizeLine HeightLetter SpacingSample
.mc-label-smSmall label basemc-font-size-200mc-line-height-200mc-letter-spacing-wideSMALL LABEL
.mc-label-xsExtra small label basemc-font-size-100mc-line-height-100mc-letter-spacing-wideXS LABEL

Label Font Weight Variations ​

Small Labels ​

Class NameFont WeightSample
.mc-label-sm-regularNormalREGULAR SMALL LABEL
.mc-label-sm-mediumMediumMEDIUM SMALL LABEL

Extra Small Labels ​

Class NameFont WeightSample
.mc-label-xs-regularNormalREGULAR XS LABEL
.mc-label-xs-mediumMediumMEDIUM XS LABEL

Supporting Utilities ​

Font Size Classes ​

Class NameUnderlying Class
.mc-font-size-100mc-text-100
.mc-font-size-200mc-text-200
.mc-font-size-300mc-text-300
.mc-font-size-400mc-text-400
.mc-font-size-500mc-text-500
.mc-font-size-600mc-text-600
.mc-font-size-700mc-text-700
.mc-font-size-800mc-text-800
.mc-font-size-900mc-text-900
.mc-font-size-1000mc-text-1000

Line Height Classes ​

Class NameUnderlying Class
.mc-line-height-nonemc-leading-none
.mc-line-height-100mc-leading-100
.mc-line-height-200mc-leading-200
.mc-line-height-300mc-leading-300
.mc-line-height-400mc-leading-400
.mc-line-height-500mc-leading-500
.mc-line-height-600mc-leading-600
.mc-line-height-700mc-leading-700
.mc-line-height-800mc-leading-800
.mc-line-height-900mc-leading-900
.mc-line-height-1000mc-leading-1000

Letter Spacing Classes ​

Class NameUnderlying Class
.mc-letter-spacing-nonemc-tracking-spacing-none
.mc-letter-spacing-densestmc-tracking-spacing-densest
.mc-letter-spacing-densermc-tracking-spacing-denser
.mc-letter-spacing-densemc-tracking-spacing-dense
.mc-letter-spacing-normalmc-tracking-spacing-normal
.mc-letter-spacing-widemc-tracking-spacing-wide
.mc-letter-spacing-widermc-tracking-spacing-wider
.mc-letter-spacing-widestmc-tracking-spacing-widest

Examples ​

html
<!-- Page hierarchy -->
<h1 class="mc-heading-xl mc-text-color-strong">Main Page Title</h1>
<h2 class="mc-heading-lg mc-text-color-base">Section Title</h2>
<h3 class="mc-subheading-sm mc-text-color-supporting">Subsection</h3>

<!-- Content blocks -->
<p class="mc-body-lg-regular mc-text-color-base">
  This is the main content paragraph with larger text for better readability.
</p>

<p class="mc-body-md-regular mc-text-color-base">This is standard body text for most content.</p>

<p class="mc-body-sm-regular mc-text-color-weak">This is smaller text for secondary information or captions.</p>

<!-- Form labels -->
<label class="mc-label-sm-medium mc-text-color-strong">FORM FIELD LABEL</label>
<input type="text" class="mc-body-md-regular" />

<!-- Interactive elements -->
<a href="#" class="mc-body-md-regular-medium mc-text-color-brand-base hover:mc-text-color-brand-hover">
  Link with medium weight
</a>

<a href="#" class="mc-body-md-regular-underline mc-text-color-brand-base"> Underlined link </a>

<!-- Status messages -->
<div class="mc-body-sm-regular mc-text-color-success-base">Success message in small text</div>

<div class="mc-body-xs-regular mc-text-color-danger-base">Error caption or small warning text</div>

Best Practices ​

  • Use semantic hierarchy: Start with mc-heading-xl for main titles and work down
  • Maintain consistency: Use the same text styles for similar content types
  • Combine with color utilities: Pair typography classes with semantic text colors
  • Consider accessibility: Ensure sufficient contrast between text and background colors
  • Mobile responsiveness: Consider smaller sizes on mobile devices

Copyright © 2026 Micro Core UI Team