Typography

Typography system and text styles

Sugarcoat UI provides a comprehensive typography system with heading and text components.

Headings#

Use the H1 through H6 components for semantic headings:

import { H1, H2, H3 } from "@sugarcoat/ui-nxt";
 
<H1>Main Title</H1>
<H2>Section Title</H2>
<H3>Subsection Title</H3>

Text Styles#

The textStyle token provides predefined text sizes:

TokenSize
xsExtra small
smSmall
mdMedium (default)
lgLarge
xlExtra large
2xl2x large
3xl3x large
4xl4x large

Usage#

import { css } from "@sugarcoat/core/css";
 
const title = css({
  textStyle: "3xl",
  fontWeight: "bold",
});
 
const body = css({
  textStyle: "md",
  lineHeight: "relaxed",
});
Customize Theme
Build your own sugarcoat/ui theme
PresetLime / Violet / Slate
Brand ColorLime
Accent ColorViolet
Gray ScaleSlate
Border RadiusLg